Merge pull request #12 from oslabs-beta/dev

Dev

Author: williamowen65

.eslintrc.json

@@ -1,4 +1,9 @@
 {
+  "globals": {
+    "NodeJS": true,
+    "JSX": true,
+    "Electron": true
+  },
   "plugins": ["react", "prettier"],
   "parser": "babel-eslint",
   "parserOptions": {
@@ -16,6 +21,7 @@
   },
   "extends": ["airbnb", "eslint:recommended", "plugin:react/recommended", "prettier"],
   "rules": {
+    "react/display-name": "off",
     "prettier/prettier": "error",
     "no-unused-vars": [
       "warn",
@@ -35,6 +41,28 @@
     "react/no-array-index-key": "warn",
     "no-restricted-syntax": "off",
     "guard-for-in": "off",
-    "no-param-reassign": "off"
+    "no-param-reassign": "off",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never",
+        "mjs": "never"
+      }
+    ]
+  },
+  "settings": {
+    "import/extensions": [".js", ".mjs", ".jsx", ".ts", ".tsx"],
+    // "import/parsers": {
+    //   "@typescript-eslint/parser": [".ts", ".tsx"]
+    // },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
   }
-}
+}

.gitignore

@@ -44,5 +44,4 @@ __tests__/**/__snapshots__
 .Spotlight-V100
 .Trashes
 ehthumbs.db
-Thumbs.db
-
+Thumbs.db

app/assets/search.svg

@@ -1,28 +1,99 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Plot from 'react-plotly.js';
+import moment from 'moment';
 import { HealthContext } from '../context/HealthContext';
+import { all, solo as soloStyle } from './sizeSwitch';
 
-const LatencyChart = React.memo(() => {
+interface GraphsContainerProps {
+  sizing: string;
+}
+
+interface SoloStyles {
+  height: number;
+  width: number;
+}
+
+const LatencyChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
   const { healthData } = useContext(HealthContext);
+  const [data, setData] = useState<Array<Array<string | (string | number)[]>>>([]);
+
+useEffect(() => {
+    if (healthData.length) {
+      const tempArr: ((string | number)[] | string)[][] = [];
+      // loop over each
+      healthData.forEach(
+        (service: { 
+          time: string[]; 
+          latency: (string | number)[]; 
+          service: string[] 
+        }) => {
+          let timeArr: string[] = [];
+          // perform this when we 'setTime'
+          if (service.time !== undefined) {
+            timeArr = service.time.map((el: any) => moment(el).format('kk:mm:ss'));
+          }
+
+          const temp: [string[], (string | number)[], string] = [
+            timeArr,
+            service.latency,
+            service.service[0],
+          ];
+          tempArr.push(temp);
+        }
+      );
+      setData(tempArr);
+    }
+  }, [healthData]);
+
+  // FOR CHECKING
+  // useEffect(() => {
+  //   console.log(data);
+  // }, [data]);
+
+  const [solo, setSolo] = useState<SoloStyles | null>(null);
+
+  setInterval(() => {
+    if (solo != soloStyle) {
+      setSolo(soloStyle);
+    }
+  }, 20);
 
   const createChart = () => {
     const yAxis: Array<number> = healthData.latency;
 
+    let plotlyData: {
+      name: any;
+      x: any;
+      y: any;
+      type: any;
+      mode: any;
+      marker: { color: string };
+    }[] = [];
+    
+    plotlyData = data.map(dataArr => {
+      // eslint-disable-next-line no-bitwise
+      const randomColor = `#${(((1 << 24) * Math.random()) | 0).toString(16)}`;
+      
+      return {
+        name: dataArr[2],
+        x: data[0][0],
+        y: dataArr[1],
+        type: 'scattergl',
+        mode: 'lines',
+        marker: { color: randomColor }
+      };
+    });
+
+    
+    const sizeSwitch = sizing === 'all' ? all : solo;
+
+
     return (
       <Plot
-        data={[
-          {
-            name: 'CPU Latency',
-            type: 'scattergl',
-            y: yAxis,
-            mode: 'lines',
-            marker: { color: '#fc4039' },
-          },
-        ]}
+        data={[...plotlyData]}
         layout={{
           title: 'Latency',
-          height: 300,
-          width: 300,
+          ...sizeSwitch,
           font: {
             color: '#444d56',
             size: 11.5,
@@ -38,7 +109,7 @@ const LatencyChart = React.memo(() => {
             y: 5,
           },
           xaxis: {
-            title: 'Time Elapsed (min)',
+            title: 'Time',
             tickmode: 'linear',
             tick0: 0,
             dtick: 10,
@@ -56,7 +127,7 @@ const LatencyChart = React.memo(() => {
     );
   };
 
-  return <div className="chart">{createChart()}</div>;
+  return <div className="chart">{solo && createChart()}</div>;
 });
 
 export default LatencyChart;