Skip to content

Commit af87639

Browse files
ploucplouc
committedSep 1, 2021
feat(scatterplot): convert stories to new format
·
v0.88.0v0.74.0
1 parent d58ca1c commit af87639

File tree

2 files changed

+179
-188
lines changed

2 files changed

+179
-188
lines changed
 

‎packages/scatterplot/stories/ScatterPlot.stories.tsx

+112-127
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState, useCallback, useMemo } from 'react'
22
import omit from 'lodash/omit'
33
import { area, curveMonotoneX } from 'd3-shape'
4-
import { storiesOf } from '@storybook/react'
4+
import { Meta } from '@storybook/react'
55
import {
66
ScatterPlot,
77
ResponsiveScatterPlot,
@@ -11,6 +11,11 @@ import {
1111
// @ts-ignore
1212
} from '../src'
1313

14+
export default {
15+
component: ScatterPlot,
16+
title: 'ScatterPlot',
17+
} as Meta
18+
1419
type SampleDatum = {
1520
id: number
1621
x: number
@@ -163,17 +168,15 @@ const commonProps = {
163168
],
164169
}
165170

166-
const stories = storiesOf('ScatterPlot', module)
167-
168-
stories.add('default', () => <ScatterPlot<SampleDatum> {...commonProps} data={[sampleData[1]]} />)
171+
export const Default = () => <ScatterPlot<SampleDatum> {...commonProps} data={[sampleData[1]]} />
169172

170-
stories.add('multiple series', () => <ScatterPlot<SampleDatum> {...commonProps} />)
173+
export const mutlipleSeries = () => <ScatterPlot<SampleDatum> {...commonProps} />
171174

172-
stories.add('alternative colors', () => (
175+
export const alternativeColors = () => (
173176
<ScatterPlot<SampleDatum> {...commonProps} colors={{ scheme: 'category10' }} />
174-
))
177+
)
175178

176-
stories.add('using time scales', () => (
179+
export const usingTimeScales = () => (
177180
<ScatterPlot<{ x: string; y: number }>
178181
{...commonProps}
179182
data={[
@@ -215,9 +218,9 @@ stories.add('using time scales', () => (
215218
tickValues: 'every 2 days',
216219
}}
217220
/>
218-
))
221+
)
219222

220-
stories.add('using logarithmic scales', () => (
223+
export const usingLogarithmicScales = () => (
221224
<ScatterPlot<{ x: number; y: number }>
222225
{...commonProps}
223226
data={[
@@ -250,9 +253,9 @@ stories.add('using logarithmic scales', () => (
250253
tickValues: [2, 4, 8, 16, 32, 64],
251254
}}
252255
/>
253-
))
256+
)
254257

255-
stories.add('using symmetric logarithmic scales', () => (
258+
export const usingSymmetricLogarithmicScales = () => (
256259
<ScatterPlot<{ x: number; y: number }>
257260
{...commonProps}
258261
data={[
@@ -280,18 +283,18 @@ stories.add('using symmetric logarithmic scales', () => (
280283
tickValues: [0, 1, 2, 3, 4, 5],
281284
}}
282285
/>
283-
))
286+
)
284287

285-
stories.add('node size', () => <ScatterPlot<SampleDatum> {...commonProps} nodeSize={24} />)
288+
export const nodeSize = () => <ScatterPlot<SampleDatum> {...commonProps} nodeSize={24} />
286289

287-
stories.add('varying node size', () => (
290+
export const varyingNodeSize = () => (
288291
<ScatterPlot<SampleDatum>
289292
{...commonProps}
290-
nodeSize={{ key: 'z', values: [0, 4], sizes: [9, 32] }}
293+
nodeSize={{ key: 'data.z', values: [0, 4], sizes: [9, 32] }}
291294
/>
292-
))
295+
)
293296

294-
stories.add('custom tooltip', () => (
297+
export const customTooltip = () => (
295298
<ScatterPlot<SampleDatum>
296299
{...commonProps}
297300
tooltip={({ node }) => (
@@ -312,7 +315,7 @@ stories.add('custom tooltip', () => (
312315
</div>
313316
)}
314317
/>
315-
))
318+
)
316319

317320
const SyncCharts = () => {
318321
const [nodeId, setNodeId] = useState(null)
@@ -370,50 +373,52 @@ const SyncCharts = () => {
370373
)
371374
}
372375

373-
stories.add('synchronizing charts', () => <SyncCharts />, {
374-
info: {
375-
text: `
376-
You can synchronize several charts using mouse handlers.
377-
This example wraps 2 scatterplots in a parent component and
378-
store current symbol id in a state which is then used to
379-
determine symbol size, using \`onMouseMove\`, \`onMouseLeave\`
380-
and a custom function for \`nodeSize\`.
381-
382-
Note that \`useMesh\` \`debugMesh\` are enabled on this example
383-
hence the extra red lines displayed on the chart.
384-
385-
The parent component hooks should look like this:
386-
387-
\`\`\`
388-
const [nodeId, setNodeId] = useState(null)
389-
const handleMouseMove = useCallback((node) => setNodeId(node.id), [setNodeId])
390-
const handleMouseLeave = useCallback(() => setNodeId(null), [setNodeId])
391-
const getNodeSize = useMemo(
392-
() => node => {
393-
if (nodeId !== null && nodeId === node.id) return 46
394-
return 8
395-
},
396-
[nodeId]
397-
)
398-
\`\`\`
399-
400-
and the two scatterplots share those properties:
401-
402-
\`\`\`
403-
<ResponsiveScatterPlot
404-
{/* other required props */}
405-
nodeSize={getNodeSize}
406-
onMouseMove={handleMouseMove}
407-
onMouseLeave={handleMouseLeave}
408-
/>
409-
\`\`\`
410-
411-
This approach can also be used to synchronize another chart type.
412-
`,
376+
export const synchronizingCharts = () => <SyncCharts />
377+
synchronizingCharts.story = {
378+
parameters: {
379+
info: {
380+
text: `
381+
You can synchronize several charts using mouse handlers.
382+
This example wraps 2 scatterplots in a parent component and
383+
store current symbol id in a state which is then used to
384+
determine symbol size, using \`onMouseMove\`, \`onMouseLeave\`
385+
and a custom function for \`nodeSize\`.
386+
387+
Note that \`useMesh\` \`debugMesh\` are enabled on this example
388+
hence the extra red lines displayed on the chart.
389+
390+
The parent component hooks should look like this:
391+
392+
\`\`\`
393+
const [nodeId, setNodeId] = useState(null)
394+
const handleMouseMove = useCallback((node) => setNodeId(node.id), [setNodeId])
395+
const handleMouseLeave = useCallback(() => setNodeId(null), [setNodeId])
396+
const getNodeSize = useMemo(
397+
() => node => {
398+
if (nodeId !== null && nodeId === node.id) return 46
399+
return 8
400+
},
401+
[nodeId]
402+
)
403+
\`\`\`
404+
405+
and the two scatterplots share those properties:
406+
407+
\`\`\`
408+
<ResponsiveScatterPlot
409+
nodeSize={getNodeSize}
410+
onMouseMove={handleMouseMove}
411+
onMouseLeave={handleMouseLeave}
412+
/>
413+
\`\`\`
414+
415+
This approach can also be used to synchronize another chart type.
416+
`,
417+
},
413418
},
414-
})
419+
}
415420

416-
stories.add('using mouse enter/leave', () => (
421+
export const usingMouseEnterLeave = () => (
417422
<ScatterPlot
418423
{...commonProps}
419424
onMouseEnter={(data, e) => {
@@ -423,7 +428,7 @@ stories.add('using mouse enter/leave', () => (
423428
console.log({ is: 'mouseleave', data, event: e }) // eslint-disable-line
424429
}}
425430
/>
426-
))
431+
)
427432

428433
const CustomNode = ({
429434
node,
@@ -486,7 +491,7 @@ const CustomNode = ({
486491
)
487492
}
488493

489-
stories.add('custom node', () => (
494+
export const customNode = () => (
490495
<ScatterPlot<{ x: number; y: number }>
491496
{...commonProps}
492497
colors={{ scheme: 'set2' }}
@@ -531,7 +536,7 @@ stories.add('custom node', () => (
531536
]}
532537
nodeComponent={CustomNode}
533538
/>
534-
))
539+
)
535540

536541
const AreaLayer = ({
537542
nodes,
@@ -549,67 +554,47 @@ const AreaLayer = ({
549554
return <path d={areaGenerator(nodes) as string} fill="rgba(232, 193, 160, .65)" />
550555
}
551556

552-
stories.add(
553-
'adding extra layers',
554-
() => (
555-
<ScatterPlot<{ x: number; y: number; low: number; high: number }>
556-
{...commonProps}
557-
data={[
558-
{
559-
id: 'things',
560-
data: [
561-
{ x: 0, y: 3.3, low: 2.3, high: 4.2 },
562-
{ x: 1, y: 3.5, low: 2.7, high: 4.1 },
563-
{ x: 2, y: 3.8, low: 3.1, high: 4.6 },
564-
{ x: 3, y: 4.1, low: 2.9, high: 4.5 },
565-
{ x: 4, y: 4.4, low: 3.2, high: 5.1 },
566-
{ x: 5, y: 4.7, low: 3.7, high: 5.4 },
567-
{ x: 6, y: 4.9, low: 3.2, high: 5.8 },
568-
{ x: 7, y: 5.2, low: 4.2, high: 6.1 },
569-
{ x: 8, y: 5.4, low: 3.8, high: 6.7 },
570-
{ x: 9, y: 5.6, low: 3.5, high: 7.1 },
571-
{ x: 10, y: 5.8, low: 3.2, high: 6.8 },
572-
{ x: 11, y: 6.0, low: 4, high: 7.2 },
573-
{ x: 12, y: 6.2, low: 4.2, high: 9.1 },
574-
{ x: 13, y: 6.4, low: 3.9, high: 9 },
575-
],
576-
},
577-
]}
578-
yScale={{
579-
type: 'linear',
580-
max: 10,
581-
}}
582-
legends={[]}
583-
layers={[
584-
'grid',
585-
'axes',
586-
AreaLayer,
587-
'nodes',
588-
'markers',
589-
'mesh',
590-
'legends',
591-
'annotations',
592-
]}
593-
annotations={[
594-
{
595-
type: 'circle',
596-
match: { index: 10 },
597-
noteX: 50,
598-
noteY: 50,
599-
offset: 3,
600-
noteTextOffset: -3,
601-
noteWidth: 10,
602-
note: 'an annotation',
603-
},
604-
]}
605-
/>
606-
),
607-
{
608-
info: {
609-
text: `
610-
You can use the layers property to add extra layers
611-
to the scatterplot chart.
612-
`,
613-
},
614-
}
557+
export const addingExtraLayers = () => (
558+
<ScatterPlot<{ x: number; y: number; low: number; high: number }>
559+
{...commonProps}
560+
data={[
561+
{
562+
id: 'things',
563+
data: [
564+
{ x: 0, y: 3.3, low: 2.3, high: 4.2 },
565+
{ x: 1, y: 3.5, low: 2.7, high: 4.1 },
566+
{ x: 2, y: 3.8, low: 3.1, high: 4.6 },
567+
{ x: 3, y: 4.1, low: 2.9, high: 4.5 },
568+
{ x: 4, y: 4.4, low: 3.2, high: 5.1 },
569+
{ x: 5, y: 4.7, low: 3.7, high: 5.4 },
570+
{ x: 6, y: 4.9, low: 3.2, high: 5.8 },
571+
{ x: 7, y: 5.2, low: 4.2, high: 6.1 },
572+
{ x: 8, y: 5.4, low: 3.8, high: 6.7 },
573+
{ x: 9, y: 5.6, low: 3.5, high: 7.1 },
574+
{ x: 10, y: 5.8, low: 3.2, high: 6.8 },
575+
{ x: 11, y: 6.0, low: 4, high: 7.2 },
576+
{ x: 12, y: 6.2, low: 4.2, high: 9.1 },
577+
{ x: 13, y: 6.4, low: 3.9, high: 9 },
578+
],
579+
},
580+
]}
581+
yScale={{
582+
type: 'linear',
583+
max: 10,
584+
}}
585+
legends={[]}
586+
layers={['grid', 'axes', AreaLayer, 'nodes', 'markers', 'mesh', 'legends', 'annotations']}
587+
annotations={[
588+
{
589+
type: 'circle',
590+
match: { index: 10 },
591+
noteX: 50,
592+
noteY: 50,
593+
offset: 3,
594+
noteTextOffset: -3,
595+
noteWidth: 10,
596+
note: 'an annotation',
597+
},
598+
]}
599+
/>
615600
)

‎packages/scatterplot/stories/ScatterPlotCanvas.stories.tsx

+67-61
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import { useState, useCallback, useMemo } from 'react'
22
import omit from 'lodash/omit'
3-
import { storiesOf } from '@storybook/react'
3+
import { Meta } from '@storybook/react'
44
// @ts-ignore
55
import { ScatterPlotCanvas, ResponsiveScatterPlotCanvas, ScatterPlotNodeData } from '../src'
66

7+
export default {
8+
component: ScatterPlotCanvas,
9+
title: 'ScatterPlotCanvas',
10+
} as Meta
11+
712
type SampleDatum = {
813
id: number
914
x: number
@@ -153,19 +158,17 @@ const commonProps = {
153158
],
154159
}
155160

156-
const stories = storiesOf('ScatterPlotCanvas', module)
157-
158-
stories.add('default', () => (
161+
export const Default = () => (
159162
<ScatterPlotCanvas<SampleDatum> {...commonProps} data={[sampleData[1]]} />
160-
))
163+
)
161164

162-
stories.add('multiple series', () => <ScatterPlotCanvas<SampleDatum> {...commonProps} />)
165+
export const MultipleSeries = () => <ScatterPlotCanvas<SampleDatum> {...commonProps} />
163166

164-
stories.add('alternative colors', () => (
167+
export const AlternativeColors = () => (
165168
<ScatterPlotCanvas<SampleDatum> {...commonProps} colors={{ scheme: 'category10' }} />
166-
))
169+
)
167170

168-
stories.add('using time scales', () => (
171+
export const UsingTimeScales = () => (
169172
<ScatterPlotCanvas<{ x: string; y: number }>
170173
{...commonProps}
171174
data={[
@@ -205,9 +208,9 @@ stories.add('using time scales', () => (
205208
format: '%b %d',
206209
}}
207210
/>
208-
))
211+
)
209212

210-
stories.add('using logarithmic scales', () => (
213+
export const UsingLogarithmicScales = () => (
211214
<ScatterPlotCanvas
212215
{...commonProps}
213216
data={[
@@ -238,9 +241,9 @@ stories.add('using logarithmic scales', () => (
238241
tickValues: [2, 4, 8, 16, 32, 64],
239242
}}
240243
/>
241-
))
244+
)
242245

243-
stories.add('using symmetric logarithmic scales', () => (
246+
export const UsingSymmetricLogarithmicScales = () => (
244247
<ScatterPlotCanvas
245248
{...commonProps}
246249
data={[
@@ -268,13 +271,13 @@ stories.add('using symmetric logarithmic scales', () => (
268271
tickValues: [0, 1, 2, 3, 4, 5],
269272
}}
270273
/>
271-
))
274+
)
272275

273-
stories.add('symbol size', () => <ScatterPlotCanvas<SampleDatum> {...commonProps} nodeSize={24} />)
276+
export const SymbolSize = () => <ScatterPlotCanvas<SampleDatum> {...commonProps} nodeSize={24} />
274277

275-
stories.add('varying symbol size', () => (
276-
<ScatterPlotCanvas<SampleDatum> {...commonProps} nodeSize={d => d.x + d.y * 2} />
277-
))
278+
export const VaryingSymbolSize = () => (
279+
<ScatterPlotCanvas<SampleDatum> {...commonProps} nodeSize={d => d.xValue + d.yValue * 2} />
280+
)
278281

279282
const SyncCharts = () => {
280283
const [nodeId, setNodeId] = useState(null)
@@ -332,50 +335,53 @@ const SyncCharts = () => {
332335
)
333336
}
334337

335-
stories.add('synchronizing charts', () => <SyncCharts />, {
336-
info: {
337-
text: `
338-
You can synchronize several charts using mouse handlers.
339-
This example wraps 2 scatterplots in a parent component and
340-
store current symbol id in a state which is then used to
341-
determine symbol size, using \`onMouseMove\`, \`onMouseLeave\`
342-
and a custom function for \`nodeSize\`.
343-
344-
Note that \`debugMesh\` is enabled on this example
345-
hence the extra red lines displayed on the chart.
346-
347-
The parent component hooks should look like this:
348-
349-
\`\`\`
350-
const [nodeId, setNodeId] = useState(null)
351-
const handleMouseMove = useCallback((node) => setNodeId(node.id), [setNodeId])
352-
const handleMouseLeave = useCallback(() => setNodeId(null), [setNodeId])
353-
const getNodeSize = useMemo(
354-
() => node => {
355-
if (nodeId !== null && nodeId === node.id) return 46
356-
return 8
357-
},
358-
[nodeId]
359-
)
360-
\`\`\`
361-
362-
and the two scatterplots share those properties:
363-
364-
\`\`\`
365-
<ResponsiveScatterPlotCanvas
366-
{/* other required props */}
367-
nodeSize={getNodeSize}
368-
onMouseMove={handleMouseMove}
369-
onMouseLeave={handleMouseLeave}
370-
/>
371-
\`\`\`
372-
373-
This approach can also be used to synchronize another chart type.
374-
`,
338+
export const SynchronizingCharts = () => <SyncCharts />
339+
SynchronizingCharts.story = {
340+
parameters: {
341+
info: {
342+
text: `
343+
You can synchronize several charts using mouse handlers.
344+
This example wraps 2 scatterplots in a parent component and
345+
store current symbol id in a state which is then used to
346+
determine symbol size, using \`onMouseMove\`, \`onMouseLeave\`
347+
and a custom function for \`nodeSize\`.
348+
349+
Note that \`debugMesh\` is enabled on this example
350+
hence the extra red lines displayed on the chart.
351+
352+
The parent component hooks should look like this:
353+
354+
\`\`\`
355+
const [nodeId, setNodeId] = useState(null)
356+
const handleMouseMove = useCallback((node) => setNodeId(node.id), [setNodeId])
357+
const handleMouseLeave = useCallback(() => setNodeId(null), [setNodeId])
358+
const getNodeSize = useMemo(
359+
() => node => {
360+
if (nodeId !== null && nodeId === node.id) return 46
361+
return 8
362+
},
363+
[nodeId]
364+
)
365+
\`\`\`
366+
367+
and the two scatterplots share those properties:
368+
369+
\`\`\`
370+
<ResponsiveScatterPlotCanvas
371+
{/* other required props */}
372+
nodeSize={getNodeSize}
373+
onMouseMove={handleMouseMove}
374+
onMouseLeave={handleMouseLeave}
375+
/>
376+
\`\`\`
377+
378+
This approach can also be used to synchronize another chart type.
379+
`,
380+
},
375381
},
376-
})
382+
}
377383

378-
stories.add('custom tooltip', () => (
384+
export const CustomTooltip = () => (
379385
<ScatterPlotCanvas<SampleDatum>
380386
{...commonProps}
381387
tooltip={({ node }) => (
@@ -396,4 +402,4 @@ stories.add('custom tooltip', () => (
396402
</div>
397403
)}
398404
/>
399-
))
405+
)

0 commit comments

Comments
 (0)
Please sign in to comment.