/
HomeStreamDemo.tsx
39 lines (36 loc) · 1.11 KB
/
HomeStreamDemo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React from 'react'
import range from 'lodash/range'
import random from 'lodash/random'
import { Stream } from '@nivo/stream'
import { useHomeTheme } from './theme'
import { dimensions } from './dimensions'
const streamDataLayerCount = 5
const generateStreamData = () =>
range(16).map(() =>
range(streamDataLayerCount).reduce((acc, i) => {
acc[i] = random(10, 200)
return acc
}, {})
)
export const HomeStreamDemo = () => {
const { reversedColors, nivoTheme } = useHomeTheme()
return (
<div id="stream">
<Stream
width={dimensions.width}
height={dimensions.height}
data={generateStreamData()}
margin={dimensions.margin}
keys={range(streamDataLayerCount)}
theme={nivoTheme}
colors={reversedColors}
animate={false}
isInteractive={false}
enableGridX
axisLeft={null}
axisBottom={null}
offsetType="silhouette"
/>
</div>
)
}