From 508f9b644f95d706d8168be4e5e0145323aba325 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 10 Aug 2023 10:42:07 +0300
Subject: [PATCH] Generate lineChart data

---
 src/components/DeviceCPULoad.tsx              | 88 ++++++-------------
 .../LayoutComponent/LandingPage.tsx           |  2 +-
 src/components/StandardLineChart.tsx          |  6 +-
 3 files changed, 33 insertions(+), 63 deletions(-)

diff --git a/src/components/DeviceCPULoad.tsx b/src/components/DeviceCPULoad.tsx
index 8e30234f..b7736398 100644
--- a/src/components/DeviceCPULoad.tsx
+++ b/src/components/DeviceCPULoad.tsx
@@ -3,64 +3,34 @@ import ShadowBox from './ShadowBox'
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 
-const data = [
-  {
-    id: 'cpu',
-    color: '#8DC6BC',
-    data: [
-      {
-        x: '1',
-        y: 15,
-      },
-      {
-        x: '2',
-        y: 12,
-      },
-      {
-        x: '3',
-        y: 43,
-      },
-      {
-        x: '4',
-        y: 20,
-      },
-      {
-        x: '5',
-        y: 60,
-      },
-      {
-        x: '6',
-        y: 5,
-      },
-      {
-        x: '7',
-        y: 15,
-      },
-      {
-        x: '8',
-        y: 12,
-      },
-      {
-        x: '9',
-        y: 43,
-      },
-      {
-        x: '10',
-        y: 20,
-      },
-      {
-        x: '11',
-        y: 60,
-      },
-      {
-        x: '12',
-        y: 132,
-      },
-    ],
-  },
-]
-const DeviceCPULoad = () => {
-  const currentLoad = data[0].data[data[0].data.length - 1].y
+type DataPoint = {
+  x: number
+  y: number
+}
+
+type ChartData = {
+  id: string
+  color: string
+  data: DataPoint[]
+}
+
+type DeviceCPULoadProps = {
+  load: number[]
+}
+const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
+  const chartData: ChartData[] = [
+    {
+      id: 'cpu',
+      color: '#8DC6BC',
+      data: load.map((yValue, index: number) => ({
+        x: index + 1,
+        y: yValue,
+      })),
+    },
+  ]
+  const currentLoad =
+    chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
+
   const message = currentLoad < 80 ? 'Good' : 'Poor'
 
   return (
@@ -74,7 +44,7 @@ const DeviceCPULoad = () => {
           }}
         >
           <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
-            <StandartLineChart data={data} />
+            <StandartLineChart data={chartData} />
           </div>
           <YStack space={'$3'}>
             <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
diff --git a/src/components/LayoutComponent/LandingPage.tsx b/src/components/LayoutComponent/LandingPage.tsx
index 9cc62f19..e2b127d4 100644
--- a/src/components/LayoutComponent/LandingPage.tsx
+++ b/src/components/LayoutComponent/LandingPage.tsx
@@ -96,7 +96,7 @@ function Content() {
           Discover Nodes
         </button>
       </article>
-      <DeviceCPULoad />
+      <DeviceCPULoad load={[13,32,24,1,49,90,13,32,24,1,49,90]}/>
     </div>
   )
 }
diff --git a/src/components/StandardLineChart.tsx b/src/components/StandardLineChart.tsx
index 327f469a..0077e644 100644
--- a/src/components/StandardLineChart.tsx
+++ b/src/components/StandardLineChart.tsx
@@ -1,16 +1,16 @@
 import { ResponsiveLine } from '@nivo/line'
 interface DataPoint {
-  x: string
+  x: number
   y: number
 }
 
-interface Series {
+interface ChartData {
   id: string
   data: DataPoint[]
 }
 
 interface StandartLineChartProps {
-  data: Series[]
+  data: ChartData[]
 }
 const StandartLineChart = ({ data }: StandartLineChartProps) => {
   return (