From 04e8b199f50632dcd5343547d5c8072c10986199 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 4 Jul 2024 15:05:52 +0200
Subject: [PATCH] change(ui): dashboard inputs - charts

---
 .../Dashboard/Widgets/CardSessionsByList.tsx  |  4 +-
 .../CustomMetricLineChart.tsx                 |  6 +-
 .../CallWithErrors/MethodType.js              | 14 ++--
 .../CallsErrors4xx/CallsErrors4xx.tsx         |  8 +--
 .../CallsErrors5xx/CallsErrors5xx.tsx         |  6 +-
 .../NewDashModal/ExampleCards.tsx             | 26 +++++--
 .../NewDashModal/Examples/BarChart.tsx        | 68 ++++++++-----------
 .../Examples/SessionsBy/ByUrl.tsx             | 64 ++---------------
 .../Examples/SessionsBy/SlowestDomains.tsx    | 11 +--
 .../NewDashModal/Examples/Trend.tsx           |  1 +
 .../DashboardList/NewDashModal/SelectCard.tsx |  1 +
 11 files changed, 85 insertions(+), 124 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx b/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx
index ace2074ae..b6b46c542 100644
--- a/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, Progress, Typography } from 'antd';
+import { Avatar, List, Progress, Typography } from 'antd';
 import cn from 'classnames';
 
 interface Props {
@@ -26,7 +26,7 @@ function CardSessionsByList({ list, selected, onClickHandler = () => null }: Pro
         >
           <List.Item.Meta
             className="m-0"
-            avatar={row.icon ? row.icon : null}
+            avatar={<Avatar src={row.icon} />}
             title={(
               <div className="m-0">
                 <div className="flex justify-between m-0 p-0">
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx
index 68d6044e0..ab22f5a09 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx
@@ -11,6 +11,7 @@ interface Props {
     onClick?: (event, index) => void;
     yaxis?: any;
     label?: string;
+    hideLegend?: boolean;
 }
 
 function CustomMetricLineChart(props: Props) {
@@ -20,7 +21,8 @@ function CustomMetricLineChart(props: Props) {
         colors,
         onClick = () => null,
         yaxis = {...Styles.yaxis},
-        label = 'Number of Sessions'
+        label = 'Number of Sessions',
+        hideLegend = false,
     } = props;
 
     return (
@@ -47,7 +49,7 @@ function CustomMetricLineChart(props: Props) {
                         value: label || "Number of Sessions"
                     }}
                 />
-                <Legend/>
+                {!hideLegend && <Legend/>}
                 <Tooltip {...Styles.tooltip} />
                 {Array.isArray(data.namesMap) && data.namesMap.map((key, index) => (
                     <Line
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js
index ba370b481..2c8cba59e 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js
@@ -1,10 +1,12 @@
-import React from 'react'
-import { Label } from 'UI';
+import React from 'react';
+import { Tag } from 'antd';
 
 const MethodType = ({ data }) => {
   return (
-    <Label className="ml-1">{data.method}</Label>
-  )
-}
+    <Tag bordered={false} className="rounded-lg">
+      {data.method}
+    </Tag>
+  );
+};
 
-export default MethodType
+export default MethodType;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
index cd1bc6716..d39ef59af 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { NoContent } from 'UI';
 import { Styles } from '../../common';
-import { 
+import {
     CartesianGrid, Tooltip,
-    LineChart, Line, Legend, ResponsiveContainer, 
+    LineChart, Line, Legend, ResponsiveContainer,
     XAxis, YAxis
   } from 'recharts';
 import { NO_METRIC_DATA } from 'App/constants/messages'
@@ -13,7 +13,7 @@ interface Props {
     metric?: any
 }
 function CallsErrors4xx(props: Props) {
-    const { data, metric } = props;  
+    const { data, metric } = props;
     return (
         <NoContent
           size="small"
@@ -37,7 +37,7 @@ function CallsErrors4xx(props: Props) {
                 label={{ ...Styles.axisLabelLeft, value: "Number of Errors" }}
                 allowDecimals={false}
               />
-              <Legend />
+              {/*<Legend />*/}
               <Tooltip {...Styles.tooltip} />
               { Array.isArray(metric.data.namesMap) && metric.data.namesMap.map((key, index) => (
                 <Line key={key} name={key} type="monotone" dataKey={key} stroke={Styles.colors[index]} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" dot={false} />
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
index d61ebcf1a..37900565f 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { NoContent, Icon } from 'UI';
 import { Styles } from '../../common';
-import { 
+import {
     CartesianGrid, Tooltip,
-    LineChart, Line, Legend, ResponsiveContainer, 
+    LineChart, Line, Legend, ResponsiveContainer,
     XAxis, YAxis
   } from 'recharts';
 
@@ -41,7 +41,7 @@ function CallsErrors5xx(props: Props) {
                 label={{ ...Styles.axisLabelLeft, value: "Number of Errors" }}
                 allowDecimals={false}
               />
-              <Legend />
+              {/*<Legend />*/}
               <Tooltip {...Styles.tooltip} />
               { Array.isArray(metric.data.namesMap) && metric.data.namesMap.map((key, index) => (
                 <Line key={key} name={key} type="monotone" dataKey={key} stroke={Styles.colors[index]} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" dot={false} />
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index bbecb8940..e365d8bae 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
@@ -254,7 +254,7 @@ export const CARD_LIST: CardType[] = [
     metricOf: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION,
     category: CARD_CATEGORIES[1].key,
     data: {
-      chart: generateBarChartData(),
+      chart: generateStackedBarChartData(['Page Response Time (ms)']),
       label: 'Number of Calls',
       unit: 'ms',
       namesMap: [
@@ -271,7 +271,8 @@ export const CARD_LIST: CardType[] = [
     metricOf: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE,
     category: CARD_CATEGORIES[1].key,
     data: {
-      chart: generateBarChartData(),
+      chart: generateStackedBarChartData(['Images', 'Scripts', 'CSS']),
+      label: 'Visually Completed (ms)',
       namesMap: [
         'Series 1'
       ]
@@ -408,7 +409,9 @@ export const CARD_LIST: CardType[] = [
     metricOf: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
     category: CARD_CATEGORIES[3].key,
     data: {
-      chart: generateBarChartData()
+      chart: generateBarChartData(),
+      hideLegend: true,
+      label: 'Number of Sessions'
     },
     example: BarChartCard
   },
@@ -419,7 +422,7 @@ export const CARD_LIST: CardType[] = [
     metricOf: FilterKey.RESOURCES_BY_PARTY,
     category: CARD_CATEGORIES[3].key,
     data: {
-      chart: generateBarChartData()
+      chart: generateStackedBarChartData(['1st Party', '3rd Party'])
     },
     example: BarChartCard
   },
@@ -439,7 +442,7 @@ export const CARD_LIST: CardType[] = [
     metricOf: FilterKey.ERRORS_PER_TYPE,
     category: CARD_CATEGORIES[3].key,
     data: {
-      chart: generateBarChartData()
+      chart: generateStackedBarChartData(['Integrations', '4xx', '5xx'])
     },
     example: BarChartCard
   },
@@ -487,6 +490,7 @@ export const CARD_LIST: CardType[] = [
     data: {
       chart: generateTimeSeriesData(),
       label: 'Number of Errors',
+      hideLegend: true,
       namesMap: [
         'Series 1'
       ]
@@ -503,6 +507,7 @@ export const CARD_LIST: CardType[] = [
     data: {
       chart: generateTimeSeriesData(),
       label: 'Number of Errors',
+      hideLegend: true,
       namesMap: [
         'Series 1'
       ]
@@ -754,3 +759,14 @@ function generateBarChartData(): any[] {
     value: generateRandomValue(1000, 5000)
   }));
 }
+
+function generateStackedBarChartData(keys: any): any[] {
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
+  return months.map(month => ({
+    time: month,
+    ...keys.reduce((acc: any, key: any) => {
+      acc[key] = generateRandomValue(1000, 5000);
+      return acc;
+    }, {})
+  }));
+}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx
index cab940cc4..836cc4211 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx
@@ -1,9 +1,6 @@
-import { GitCommitHorizontal } from 'lucide-react';
 import React from 'react';
-
 import ExCard from './ExCard';
-import { PERFORMANCE } from 'App/constants/card';
-import { Bar, BarChart, CartesianGrid, Legend, Rectangle, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import { Styles } from 'Components/Dashboard/Widgets/common';
 
 interface Props {
@@ -12,59 +9,50 @@ interface Props {
   onCard: (card: string) => void;
   onClick?: any;
   data?: any,
+  hideLegend?: boolean,
 }
 
 function BarChartCard(props: Props) {
-  return (
-    <ExCard
-      {...props}
-    >
-      {/*<ResponsiveContainer width="100%" height="100%">*/}
-      {/*    <BarChart*/}
-      {/*        width={400}*/}
-      {/*        height={280}*/}
-      {/*        data={_data}*/}
-      {/*        margin={Styles.chartMargins}*/}
-      {/*    >*/}
-      {/*        /!*<CartesianGrid strokeDasharray="3 3"/>*!/*/}
-      {/*        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#EEEEEE"/>*/}
-      {/*        <XAxis {...Styles.xaxis} dataKey="name"/>*/}
-      {/*        <YAxis {...Styles.yaxis} />*/}
-      {/*        <Tooltip/>*/}
-      {/*        <Legend/>*/}
-      {/*        <Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue"/>}/>*/}
-      {/*        /!*<Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple"/>}/>*!/*/}
-      {/*    </BarChart>*/}
-      {/*</ResponsiveContainer>*/}
+  const keys = props.data ? Object.keys(props.data.chart[0]).filter(key => key !== 'time') : [];
 
+  return (
+    <ExCard {...props}>
       <ResponsiveContainer height={240} width="100%">
-        <BarChart
-          data={props.data?.chart}
-          margin={Styles.chartMargins}
-        >
+        <BarChart data={props.data?.chart} margin={Styles.chartMargins}>
           <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#EEEEEE" />
-          <XAxis
-            {...Styles.xaxis}
-            dataKey="time"
-            // interval={21}
-          />
+          <XAxis {...Styles.xaxis} dataKey="time" />
           <YAxis
             {...Styles.yaxis}
             tickFormatter={val => Styles.tickFormatter(val)}
             label={{ ...Styles.axisLabelLeft, value: props.data?.label || 'Number of Errors' }}
             allowDecimals={false}
           />
-          <Legend />
+          {!props.hideLegend && <Legend />}
           <Tooltip {...Styles.tooltip} />
-          <Bar minPointSize={1} name={<span className="float">One</span>}
-               dataKey="value" stackId="a" fill={Styles.colors[0]} />
-          {/*<Bar name={<span className="float">3<sup>rd</sup> Party</span>} dataKey="thirdParty" stackId="a"*/}
-          {/*     fill={Styles.colors[2]}/>*/}
+          {keys.map((key, index) => (
+            <Bar
+              key={key}
+              dataKey={key}
+              stackId="a"
+              fill={Styles.colors[index % Styles.colors.length]}
+              name={key}
+            />
+          ))}
         </BarChart>
       </ResponsiveContainer>
     </ExCard>
-
   );
 }
 
 export default BarChartCard;
+
+// Sample data function
+// function generateBarChartData(): any[] {
+//   const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
+//   return months.map(month => ({
+//     time: month,
+//     key1: generateRandomValue(1000, 5000),
+//     key2: generateRandomValue(1000, 5000),
+//     key3: generateRandomValue(1000, 5000)
+//   }));
+// }
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx
index 28c0b9560..3a20c0ad1 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import { Circle } from '../Count';
 import ExCard from '../ExCard';
 import ByComponent from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component';
+import { Icon } from 'UI';
 
 function ByUrl(props: any) {
   const [mode, setMode] = React.useState(0);
@@ -14,36 +15,36 @@ function ByUrl(props: any) {
       ptitle: 'Dresses',
       value: '500',
       progress: 75,
-      icon: <LinkOutlined size={12} />,
+      icon: <Icon name="link-45deg" size={24} />
     },
     {
       label: '/search?q=summer+dresses',
       ptitle: 'Search: summer dresses',
       value: '306',
       progress: 60,
-      icon: <LinkOutlined size={12} />,
+      icon: <Icon name="link-45deg" size={24} />
     },
     {
       label: '/account/orders',
       ptitle: 'Account: Orders',
       value: '198',
       progress: 30,
-      icon: <LinkOutlined size={12} />,
+      icon: <Icon name="link-45deg" size={24} />
     },
     {
       label: '/checkout/confirmation',
       ptitle: 'Checkout: Confirmation',
       value: '47',
       progress: 15,
-      icon: <LinkOutlined size={12} />,
+      icon: <Icon name="link-45deg" size={24} />
     },
     {
       label: '/checkout/payment',
       ptitle: 'Checkout: Payment',
       value: '5',
       progress: 5,
-      icon: <LinkOutlined size={12} />,
-    },
+      icon: <Icon name="link-45deg" size={24} />
+    }
   ];
 
   const lineWidth = 240;
@@ -53,57 +54,6 @@ function ByUrl(props: any) {
       rows={rows}
       lineWidth={lineWidth}
     />
-    // <ExCard
-    //     {...props}
-    //   title={
-    //     <div className={'flex gap-2 items-center'}>
-    //       <div>{props.title}</div>
-    //       <div className={'font-normal'}><Segmented
-    //         options={[
-    //           { label: 'URL', value: '0' },
-    //           { label: 'Page Title', value: '1' },
-    //         ]}
-    //         onChange={(v) => setMode(Number(v))}
-    //         size='small'
-    //       />
-    //       </div>
-    //     </div>
-    //   }
-    // >
-    //   <div className={'flex gap-1 flex-col'}>
-    //     {rows.map((r) => (
-    //       <div
-    //         className={
-    //           'flex items-center gap-2 border-b border-dotted last:border-0 py-2 first:pt-0 last:pb-0'
-    //         }
-    //       >
-    //         <Circle badgeType={1}>{r.icon}</Circle>
-    //         <div className={'ml-2 flex flex-col gap-0'}>
-    //           <div>{mode === 0 ? r.label : r.ptitle}</div>
-    //           <div style={{ display: 'flex' }}>
-    //             <div
-    //               style={{
-    //                 height: 2,
-    //                 width: lineWidth * (0.01 * r.progress),
-    //                 background: '#394EFF',
-    //               }}
-    //               className={'rounded-l'}
-    //             />
-    //             <div
-    //               style={{
-    //                 height: 2,
-    //                 width: lineWidth - lineWidth * (0.01 * r.progress),
-    //                 background: '#E2E4F6',
-    //               }}
-    //               className={'rounded-r'}
-    //             />
-    //           </div>
-    //         </div>
-    //         <div className={'min-w-8 ml-auto'}>{r.value}</div>
-    //       </div>
-    //     ))}
-    //   </div>
-    // </ExCard>
   );
 }
 
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains.tsx
index 428c04bb3..92fd4a3bf 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ByComponent from './Component';
 import { LinkOutlined } from '@ant-design/icons';
+import { Icon } from 'UI';
 
 function SlowestDomains(props: any) {
   const rows = [
@@ -8,31 +9,31 @@ function SlowestDomains(props: any) {
       label: 'res.cloudinary.com',
       value: '500',
       progress: 75,
-      icon: <LinkOutlined size={12} />
+      icon: <Icon name="link-45deg" size={24} />
     },
     {
       label: 'mintbase.vercel.app',
       value: '306',
       progress: 60,
-      icon: <LinkOutlined size={12} />
+      icon: <Icon name="link-45deg" size={24} />
     },
     {
       label: 'downloads.intercomcdn.com',
       value: '198',
       progress: 30,
-      icon: <LinkOutlined size={12} />
+      icon: <Icon name="link-45deg" size={24} />
     },
     {
       label: 'static.intercomassets.com',
       value: '47',
       progress: 15,
-      icon: <LinkOutlined size={12} />
+      icon: <Icon name="link-45deg" size={24} />
     },
     {
       label: 'mozbar.moz.com',
       value: '5',
       progress: 5,
-      icon: <LinkOutlined size={12} />
+      icon: <Icon name="link-45deg" size={24} />
     }
   ];
 
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx
index 611df39ff..4502bfa00 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx
@@ -35,6 +35,7 @@ function ExampleTrend(props: Props) {
                 }
                 label={props.data?.label}
                 onClick={props.onClick}
+                hideLegend={props.data?.hideLegend}
             />
         </ExCard>
     );
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
index bdc5dd0e6..0d77a11e0 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
@@ -62,6 +62,7 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
             title={card.title}
             data={card.data}
             height={card.height}
+            hideLegend={card.data?.hideLegend}
           />
         </div>
       ));