/
HomeAreaBumpDemo.tsx
48 lines (44 loc) · 1.32 KB
/
HomeAreaBumpDemo.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
40
41
42
43
44
45
46
47
48
import React, { useMemo } from 'react'
import random from 'lodash/random'
import { AreaBump } from '@nivo/bump'
import { useHomeTheme } from './theme'
import { dimensions } from './dimensions'
import range from 'lodash/range'
const serieIds = ['JavaScript', 'ReasonML', 'TypeScript', 'Elm']
const generateData = () => {
const years = range(2000, 2005)
return serieIds.map(id => ({
id,
data: years.map(year => ({
x: year,
y: random(5, 40),
})),
}))
}
export const HomeAreaBumpDemo = () => {
const data = useMemo(() => generateData(), [])
const { colors, nivoTheme } = useHomeTheme()
return (
<div id="area-bump">
<AreaBump
width={dimensions.width}
height={dimensions.height}
margin={dimensions.margin}
data={data}
colors={colors}
borderWidth={1}
spacing={12}
borderColor={colors[3]}
blendMode="normal"
enableGridX={true}
axisTop={null}
axisBottom={null}
startLabel={false}
endLabel={false}
isInteractive={false}
animate={false}
theme={nivoTheme}
/>
</div>
)
}