From 634d0e8a0f76ca1fd94949481ec5470e0061d9b5 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Tue, 25 Mar 2025 17:15:55 +0100 Subject: [PATCH] ui: rm speed index card --- .../SpeedIndexByLocation/Scale.tsx | 32 ----- .../SpeedIndexByLocation.module.css | 55 ------- .../SpeedIndexByLocation.tsx | 134 ------------------ .../SpeedIndexByLocation/index.ts | 1 - .../SpeedIndexByLocation/scale.module.css | 11 -- .../Examples/SpeedIndexByLocationExample.tsx | 92 ------------ .../WidgetPredefinedChart.tsx | 3 - 7 files changed, 328 deletions(-) delete mode 100644 frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.tsx delete mode 100644 frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.module.css delete mode 100644 frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx delete mode 100644 frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/index.ts delete mode 100644 frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/scale.module.css delete mode 100644 frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample.tsx diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.tsx deleted file mode 100644 index 3d7b588fa..000000000 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import cn from 'classnames'; -import { Styles } from '../../common'; -import stl from './scale.module.css'; -import { useTranslation } from 'react-i18next'; - -function Scale({ colors }) { - const { t } = useTranslation(); - const lastIndex = Styles.compareColors.length - 1; - - return ( -
- {Styles.compareColors.map((c, i) => ( -
- {i === 0 &&
{t('Slow')}
} - {i === lastIndex &&
{t('Fast')}
} -
- ))} -
- ); -} - -export default Scale; diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.module.css b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.module.css deleted file mode 100644 index ec2c46f02..000000000 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.module.css +++ /dev/null @@ -1,55 +0,0 @@ -.maps { - height: auto; - width: 110%; - stroke: $gray-medium; - stroke-width: 1; - stroke-linecap: round; - stroke-linejoin: round; - margin-top: -20px; -} - -.location { - fill: $gray-light !important; - cursor: pointer; - stroke: #fff; - - &:focus, - &:hover { - fill: #2E3ECC !important; - outline: 0; - } -} - -.heat_index0 { - fill:$gray-light !important; -} - -.heat_index5 { - fill: #B0B8FF !important; -} - -.heat_index4 { - fill:#6171FF !important; -} - -.heat_index3 { - fill: #394EFF !important; -} - -.heat_index2 { - fill: #2E3ECC !important; -} - -.heat_index1 { - fill: #222F99 !important; -} - -.tooltip { - position: fixed; - padding: 5px; - border: 1px solid $gray-light; - border-radius: 3px; - background-color: white; - font-size: 12px; - line-height: 1.2; -} diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx deleted file mode 100644 index ae343f7c5..000000000 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import React from 'react'; -import { NoContent } from 'UI'; -import { observer } from 'mobx-react-lite'; -import { numberWithCommas, positionOfTheNumber } from 'App/utils'; -import WorldMap from '@svg-maps/world'; -import { SVGMap } from 'react-svg-map'; -import cn from 'classnames'; -import { NO_METRIC_DATA } from 'App/constants/messages'; -import { InfoCircleOutlined } from '@ant-design/icons'; -import stl from './SpeedIndexByLocation.module.css'; -import Scale from './Scale'; -import { Styles, AvgLabel } from '../../common'; -import { useTranslation } from 'react-i18next'; - -interface Props { - data?: any; -} - -function SpeedIndexByLocation(props: Props) { - const { t } = useTranslation(); - const { data } = props; - const wrapper: any = React.useRef(null); - const [tooltipStyle, setTooltipStyle] = React.useState({ display: 'none' }); - const [pointedLocation, setPointedLocation] = React.useState(null); - - const dataMap: any = React.useMemo(() => { - const _data: any = {}; - const max = data.chart?.reduce( - (acc: any, item: any) => Math.max(acc, item.value), - 0, - ); - const min = data.chart?.reduce( - (acc: any, item: any) => Math.min(acc, item.value), - 0, - ); - data.chart?.forEach((item: any) => { - if (!item || !item.userCountry) { - return; - } - item.perNumber = positionOfTheNumber(min, max, item.value, 5); - _data[item.userCountry.toLowerCase()] = item; - }); - return _data; - }, [data.chart]); - - const getLocationClassName = (location: any) => { - const i = dataMap[location.id] ? dataMap[location.id].perNumber : 0; - const cls = stl[`heat_index${i}`]; - return cn(stl.location, cls); - }; - - const getLocationName = (event: any) => { - if (!event) return null; - const id = event.target.attributes.id.value; - const name = event.target.attributes.name.value; - const percentage = dataMap[id] ? dataMap[id].perNumber : 0; - return { name, id, percentage }; - }; - - const handleLocationMouseOver = (event: any) => { - const pointedLocation = getLocationName(event); - setPointedLocation(pointedLocation); - }; - - const handleLocationMouseOut = () => { - setTooltipStyle({ display: 'none' }); - setPointedLocation(null); - }; - - const handleLocationMouseMove = (event: any) => { - const tooltipStyle = { - display: 'block', - top: event.clientY + 10, - left: event.clientX - 100, - }; - setTooltipStyle(tooltipStyle); - }; - - return ( - - {NO_METRIC_DATA} - - } - > -
- -
- -
-
- -
-
- {pointedLocation && ( - <> -
{pointedLocation.name}
-
- {t('Avg:')}{' '} - - {dataMap[pointedLocation.id] - ? numberWithCommas( - parseInt(dataMap[pointedLocation.id].value), - ) - : 0} - -
- - )} -
- - ); -} - -export default observer(SpeedIndexByLocation); diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/index.ts deleted file mode 100644 index 79ab01b34..000000000 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SpeedIndexByLocation'; diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/scale.module.css b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/scale.module.css deleted file mode 100644 index 5aa34f966..000000000 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/scale.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.bars { - & div:first-child { - border-top-left-radius: 3px; - border-top-right-radius: 3px; - } - - & div:last-child { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } -} \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample.tsx deleted file mode 100644 index 69027b892..000000000 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample.tsx +++ /dev/null @@ -1,92 +0,0 @@ -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'; -import SpeedIndexByLocation from 'Components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation'; - -interface Props { - title: string; - type: string; - onCard: (card: string) => void; -} - -function SpeedIndexByLocationExample(props: Props) { - const data = { - value: 1480, - chart: [ - { - userCountry: 'AT', - value: 415, - }, - { - userCountry: 'PL', - value: 433.1666666666667, - }, - { - userCountry: 'FR', - value: 502, - }, - { - userCountry: 'IT', - value: 540.4117647058823, - }, - { - userCountry: 'TH', - value: 662.0, - }, - { - userCountry: 'ES', - value: 740.5454545454545, - }, - { - userCountry: 'SG', - value: 889.6666666666666, - }, - { - userCountry: 'TW', - value: 1008.0, - }, - { - userCountry: 'HU', - value: 1027.0, - }, - { - userCountry: 'DE', - value: 1054.4583333333333, - }, - { - userCountry: 'BE', - value: 1126.0, - }, - { - userCountry: 'TR', - value: 1174.0, - }, - { - userCountry: 'US', - value: 1273.3015873015872, - }, - { - userCountry: 'GB', - value: 1353.8095238095239, - }, - { - userCountry: 'VN', - value: 1473.8181818181818, - }, - { - userCountry: 'HK', - value: 1654.6666666666667, - }, - ], - unit: 'ms', - }; - return ( - - - - ); -} - -export default SpeedIndexByLocationExample; diff --git a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx index 8800ce5ee..29d1a4a26 100644 --- a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx @@ -18,7 +18,6 @@ import SessionsImpactedBySlowRequests from 'App/components/Dashboard/Widgets/Pre import SessionsPerBrowser from 'App/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser'; import { FilterKey } from 'Types/filter/filterType'; import CallWithErrors from '../../Widgets/PredefinedWidgets/CallWithErrors'; -import SpeedIndexByLocation from '../../Widgets/PredefinedWidgets/SpeedIndexByLocation'; import ResponseTimeDistribution from '../../Widgets/PredefinedWidgets/ResponseTimeDistribution'; import { useTranslation } from 'react-i18next'; @@ -49,8 +48,6 @@ function WidgetPredefinedChart(props: Props) { return ; case FilterKey.CALLS_ERRORS: return ; - case FilterKey.SPEED_LOCATION: - return ; default: return (
{t('Widget not supported')}