From 6fcef5dff513a466baf2be4ece72291f94289552 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 1 Jul 2024 14:56:38 +0200
Subject: [PATCH] change(ui): sessions per browser example

---
 .../SessionsPerBrowser/SessionsPerBrowser.tsx | 66 +++++++++----------
 .../Dashboard/Widgets/common/Styles.js        |  2 +-
 .../NewDashModal/ExampleCards.tsx             |  4 +-
 .../Examples/SessionsPerBrowserExample.tsx    | 38 +++++++++++
 .../WidgetPredefinedChart.tsx                 |  2 +-
 5 files changed, 76 insertions(+), 36 deletions(-)
 create mode 100644 frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample.tsx

diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
index ca6c836e3..1644d77d1 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
@@ -2,43 +2,43 @@ import React from 'react';
 import { NoContent } from 'UI';
 import { Styles } from '../../common';
 import Bar from './Bar';
-import { NO_METRIC_DATA } from 'App/constants/messages'
+import { NO_METRIC_DATA } from 'App/constants/messages';
 
 interface Props {
-    data: any
-    metric?: any
+  data: any;
 }
-function SessionsPerBrowser(props: Props) {
-    const { data, metric } = props;
-    const firstAvg = metric.data.chart[0] && metric.data.chart[0].count;
 
-    const getVersions = item => {
-      return Object.keys(item)
-        .filter(i => i !== 'browser' && i !== 'count' && i !== 'time' && i !== 'timestamp')
-        .map(i => ({ key: 'v' +i, value: item[i]}))
-    }
-    return (
-        <NoContent
-          size="small"
-          title={NO_METRIC_DATA}
-          show={ metric.data.chart.length === 0 }
-          style={{ minHeight: 220 }}
-        >
-          <div className="w-full" style={{ height: '240px' }}>
-            {metric.data.chart.map((item, i) => 
-              <Bar
-                key={i}
-                className="mb-4"
-                avg={Math.round(item.count)}
-                versions={getVersions(item)}
-                width={Math.round((item.count * 100) / firstAvg) - 10}
-                domain={item.browser}
-                colors={Styles.colors}
-              />
-            )}
-          </div>
-        </NoContent>
-    );
+function SessionsPerBrowser(props: Props) {
+  const { data } = props;
+  const firstAvg = data.chart[0] && data.chart[0].count;
+
+  const getVersions = item => {
+    return Object.keys(item)
+      .filter(i => i !== 'browser' && i !== 'count' && i !== 'time' && i !== 'timestamp')
+      .map(i => ({ key: 'v' + i, value: item[i] }));
+  };
+  return (
+    <NoContent
+      size="small"
+      title={NO_METRIC_DATA}
+      show={data.chart.length === 0}
+      style={{ minHeight: 220 }}
+    >
+      <div className="w-full" style={{ height: '240px' }}>
+        {data.chart.map((item, i) =>
+          <Bar
+            key={i}
+            className="mb-4"
+            avg={Math.round(item.count)}
+            versions={getVersions(item)}
+            width={Math.round((item.count * 100) / firstAvg) - 10}
+            domain={item.browser}
+            colors={Styles.colors}
+          />
+        )}
+      </div>
+    </NoContent>
+  );
 }
 
 export default SessionsPerBrowser;
diff --git a/frontend/app/components/Dashboard/Widgets/common/Styles.js b/frontend/app/components/Dashboard/Widgets/common/Styles.js
index 31f9711b6..0f8854911 100644
--- a/frontend/app/components/Dashboard/Widgets/common/Styles.js
+++ b/frontend/app/components/Dashboard/Widgets/common/Styles.js
@@ -6,7 +6,7 @@ const colors = ['#6774E2', '#929ACD', '#3EAAAF', '#565D97', '#8F9F9F', '#376F72'
 const colorsx = ['#256669', '#38999e', '#3eaaaf', '#51b3b7', '#78c4c7', '#9fd5d7', '#c5e6e7'].reverse();
 const compareColors = ['#394EFF', '#4D5FFF', '#808DFF', '#B3BBFF', '#E5E8FF'];
 const compareColorsx = ["#222F99", "#2E3ECC", "#394EFF", "#6171FF", "#8895FF", "#B0B8FF", "#D7DCFF"].reverse();
-const customMetricColors = ['#3EAAAF', '#394EFF', '#565D97'];
+const customMetricColors = ['#394EFF', '#3EAAAF', '#565D97'];
 const colorsPie = colors.concat(["#DDDDDD"]);
 
 const countView = count => {
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index d75890e6a..aa66bfa40 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
@@ -19,6 +19,8 @@ import BarChartCard from "Components/Dashboard/components/DashboardList/NewDashM
 import AreaChartCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard";
 import CallsWithErrorsExample
     from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample";
+import SessionsPerBrowserExample
+    from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample';
 
 export const CARD_CATEGORY = {
     PRODUCT_ANALYTICS: 'product-analytics',
@@ -260,7 +262,7 @@ export const CARD_LIST: CardType[] = [
         metricOf: FilterKey.SESSIONS_PER_BROWSER,
         category: CARD_CATEGORIES[1].key,
         data: generateRandomBarsData(),
-        example: Bars,
+        example: SessionsPerBrowserExample,
     },
 
     {
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample.tsx
new file mode 100644
index 000000000..f5710b759
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import ExCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard';
+import InsightsCard from 'Components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard';
+import { InsightIssue } from 'App/mstore/types/widget';
+import SessionsPerBrowser from 'Components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser';
+
+interface Props {
+  title: string;
+  type: string;
+  onCard: (card: string) => void;
+}
+
+function SessionsPerBrowserExample(props: Props) {
+  const data = {
+    chart: [
+      {
+        'browser': 'Chrome',
+        'count': 1524,
+        '126.0.0': 1157,
+        '125.0.0': 224
+      },
+      {
+        'browser': 'Edge',
+        'count': 159,
+        '126.0.0': 145
+      }
+    ]
+  };
+  return (
+    <ExCard
+      {...props}
+    >
+      <SessionsPerBrowser data={data} />
+    </ExCard>
+  );
+}
+
+export default SessionsPerBrowserExample;
diff --git a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
index a7ae663d2..a3c5d81f1 100644
--- a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
@@ -76,7 +76,7 @@ function WidgetPredefinedChart(props: Props) {
             case FilterKey.RESOURCES_VS_VISUALLY_COMPLETE:
                 return <ResourceLoadedVsVisuallyComplete data={data} metric={metric} />
             case FilterKey.SESSIONS_PER_BROWSER:
-                return <SessionsPerBrowser data={data} metric={metric} />
+                return <SessionsPerBrowser data={data} />
             case FilterKey.SLOWEST_DOMAINS:
                 return <SlowestDomains data={data} metric={metric} />
             case FilterKey.TIME_TO_RENDER: