Re-render latency chart

Author: Umius-Brian

app/charts/latency-chart.jsx

@@ -1,37 +1,46 @@
 import React, { useContext } from 'react';
 import { Line } from 'react-chartjs-2';
 import HealthContext from '../context/DetailsContext';
+import Plot from 'react-plotly.js';
 
 const LatencyChart = (props) =>  {
-  const xAxis = [];
-  const yAxis = [];
   const healthData = useContext(HealthContext).detailData;
-  for (let i = 0; i < healthData.length; i++) {
-    const element = healthData[i];
-    if (element.currentmicroservice === props.service || element.currentMicroservice === props.service) {
-      xAxis.push(i);
-      yAxis.push(element.latency);
+  const createChart = () => {
+    const xAxis = [];
+    const yAxis = [];
+    for (let i = 0; i < healthData.length; i++) {
+      const element = healthData[i];
+      if (element.currentmicroservice === props.service || element.currentMicroservice === props.service) {
+        xAxis.push(i);
+        yAxis.push(element.latency);
+      }
     }
-  }
-  const chartData = {
-    datasets: [
-      {
-        label: `CPU latency of ${props.service}`,
-        data: yAxis,
-        backgroundColor: ['rgb(254, 255, 0)'],
-      },
-    ],
-    options: {
-      xAxisID: 'TBD',
-      yAxisID: 'TBD',
-    },
-    labels: xAxis,
-  };
-  return (
-    <div>
-      <Line data={chartData} />
-    </div>
-  );
+
+    return (
+      <Plot
+        data = {[{
+          type: 'scatter',
+          x: xAxis,
+          y: yAxis,
+          mode: 'lines',
+          rangemode: 'nonnegative',
+          name: `${props.service} CPU Latency`,
+          marker: {
+              color: '#155263',
+              size: 1
+          }
+        }]}
+        layout = {{
+          width: 500,
+          height: 500,
+          paper_bgcolor: '#fffbe0',
+          plot_bgcolor: '#fffbe0',
+          showlegend: true
+        }}
+      />
+    )};
+
+  return <div>{createChart()}</div>;
 };
 
 export default LatencyChart;

app/charts/plotly_copy_latency.jsx

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import { Line } from 'react-chartjs-2';
+import HealthContext from '../context/DetailsContext';
+
+const LatencyChart = (props) =>  {
+  const xAxis = [];
+  const yAxis = [];
+  const healthData = useContext(HealthContext).detailData;
+  for (let i = 0; i < healthData.length; i++) {
+    const element = healthData[i];
+    if (element.currentmicroservice === props.service || element.currentMicroservice === props.service) {
+      xAxis.push(i);
+      yAxis.push(element.latency);
+    }
+  }
+  const chartData = {
+    datasets: [
+      {
+        label: `CPU latency of ${props.service}`,
+        data: yAxis,
+        backgroundColor: ['rgb(254, 255, 0)'],
+      },
+    ],
+    options: {
+      xAxisID: 'TBD',
+      yAxisID: 'TBD',
+    },
+    labels: xAxis,
+  };
+  return (
+    <div>
+      <Line data={chartData} />
+    </div>
+  );
+};
+
+export default LatencyChart;

app/charts/processes-chart.jsx

@@ -90,7 +90,6 @@ const ProcessesChart = (props) => {
       />
     )};
 
-
   return <div>{createChart()}</div>;
 };
 

user/settings.json

@@ -1 +1 @@
-{"setupRequired":false,"services":[["asdf","MongoDB","mongodb+srv://alon:[email protected]/test?retryWrites=true&w=majority"]],"splash":true}
+{"setupRequired":false,"services":[["asdf","MongoDB","mongodb+srv://alon:[email protected]/test?retryWrites=true&w=majority"]],"splash":false}