/
LegendItemDirection.tsx
98 lines (94 loc) · 3.45 KB
/
LegendItemDirection.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import React from 'react'
import { LegendSvgItem } from '@nivo/legends'
import { useTheme } from '../../../theming/context'
const itemDirections = ['left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top'] as const
export const LegendItemDirection = () => {
const theme = useTheme()
const itemsProps = {
x: 0,
y: 0,
width: 160,
height: 40,
data: {
id: 'demo',
color: theme.colors.accent,
},
}
return (
<div>
<h2>Legend item direction</h2>
<p>
The <code>itemDirection</code> property defines how symbol and label are positioned.
<br />
You have 4 available directives:
</p>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
{itemDirections.map(dir => (
<div
key={dir}
style={{
background: theme.colors.cardBackground,
padding: '10px 15px',
borderRadius: 2,
display: 'flex',
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
}}
>
<svg width={itemsProps.width} height={itemsProps.height}>
<LegendSvgItem
{...itemsProps}
textColor={theme.colors.text}
data={{
...itemsProps.data,
label: dir,
}}
direction={dir}
/>
</svg>
</div>
))}
</div>
<p>
The behavior is slightly different if you set <code>justify</code> to{' '}
<code>true</code> as the label will be positioned at the opposite of the symbol,
filling up the whole width/height of the legend's item.
</p>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
{itemDirections.map(dir => (
<div
key={dir}
style={{
background: theme.colors.cardBackground,
padding: '9px 12px',
display: 'flex',
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
}}
>
<svg key={dir} width={itemsProps.width} height={itemsProps.height}>
<LegendSvgItem
{...itemsProps}
textColor={theme.colors.text}
data={{
...itemsProps.data,
label: dir,
}}
direction={dir}
justify={true}
/>
</svg>
</div>
))}
</div>
</div>
)
}