/
HomeSwarmPlot.js
47 lines (44 loc) · 1.46 KB
/
HomeSwarmPlot.js
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 { generateSwarmPlotData } from '@nivo/generators'
import { ResponsiveSwarmPlotCanvas } from '@nivo/swarmplot'
import { HomeItem, HomeItemLabel } from './styled'
const HomeSwarmPlot = ({ reversedColors, nivoTheme }) => {
const data = generateSwarmPlotData(['thing'], { min: 50, max: 50 })
return (
<HomeItem to="/swarmplot/">
<ResponsiveSwarmPlotCanvas
data={data.data}
groups={data.groups}
groupBy="group"
identity="id"
value="price"
layout="horizontal"
valueScale={{
type: 'linear',
min: 0,
max: 500,
}}
size={{
key: 'volume',
values: [4, 20],
sizes: [6, 20],
}}
margin={{ top: 30, bottom: 30, left: 10, right: 10 }}
theme={nivoTheme}
colors={reversedColors}
enableGridY={false}
colorBy="id"
animate={false}
isInteractive={false}
axisTop={{}}
axisRight={null}
axisBottom={{}}
axisLeft={null}
/>
<HomeItemLabel>
<span>SwarmPlot documentation</span>
</HomeItemLabel>
</HomeItem>
)
}
export default HomeSwarmPlot