Re-render all charts to friendly UI

Author: Umius-Brian

app/charts/latency-chart.jsx

@@ -40,6 +40,11 @@ const LatencyChart = (props) =>  {
               orientation: 'h',
               xanchor: 'center',
               x: .5
+          },
+          xaxis: {
+            tickmode: 'linear',
+            tick0: 0,
+            dtick: 2000
           }
         }}
       />

app/charts/memory-chart.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { Bar } from 'react-chartjs-2';
 import HealthContext from '../context/DetailsContext';
+import Plot from 'react-plotly.js';
 
 const MemoryChart = (props) => {
   const healthData = useContext(HealthContext).detailData;
@@ -31,37 +31,60 @@ const MemoryChart = (props) => {
       }
     }
 
-    const chartData = {
-      datasets: [
-        {
-          label: 'Free Memory',
-          backgroundColor: 'rgb(2, 210, 249)',
-          data: free,
-          // showLine: true,
-        },
-        {
-          label: 'Used Memory',
-          backgroundColor: 'rgb(239, 91, 145)',
-          data: used,
-          // showLine: true,
-        },
-        {
-          label: 'Active Memory',
-          backgroundColor: 'rgb(182, 219, 26)',
-          data: active,
-          // showLine: true,
-        },
-        {
-          label: 'Total Memory',
-          backgroundColor: 'rgb(252, 170, 52)',
-          data: total,
-          // showLine: true,
-        },
-      ],
-      labels: xAxis,
-    };
-
-    return <Bar data={chartData} />;
+    return (
+      <Plot
+        data = {[
+          {
+            type: 'scatter',
+            fill: 'tozeroy',
+            fillcolor: 'rgb(14, 49, 80)',
+            mode: 'none',
+            x: {autorange: true},
+            y: free,
+            name: 'Free Memory',
+            rangemode: 'nonnegative'
+          },
+          {
+            type: 'scatter',
+            fill: 'tozeroy',
+            fillcolor: 'rgba(255, 64, 87, .3)',
+            mode: 'none',
+            x: {autorange: true},
+            y: used,
+            name: 'Used Memory',
+            rangemode: 'nonnegative'
+          },
+          {
+            type: 'scatter',
+            fill: 'tozeroy',
+            fillcolor: 'rgba(144, 0, 72, .4)',
+            mode: 'none',
+            x: {autorange: true},
+            y: active,
+            name: 'Active Memory',
+            rangemode: 'nonnegative'
+          },
+          {label: xAxis},
+        ]}
+        layout = {{
+          width: 500,
+          height: 500,
+          paper_bgcolor: '#fffbe0',
+          plot_bgcolor: '#fffbe0',
+          legend: {
+            itemsizing: 'constant',
+            orientation: 'h',
+            xanchor: 'center',
+            x: .5
+          },
+          xaxis: {
+            tickmode: 'linear',
+            tick0: 0,
+            dtick: 500,
+          },
+        }}
+      />
+    )
   };
 
   return <div>{createChart()}</div>;

app/charts/plotly_copy_memory.jsx

@@ -0,0 +1,70 @@
+import React, { useContext } from 'react';
+import { Bar } from 'react-chartjs-2';
+import HealthContext from '../context/DetailsContext';
+
+const MemoryChart = (props) => {
+  const healthData = useContext(HealthContext).detailData;
+
+  const createChart = () => {
+    const xAxis = [];
+    const free = [];
+    const used = [];
+    const active = [];
+    const total = [];
+
+    for (let i = 0; i < healthData.length; i += 1) {
+      xAxis.push(i);
+      // If Mongo
+      if (healthData[i].currentMicroservice === props.service) {
+        free.push(healthData[i].freeMemory);
+        active.push(healthData[i].activeMemory);
+        used.push(healthData[i].usedMemory);
+        total.push(healthData[i].totalMemory);
+      }
+
+      // If SQL
+      if (healthData[i].currentmicroservice === props.service) {
+        free.push(healthData[i].freememory);
+        active.push(healthData[i].activememory);
+        used.push(healthData[i].usedmemory);
+        total.push(healthData[i].totalmemory);
+      }
+    }
+
+    const chartData = {
+      datasets: [
+        {
+          label: 'Free Memory',
+          backgroundColor: 'rgb(2, 210, 249)',
+          data: free,
+          // showLine: true,
+        },
+        {
+          label: 'Used Memory',
+          backgroundColor: 'rgb(239, 91, 145)',
+          data: used,
+          // showLine: true,
+        },
+        {
+          label: 'Active Memory',
+          backgroundColor: 'rgb(182, 219, 26)',
+          data: active,
+          // showLine: true,
+        },
+        {
+          label: 'Total Memory',
+          backgroundColor: 'rgb(252, 170, 52)',
+          data: total,
+          // showLine: true,
+        },
+      ],
+      labels: xAxis,
+    };
+
+    return <Bar data={chartData} />;
+  };
+
+  return <div>{createChart()}</div>;
+};
+
+export default MemoryChart;

app/charts/processes-chart.jsx

@@ -79,7 +79,7 @@ const ProcessesChart = (props) => {
             color: '#ff165d',
             size: 3
           }},
-        {labels: communicationLabel},
+        {label: communicationLabel},
         ]}
         layout = {{
           width: 500,

app/charts/temperature-chart.jsx

@@ -29,8 +29,7 @@ const TemperatureChart = (props) => {
         data = {[{
           type: 'scatter',
           fill: 'tozeroy',
-          fillcolor: 'rgba(240, 138, 93, .5)',
-          line: {shape: 'spline', smoothing: 1.3},
+          fillcolor: 'rgba(29, 39, 134, .5)',
           mode: 'none',
           x: yAxis,
           y: xAxis,
@@ -48,6 +47,11 @@ const TemperatureChart = (props) => {
               orientation: 'h',
               xanchor: 'center',
               x: .5
+            },
+            xaxis: {
+            tickmode: 'linear',
+            tick0: 0,
+            dtick: 2000
             }
           }
         }