diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx index d46d4d79b..4aa314c95 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx @@ -235,14 +235,14 @@ export const CARD_LIST: CardType[] = [ metricOf: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION, category: CARD_CATEGORIES[1].key, data: { - chart: generateAreaData(), - label: "Page Response Time (ms)", + chart: generateBarChartData(), + label: "Number of Calls", unit: 'ms', namesMap: [ "Series 1" ] }, - example: AreaChartCard, + example: BarChartCard, }, { @@ -252,7 +252,7 @@ export const CARD_LIST: CardType[] = [ metricOf: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE, category: CARD_CATEGORIES[1].key, data: { - chart: generateBarChartDate(), + chart: generateBarChartData(), namesMap: [ "Series 1" ] @@ -303,6 +303,8 @@ export const CARD_LIST: CardType[] = [ category: CARD_CATEGORIES[1].key, data: { chart: generateAreaData(), + label: "Time to Render (ms)", + unit: 'ms', namesMap: [ "Series 1" ] @@ -318,9 +320,10 @@ export const CARD_LIST: CardType[] = [ category: CARD_CATEGORIES[1].key, data: { chart: generateAreaData(), + label: "Number of Sessions", namesMap: [ "Series 1" - ] + ], }, example: AreaChartCard, }, @@ -386,7 +389,7 @@ export const CARD_LIST: CardType[] = [ metricOf: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS, category: CARD_CATEGORIES[3].key, data: { - chart: generateBarChartDate(), + chart: generateBarChartData(), }, example: BarChartCard, }, @@ -397,7 +400,7 @@ export const CARD_LIST: CardType[] = [ metricOf: FilterKey.RESOURCES_BY_PARTY, category: CARD_CATEGORIES[3].key, data: { - chart: generateBarChartDate(), + chart: generateBarChartData(), }, example: BarChartCard, }, @@ -417,7 +420,7 @@ export const CARD_LIST: CardType[] = [ metricOf: FilterKey.ERRORS_PER_TYPE, category: CARD_CATEGORIES[3].key, data: { - chart: generateBarChartDate(), + chart: generateBarChartData(), }, example: BarChartCard, }, @@ -725,7 +728,7 @@ function generateRandomValue(min: number, max: number): number { return Math.floor(Math.random() * (max - min + 1)) + min; } -function generateBarChartDate(): any[] { +function generateBarChartData(): any[] { const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']; return months.map(month => ({ time: month, 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 a34bda906..cab940cc4 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx @@ -1,70 +1,70 @@ -import {GitCommitHorizontal} from 'lucide-react'; +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 {Styles} from "Components/Dashboard/Widgets/common"; +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'; interface Props { - title: string; - type: string; - onCard: (card: string) => void; - onClick?: any; - data?: any, + title: string; + type: string; + onCard: (card: string) => void; + onClick?: any; + data?: any, } function BarChartCard(props: Props) { - return ( - + {/**/} + {/* */} + {/* /!**!/*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* }/>*/} + {/* /!*}/>*!/*/} + {/* */} + {/**/} + + + - {/**/} - {/* */} - {/* /!**!/*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* }/>*/} - {/* /!*}/>*!/*/} - {/* */} - {/**/} + + + Styles.tickFormatter(val)} + label={{ ...Styles.axisLabelLeft, value: props.data?.label || 'Number of Errors' }} + allowDecimals={false} + /> + + + One} + dataKey="value" stackId="a" fill={Styles.colors[0]} /> + {/*3rd Party} dataKey="thirdParty" stackId="a"*/} + {/* fill={Styles.colors[2]}/>*/} + + + - - - - - 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]}/>*/} - - - - - ); + ); } export default BarChartCard; diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx index 6a37e91fe..4006b7c32 100644 --- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx +++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx @@ -1,148 +1,149 @@ -import {durationFormatted} from 'App/date'; +import { durationFormatted } from 'App/date'; import React from 'react'; import FunnelStepText from './FunnelStepText'; -import {Icon} from 'UI'; -import {Space} from "antd"; +import { Icon } from 'UI'; +import { Space } from 'antd'; +import { Styles } from 'Components/Dashboard/Widgets/common'; interface Props { - filter: any; - index?: number; - focusStage?: (index: number, isFocused: boolean) => void - focusedFilter?: number | null + filter: any; + index?: number; + focusStage?: (index: number, isFocused: boolean) => void; + focusedFilter?: number | null; } function FunnelBar(props: Props) { - const {filter, index, focusStage, focusedFilter} = props; + const { filter, index, focusStage, focusedFilter } = props; - const isFocused = focusedFilter && index ? focusedFilter === index - 1 : false; - return ( -
- -
-
-
- {filter.completedPercentageTotal}% -
-
-
focusStage?.(index! - 1, filter.isActive)} - className={'hover:opacity-75'} - /> -
-
- {/* @ts-ignore */} -
- - {filter.sessionsCount} Sessions - + const isFocused = focusedFilter && index ? focusedFilter === index - 1 : false; + return ( +
+ +
+
+
+ {filter.completedPercentageTotal}% +
+
+
focusStage?.(index! - 1, filter.isActive)} + className={'hover:opacity-75'} + /> +
+
+ {/* @ts-ignore */} +
+ + {filter.sessionsCount} Sessions + ({filter.completedPercentage}%) Completed -
- - 0 ? "red" : "gray-light"} size={16}/> - 0 ? 'color-red' : 'disabled')}>{filter.droppedCount} Sessions - 0 ? 'color-red' : 'disabled')}>({filter.droppedPercentage}%) Dropped - -
- ); + + 0 ? 'red' : 'gray-light'} size={16} /> + 0 ? 'color-red' : 'disabled')}>{filter.droppedCount} Sessions + 0 ? 'color-red' : 'disabled')}>({filter.droppedPercentage}%) Dropped + +
+
+ ); } export function UxTFunnelBar(props: Props) { - const {filter} = props; + const { filter } = props; - return ( -
-
{filter.title}
-
-
-
- {((filter.completed / (filter.completed + filter.skipped)) * 100).toFixed(1)}% -
-
-
-
- {/* @ts-ignore */} -
-
- - {filter.completed}completed this step -
-
- - + return ( +
+
{filter.title}
+
+
+
+ {((filter.completed / (filter.completed + filter.skipped)) * 100).toFixed(1)}% +
+
+
+
+ {/* @ts-ignore */} +
+
+ + {filter.completed}completed this step +
+
+ + {durationFormatted(filter.avgCompletionTime)} - + Avg. completion time -
-
- {/* @ts-ignore */} -
- - {filter.skipped} skipped -
-
+
- ); + {/* @ts-ignore */} +
+ + {filter.skipped} skipped +
+
+
+ ); } export default FunnelBar; const calculatePercentage = (completed: number, dropped: number) => { - const total = completed + dropped; - if (dropped === 0) return 100; - if (total === 0) return 0; + const total = completed + dropped; + if (dropped === 0) return 100; + if (total === 0) return 0; - return Math.round((completed / dropped) * 100); + return Math.round((completed / dropped) * 100); };