From 102fafa4e25f023d93dd247c248c1f4dfbeb2ee0 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 27 Sep 2023 22:39:40 +0300
Subject: [PATCH] Colorize graph lines red if above "bad" threshold in CPU Card

---
 src/components/Charts/DeviceCPULoad.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/Charts/DeviceCPULoad.tsx b/src/components/Charts/DeviceCPULoad.tsx
index 9dba20cc..3082598c 100644
--- a/src/components/Charts/DeviceCPULoad.tsx
+++ b/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