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 { 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 <CallsErrors5xx data={data} metric={metric} />;
|
||||
case FilterKey.CALLS_ERRORS:
|
||||
return <CallWithErrors isTemplate={isTemplate} data={data} />;
|
||||
case FilterKey.SPEED_LOCATION:
|
||||
return <SpeedIndexByLocation data={data} />;
|
||||
default:
|
||||
return (
|
||||
<div className="h-40 color-red">{t('Widget not supported')}</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue