From 8756fd16dac571b643fab8e655c7d6b89dbf513a Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 15 Apr 2022 13:32:38 +0200
Subject: [PATCH] feat(ui) - widget drilldown on table nad pie chart

---
 .../CustomMetricTable/CustomMetricTable.tsx   |  1 +
 .../components/WidgetChart/WidgetChart.tsx    | 42 +++++++++++--------
 .../WidgetSessions/WidgetSessions.tsx         |  2 +-
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
index a43a35fc8..f83f48466 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
@@ -33,6 +33,7 @@ function CustomMetriTable(props: Props) {
     const rows = List(data.values);
 
     const onClickHandler = (event, data) => {
+        console.log('onClickHandler', data);
         const filters = Array<any>();
         let filter = { ...filtersMap[metric.metricOf] }
         filter.value = [data.name]
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index c3f8d10c2..0f073e8e3 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -28,26 +28,28 @@ function WidgetChart(props: Props) {
     const prevMetricRef = useRef<any>();
     const [data, setData] = useState<any>(metric.data);
 
+    const isTableWidget = metric.metricType === 'table' && metric.viewType === 'table';
+    const isPieChart = metric.metricType === 'table' && metric.viewType === 'pieChart';
+
     const onChartClick = (event: any) => {
         if (event) {
-            const payload = event.activePayload[0].payload;
-            const timestamp = payload.timestamp;
-            const periodTimestamps = metric.metricType === 'timeseries' ?
-              getStartAndEndTimestampsByDensity(timestamp, period.start, period.end, params.density) :
-              period.toTimestamps();
+            if (isTableWidget || isPieChart) {
+                const periodTimestamps = period.toTimestamps()
+                drillDownFilter.merge({
+                    filters: event,
+                    startTimestamp: periodTimestamps.startTimestamp,
+                    endTimestamp: periodTimestamps.endTimestamp,
+                });
+            } else {
+                const payload = event.activePayload[0].payload;
+                const timestamp = payload.timestamp;
+                const periodTimestamps = getStartAndEndTimestampsByDensity(timestamp, period.start, period.end, params.density);
 
-            drillDownFilter.merge({
-                startTimestamp: periodTimestamps.startTimestamp,
-                endTimestamp: periodTimestamps.endTimestamp,
-            });
-            
-            // const activeWidget = {
-            //   widget: metric,
-            //   period: period,
-            //   ...periodTimestamps,
-            //   timestamp: payload.timestamp,
-            //   index,
-            // }
+                drillDownFilter.merge({
+                    startTimestamp: periodTimestamps.startTimestamp,
+                    endTimestamp: periodTimestamps.endTimestamp,
+                });
+            }
         }
     }
 
@@ -100,7 +102,10 @@ function WidgetChart(props: Props) {
 
         if (metricType === 'table') {
             if (viewType === 'table') {
-                return <CustomMetricTable  metric={metric} data={data[0]} />;
+                return <CustomMetricTable
+                    metric={metric} data={data[0]}
+                    onClick={onChartClick}
+                />;
             } else if (viewType === 'pieChart') {
                 return (
                     <CustomMetricPieChart
@@ -108,6 +113,7 @@ function WidgetChart(props: Props) {
                         data={data[0]}
                         colors={colors}
                         params={params}
+                        onClick={onChartClick}
                     />
                 )
             }
diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index e6c9cb808..54982ba9c 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -42,7 +42,7 @@ function WidgetSessions(props: Props) {
             console.log('res', res)
             setData(res);
         });
-    }, [filter.startTimestamp, filter.endTimestamp, widget.filter]);
+    }, [filter.startTimestamp, filter.endTimestamp, filter.filters]);
 
     return useObserver(() => (
         <div className={cn(className)}>