fix(ui) - speed index location avg attribute changed to value

frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx

@@ -4,13 +4,13 @@ import { Styles, AvgLabel } from '../../common';
 import Scale from './Scale';
 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 WorldMap from '@svg-maps/world';
+import { SVGMap } from 'react-svg-map';
 import stl from './SpeedIndexByLocation.module.css';
 import cn from 'classnames';
 
 interface Props {
-    metric?: any
+    metric?: any;
 }
 function SpeedIndexByLocation(props: Props) {
     const { metric } = props;
@@ -18,90 +18,87 @@ function SpeedIndexByLocation(props: Props) {
     let map: any = null;
     const [tooltipStyle, setTooltipStyle] = React.useState({ display: 'none' });
     const [pointedLocation, setPointedLocation] = React.useState<any>(null);
-    const dataMap = React.useMemo(() => {
-        const data = {};
-        const max = metric.data.chart.reduce((acc, item) => Math.max(acc, item.avg), 0);
-        const min = metric.data.chart.reduce((acc, item) => Math.min(acc, item.avg), 0);
+    const dataMap: any = React.useMemo(() => {
+        const data: any = {};
+        const max = metric.data.chart.reduce((acc: any, item: any) => Math.max(acc, item.value), 0);
+        const min = metric.data.chart.reduce((acc: any, item: any) => Math.min(acc, item.value), 0);
         metric.data.chart.forEach((item: any) => {
-            item.perNumber = positionOfTheNumber(min, max, item.avg, 5);
+            item.perNumber = positionOfTheNumber(min, max, item.value, 5);
             data[item.userCountry.toLowerCase()] = item;
         });
         return data;
-    }, [])
+    }, []);
 
-    const getLocationClassName = (location, index) => {
-      const i = (dataMap[location.id] ? dataMap[location.id].perNumber : 0);
-      const cls = stl["heat_index" + i];
-      return cn(stl.location, cls);
-    }
+    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) => {
-      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 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 handleLocationMouseOver = (event) => {
-      const pointedLocation = getLocationName(event);
-      setPointedLocation(pointedLocation);
-    }
-  
     const handleLocationMouseOut = () => {
-      setTooltipStyle({ display: 'none' });
-      setPointedLocation(null);
-    }
+        setTooltipStyle({ display: 'none' });
+        setPointedLocation(null);
+    };
 
-    const handleLocationMouseMove = (event) => {
-      const tooltipStyle = {
-        display: 'block',
-        top: event.clientY + 10,
-        left: event.clientX - 100
-      };
-      setTooltipStyle(tooltipStyle);
-    }
+    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' } }
-          className="relative"
-        >
+        <NoContent size="small" show={false} style={{ height: '240px' }}>
             <div className="absolute right-0 mr-4 top=0 w-full flex justify-end">
-              <AvgLabel text="Avg" count={Math.round(metric.data.avg)} unit="ms" />
+                <AvgLabel text="Avg" count={Math.round(metric.data.value)} unit="ms" />
             </div>
             <Scale colors={Styles.colors} />
             <div className="map-target"></div>
             <div
-              style={{
-                height: '234px',
-                width: '100%',
-                margin: '0 auto',
-                display: 'flex',
-              }}
-              ref={ wrapper }
+                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}
-              />
+                <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>Avg: <strong>{dataMap[pointedLocation.id] ? numberWithCommas(parseInt(dataMap[pointedLocation.id].avg)) : 0}</strong></div>
-                </>
-              )}
-					  </div>
+                {pointedLocation && (
+                    <>
+                        <div>{pointedLocation.name}</div>
+                        <div>
+                            Avg: <strong>{dataMap[pointedLocation.id] ? numberWithCommas(parseInt(dataMap[pointedLocation.id].value)) : 0}</strong>
+                        </div>
+                    </>
+                )}
+            </div>
         </NoContent>
     );
 }
 
-export default observer(SpeedIndexByLocation);
+export default observer(SpeedIndexByLocation);

frontend/app/components/Dashboard/Widgets/common/AvgLabel.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { numberWithCommas } from 'App/utils';
 
-const AvgLabel = ({ className, text, count, unit}) =>
+const AvgLabel = ({ className = '', text, count, unit}) =>
     <div className={className}>
       <span className="text-sm color-gray-medium">{text}</span>
       <span className="text-2xl ml-1 font-medium">