Merged for final update

Author: Justinlkirk

This is the Command for the window

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Splash from './components/Splash';
 import DashboardContainer from './containers/DashboardContainer';
+import './stylesheets/scrollBar.scss';
 
 const App: React.FC = React.memo(() => {
   const [firstVisit, setFirstVisit] = useState(true);

app/App.tsx

@@ -76,6 +76,7 @@ const LatencyChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colou
     return (
       <Plot
         data={[...plotlyData]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Latency',
           ...sizeSwitch,
@@ -95,7 +96,7 @@ const LatencyChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colou
           },
           xaxis: {
             title: 'Time',
-            tickmode: 'linear',
+            tickmode: 'auto',
             tick0: 0,
             dtick: 10,
             rangemode: 'nonnegative',

app/charts/LatencyChart.tsx

@@ -129,6 +129,7 @@ const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colour
     return (
       <Plot
         data={[...plotlyData.flat()]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Memory Traces',
           ...sizeSwitch,
@@ -143,13 +144,13 @@ const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colour
             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/MemoryChart.tsx

@@ -136,6 +136,7 @@ const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, col
     return (
       <Plot
         data={[...plotlyData.flat()]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Process Overview',
           ...sizeSwitch,
@@ -156,6 +157,7 @@ const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, col
             },
           },
           xaxis: {
+            tickmode: 'auto',
             dtick: 10,
             title: 'Time Elapsed (min)',
           },

app/charts/ProcessesChart.tsx

@@ -72,7 +72,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colourG
         x: data[0][0],
         y: dataArr[1],
         type: 'scatter',
-        mode: 'lines+markers',
+        mode: 'lines',
         marker: {
           color: hashedColor,
         },
@@ -84,6 +84,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colourG
     return (
       <Plot
         data={[...plotlyData]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Speed Chart',
           ...sizeSwitch,
@@ -94,7 +95,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colourG
           },
           xaxis: {
             title: 'Time (EST)',
-            tickmode: 'linear',
+            tickmode: 'auto',
             dtick: 2,
             tickformat: '%H %M %p',
             rangemode: 'nonnegative',
@@ -112,7 +113,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colourG
           showlegend: true,
           legend: {
             orientation: 'h',
-            xanchor: 'center',
+            xanchor: 'auto',
             x: 0.5,
             y: 5,
           },

app/charts/SpeedChart.tsx

@@ -14,10 +14,28 @@ interface SoloStyles {
   width: number;
 }
 
+<<<<<<< HEAD
 const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(
   ({ sizing, colourGenerator }) => {
     const { healthData } = useContext(HealthContext);
     const [data, setData] = useState<Array<Array<string | (string | number)[]>>>([]);
+=======
+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[] }) => {
+          let timeArr: string[] = [];
+          // perform this when we 'setTime'
+          if (service.time !== undefined) {
+            timeArr = service.time.map((el: any) => moment(el).format('kk:mm:ss'));
+          }
+>>>>>>> will/style_tweaks
 
     useEffect(() => {
       if (healthData.length) {
@@ -43,6 +61,7 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(
 
     const [solo, setSolo] = useState<SoloStyles | null>(null);
 
+<<<<<<< HEAD
     setInterval(() => {
       if (solo !== soloStyle) {
         setSolo(soloStyle);
@@ -126,6 +145,79 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(
       <div className="chart" data-testid="Temperature Chart">
         {createChart()}
       </div>
+=======
+  setInterval(() => {
+    if (solo !== soloStyle) {
+      setSolo(soloStyle);
+    }
+  }, 20);
+
+  const createChart = () => {
+    let plotlyData: {
+      name: any;
+      x: any;
+      y: any;
+      type: any;
+      fillcolor: any;
+      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],
+        y: dataArr[1],
+        fillcolor: randomColor,
+        type: 'scatter',
+        mode: 'lines',
+        showlegend: true,
+      };
+    });
+
+    const sizeSwitch = sizing === 'all' ? all : solo;
+
+    return (
+      <Plot
+        data={[...plotlyData]}
+        config={{ responsive: true, displayModeBar: false }}
+        layout={{
+          title: 'CPU Temperature',
+          ...sizeSwitch,
+          font: {
+            color: '#444d56',
+            size: 11.5,
+            family: 'Roboto',
+          },
+          paper_bgcolor: 'white',
+          plot_bgcolor: 'white',
+          legend: {
+            orientation: 'h',
+            xanchor: 'center',
+            x: 0.5,
+            y: 5,
+          },
+          xaxis: {
+            title: 'Time (EST)',
+            tickmode: 'auto',
+            tickformat: '%H %M %p',
+            mirror: false,
+            ticks: 'outside',
+            showline: true,
+          },
+          yaxis: {
+            title: `Temperature (\xB0C)`,
+            rangemode: 'nonnegative',
+            mirror: false,
+            ticks: 'outside',
+            showline: true,
+          },
+        }}
+      />
+>>>>>>> will/style_tweaks
     );
   }
 );

app/charts/TemperatureChart.tsx

@@ -33,6 +33,7 @@ const TrafficChart = React.memo(() => {
             showlegend: false,
           },
         ]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Server Traffic',
           height: 300,

app/charts/TrafficChart.tsx

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

app/charts/sizeSwitch.js

@@ -21,7 +21,11 @@ const Contact = React.memo(() => {
               Please feel free to provide any feedback, concerns, or comments.
             </p>
             <p style={currentMode}>
+<<<<<<< HEAD
               You can find issues the team is currently addressing &nbsp;
+=======
+              You can find issues the team is currently working on{' '}
+>>>>>>> will/style_tweaks
               <a
                 style={currentMode}
                 id="issueLink"
@@ -38,38 +42,32 @@ const Contact = React.memo(() => {
         <div className="email-container">
           <form>
             <label style={currentMode} htmlFor="fname">
-              First Name: &nbsp;
+              First Name:
+              <input type="text" id="fname" name="firstname" placeholder="Your name.." />
             </label>
-            <input type="text" id="fname" name="firstname" placeholder="Your name.." />
-            <br />
             <label style={currentMode} htmlFor="lname">
-              Last Name: &nbsp;
+              Last Name:{' '}
+              <input type="text" id="lname" name="lastname" placeholder="Your last name.." />
             </label>
-            <input type="text" id="lname" name="lastname" placeholder="Your last name.." />
-            <br />
             <label style={currentMode} htmlFor="email">
-              E-mail: &nbsp;
+              E-mail:
+              <input type="text" id="email" name="email" placeholder="Your e-mail address.." />
             </label>
-            <input type="text" id="email" name="email" placeholder="Your e-mail address.." />
-            <br />
             <label style={currentMode} htmlFor="subject">
-              Subject: &nbsp;
+              Subject:
+              <input type="text" id="subject" name="subject" placeholder="Subject" />
             </label>
-            <input type="text" id="subject" name="subject" placeholder="Subject" />
-            <br />
             <label style={currentMode} id="messageLabel" htmlFor="message">
               Message:{' '}
               <span>
                 <textarea id="message" name="message" placeholder="Write something.." />
               </span>
             </label>
 
-            <br />
             <label style={currentMode} htmlFor="myfile">
               Select a file:{' '}
+              <input style={currentMode} type="file" id="myfile" name="myfile" accept="image/*" />
             </label>
-            <input style={currentMode} type="file" id="myfile" name="myfile" accept="image/*" />
-            <br />
             <input style={currentMode} id="contact-submit" type="submit" value="Submit" />
           </form>
         </div>