Interactive HealthChart and save to .PNG

Co-authored-by: beezoo10 <[email protected]>
Co-authored-by: jeffreyNa <[email protected]>
Co-authored-by: kelsicw <[email protected]>

Author: 4 people

app/charts/HealthChart.tsx

@@ -21,23 +21,51 @@ interface SoloStyles {
   width: number;
 }
 
+type plotlyData = {
+  name: string;
+  x: string[];
+  y: string[];
+  type: string;
+  mode: string;
+  marker: { colors: string[] };
+};
+
 const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
-  // const { renderService, metric, timeList, valueList, sizing, colourGenerator } = props;
+  // 'metrics' is an array of the user-specified metrics as objects
   const { serviceName, categoryName, metrics, timeList, sizing, colourGenerator } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);
-  // metrics = specific metrics in categories
-  // temporary y-axis values for testing purposes
-  const valueList = metrics[0].books[0].activememory_in_bytes
-  // filter through metrics to desired metrics and then plot them
+  const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
+  const reverseTimeArr = timeArr.reverse();
+  const re = /_/g;
+  const plotlyDataObjectArray: plotlyData[] = [];
 
-  function generatePlotlyDataObjects(metricsArray) {
+  // generates an array plotly data objects to add to be passed into our plotly chart's data prop
+  const generatePlotlyDataObjects = (metricsArray, timeArray) => {
+    console.log('metricsArray: ', metricsArray);
+    console.log('timeArray: ', timeArray);
+    // initalize an array of objects for output
     // iterate through the metricsArray
-      // each element is an array of num data (y-axis)
-      // generate a plotly data object to add to an array that will be passed into our plotly chart's data prop
-    
-  }
-
-
+    // each element is an array of num data (y-axis)
+    metricsArray.forEach(el => {
+      const originalMetricName = Object.keys(el)[0];
+      const prettyMetricName = originalMetricName.replace(re, ' ');
+      const newColor = colourGenerator(serviceName);
+      console.log('prettyMetricName ', prettyMetricName);
+      // plotly's data prop takes an array of objects that each have x, y, type, mode, marker
+      const dataObject: plotlyData = {
+        name: prettyMetricName,
+        x: timeArray,
+        y: el[originalMetricName],
+        type: 'scattergl',
+        mode: 'lines',
+        marker: {
+          colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
+        },
+      };
+      plotlyDataObjectArray.push(dataObject);
+    });
+    console.log('plotlydataObjectarray: ', plotlyDataObjectArray);
+  };
 
   setInterval(() => {
     if (solo !== soloStyle) {
@@ -46,34 +74,13 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
   }, 20);
 
   const createChart = () => {
-    //
-    const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
-    const reverseTimeArr = timeArr.reverse();
-    const hashedColour = colourGenerator(serviceName);
-    const re = /_/g;
-    type plotlyData = {
-      name: any;
-      x: any;
-      y: any;
-      type: any;
-      mode: any;
-      marker: { color: string };
-    };
-    // const plotlyData = {
-    //   name: metric.replace(re, ' '),
-    //   x: reverseTimeArr, //reversed for better UX
-    //   y: valueList,
-    //   type: 'scattergl',
-    //   mode: 'lines',
-    //   marker: { color: hashedColour },
-    // };
+    generatePlotlyDataObjects(metrics, reverseTimeArr);
     const sizeSwitch = sizing === 'all' ? all : solo;
 
     return (
       <Plot
-        // data takes an array of objects that each have x, y, type, mode, marker
-        data={[plotlyData]}
-        config={{ displayModeBar: false }}
+        data={plotlyDataObjectArray}
+        config={{ displayModeBar: true }}
         layout={{
           title: `${serviceName} | ${categoryName}`,
           ...sizeSwitch,

app/containers/HealthContainer.tsx

@@ -26,13 +26,13 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
   useEffect(() => {
     const temp: JSX.Element[] = [];
     let counter: number = 0;
-    const dataList: any[] = healthData.healthdataList;
+    const dataList: any[] = healthData.healthDataList;
     const timeList: any[] = healthData.healthTimeList;
     // dataList and timeList are structured the same, but time holds timestamps. An array of 4 objects. [Memory, CPU, Processes, Latency]
     // Each element has all its metrics.
-    console.log('healthData object in state: ', healthData);
-    console.log('dataList in healthcontainer is:', dataList); //array of healthdataList
-    console.log('timelist in healthcontainer is:', timeList);
+    // console.log('healthData object in state: ', healthData);
+    // console.log('dataList in healthcontainer is:', dataList);
+    // console.log('timelist in healthcontainer is:', timeList);
 
     if (healthData && dataList && timeList && dataList.length > 0 && timeList.length > 0) {
       let selectedMetricsList: string[] = [];
@@ -41,7 +41,7 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
           selectedMetricsList = element[category];
         }
       });
-      // temporary solution to getting the list of times for our single chart
+      // ***ALERT*** temporary solution to getting the list of times for our single chart
       const times: string[] = timeList[0].Memory[0].books[0].activememory_in_bytes;
 
       dataList.forEach((element: {}) => {
@@ -60,34 +60,27 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
         */
         if (category === categoryName) {
           const categoryObj: [] = element[categoryName];
-          let filteredMetrics;
+          const filteredMetrics: any[] = [];
           for (const metricObj of categoryObj) {
             // serviceName = category (ex. books)
-            const serviceName: string = Object.keys(metricObj)[0];
-            /* serviceMetricsArr = array of ALL objects
+            const serviceName: string = Object.keys(metricObj)[0]; 
+            console.log('metricObj: ', metricObj)           
+            const serviceMetricsArr: any[] = Object.values(metricObj).flat();
+            console.log('serviceMetricsArr: ', serviceMetricsArr); // -> array of arrays containing numerical data.
+            /* serviceMetricsArr = array of all metric objects
             [0: {
               total-availle-memory-in-bytes: [numbers, more numbers, nums, woo]
             }]
             */
-            const serviceMetricsArr: any[] = Object.values(metricObj).flat();
-            // const serviceTimesArr: any[] = Object.values();
-            console.log('serviceMetricsArr: ', serviceMetricsArr); // -> array of objects.
-            // filter through the desired metrics and pass them down to HealthChart
+
+            // filters through the desired metrics and pass them down to HealthChart
             selectedMetricsList.forEach(selected => {
-              filteredMetrics = serviceMetricsArr.filter(metric => {
-                metric[selected];
+              serviceMetricsArr.forEach(metric => {
+                if (metric[selected]) filteredMetrics.push(metric);
               });
             });
+            console.log('filteredMetrics: ', filteredMetrics);
 
-            // serviceMetricsArr.filter(...selectedMetricsList)
-
-            // for (const serviceMetric of serviceMetricsArr) {
-            // const metric: string = Object.keys(serviceMetric)[0];
-            // const valueList = Object.values(serviceMetric)[0];
-            // const newTimeList: any = getTime(timelist, serviceName, metric, categoryName);
-            // console.log('valueList is', valueList); //-> 50 values in an array
-            // console.log('newTimeList array is:', newTimeList); //-> 50 values in an array
-            // if (selectedMetricsList.includes(metric)) {
             const re = /_/g;
             const newHealthChart = (
               <HealthChart