From caa55de1b6a0299a6496559e28e9a58022db920d Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 1 Jul 2024 17:19:58 +0200 Subject: [PATCH 1/5] change(ui): funnel bar style changes --- .../NewDashModal/ExampleCards.tsx | 21 +- .../NewDashModal/Examples/BarChart.tsx | 114 ++++---- .../Funnels/FunnelWidget/FunnelBar.tsx | 243 +++++++++--------- 3 files changed, 191 insertions(+), 187 deletions(-) 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); }; From b6c26bcf03e438f8c40c1d916cf3c90ee717c223 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 1 Jul 2024 17:24:02 +0200 Subject: [PATCH 2/5] change(ui): dashboard list show created by --- .../components/DashboardList/DashboardList.tsx | 14 +++++++------- frontend/app/mstore/types/dashboard.ts | 2 ++ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx index 60c567054..64290f498 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx @@ -41,10 +41,10 @@ function DashboardList({ siteId }: { siteId: string }) { render: (date) => checkForRecent(date, 'LLL dd, yyyy, hh:mm a'), }, { - title: 'Modified By', - dataIndex: 'updatedBy', + title: 'Created By', + dataIndex: 'ownerEmail', width: '16.67%', - sorter: (a, b) => a.updatedBy.localeCompare(b.updatedBy), + sorter: (a, b) => a.ownerEmail.localeCompare(b.ownerEmail), sortDirections: ['ascend', 'descend'], }, { @@ -104,13 +104,13 @@ function DashboardList({ siteId }: { siteId: string }) { list.length === 0 && !dashboardStore.filter.showMine ? (
} - imageStyle={{ - width: imageDimensions.width, + image={} + imageStyle={{ + width: imageDimensions.width, height: imageDimensions.height, margin: 'auto', padding: '2rem 0' - }} + }} description={emptyDescription} />
diff --git a/frontend/app/mstore/types/dashboard.ts b/frontend/app/mstore/types/dashboard.ts index b1d1a4743..cea9a26fe 100644 --- a/frontend/app/mstore/types/dashboard.ts +++ b/frontend/app/mstore/types/dashboard.ts @@ -17,6 +17,7 @@ export default class Dashboard { currentWidget: Widget = new Widget() config: any = {} createdAt: number = new Date().getTime() + ownerEmail: string = "" constructor() { makeAutoObservable(this) @@ -65,6 +66,7 @@ export default class Dashboard { this.isPublic = json.isPublic this.key = json.dashboardId this.createdAt = DateTime.fromMillis(new Date(json.createdAt).getTime()) + this.ownerEmail = json.ownerEmail if (json.widgets) { const smallWidgets: any[] = json.widgets.filter(wi => wi.config.col === 1) const otherWidgets: any[] = json.widgets.filter(wi => wi.config.col !== 1) From 04754504cebbd3b61ccf531e07ca83dbbb68efb7 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 1 Jul 2024 17:24:25 +0200 Subject: [PATCH 3/5] change(ui): dashboard list show created by --- .../Dashboard/components/DashboardList/DashboardList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx index 64290f498..9289e1376 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx @@ -41,7 +41,7 @@ function DashboardList({ siteId }: { siteId: string }) { render: (date) => checkForRecent(date, 'LLL dd, yyyy, hh:mm a'), }, { - title: 'Created By', + title: 'Owner', dataIndex: 'ownerEmail', width: '16.67%', sorter: (a, b) => a.ownerEmail.localeCompare(b.ownerEmail), From 31efd79d5a312d461947366f457a80dd0ed38e90 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 1 Jul 2024 17:28:03 +0200 Subject: [PATCH 4/5] change(ui): dashboard list show created by --- .../Dashboard/components/DashboardList/DashboardList.tsx | 4 ++-- frontend/app/mstore/types/dashboard.ts | 4 ++-- frontend/app/mstore/types/widget.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx index 9289e1376..7740ec10b 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx @@ -42,9 +42,9 @@ function DashboardList({ siteId }: { siteId: string }) { }, { title: 'Owner', - dataIndex: 'ownerEmail', + dataIndex: 'owner', width: '16.67%', - sorter: (a, b) => a.ownerEmail.localeCompare(b.ownerEmail), + sorter: (a, b) => a.owner.localeCompare(b.owner), sortDirections: ['ascend', 'descend'], }, { diff --git a/frontend/app/mstore/types/dashboard.ts b/frontend/app/mstore/types/dashboard.ts index cea9a26fe..a82702596 100644 --- a/frontend/app/mstore/types/dashboard.ts +++ b/frontend/app/mstore/types/dashboard.ts @@ -17,7 +17,7 @@ export default class Dashboard { currentWidget: Widget = new Widget() config: any = {} createdAt: number = new Date().getTime() - ownerEmail: string = "" + owner: string = "" constructor() { makeAutoObservable(this) @@ -66,7 +66,7 @@ export default class Dashboard { this.isPublic = json.isPublic this.key = json.dashboardId this.createdAt = DateTime.fromMillis(new Date(json.createdAt).getTime()) - this.ownerEmail = json.ownerEmail + this.owner = json.ownerName if (json.widgets) { const smallWidgets: any[] = json.widgets.filter(wi => wi.config.col === 1) const otherWidgets: any[] = json.widgets.filter(wi => wi.config.col !== 1) diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index 0eb5411dc..12887b57f 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -155,7 +155,7 @@ export default class Widget { ? json.series.map((series: any) => new FilterSeries().fromJson(series)) : [new FilterSeries()]; this.dashboards = json.dashboards || []; - this.owner = json.ownerEmail; + this.owner = json.ownerName; this.lastModified = json.editedAt || json.createdAt ? DateTime.fromMillis(json.editedAt || json.createdAt) From 1f06bb9401935658a3c5d2de6204e096cb50ef64 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 1 Jul 2024 17:50:03 +0200 Subject: [PATCH 5/5] change(ui): errors by domain examples and card type chagne --- .../ErrorsPerDomain/ErrorsPerDomain.tsx | 56 ++++++++++--------- .../NewDashModal/ExampleCards.tsx | 4 +- 2 files changed, 31 insertions(+), 29 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx index c33ef2be8..1f261c38c 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx @@ -1,38 +1,40 @@ import React from 'react'; -import { NoContent } from 'UI'; +import { Icon, NoContent } from 'UI'; import { Styles } from '../../common'; import { numberWithCommas } from 'App/utils'; import Bar from './Bar'; -import { NO_METRIC_DATA } from 'App/constants/messages' +import { NO_METRIC_DATA } from 'App/constants/messages'; +import ListWithIcons from 'Components/Dashboard/Widgets/ListWithIcons'; interface Props { - data: any + data: any; } + function ErrorsPerDomain(props: Props) { - const { data } = props; - // const firstAvg = 10; - const firstAvg = data.chart[0] && data.chart[0].errorsCount; - return ( - -
- {data.chart.map((item, i) => - - )} -
- - ); + const { data } = props; + // const firstAvg = 10; + // const firstAvg = data.chart[0] && data.chart[0].errorsCount; + + const highest = data.chart[0] && data.chart[0].errorsCount; + const list = data.chart.slice(0, 4).map((item: any) => ({ + name: item.domain, + icon: , + value: Math.round(item.errorsCount), + progress: Math.round((item.errorsCount * 100) / highest) + })); + + return ( + +
+ +
+ + ); } export default ErrorsPerDomain; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx index 4aa314c95..3732dd995 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx @@ -410,8 +410,8 @@ export const CARD_LIST: CardType[] = [ cardType: ERRORS, metricOf: FilterKey.ERRORS_PER_DOMAINS, category: CARD_CATEGORIES[3].key, - example: Bars, - data: generateRandomBarsData(), + example: SlowestDomains, + // data: generateRandomBarsData(), }, { title: 'Errors by Type',