Colorize graph lines red if above "bad" threshold in CPU Card

src/components/Charts/DeviceCPULoad.tsx

@@ -19,20 +19,23 @@ type DeviceCPULoadProps = {
   load: number[]
 }
 const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
+
+  const dataObj = load.map((yValue, index: number) => ({
+    x: index + 1,
+    y: yValue,
+  }))
+  const currentLoad =
+    dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0
+
+  const message = currentLoad < 80 ? 'Good' : 'Poor'
+
   const chartData: ChartData[] = [
     {
       id: 'cpu',
-      color: '#8DC6BC',
-      data: load.map((yValue, index: number) => ({
-        x: index + 1,
-        y: yValue,
-      })),
+      color: message === 'Good' ? '#8DC6BC' : '#e95460',
+      data: dataObj,
     },
   ]
-  const currentLoad =
-    chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
-
-  const message = currentLoad < 80 ? 'Good' : 'Poor'
 
   return (
     <Shadow