Re-render temperature chart

Author: Umius-Brian

app/charts/latency-chart.jsx

@@ -5,9 +5,11 @@ import Plot from 'react-plotly.js';
 
 const LatencyChart = (props) =>  {
   const healthData = useContext(HealthContext).detailData;
+
   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) {
@@ -27,7 +29,6 @@ const LatencyChart = (props) =>  {
           name: `${props.service} CPU Latency`,
           marker: {
               color: '#155263',
-              size: 1
           }
         }]}
         layout = {{
@@ -38,7 +39,8 @@ const LatencyChart = (props) =>  {
           showlegend: true
         }}
       />
-    )};
+    )
+  };
 
   return <div>{createChart()}</div>;
 };

app/charts/plotly_copy_temperature.jsx

@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+import { Line } from 'react-chartjs-2';
+import HealthContext from '../context/DetailsContext';
+
+const TemperatureChart = (props) => {
+  const healthData = useContext(HealthContext).detailData;
+
+  const createChart = () => {
+    const yAxis = [];
+    const xAxis = [];
+    for (let i = 0; i < healthData.length; i += 1) {
+      const element = healthData[i];
+      // If Mongo
+      if ((element.currentMicroservice === props.service) && element.cpuTemperature) {
+        yAxis.push(i);
+        xAxis.push(element.cpuTemperature);
+      }
+
+      // If SQL
+      if ((element.currentmicroservice === props.service) && element.cputemperature) {
+        yAxis.push(i);
+        xAxis.push(element.cputemperature);
+      }
+    }
+
+    const chartData = {
+      datasets: [
+        {
+          label: 'Temperature Data',
+          data: xAxis,
+          backgroundColor: [
+            'rgb(2, 210, 249)',
+          ],
+        },
+      ],
+      labels: yAxis,
+    };
+    return <Line data={chartData} />;
+  };
+
+  return <div>{createChart()}</div>;
+};
+
+export default TemperatureChart;

app/charts/processes-chart.jsx

@@ -4,6 +4,7 @@ import HealthContext from '../context/DetailsContext';
 
 const ProcessesChart = (props) => {
   const healthData = useContext(HealthContext).detailData;
+
   const createChart = () => {
     const communicationLabel = [];
     const totalProcesses = [];
@@ -88,7 +89,8 @@ const ProcessesChart = (props) => {
           legend: {itemsizing: 'constant'}
         }}
       />
-    )};
+    )
+  };
 
   return <div>{createChart()}</div>;
 };

app/charts/temperature-chart.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Line } from 'react-chartjs-2';
+import Plot from 'react-plotly.js';
 import HealthContext from '../context/DetailsContext';
 
 const TemperatureChart = (props) => {
@@ -8,6 +8,7 @@ const TemperatureChart = (props) => {
   const createChart = () => {
     const yAxis = [];
     const xAxis = [];
+
     for (let i = 0; i < healthData.length; i += 1) {
       const element = healthData[i];
       // If Mongo
@@ -23,19 +24,28 @@ const TemperatureChart = (props) => {
       }
     }
 
-    const chartData = {
-      datasets: [
-        {
-          label: 'Temperature Data',
-          data: xAxis,
-          backgroundColor: [
-            'rgb(2, 210, 249)',
-          ],
-        },
-      ],
-      labels: yAxis,
-    };
-    return <Line data={chartData} />;
+    return (
+      <Plot
+        data = {[{
+          type: 'scatter',
+          x: yAxis,
+          y: xAxis,
+          mode: 'lines',
+          rangemode: 'nonnegative',
+          name: 'CPU Temperature',
+          marker: {
+            color: '#155200',
+          }
+        }]}
+        layout = {{
+          width: 500,
+          height: 500,
+          paper_bgcolor: '#fffbe0',
+          plot_bgcolor: '#fffbe0',
+          showlegend: true
+        }}
+      />
+    )
   };
 
   return <div>{createChart()}</div>;