From 68e2b8333403debae7a7b73617ba05dbaac4f18f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 24 Jan 2023 09:54:34 +0100
Subject: [PATCH] fix(ui) - insights data display

---
 .../InsightsCard/InsightsCard.tsx                    | 12 +++++-------
 .../Dashboard/components/WidgetChart/WidgetChart.tsx |  2 +-
 frontend/app/mstore/dashboardStore.ts                |  3 +--
 frontend/app/mstore/types/widget.ts                  |  1 +
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
index 7eea9990c..aa3a09dad 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
@@ -8,11 +8,9 @@ import { InishtIssue } from 'App/mstore/types/widget';
 import { FilterKey, IssueCategory, IssueType } from 'App/types/filter/filterType';
 import { filtersMap } from 'Types/filter/newFilter';
 
-function InsightsCard() {
-  const { metricStore, dashboardStore } = useStore();
-  const metric = metricStore.instance;
+function InsightsCard({ data }: any) {
+  const { dashboardStore } = useStore();
   const drillDownFilter = dashboardStore.drillDownFilter;
-  const period = dashboardStore.period;
 
   const clickHanddler = (e: React.MouseEvent<HTMLDivElement>, item: InishtIssue) => {
     let filter: any = {};
@@ -63,13 +61,13 @@ function InsightsCard() {
 
   return (
     <NoContent
-      show={metric.data.issues && metric.data.issues.length === 0}
+      show={data.issues && data.issues.length === 0}
       title={NO_METRIC_DATA}
       style={{ padding: '100px 0' }}
     >
       <div className="overflow-y-auto" style={{ maxHeight: '240px' }}>
-        {metric.data.issues &&
-          metric.data.issues.map((item: any) => (
+        {data.issues &&
+          data.issues.map((item: any) => (
             <InsightItem item={item} onClick={(e) => clickHanddler(e, item)} />
           ))}
       </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index 5d615815b..518759c37 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -187,7 +187,7 @@ function WidgetChart(props: Props) {
         }
 
         if (metricType === INSIGHTS) {
-            return <InsightsCard />
+            return <InsightsCard data={data} />
         }
 
         return <div>Unknown metric type</div>;
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index d03a2b06b..530948466 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -415,8 +415,7 @@ export default class DashboardStore {
       return metricService
         .getMetricChartData(metric, params, isWidget)
         .then((data: any) => {
-          metric.setData(data, period);
-          resolve(metric.data);
+          resolve(metric.setData(data, period));
         })
         .catch((err: any) => {
           reject(err);
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index a801ce78c..ab7444438 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -243,6 +243,7 @@ export default class Widget {
     }
 
     this.data = _data;
+    return _data;
   }
 
   fetchSessions(metricId: any, filter: any): Promise<any> {