remove chart buttons, fix tick space, and development mode for what to load in main.js

Author: williamowen65

__tests__2022/test_settings.json

@@ -1 +1 @@
-{"setupRequired":false,"services":[["myPostgres","SQL","postgres://zwezmnqm:[email protected]:5432/zwezmnqm","Online bookstore with that keeps track of orders and customers","Jun 28, 2020 4:58 PM"],["ToddDB","MongoDB","mongodb+srv://tdwolf6:[email protected]/Chronos?retryWrites=true&w=majority","Web app deployed on AWS","Jul 3, 2020 7:12AM"]],"mode":"dark mode","splash":true,"landingPage":"login"}
+{"setupRequired":false,"services":[["myPostgres","SQL","postgres://zwezmnqm:[email protected]:5432/zwezmnqm","Online bookstore with that keeps track of orders and customers","Jun 28, 2020 4:58 PM"],["ToddDB","MongoDB","mongodb+srv://tdwolf6:[email protected]/Chronos?retryWrites=true&w=majority","Web app deployed on AWS","Jul 3, 2020 7:12AM"]],"mode":"dark mode","splash":true,"landingPage":"dashBoard"}

app/charts/LatencyChart.tsx

@@ -17,16 +17,12 @@ const LatencyChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) =>
   const { healthData } = useContext(HealthContext);
   const [data, setData] = useState<Array<Array<string | (string | number)[]>>>([]);
 
