Generate lineChart data

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 = [
+type DataPoint = {
-  {
+  x: number
-    id: 'cpu',
+  y: number
-    color: '#8DC6BC',
+}
-    data: [
+
-      {
+type ChartData = {
-        x: '1',
+  id: string
-        y: 15,
+  color: string
-      },
+  data: DataPoint[]
-      {
+}
-        x: '2',
+
-        y: 12,
+type DeviceCPULoadProps = {
-      },
+  load: number[]
-      {
+}
-        x: '3',
+const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
-        y: 43,
+  const chartData: ChartData[] = [
-      },
+    {
-      {
+      id: 'cpu',
-        x: '4',
+      color: '#8DC6BC',
-        y: 20,
+      data: load.map((yValue, index: number) => ({
-      },
+        x: index + 1,
-      {
+        y: yValue,
-        x: '5',
+      })),
-        y: 60,
+    },
-      },
+  ]
-      {
+  const currentLoad =
-        x: '6',
+    chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
-        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
   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'}>

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>
   )
 }

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 (