fix(ui) - review fixes

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

@@ -46,7 +46,7 @@ function DomBuildingTime(props: Props) {
               /> */}
               <AvgLabel className="ml-auto" text="Avg" count={Math.round(metric.data.avg)} unit="ms" />
             </div>
-            <ResponsiveContainer height={ 200 } width="100%">
+            <ResponsiveContainer height={ 207 } width="100%">
               <AreaChart
                   data={ data.chart }
                   margin={ Styles.chartMargins }

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

@@ -1,27 +1,14 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { NoContent } from 'UI';
 import { Styles, AvgLabel } from '../../common';
 import Scale from './Scale';
-import { threeLetter } from 'App/constants/countries';
-// import { colorScale } from 'App/utils';
 import { observer } from 'mobx-react-lite';
-import { numberWithCommas } from 'App/utils';
+import { numberWithCommas, positionOfTheNumber } from 'App/utils';
 import WorldMap from "@svg-maps/world";
 import { SVGMap } from "react-svg-map";
-import "react-svg-map/lib/index.css";
 import stl from './SpeedIndexByLocation.css';
 import cn from 'classnames';
 
-const getPercentageOfAverage = (data, value: number) => {
-  const avg = data.reduce((acc, item) => acc + item.avg, 0) / data.length;
-  return Math.round((value / avg) * 100);
-}
-
-const numberPartBetweenRange = (value: any, max: number) => {
-  const minPart = value * max / 100
-  return Math.round(minPart);
-}
-
 interface Props {
     metric?: any
 }
@@ -33,24 +20,15 @@ function SpeedIndexByLocation(props: Props) {
     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);
         metric.data.chart.forEach((item: any) => {
-            item.percentage = getPercentageOfAverage(metric.data.chart, item.avg);
-            item.perNumber = numberPartBetweenRange(item.percentage, 5);
+            item.perNumber = positionOfTheNumber(min, max, item.avg, 5);
             data[item.userCountry.toLowerCase()] = item;
         });
         return data;
     }, [])
 
-    // const getSeries = data => {
-    //   const series: any[] = [];
-    //   data.forEach(item => {
-    //     const d = [threeLetter[item.userCountry], Math.round(item.avg)]
-    //     series.push(d)
-    //   })
-
-    //   return series;
-    // }
-
     const getLocationClassName = (location, index) => {
       const i = (dataMap[location.id] ? dataMap[location.id].perNumber : 0);
       const cls = stl["heat_index" + i];
@@ -98,7 +76,7 @@ function SpeedIndexByLocation(props: Props) {
             <div className="map-target"></div>
             <div
               style={{
-                height: '220px',
+                height: '234px',
                 width: '100%',
                 margin: '0 auto',
                 display: 'flex',

frontend/app/utils.js

@@ -1,5 +1,5 @@
 import JSBI from 'jsbi';
-// import { scale } from "d3";
+import chroma from "chroma-js";
 
 export function debounce(callback, wait, context = this) {
   let timeout = null;
@@ -195,9 +195,10 @@ export const hashProjectID = (id) => {
 
 
 export const colorScale = (values, colors) => {
-  const minValue = Math.min.apply(null, values);
-  const maxValue = Math.max.apply(null, values);
-  return []
+  // const minValue = Math.min.apply(null, values);
+  // const maxValue = Math.max.apply(null, values);
+  // return []
+  return chroma.scale(colors)
 
   // return scale.linear()
   //             .domain([minValue,maxValue])
@@ -239,4 +240,10 @@ export const sliceListPerPage = (list, page, perPage = 10) => {
   const start = page * perPage;
   const end = start + perPage;
   return list.slice(start, end);
+}
+
+export const positionOfTheNumber = (min, max, value, length) => {
+  const interval = (max - min) / length;
+  const position = Math.round((value - min) / interval);
+  return position;
 }

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@sentry/browser": "^5.21.1",
         "@svg-maps/world": "^1.0.1",
+        "chroma-js": "^2.4.2",
         "classnames": "^2.2.6",
         "codemirror": "^5.62.3",
         "copy-to-clipboard": "^3.3.1",
@@ -6974,6 +6975,11 @@
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
       "dev": true
     },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -30844,6 +30850,11 @@
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
       "dev": true
     },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",

frontend/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@sentry/browser": "^5.21.1",
     "@svg-maps/world": "^1.0.1",
+    "chroma-js": "^2.4.2",
     "classnames": "^2.2.6",
     "codemirror": "^5.62.3",
     "copy-to-clipboard": "^3.3.1",