Re-render request, response, and speed charts

Author: Umius-Brian

.gitignore

@@ -1,5 +1 @@
-node_modules
-.eslintrc.js
-package-lock.json
-settings.json
-.DS_Store
+node_modules

app/charts/plotly_customers.jsx app/charts/plotly_copy_request.jsxapp/charts/plotly_customers.jsx renamed to app/charts/plotly_copy_request.jsx

@@ -29,10 +29,22 @@ const RequestTypesChart = (props) => {
           values: Object.values(requestObj),
           labels: ['DELETE', 'GET', 'PATCH', 'POST', 'PUSH', 'PUT'],
           type: 'pie',
-          }]}
+          marker: {
+            'colors': [
+              '#f38181',
+              '#fce38a',
+              '#fcbad3',
+              '#95e1d3',
+              '#a8d8ea',
+              '#aa96da',
+            ]
+          },
+        }]}
         layout = {{
           height: 500,
-          width: 500
+          width: 500,
+          displaylogo: false,
+          paper_bgcolor: '#fffbe0'
         }}
       />
     )

app/charts/plotly_copy_speed.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Doughnut } from 'react-chartjs-2';
+import Plot from 'react-plotly.js';
 import CommunicationsContext from '../context/OverviewContext';
 
 const ResponseCodeChart = (props) => {
@@ -53,23 +53,31 @@ const ResponseCodeChart = (props) => {
       }
     }
 
-    const chartData = {
-      datasets: [
-        {
-          data: Object.values(responseCodes),
-          backgroundColor: [
-            'rgb(2, 210, 249)',
-            'rgb(198, 42, 177)',
-            'rgb(252, 170, 52)',
-            'rgb(239, 91, 145)',
-            'rgb(182, 219, 26)',
-            'rgb(254, 255, 0)',
-          ],
-        },
-      ],
-      labels: ['100-199', '200-299', '300-399', '400-499', '500-599', 'Null'],
-    };
-    return <Doughnut data={chartData} />;
+    return (
+      <Plot
+      data = {[{
+        values: Object.values(responseCodes),
+        labels: ['Informational 1xx', 'Successful 2xx', 'Redirection 3xx', 'Client Error 4xx', 'Server Error 5xx'],
+        type: 'pie',
+        marker: {
+          'colors': [
+              '#f38181',
+              '#fce38a',
+              '#fcbad3',
+              '#95e1d3',
+              '#a8d8ea',
+              '#aa96da',
+            ]
+          }
+        }]}
+        layout = {{
+          height: 500,
+          width: 500,
+          displaylogo: false,
+          paper_bgcolor: '#fffbe0'
+        }}
+      />
+    )
   };
   return <div>{createChart()}</div>;
 };

app/charts/request-type-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 SpeedChart = (props) => {
@@ -24,24 +24,56 @@ const SpeedChart = (props) => {
       }
     }
 
-    const chartData = {
-      datasets: [
-        {
-          label: `CPU Speed of ${props.service}`,
-          data: yAxis,
-          backgroundColor: [
-            'rgb(2, 210, 249)',
-          ],
-        },
-      ],
-      options: {
-      },
-      xAxisID: 'Speed',
-      yAxisID: 'Communicaton',
-      labels: xAxis,
-    };
-
-    return <Line data={chartData} />;
+    return (
+      <Plot
+        data = {[{
+          domain: { x: [0, 1], y: [0, 1] },
+          type: 'indicator',
+          value: yAxis[length],
+          title: {'text': "Speed Chart"},
+          delta: {'reference': 3.5, 'increasing': {'color': "mistyrose"}},
+          mode: "gauge+number+delta",
+          gauge: { axis: { range: [null, 7] },
+                  'tickwidth': 1,
+                  'tickcolor': "#fce38a",
+                  'bar': {'color': "#6eb6ff"},
+                  'bordercolor': "#a3de83",
+                  'steps': [
+                  {'range': [0, 3.5], 'color': '#fab57a'},
+                  {'range': [3.5, 5.3], 'color': '#edf798'}],
+                  'threshold': {
+                  'line': {'color': "red", 'width': 4},
+                  'thickness': 0.75,
+                  'value': 6}
+                    },
+        }]}
+        layout = {{
+          height: 500,
+          width: 500,
+          paper_bgcolor: '#fffbe0'
+        }}
+      />
+    )
+
+
+    // const chartData = {
+    //   datasets: [
+    //     {
+    //       label: `CPU Speed of ${props.service}`,
+    //       data: yAxis,
+    //       backgroundColor: [
+    //         'rgb(2, 210, 249)',
+    //       ],
+    //     },
+    //   ],
+    //   options: {
+    //   },
+    //   xAxisID: 'Speed',
+    //   yAxisID: 'Communicaton',
+    //   labels: xAxis,
+    // };
+
+    // return <Line data={chartData} />;
   };
 
   return <div>{createChart()}</div>;

app/charts/response-code-chart.jsx

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