Skip to content

Commit 88e05dd

Browse files
ploucplouc
committedSep 11, 2021
feat(radial-bar): add stories
·
v0.88.0v0.74.0
1 parent c65a1c9 commit 88e05dd

File tree

2 files changed

+298
-0
lines changed

2 files changed

+298
-0
lines changed
 

‎packages/radial-bar/src/RadialBar.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const InnerRadialBar = <D extends RadialBarDatum>({
5757
ariaLabelledBy,
5858
ariaDescribedBy,
5959
}: InnerRadialBarProps<D>) => {
60+
console.log(innerRadiusRatio)
6061
const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
6162
width,
6263
height,

‎packages/radial-bar/stories/radialBar.stories.tsx

+297
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
import { useEffect, useMemo, useState } from 'react'
2+
import { Meta } from '@storybook/react'
3+
import { withKnobs } from '@storybook/addon-knobs'
4+
import { Theme } from '@nivo/core'
5+
import { categoricalColorSchemes } from '@nivo/colors'
6+
// @ts-ignore
7+
import { RadialBar, RadialBarSvgProps, RadialBarCustomLayerProps, svgDefaultProps } from '../src'
8+
9+
export default {
10+
component: RadialBar,
11+
title: 'RadialBar',
12+
decorators: [withKnobs],
13+
} as Meta
14+
15+
const simpleData: RadialBarSvgProps['data'] = [
16+
{
17+
id: 'Supermarket',
18+
data: [
19+
{
20+
x: 'Vegetables',
21+
y: 55,
22+
},
23+
],
24+
},
25+
{
26+
id: 'Combini',
27+
data: [
28+
{
29+
x: 'Vegetables',
30+
y: 251,
31+
},
32+
],
33+
},
34+
{
35+
id: 'Online',
36+
data: [
37+
{
38+
x: 'Vegetables',
39+
y: 15,
40+
},
41+
],
42+
},
43+
{
44+
id: 'Marché',
45+
data: [
46+
{
47+
x: 'Vegetables',
48+
y: 180,
49+
},
50+
],
51+
},
52+
]
53+
54+
const multipleCategoriesData: RadialBarSvgProps['data'] = [
55+
{
56+
id: 'Supermarket',
57+
data: [
58+
{
59+
x: 'Vegetables',
60+
y: 55,
61+
},
62+
{
63+
x: 'Fruits',
64+
y: 200,
65+
},
66+
{
67+
x: 'Meat',
68+
y: 269,
69+
},
70+
],
71+
},
72+
{
73+
id: 'Combini',
74+
data: [
75+
{
76+
x: 'Vegetables',
77+
y: 251,
78+
},
79+
{
80+
x: 'Fruits',
81+
y: 23,
82+
},
83+
{
84+
x: 'Meat',
85+
y: 100,
86+
},
87+
],
88+
},
89+
{
90+
id: 'Online',
91+
data: [
92+
{
93+
x: 'Vegetables',
94+
y: 15,
95+
},
96+
{
97+
x: 'Fruits',
98+
y: 37,
99+
},
100+
{
101+
x: 'Meat',
102+
y: 285,
103+
},
104+
],
105+
},
106+
{
107+
id: 'Marché',
108+
data: [
109+
{
110+
x: 'Vegetables',
111+
y: 180,
112+
},
113+
{
114+
x: 'Fruits',
115+
y: 154,
116+
},
117+
{
118+
x: 'Meat',
119+
y: 197,
120+
},
121+
],
122+
},
123+
]
124+
125+
const commonProperties: RadialBarSvgProps = {
126+
width: 400,
127+
height: 400,
128+
margin: { top: 40, right: 40, bottom: 40, left: 40 },
129+
data: multipleCategoriesData,
130+
}
131+
132+
export const Default = () => <RadialBar {...commonProperties} />
133+
134+
const CustomLayer = ({ center }: RadialBarCustomLayerProps) => {
135+
return (
136+
<g transform={`translate(${center[0]}, ${center[1]})`}>
137+
<text
138+
textAnchor="middle"
139+
dominantBaseline="central"
140+
style={{
141+
fontSize: 52,
142+
fontWeight: 800,
143+
fill: '#eeeeee',
144+
}}
145+
>
146+
YAY
147+
</text>
148+
</g>
149+
)
150+
}
151+
152+
const groupColorScheme = categoricalColorSchemes.accent
153+
const colorByGroupId = {
154+
Supermarket: groupColorScheme[0],
155+
Combini: groupColorScheme[1],
156+
Online: groupColorScheme[2],
157+
Marché: groupColorScheme[3],
158+
}
159+
160+
const demoPhases: {
161+
description: string
162+
props: RadialBarSvgProps
163+
}[] = [
164+
{
165+
description: 'Defaults',
166+
props: {
167+
...commonProperties,
168+
data: simpleData,
169+
innerRadius: 0.2,
170+
},
171+
},
172+
{
173+
description: 'Multiple dimensions',
174+
props: {
175+
...commonProperties,
176+
},
177+
},
178+
{
179+
description: 'Start & end angles',
180+
props: {
181+
...commonProperties,
182+
startAngle: 180,
183+
endAngle: 450,
184+
innerRadius: 0.2,
185+
},
186+
},
187+
{
188+
description: 'Inner radius',
189+
props: {
190+
...commonProperties,
191+
startAngle: 180,
192+
endAngle: 450,
193+
innerRadius: 0.66,
194+
},
195+
},
196+
{
197+
description: 'Custom colors',
198+
props: {
199+
...commonProperties,
200+
data: simpleData,
201+
colors: d => colorByGroupId[d.groupId as keyof typeof colorByGroupId],
202+
startAngle: 180,
203+
endAngle: 450,
204+
innerRadius: 0.4,
205+
},
206+
},
207+
{
208+
description: 'Custom layer',
209+
props: {
210+
...commonProperties,
211+
startAngle: 180,
212+
endAngle: 450,
213+
innerRadius: 0.66,
214+
layers: [...svgDefaultProps.layers, CustomLayer],
215+
},
216+
},
217+
{
218+
description: 'Start/End radial axes',
219+
props: {
220+
...commonProperties,
221+
startAngle: 250,
222+
endAngle: 470,
223+
innerRadius: 0.4,
224+
radialAxisEnd: {},
225+
},
226+
},
227+
{
228+
description: 'Inner/Outer circular axes',
229+
props: {
230+
...commonProperties,
231+
startAngle: 180,
232+
endAngle: 450,
233+
innerRadius: 0.66,
234+
radialAxisEnd: {},
235+
circularAxisInner: {},
236+
},
237+
},
238+
]
239+
240+
const demoTheme: Theme = {
241+
axis: {
242+
domain: {
243+
line: {
244+
strokeWidth: 1,
245+
stroke: '#666666',
246+
},
247+
},
248+
ticks: {
249+
line: {
250+
strokeWidth: 1,
251+
stroke: '#eeeeee',
252+
},
253+
text: {
254+
fill: '#eeeeee',
255+
fontSize: 11,
256+
},
257+
},
258+
},
259+
grid: {
260+
line: {
261+
stroke: '#666666',
262+
},
263+
},
264+
}
265+
266+
const RadialBarDemo = () => {
267+
const [phaseIndex, setPhaseIndex] = useState(0)
268+
const phase = useMemo(() => demoPhases[phaseIndex], [phaseIndex])
269+
270+
useEffect(() => {
271+
const timer = setTimeout(() => {
272+
setPhaseIndex(currentPhaseIndex => {
273+
if (currentPhaseIndex < demoPhases.length - 1) return currentPhaseIndex + 1
274+
return 0
275+
})
276+
}, 1000)
277+
return () => clearTimeout(timer)
278+
}, [phaseIndex, setPhaseIndex])
279+
280+
return (
281+
<div
282+
style={{
283+
display: 'flex',
284+
flexDirection: 'column',
285+
alignItems: 'center',
286+
background: '#222',
287+
}}
288+
>
289+
<div style={{ padding: '24px 0', color: '#eeeeee', fontSize: '16px' }}>
290+
{phase.description}
291+
</div>
292+
<RadialBar {...phase.props} theme={demoTheme} motionConfig="slow" />
293+
</div>
294+
)
295+
}
296+
297+
export const Demo = () => <RadialBarDemo />

0 commit comments

Comments
 (0)
Please sign in to comment.