Implement stream charts into network card

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@nivo/line": "^0.83.0",
     "@nivo/pie": "^0.83.0",
+    "@nivo/stream": "^0.83.0",
     "@status-im/colors": "*",
     "@status-im/components": "^0.2.6",
     "@tamagui/config": "1.36.4",

src/components/DeviceNetworkHealth.tsx

@@ -2,6 +2,7 @@ import StandartLineChart from './StandardLineChart'
 import ShadowBox from './ShadowBox'
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import MyResponsiveStream from './StandartStream'
 
 type DataPoint = {
   x: number
@@ -44,7 +45,7 @@ const DeviceNetworkHealth: React.FC<DeviceNetworkHealthProps> = ({ load }) => {
           }}
         >
           <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
-            <StandartLineChart data={chartData} />
+            <MyResponsiveStream />
           </div>
           <YStack space={'$3'}>
             <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>

src/components/StandartStream.tsx

@@ -0,0 +1,130 @@
+import { ResponsiveStream } from '@nivo/stream'
+
+// make sure parent container have a defined height when using
+// responsive component, otherwise height will be 0 and
+// no chart will be rendered.
+// website examples showcase many properties,
+// you'll often use just a few of them.
+
+const MyResponsiveStream = () => {
+  const data = [
+    {
+      Raoul: 27,
+      Josiane: 160,
+      Marcel: 41,
+      René: 132,
+      Paul: 57,
+      Jacques: 194,
+    },
+    {
+      Raoul: 62,
+      Josiane: 88,
+      Marcel: 85,
+      René: 167,
+      Paul: 179,
+      Jacques: 170,
+    },
+    {
+      Raoul: 154,
+      Josiane: 194,
+      Marcel: 27,
+      René: 63,
+      Paul: 67,
+      Jacques: 49,
+    },
+    {
+      Raoul: 14,
+      Josiane: 179,
+      Marcel: 186,
+      René: 161,
+      Paul: 53,
+      Jacques: 73,
+    },
+    {
+      Raoul: 10,
+      Josiane: 43,
+      Marcel: 31,
+      René: 186,
+      Paul: 151,
+      Jacques: 163,
+    },
+    {
+      Raoul: 82,
+      Josiane: 39,
+      Marcel: 173,
+      René: 151,
+      Paul: 52,
+      Jacques: 167,
+    },
+    {
+      Raoul: 60,
+      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
+      data={data}
+      keys={['Raoul', 'Josiane', 'Marcel', 'René', 'Paul', 'Jacques']}
+      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+      axisTop={null}
+      axisRight={null}
+      axisBottom={null}
+      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]],
+      }}
+      isInteractive={false}
+      enableStackTooltip={false}
+    />
+  )
+}
+
+export default MyResponsiveStream

yarn.lock

@@ -2848,6 +2848,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nivo/stream@npm:^0.83.0":
+  version: 0.83.0
+  resolution: "@nivo/stream@npm:0.83.0"
+  dependencies:
+    "@nivo/axes": 0.83.0
+    "@nivo/colors": 0.83.0
+    "@nivo/core": 0.83.0
+    "@nivo/legends": 0.83.0
+    "@nivo/scales": 0.83.0
+    "@nivo/tooltip": 0.83.0
+    "@react-spring/web": 9.4.5 || ^9.7.2
+    "@types/d3-shape": ^2.0.0
+    d3-shape: ^1.3.5
+  peerDependencies:
+    react: ">= 16.14.0 < 19.0.0"
+  checksum: 22c449c0ff8555def29c1835ffb28fa8bbdbb84ff1c3ba77d60494771193d10e6b4b6f209072591c1033aaa87d2c33386038335ccad019f2ad85d30d50ade891
+  languageName: node
+  linkType: hard
+
 "@nivo/tooltip@npm:0.83.0":
   version: 0.83.0
   resolution: "@nivo/tooltip@npm:0.83.0"
@@ -13701,6 +13720,7 @@ __metadata:
     "@fsouza/prettierd": ^0.24.2
     "@nivo/line": ^0.83.0
     "@nivo/pie": ^0.83.0
+    "@nivo/stream": ^0.83.0
     "@status-im/colors": "*"
     "@status-im/components": ^0.2.6
     "@storybook/addon-essentials": ^7.2.0