diff --git a/package.json b/package.json index 6e51e07f..1e8e9e36 100644 --- a/package.json +++ b/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", diff --git a/src/components/DeviceNetworkHealth.tsx b/src/components/DeviceNetworkHealth.tsx index 1c99bfd8..d1c4f229 100644 --- a/src/components/DeviceNetworkHealth.tsx +++ b/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 = ({ load }) => { }} >
- +
diff --git a/src/components/StandartStream.tsx b/src/components/StandartStream.tsx new file mode 100644 index 00000000..9130d659 --- /dev/null +++ b/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 ( + + ) +} + +export default MyResponsiveStream diff --git a/yarn.lock b/yarn.lock index 68528b38..0830f027 100644 --- a/yarn.lock +++ b/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