Finished event chart render logic.

Added more type interfaces.

Author: jcpoirier20

app/charts/EventChart.tsx

@@ -3,24 +3,33 @@ import React, { useState } from 'react';
 import Plot from 'react-plotly.js';
 import { all, solo as soloStyle } from './sizeSwitch';
 
-interface ChartData {
-  value: string[];
-  time: string[];
-}
-
 interface EventChartProps {
   key: string;
   metricName: string;
-  chartData: ChartData
+  chartData: {
+    value: string[],
+    time: string[]
+  }
+  sizing: string;
+  colourGenerator: Function;
 }
 
 interface SoloStyles {
   height: number;
   width: number;
 }
 
+type PlotlyData = {
+  name: string;
+  x: string[];
+  y: string[];
+  type: string;
+  mode: string;
+  marker: { colors: string[] };
+};
+
 const EventChart: React.FC<EventChartProps> = React.memo(props => {
-  const { metricName, chartData  } = props;
+  const { metricName, chartData, sizing, colourGenerator } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);
 
   setInterval(() => {
@@ -29,36 +38,39 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
     }
   }, 20);
 
+  // makes time data human-readable, and reverses it so it shows up correctly in the graph
+  const prettyTimeInReverse = (timeArray: string[]): string[] => {
+    return timeArray.map((el: any) => moment(el).format('kk:mm:ss')).reverse();
+  };
+
+  // removes underscores from metric names to improve their look in the graph
+  const prettyMetricName = (metricName: string): string => {
+    const newName = metricName.replace(/kubernetes-cadvisor\/docker-desktop\//g, '');    
+    return newName.replace(/_/g, ' ');
+  };
+
   const createChart = () => {
-    const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
-    const reverseTimeArr = timeArr.reverse()
-    const hashedColour = colourGenerator(metric);
-    const newMetricName =  metric.replace("kubernetes-cadvisor/docker-desktop/", ""); // this will get rid of the long path
-    const re = /_/g;
-    let plotlyData: {
-      name: any;
-      x: any;
-      y: any;
-      type: any;
-      mode: any;
-      marker: { color: string };
-    };
-    plotlyData = {
-      name: metric,
-      x: reverseTimeArr,
-      y: valueList,
+    const prettyName = prettyMetricName(metricName);
+    const prettyTime = prettyTimeInReverse(chartData.time);
+  
+    const plotlyDataObject: PlotlyData = {
+      name: prettyName,
+      x: prettyTime,
+      y: chartData.value,
       type: 'scattergl',
       mode: 'lines',
-      marker: { color: hashedColour },
+      marker: {
+        colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
+      },
     };
     const sizeSwitch = sizing === 'all' ? all : solo;
 
     return (
       <Plot
-        data={[plotlyData]}
-        config={{ displayModeBar: false }}
+        data={[plotlyDataObject]}
+        config={{ displayModeBar: true }}
         layout={{
-          title: newMetricName.replace(re," "), // this will reaplce all the underscores in the graph titlke,
+          title: prettyName,
           ...sizeSwitch,
           font: {
             color: '#444d56',
@@ -69,10 +81,7 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
           plot_bgcolor: 'white',
           showlegend: true,
           legend: {
-            orientation: 'h',
-            xanchor: 'center',
-            x: 0.5,
-            y: 5,
+            orientation: 'v',
           },
           xaxis: {
             title: 'Time',
@@ -86,7 +95,7 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
           },
           yaxis: {
             rangemode: 'nonnegative',
-            title: metric,
+            title: prettyName,
           },
         }}
       />

app/charts/HealthChart.tsx

@@ -35,8 +35,8 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
   };
 
   // removes underscores from metric names to improve their look in the graph
-  const prettyMetricName = metricName => {
-    return metricName.replaceAll('_', ' ');
+  const prettyMetricName = (metricName: string): string => {
+    return metricName.replace(/_/g, ' ');
   };
 
   // pulls the current service names to be shown in the graph title from chartData
@@ -118,7 +118,7 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
           },
           yaxis: {
             rangemode: 'nonnegative',
-            title: `${dataType}`,
+            title: dataType,
           },
         }}
       />

app/components/TransferColumns.tsx

@@ -118,13 +118,6 @@ const TransferColumns = React.memo(() => {
     return pool;
   };
 
-  // Justin's alternative idea to  getCharts (b/c getCharts is just saving the user-selected metrics into QueryContext)
-  // getCharts takes data that already exists in state as an array of strings, and makes it into an array of objects, just to save it to QueryContext state
-  // the selectedMetrics from QueryContext is used in TransferColumns, EventContainer, GraphsContainer, and HealthContainer
-  // const saveSelectedMetrics = () => {
-  //   // iterate over the targetKeys array
-  // }
-
   const createSelectedMetricsList = () => {
     const temp: any[] = [];
     const categorySet = new Set();
@@ -214,7 +207,6 @@ const TransferColumns = React.memo(() => {
               metricIndeces.forEach(el => {
                 metrics.push(metricsPool[el].key);
               });
-              console.log('targetKeys is set to: ', metrics);
               setTargetKeys(metrics);
             }}
           />

app/containers/EventContainer.tsx

@@ -12,11 +12,23 @@ interface EventContainerProps {
 interface Params {
   service: string;
 }
+interface MetricObject {
+  [key: string]: {
+    value: string[],
+    time: string[]
+  }
+
+}
+
+interface EventDataObject {
+  [key: string]: MetricObject
+}
 
 const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
   const { eventData } = useContext(EventContext);
   const { selectedMetrics } = useContext(QueryContext);
   const { service } = useParams<keyof Params>() as Params;
+  const { sizing, colourGenerator } = props;
   // eventChartsArr contains all charts of all metrics
   const [eventChartsArr, setEventChartsArr] = useState<JSX.Element[]>([]);
 
@@ -28,7 +40,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
   to an instance of Grafana, and integrate Grafana's dashboard into Chronos to visualize the data.
   */
 
-  const filterSelectedEventMetricsandData = eventDataObj => {
+  const filterSelectedEventMetricsandData = (eventDataObj: EventDataObject): EventDataObject => {
     const filteredEventData = {};
     // there's only one element in the selected metrics array for now...
     // selectedMetrics is... [{Event: ['metric', 'names', 'as', 'strings']}]
@@ -51,7 +63,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
   };
 
   // iterate over the filtered event data to build an array of charts, then set the event charts array state
-  const generateEventCharts = filteredEventDataObj => {
+  const generateEventCharts = (filteredEventDataObj: EventDataObject): void => {
     const chartsArray: JSX.Element[] = [];
     const keymaker = () => {
       return Math.floor(Math.random() * 1000);
@@ -65,6 +77,8 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
             key={'E' + keymaker()}
             metricName={metricName}
             chartData={chartData}
+            sizing={sizing}
+            colourGenerator={colourGenerator}
           />
         );
       }

app/containers/GraphsContainer.tsx

@@ -146,7 +146,6 @@ const GraphsContainer: React.FC = React.memo(props => {
   };
 
   const HealthAndEventButtons: JSX.Element[] = getHealthAndEventComponents();
-  console.log('selected metrics: ', selectedMetrics);
 
   return (
     <>

app/containers/HealthContainer.tsx

@@ -30,9 +30,9 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
     */
   const { healthData } = useContext(HealthContext);
   const { selectedMetrics } = useContext(QueryContext);
-  const { category } = props;
   const { service } = useParams<keyof Params>() as Params;
   const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]);
+  const { category, sizing, colourGenerator } = props;
   /* 
   This function filters the selectedMetrics array down to only metrics that match the category of this instance of HealthContainer.
   Once that has finished, it then filters the healthData down to the current category and the filteredMetrics.
@@ -160,8 +160,8 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
             serviceName={serviceName}
             chartData={chartData}
             categoryName={category}
-            sizing={props.sizing}
-            colourGenerator={props.colourGenerator}
+            sizing={sizing}
+            colourGenerator={colourGenerator}
           />
         );
       }

app/context/CommsContext.tsx

@@ -52,7 +52,6 @@ const CommsContextProvider: React.FC<Props> = React.memo((props) => {
       ipcRenderer.on('commsResponse', (event: Electron.Event, data: any) => {
         let result: any;
         if (tryParseJSON(data)) result = JSON.parse(data);
-        console.log('communication data from fetch request is: ', result);
         // console.log(data); 
         setCommsData(result);
       });