small edit for a prop in HealthChart.

Author: jcpoirier20

app/charts/HealthChart.tsx

@@ -26,7 +26,7 @@ type PlotlyData = {
 };
 
 const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
-  const { dataType, chartData, categoryName, sizing, colourGenerator } = props;
+  const { dataType, serviceName, chartData, categoryName, sizing, colourGenerator } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);
 
   // makes time data human-readable, and reverses it so it shows up correctly in the graph
@@ -51,33 +51,28 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
   // generates an array of plotly data objects to be passed into our plotly chart's data prop
   const generatePlotlyDataObjects = (chartDataObj: object): object[] => {
     const arrayOfPlotlyDataObjects: PlotlyData[] = [];
-    // iterate through the chartData
-    for (const serviceName in chartDataObj) {
-      // define the metrics for this service
-      const metrics = chartDataObj[serviceName];
-      // loop through the list of metrics for the current service
-      for (const metricName in metrics) {
-        // define the value and time arrays; allow data to be reassignable in case we need to convert the bytes data into megabytes
-        let dataArray = metrics[metricName].value;
-        const timeArray = metrics[metricName].time;
-        // specifically for `Megabyte` types, convert the original data of bytes into a value of megabytes before graphing
-        if (dataType === 'Memory in Megabytes' || dataType === 'Cache in Megabytes') {
-          dataArray = dataArray.map(value => (value / 1000000).toFixed(2));
-        }
-        // create the plotly object
-        const plotlyDataObject: PlotlyData = {
-          name: prettyMetricName(metricName),
-          x: prettyTimeInReverse(timeArray),
-          y: dataArray,
-          type: 'scattergl',
-          mode: 'lines',
-          marker: {
-            colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
-          },
-        };
-        // push the dataObject into the arrayOfPlotlyDataObjects
-        arrayOfPlotlyDataObjects.push(plotlyDataObject);
+    // loop through the list of metrics for the current chart
+    for (const metricName in chartDataObj) {
+      // define the value and time arrays; allow data to be reassignable in case we need to convert the bytes data into megabytes
+      let dataArray = chartDataObj[metricName].value;
+      const timeArray = chartDataObj[metricName].time;
+      // specifically for `Megabyte` types, convert the original data of bytes into a value of megabytes before graphing
+      if (dataType === 'Memory in Megabytes' || dataType === 'Cache in Megabytes') {
+        dataArray = dataArray.map(value => (value / 1000000).toFixed(2));
       }
+      // create the plotly object
+      const plotlyDataObject: PlotlyData = {
+        name: prettyMetricName(metricName),
+        x: prettyTimeInReverse(timeArray),
+        y: dataArray,
+        type: 'scattergl',
+        mode: 'lines',
+        marker: {
+          colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
+        },
+      };
+      // push the dataObject into the arrayOfPlotlyDataObjects
+      arrayOfPlotlyDataObjects.push(plotlyDataObject);
     }
     // return the array of plotlyDataObject
     return arrayOfPlotlyDataObjects;
@@ -91,16 +86,16 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
 
   const createChart = () => {
     const dataArray = generatePlotlyDataObjects(chartData);
-    const serviceNames = serviceNamesAsString(chartData);
-    console.log('serviceNames: ', serviceNames);
+
+    console.log('serviceName: ', serviceName);
     const sizeSwitch = sizing === 'all' ? all : solo;
 
     return (
       <Plot
         data={dataArray}
         config={{ displayModeBar: true }}
         layout={{
-          title: `${serviceNames}| ${categoryName}`,
+          title: `${serviceName} || ${categoryName}`,
           ...sizeSwitch,
           font: {
             color: '#444d56',

app/components/Occupied.tsx

@@ -86,7 +86,7 @@ const Occupied = React.memo(() => {
   // Grab services and applications whenever the user changes
   // v10: Runs once when Occupied is memoized, and subsequently when user is updated.
   useEffect(() => {
-    console.log('Hi, inside Occupied.ts useEffect function.');
+    // console.log('Hi, inside Occupied.ts useEffect function.');
     setServicesData([]);
     getApplications();
   }, [user]);

app/containers/HealthContainer.tsx

@@ -151,15 +151,22 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
     for (const dataType in sortedData) {
       const serviceObjects = sortedData[dataType];
       for (const serviceName in serviceObjects) {
-        // pass down the value of the current data type object
+        // pass down the value of the current data type and service
         const chartData = serviceObjects[serviceName];
-        console.log('dataType: ', dataType, 'chartData: ', chartData);
+        console.log(
+          'dataType: ',
+          dataType,
+          'service name: ',
+          serviceName,
+          'chartData: ',
+          chartData
+        );
         chartsArray.push(
           <HealthChart
             key={'H' + keymaker()}
             dataType={dataType}
             serviceName={serviceName}
-            chartData={sortedData[dataType]}
+            chartData={chartData}
             categoryName={`${category}`}
             sizing={props.sizing}
             colourGenerator={props.colourGenerator}