From 29287c7e4dec3023eecdfad59a733ae146446ca6 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 27 Jun 2024 17:49:02 +0200 Subject: [PATCH] change(ui): example cards with data --- .../CustomMetriLineChart/index.ts | 1 - .../CustomMetricLineChart.tsx} | 48 ++-- .../CustomMetricLineChart/index.ts | 1 + .../CallWithErrors/CallWithErrors.tsx | 10 +- .../NewDashModal/ExampleCards.tsx | 252 ++++++++++++++---- .../NewDashModal/Examples/AreaChartCard.tsx | 82 ++++++ .../NewDashModal/Examples/BarChart.tsx | 92 +++---- .../Examples/CallsWithErrorsExample.tsx | 23 ++ .../NewDashModal/Examples/ExCard.tsx | 23 +- .../Examples/SessionsBy/ByUser.tsx | 83 +++--- .../NewDashModal/Examples/Trend.tsx | 121 +++------ .../DashboardList/NewDashModal/SelectCard.tsx | 1 + .../components/WidgetChart/WidgetChart.tsx | 6 +- .../WidgetPredefinedChart.tsx | 2 +- frontend/app/mstore/types/IconProvider.tsx | 5 +- frontend/app/mstore/types/filter.ts | 2 +- frontend/app/types/session/session.ts | 2 +- 17 files changed, 479 insertions(+), 275 deletions(-) delete mode 100644 frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetriLineChart/index.ts rename frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/{CustomMetriLineChart/CustomMetriLineChart.tsx => CustomMetricLineChart/CustomMetricLineChart.tsx} (51%) create mode 100644 frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/index.ts create mode 100644 frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx create mode 100644 frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetriLineChart/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetriLineChart/index.ts deleted file mode 100644 index f05a16274..000000000 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetriLineChart/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CustomMetriLineChart'; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetriLineChart/CustomMetriLineChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx similarity index 51% rename from frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetriLineChart/CustomMetriLineChart.tsx rename to frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx index 0118617ba..68d6044e0 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetriLineChart/CustomMetriLineChart.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { Styles } from '../../common'; -import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'; -import { LineChart, Line, Legend } from 'recharts'; +import {Styles} from '../../common'; +import {ResponsiveContainer, XAxis, YAxis, CartesianGrid, Tooltip} from 'recharts'; +import {LineChart, Line, Legend} from 'recharts'; interface Props { data: any; @@ -9,46 +9,56 @@ interface Props { // seriesMap: any; colors: any; onClick?: (event, index) => void; + yaxis?: any; + label?: string; } -function CustomMetriLineChart(props: Props) { - const { data = { chart: [], namesMap: [] }, params, colors, onClick = () => null } = props; + +function CustomMetricLineChart(props: Props) { + const { + data = {chart: [], namesMap: []}, + params, + colors, + onClick = () => null, + yaxis = {...Styles.yaxis}, + label = 'Number of Sessions' + } = props; return ( - + - + - Styles.tickFormatter(val)} - label={{ + label={{ ...Styles.axisLabelLeft, - value: "Number of Sessions" + value: label || "Number of Sessions" }} /> - + - { Array.isArray(data.namesMap) && data.namesMap.map((key, index) => ( + {Array.isArray(data.namesMap) && data.namesMap.map((key, index) => ( @@ -58,4 +68,4 @@ function CustomMetriLineChart(props: Props) { ) } -export default CustomMetriLineChart +export default CustomMetricLineChart diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/index.ts new file mode 100644 index 000000000..b8570c250 --- /dev/null +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/index.ts @@ -0,0 +1 @@ +export { default } from './CustomMetricLineChart'; diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx index 3ef08f392..56baccb08 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx @@ -46,30 +46,28 @@ const cols = [ interface Props { data: any - metric?: any isTemplate?: boolean } function CallWithErrors(props: Props) { - const { data, metric } = props; + const { data } = props; const [search, setSearch] = React.useState('') const test = (value = '', serach: any) => getRE(serach, 'i').test(value); - const _data = search ? metric.data.chart.filter((i: any) => test(i.urlHostpath, search)) : metric.data.chart; + const _data = search ? data.chart.filter((i: any) => test(i.urlHostpath, search)) : data.chart; const write = ({ target: { name, value } }: any) => { setSearch(value) }; return ( -
- +
+ Array.from({length: pointsPerMonth}, (_, pointIndex) => ({ + time: month, + "Series 1": Math.floor(Math.random() * 90), + timestamp: Date.now() + (monthIndex * pointsPerMonth + pointIndex) * 86400000 + })) + ); + + return data; +} + +function generateAreaData(): any[] { + const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; + const pointsPerMonth = 3; // Number of points for each month + + const data = months.flatMap((month, monthIndex) => + Array.from({length: pointsPerMonth}, (_, pointIndex) => ({ + time: month, + "value": Math.floor(Math.random() * 90), + timestamp: Date.now() + (monthIndex * pointsPerMonth + pointIndex) * 86400000 + })) + ); + + return data; +} + +function generateRandomValue(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +function generateBarChartDate(): any[] { + const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']; + return months.map(month => ({ + time: month, + value: generateRandomValue(1000, 5000), + })); +} diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx new file mode 100644 index 000000000..d50fcab52 --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import {NoContent} from 'UI'; + +import { + AreaChart, Area, + CartesianGrid, Tooltip, + ResponsiveContainer, + XAxis, YAxis +} from 'recharts'; +import {NO_METRIC_DATA} from 'App/constants/messages' +import {AvgLabel, Styles} from "Components/Dashboard/Widgets/common"; +import ExCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard"; + +interface Props { + title: string; + type: string; + onCard: (card: string) => void; + onClick?: any; + data?: any, +} + +// interface Props { +// data: any, +// label?: string +// } + +function AreaChartCard(props: Props) { + const {data} = props; + const gradientDef = Styles.gradientDef(); + + return ( + +
{props.title}
+ + } + > + + <> + {/*
*/} + {/* */} + {/*
*/} + + + {gradientDef} + + + Styles.tickFormatter(val)} + label={{...Styles.axisLabelLeft, value: data?.label}} + /> + + + + + + + + ); +} + +export default AreaChartCard; 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 1283062d9..a34bda906 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx @@ -6,64 +6,60 @@ import {PERFORMANCE} from "App/constants/card"; import {Bar, BarChart, CartesianGrid, Legend, Rectangle, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts"; import {Styles} from "Components/Dashboard/Widgets/common"; -const _data = [ - { - name: 'Jan', - uv: 4000, - pv: 2400, - }, - { - name: 'Feb', - uv: 3000, - pv: 1398, - }, - { - name: 'Mar', - uv: 2000, - pv: 9800, - }, - { - name: 'Apr', - uv: 2780, - pv: 3908, - }, - { - name: 'May', - uv: 1890, - pv: 4800, - }, - { - name: 'Jun', - uv: 2390, - pv: 3800, - }, - { - name: 'Jul', - uv: 3490, - pv: 4300, - }, -]; +interface Props { + title: string; + type: string; + onCard: (card: string) => void; + onClick?: any; + data?: any, +} -function BarChartCard(props: any) { +function BarChartCard(props: Props) { return ( - + {/**/} + {/* */} + {/* /!**!/*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* }/>*/} + {/* /!*}/>*!/*/} + {/* */} + {/**/} + + - {/**/} - - - + + Styles.tickFormatter(val)} + label={{...Styles.axisLabelLeft, value: "Number of Errors"}} + allowDecimals={false} + /> - }/> - {/*}/>*/} + + One} + dataKey="value" stackId="a" fill={Styles.colors[0]}/> + {/*3rd Party} dataKey="thirdParty" stackId="a"*/} + {/* fill={Styles.colors[2]}/>*/} diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx new file mode 100644 index 000000000..c07c7f82b --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import ExCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard"; +import CallWithErrors from "Components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors"; + +interface Props { + title: string; + type: string; + onCard: (card: string) => void; + onClick?: any; + data?: any, +} + +function CallsWithErrorsExample(props: Props) { + return ( + + + + ); +} + +export default CallsWithErrorsExample; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx index be2938e65..ccd9f3dc8 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx @@ -13,17 +13,18 @@ function ExCard({ onCard: (card: string) => void; height?: number; }) { - return ( -
-
{title}
-
onCard(type)}>{children}
-
- ); + console.log(type) + return ( +
+
{title}
+
onCard(type)}>{children}
+
+ ); } export default ExCard diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser.tsx index fd18227f0..074731dd7 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser.tsx @@ -1,52 +1,53 @@ import React from 'react'; -import { Icon } from 'UI'; +import {Avatar, Icon} from 'UI'; import ExCard from '../ExCard'; import ByComponent from './Component'; +import {hashString} from "Types/session/session"; function ByUser(props: any) { - const rows = [ - { - label: 'Demo User', - progress: 85, - value: '2.5K', - icon: , - }, - { - label: 'Admin User', - progress: 25, - value: '405', - icon: , - }, - { - label: 'Management User', - progress: 5, - value: '302', - icon: , - }, - { - label: 'Sales User', - progress: 3, - value: '194', - icon: , - }, - { - label: 'Marketing User', - progress: 1, - value: '57', - icon: , - }, - ]; + const rows = [ + { + label: 'Demo User', + progress: 85, + value: '2.5K', + icon: , + }, + { + label: 'Admin User', + progress: 25, + value: '405', + icon: , + }, + { + label: 'Management User', + progress: 5, + value: '302', + icon: , + }, + { + label: 'Sales User', + progress: 3, + value: '194', + icon: , + }, + { + label: 'Marketing User', + progress: 1, + value: '57', + icon: , + }, + ]; - const lineWidth = 200; - return ( - - ); + const lineWidth = 200; + return ( + + ); } export default ByUser; 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 1e2cb8770..611df39ff 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx @@ -1,96 +1,43 @@ -import { Segmented } from 'antd'; import React from 'react'; import ExCard from './ExCard'; +import AreaChartCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard"; +import CustomMetricLineChart from "Components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart"; +import {Styles} from "Components/Dashboard/Widgets/common"; -function ExampleTrend(props: any) { - const rows = [50, 40, 30, 20, 10]; - const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May']; +interface Props { + title: string; + type: string; + onCard: (card: string) => void; + onClick?: any; + data?: any, +} - const [isMulti, setIsMulti] = React.useState(false); - return ( - -
{props.title}
-
- setIsMulti(v === 'multi')} - size='small' - /> -
- - } - > -
-
- {rows.map((r) => ( -
-
{r}K
-
-
- ))} -
-
- {months.map((m) => ( -
{m}
- ))} -
- -
- - +
{props.title}
+
+ } + > + {/**/} + - -
- {isMulti ? ( -
- - - -
- ) : null} - -
-
-
-
Series 1
-
-
-
-
Series 2
-
-
- - ); + + ); } export default ExampleTrend; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx index 37f7fb980..8a1ea4a35 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx @@ -22,6 +22,7 @@ const SelectCard: React.FC = (props: SelectCardProps) => { const [libraryQuery, setLibraryQuery] = React.useState(''); const handleCardSelection = (card: string) => { + metricStore.init(); const selectedCard = CARD_LIST.find((c) => c.key === card) as CardType; const cardData: any = { diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx index 32c63c5e6..c36d44558 100644 --- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx @@ -1,5 +1,5 @@ import React, {useState, useRef, useEffect} from 'react'; -import CustomMetriLineChart from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetriLineChart'; +import CustomMetricLineChart from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart'; import CustomMetricPercentage from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPercentage'; import CustomMetricTable from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable'; import CustomMetricPieChart from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart'; @@ -141,7 +141,7 @@ function WidgetChart(props: Props) { if (metricType === TIMESERIES) { if (viewType === 'lineChart') { return ( - case FilterKey.CALLS_ERRORS: - return + return // PERFORMANCE case FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES: diff --git a/frontend/app/mstore/types/IconProvider.tsx b/frontend/app/mstore/types/IconProvider.tsx index d2d371879..061367bfe 100644 --- a/frontend/app/mstore/types/IconProvider.tsx +++ b/frontend/app/mstore/types/IconProvider.tsx @@ -1,6 +1,7 @@ -import {Icon} from "UI"; +import {Avatar, Icon} from "UI"; import React from "react"; import * as Flags from "country-flag-icons/react/3x2"; +import {hashString} from "Types/session/session"; interface IconProvider { getIcon(name: string): React.ReactNode; @@ -108,7 +109,7 @@ class OsIconProvider implements IconProvider { class UserIconProvider implements IconProvider { getIcon(name: string): React.ReactNode { - return + return } } diff --git a/frontend/app/mstore/types/filter.ts b/frontend/app/mstore/types/filter.ts index a1a4009fb..f4cbbd707 100644 --- a/frontend/app/mstore/types/filter.ts +++ b/frontend/app/mstore/types/filter.ts @@ -128,7 +128,7 @@ export default class Filter { addFunnelDefaultFilters() { this.filters = [] - this.addFilter({...filtersMap[FilterKey.CLICK], value: [''], operator: 'onAny'}) + this.addFilter({...filtersMap[FilterKey.LOCATION], value: [''], operator: 'isAny'}) this.addFilter({...filtersMap[FilterKey.CLICK], value: [''], operator: 'onAny'}) } } diff --git a/frontend/app/types/session/session.ts b/frontend/app/types/session/session.ts index f47a51e37..f109315e4 100644 --- a/frontend/app/types/session/session.ts +++ b/frontend/app/types/session/session.ts @@ -41,7 +41,7 @@ export function sortEvents(a: Record, b: Record) { return aTs - bTs; } -function hashString(s: string): number { +export function hashString(s: string): number { let mul = 1; let hash = 0; for (let i = 0; i < s.length; i++) {