ui: rm speed index card
This commit is contained in:
nick-delirium
Delirium
parent
28b4fc7598
commit
634d0e8a0f
7 changed files with 0 additions and 328 deletions
|
|
@ -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 (
|
|
||||||
<div className={cn(stl.bars, 'absolute bottom-0 mb-4')}>
|
|
||||||
{Styles.compareColors.map((c, i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
style={{
|
|
||||||
backgroundColor: c,
|
|
||||||
width: '6px',
|
|
||||||
height: '15px',
|
|
||||||
marginBottom: '1px',
|
|
||||||
}}
|
|
||||||
className="flex items-center justify-center"
|
|
||||||
>
|
|
||||||
{i === 0 && <div className="text-xs pl-12">{t('Slow')}</div>}
|
|
||||||
{i === lastIndex && <div className="text-xs pl-12">{t('Fast')}</div>}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Scale;
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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<any>(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 (
|
|
||||||
<NoContent
|
|
||||||
size="small"
|
|
||||||
show={false}
|
|
||||||
style={{ height: '240px' }}
|
|
||||||
title={
|
|
||||||
<div className="flex items-center gap-2 text-base font-normal">
|
|
||||||
<InfoCircleOutlined size={12} /> {NO_METRIC_DATA}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="absolute right-0 mr-4 top=0 w-full flex justify-end">
|
|
||||||
<AvgLabel text="Avg" count={Math.round(data.value)} unit="ms" />
|
|
||||||
</div>
|
|
||||||
<Scale colors={Styles.compareColors} />
|
|
||||||
<div className="map-target" />
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: '234px',
|
|
||||||
width: '100%',
|
|
||||||
margin: '0 auto',
|
|
||||||
display: 'flex',
|
|
||||||
}}
|
|
||||||
ref={wrapper}
|
|
||||||
>
|
|
||||||
<SVGMap
|
|
||||||
map={WorldMap}
|
|
||||||
className={stl.maps}
|
|
||||||
locationClassName={getLocationClassName}
|
|
||||||
onLocationMouseOver={handleLocationMouseOver}
|
|
||||||
onLocationMouseOut={handleLocationMouseOut}
|
|
||||||
onLocationMouseMove={handleLocationMouseMove}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={stl.tooltip} style={tooltipStyle}>
|
|
||||||
{pointedLocation && (
|
|
||||||
<>
|
|
||||||
<div>{pointedLocation.name}</div>
|
|
||||||
<div>
|
|
||||||
{t('Avg:')}{' '}
|
|
||||||
<strong>
|
|
||||||
{dataMap[pointedLocation.id]
|
|
||||||
? numberWithCommas(
|
|
||||||
parseInt(dataMap[pointedLocation.id].value),
|
|
||||||
)
|
|
||||||
: 0}
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</NoContent>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default observer(SpeedIndexByLocation);
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { default } from './SpeedIndexByLocation';
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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 (
|
|
||||||
<ExCard {...props}>
|
|
||||||
<SpeedIndexByLocation data={data} />
|
|
||||||
</ExCard>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SpeedIndexByLocationExample;
|
|
||||||
|
|
@ -18,7 +18,6 @@ import SessionsImpactedBySlowRequests from 'App/components/Dashboard/Widgets/Pre
|
||||||
import SessionsPerBrowser from 'App/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser';
|
import SessionsPerBrowser from 'App/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser';
|
||||||
import { FilterKey } from 'Types/filter/filterType';
|
import { FilterKey } from 'Types/filter/filterType';
|
||||||
import CallWithErrors from '../../Widgets/PredefinedWidgets/CallWithErrors';
|
import CallWithErrors from '../../Widgets/PredefinedWidgets/CallWithErrors';
|
||||||
import SpeedIndexByLocation from '../../Widgets/PredefinedWidgets/SpeedIndexByLocation';
|
|
||||||
import ResponseTimeDistribution from '../../Widgets/PredefinedWidgets/ResponseTimeDistribution';
|
import ResponseTimeDistribution from '../../Widgets/PredefinedWidgets/ResponseTimeDistribution';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
|
@ -49,8 +48,6 @@ function WidgetPredefinedChart(props: Props) {
|
||||||
return <CallsErrors5xx data={data} metric={metric} />;
|
return <CallsErrors5xx data={data} metric={metric} />;
|
||||||
case FilterKey.CALLS_ERRORS:
|
case FilterKey.CALLS_ERRORS:
|
||||||
return <CallWithErrors isTemplate={isTemplate} data={data} />;
|
return <CallWithErrors isTemplate={isTemplate} data={data} />;
|
||||||
case FilterKey.SPEED_LOCATION:
|
|
||||||
return <SpeedIndexByLocation data={data} />;
|
|
||||||
default:
|
default:
|
||||||
return (
|
return (
|
||||||
<div className="h-40 color-red">{t('Widget not supported')}</div>
|
<div className="h-40 color-red">{t('Widget not supported')}</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue