Use double chart and remove stream

src/components/DeviceNetworkHealth.tsx

@@ -16,14 +16,23 @@ type ChartData = {
 }
 
 type DeviceNetworkHealthProps = {
-  load: number[]
+  uploadRate: number[]
+  downloadRate: number[]
 }
-const DeviceNetworkHealth: React.FC<DeviceNetworkHealthProps> = ({ load }) => {
+const DeviceNetworkHealth: React.FC<DeviceNetworkHealthProps> = ({ uploadRate, downloadRate }) => {
   const chartData: ChartData[] = [
     {
-      id: 'cpu',
+      id: 'uploadRate',
       color: '#8DC6BC',
-      data: load.map((yValue, index: number) => ({
+      data: uploadRate.map((yValue, index: number) => ({
+        x: index + 1,
+        y: yValue,
+      })),
+    },
+    {
+      id: 'downloadRate',
+      color: '#D92344',
+      data: downloadRate.map((yValue, index: number) => ({
         x: index + 1,
         y: yValue,
       })),
@@ -45,7 +54,7 @@ const DeviceNetworkHealth: React.FC<DeviceNetworkHealthProps> = ({ load }) => {
           }}
         >
           <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
-            <MyResponsiveStream />
+            <StandartLineChart data={chartData} />
           </div>
           <YStack space={'$3'}>
             <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>

src/components/LandingPage.tsx

@@ -96,7 +96,10 @@ function Content() {
           Discover Nodes
         </button>
       </article>
-      <DeviceNetworkHealth load={[123,123,123,2,12]} ></DeviceNetworkHealth>
+      <DeviceNetworkHealth
+        uploadRate={[6, 63, 123, 59, 12, 6, 63, 123, 59, 12]}
+        downloadRate={[123, -56, 90, -130, 50, 123, -56, 90, -130, 40]}
+      />
     </div>
   )
 }

src/components/StandardLineChart.tsx

@@ -6,6 +6,7 @@ interface DataPoint {
 
 interface ChartData {
   id: string
+  color: string
   data: DataPoint[]
 }
 
@@ -13,6 +14,8 @@ interface StandartLineChartProps {
   data: ChartData[]
 }
 const StandartLineChart = ({ data }: StandartLineChartProps) => {
+  const colors = data.map(dataset => dataset.color)
+
   return (
     <ResponsiveLine
       data={data}
@@ -35,11 +38,10 @@ const StandartLineChart = ({ data }: StandartLineChartProps) => {
       pointSize={1}
       pointColor={{ theme: 'background' }}
       pointBorderWidth={2}
-      pointBorderColor={{ from: 'serieColor' }}
       pointLabelYOffset={-12}
       useMesh={true}
       legends={[]}
-      colors={['#8DC6BC']}
+      colors={colors}
     />
   )
 }

src/components/StandartStream.tsx

@@ -57,29 +57,15 @@ const MyResponsiveStream = () => {
       Jacques: 167,
     },
     {
-      Raoul: 60,
+      Raoul: 800,
       Josiane: 67,
       Marcel: 23,
       René: 174,
       Paul: 190,
       Jacques: 86,
     },
-    {
-      Raoul: 53,
-      Josiane: 168,
-      Marcel: 76,
-      René: 128,
-      Paul: 118,
-      Jacques: 43,
-    },
-    {
-      Raoul: 159,
-      Josiane: 22,
-      Marcel: 192,
-      René: 60,
-      Paul: 99,
-      Jacques: 135,
-    },
+    
+     
   ]
   return (
     <ResponsiveStream
@@ -92,34 +78,12 @@ const MyResponsiveStream = () => {
       axisLeft={null}
       enableGridY={false}
       offsetType="silhouette"
-      colors={{ scheme: 'purple_orange' }}
-      borderColor={{ theme: 'background' }}
-      defs={[
-        {
-          id: 'dots',
-          type: 'patternDots',
-          background: 'inherit',
-          color: '#2c998f',
-          size: 4,
-          padding: 2,
-          stagger: true,
-        },
-        {
-          id: 'squares',
-          type: 'patternSquares',
-          background: 'inherit',
-          color: '#e4c912',
-          size: 6,
-          padding: 2,
-          stagger: true,
-        },
-      ]}
       dotSize={8}
       dotColor={{ from: 'color' }}
       dotBorderWidth={2}
       dotBorderColor={{
         from: 'color',
-        modifiers: [['darker', 0.7]],
+        modifiers: [['darker', 1]],
       }}
       isInteractive={false}
       enableStackTooltip={false}