/
HomeBarDemo.tsx
47 lines (44 loc) · 1.6 KB
/
HomeBarDemo.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
import React from 'react'
import { Bar } from '@nivo/bar'
import { generateCountriesData } from '@nivo/generators'
import { useHomeTheme } from './theme'
import { dimensions } from './dimensions'
export const HomeBarDemo = ({ isHorizontal = false }: { isHorizontal: boolean }) => {
const { colors, nivoTheme } = useHomeTheme()
const data = isHorizontal
? generateCountriesData(['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut'], {
size: 9,
})
: generateCountriesData(['hot dogs', 'burgers', 'sandwich'], {
size: 11,
})
const keys = isHorizontal
? ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
: ['hot dogs', 'burgers', 'sandwich']
return (
<div id={`bar-${isHorizontal ? 'horizontal' : 'vertical'}`}>
<Bar
width={dimensions.width}
height={dimensions.height}
margin={dimensions.margin}
data={data}
indexBy="country"
keys={keys}
layout={isHorizontal ? 'horizontal' : 'vertical'}
groupMode={isHorizontal ? 'stacked' : 'grouped'}
padding={0.1}
colors={colors}
borderWidth={1}
borderColor={colors[3]}
theme={nivoTheme}
enableGridX
enableGridY
enableLabel={false}
animate={false}
isInteractive={false}
axisLeft={null}
axisBottom={null}
/>
</div>
)
}