Merged final updates

Co-authored-by: Alexander Holden <[email protected]>
Co-authored-by: William Owen <[email protected]>
Co-authored-by: Jessica Lee <[email protected]>

Author: 4 people

app/charts/RouteChart.jsx

@@ -162,7 +162,7 @@ const RouteChart = React.memo(() => {
   //   },
   // };
 
-  if (communicationsData.length) {
+  if (communicationsData[0].endpoint !== '/') {
     return (
       <div className="traceContainer">
         <span id="tracesTitle">Route Traces</span>

app/charts/TemperatureChart.tsx

@@ -14,28 +14,10 @@ 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) {
@@ -61,7 +43,6 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(({ sizing })
 
     const [solo, setSolo] = useState<SoloStyles | null>(null);
 
-<<<<<<< HEAD
     setInterval(() => {
       if (solo !== soloStyle) {
         setSolo(soloStyle);
@@ -104,7 +85,7 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(({ sizing })
       return (
         <Plot
           data={[...plotlyData]}
-          config={{ responsive: true }}
+          config={{ responsive: true, displayModeBar: false }}
           layout={{
             title: 'CPU Temperature',
             ...sizeSwitch,
@@ -123,7 +104,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',
@@ -145,79 +126,6 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(({ sizing })
       <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/components/Contact.tsx

@@ -21,11 +21,7 @@ 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"

app/containers/GraphsContainer.tsx

@@ -84,7 +84,8 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
     setChart(route);
   };
 
-  const stringToColour = (string: string) => {
+  const stringToColour = (string: string, recurses = 0) => {
+    if (recurses > 20) return string;
     function hashString(str: string) {
       let hash = 0;
       for (let i = 0; i < str.length; i++) {
@@ -103,7 +104,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
       const g = (num >>> 8) & 0xff;
       const b = num & 0xff;
       const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-      return yiq <= 50 ? stringToColour(color) : color;
+      return yiq <= 50 ? stringToColour(color, recurses + 1) : color;
     }
     for (let salt = 0; salt < 5; salt++) string = hashString(string);
     return contrastYiq(string);

app/stylesheets/GraphsContainer.scss

@@ -102,7 +102,7 @@ nav {
     &.selected {
       text-decoration: underline;
       text-underline-offset: 7px;
-      color: red;
+      color: rgb(95, 153, 240);
     }
     &:hover {
     }