-useEffect(() => {
+  useEffect(() => {
     if (healthData.length) {
       const tempArr: ((string | number)[] | string)[][] = [];
       // loop over each
       healthData.forEach(
-        (service: { 
-          time: string[]; 
-          latency: (string | number)[]; 
-          service: string[] 
-        }) => {
+        (service: { time: string[]; latency: (string | number)[]; service: string[] }) => {
           let timeArr: string[] = [];
           // perform this when we 'setTime'
           if (service.time !== undefined) {
@@ -69,28 +65,27 @@ useEffect(() => {
       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 }
+        marker: { color: randomColor },
       };
     });
 
-    
     const sizeSwitch = sizing === 'all' ? all : solo;
 
-
     return (
       <Plot
         data={[...plotlyData]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Latency',
           ...sizeSwitch,
@@ -110,7 +105,7 @@ useEffect(() => {
           },
           xaxis: {
             title: 'Time',
-            tickmode: 'linear',
+            tickmode: 'auto',
             tick0: 0,
             dtick: 10,
             rangemode: 'nonnegative',

app/charts/MemoryChart.tsx

@@ -151,6 +151,7 @@ const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
     return (
       <Plot
         data={[...plotlyData.flat()]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Memory Traces',
           ...sizeSwitch,
@@ -165,13 +166,13 @@ const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
             orientation: 'h',
             xanchor: 'center',
             x: 0.5,
-            y: -1,
+            y: 0,
             font: {
               size: 9,
             },
           },
           xaxis: {
-            tickmode: 'linear',
+            tickmode: 'auto',
             tick0: 0,
             dtick: 10,
             title: 'Time Elapsed (min)',

app/charts/ProcessesChart.tsx

@@ -1,7 +1,7 @@
 /** FOR THE NEXT TEAM
  * You should probably take a look and fix the legend for the graph.
- * Can compare services, but hard to tell which points of data belong to which server. 
-*/
+ * Can compare services, but hard to tell which points of data belong to which server.
+ */
 
 /* eslint-disable no-useless-concat */
 import React, { useContext, useState, useEffect } from 'react';
@@ -54,8 +54,6 @@ const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) =
               service.sleepingprocesses,
             ];
             tempArr.push(temp);
-
-            
           }
         );
         setData(tempArr);
@@ -139,6 +137,7 @@ const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) =
     return (
       <Plot
         data={[...plotlyData.flat()]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Process Overview',
           ...sizeSwitch,
@@ -159,6 +158,7 @@ const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) =
             },
           },
           xaxis: {
+            tickmode: 'auto',
             dtick: 10,
             title: 'Time Elapsed (min)',
           },

app/charts/SpeedChart.tsx

@@ -74,7 +74,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
         x: data[0][0],
         y: dataArr[1],
         type: 'scatter',
-        mode: 'lines+markers',
+        mode: 'lines',
         marker: {
           color: randomColor,
         },
@@ -86,6 +86,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
     return (
       <Plot
         data={[...plotlyData]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Speed Chart',
           ...sizeSwitch,
@@ -96,7 +97,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
           },
           xaxis: {
             title: 'Time (EST)',
-            tickmode: 'linear',
+            tickmode: 'auto',
             dtick: 2,
             tickformat: '%H %M %p',
             // tickangle: 30,
@@ -116,7 +117,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
           showlegend: true,
           legend: {
             orientation: 'h',
-            xanchor: 'center',
+            xanchor: 'auto',
             x: 0.5,
             y: 5,
           },

app/charts/TemperatureChart.tsx

@@ -16,17 +16,13 @@ interface SoloStyles {
 const TemperatureChart: 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[]; 
-          cputemp: (string | number)[]; 
-          service: string[] 
-        }) => {
+        (service: { time: string[]; cputemp: (string | number)[]; service: string[] }) => {
           let timeArr: string[] = [];
           // perform this when we 'setTime'
           if (service.time !== undefined) {
@@ -47,16 +43,13 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(({ sizing })
 
   const [solo, setSolo] = useState<SoloStyles | null>(null);
 
-    setInterval(() => {
-      if (solo !== soloStyle) {
-        setSolo(soloStyle);
-      }
-    }, 20);
-
+  setInterval(() => {
+    if (solo !== soloStyle) {
+      setSolo(soloStyle);
+    }
+  }, 20);
 
   const createChart = () => {
-
-    
     let plotlyData: {
       name: any;
       x: any;
@@ -66,11 +59,11 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(({ sizing })
       mode: any;
       showlegend: any;
     }[] = [];
-    
+
     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],
@@ -81,15 +74,13 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(({ sizing })
         showlegend: true,
       };
     });
-    
+
     const sizeSwitch = sizing === 'all' ? all : solo;
 
     return (
       <Plot
-        data={[
-         ...plotlyData
-        ]}
-        config={{ responsive: true }}
+        data={[...plotlyData]}
+        config={{ responsive: true, displayModeBar: false }}
         layout={{
           title: 'CPU Temperature',
           ...sizeSwitch,
@@ -108,7 +99,7 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(({ sizing })
           },
           xaxis: {
             title: 'Time (EST)',
-            tickmode: 'linear',
+            tickmode: 'auto',
             tickformat: '%H %M %p',
             mirror: false,
             ticks: 'outside',

app/charts/TrafficChart.tsx

@@ -38,6 +38,7 @@ const TrafficChart = React.memo(() => {
             showlegend: false,
           },
         ]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Server Traffic',
           height: 300,
@@ -55,7 +56,7 @@ const TrafficChart = React.memo(() => {
             x: 0.5,
             y: 5,
           },
-          yaxis: { 
+          yaxis: {
             rangemode: 'nonnegative',
             title: 'Times Server Pinged',
             showline: true,

app/charts/sizeSwitch.js

@@ -11,8 +11,8 @@ window.addEventListener('resize', () => {
 });
 
 export const all = {
-  height: 300,
-  width: 300,
+  height: 400,
+  width: 400,
 };
 
 export let solo = {

electron/Main.ts

@@ -30,12 +30,13 @@ const createWindow = () => {
     },
   });
 
-  // Development: load the application window to port 8080
-  win.loadURL('http://localhost:8080/');
-
-  //Production
-  // win.loadFile(path.resolve('./resources/app/index.html').replace(/\\/g, '/'));
-
+  if (process.env.NODE_ENV === 'development') {
+    // Development: load the application window to port 8080
+    win.loadURL('http://localhost:8080/');
+  } else {
+    //Production
+    win.loadFile(path.resolve('./resources/app/index.html').replace(/\\/g, '/'));
+  }
   ipc.on('max', () => {
     if (!win.isMaximized()) win.maximize();
     else win.unmaximize();

settings.json

@@ -1 +1,22 @@
-{"setupRequired":false,"services":[["myPostgres","SQL","postgres://zwezmnqm:[email protected]:5432/zwezmnqm","Online bookstore with that keeps track of orders and customers","Jun 28, 2020 4:58 PM"],["ToddDB","MongoDB","mongodb+srv://tdwolf6:[email protected]/Chronos?retryWrites=true&w=majority","Web app deployed on AWS","Jul 3, 2020 7:12AM"]],"mode":"dark mode","splash":true,"landingPage":"dashBoard"}
+{
+  "setupRequired": false,
+  "services": [
+    [
+      "myPostgres",
+      "SQL",
+      "postgres://zwezmnqm:[email protected]:5432/zwezmnqm",
+      "Online bookstore with that keeps track of orders and customers",
+      "Jun 28, 2020 4:58 PM"
+    ],
+    [
+      "ToddDB",
+      "MongoDB",
+      "mongodb+srv://tdwolf6:[email protected]/Chronos?retryWrites=true&w=majority",
+      "Web app deployed on AWS",
+      "Jul 3, 2020 7:12AM"
+    ]
+  ],
+  "mode": "dark mode",
+  "splash": true,
+  "landingPage": "dashBoard"
+}