Skip to content

Commit e492a6f

Browse files
ploucplouc
committed
feat(waffle-grid): add the ability to define staggered delay for blank and value cells
1 parent 4160873 commit e492a6f

File tree

12 files changed

+853
-837
lines changed

12 files changed

+853
-837
lines changed

‎packages/waffle-grid/src/WaffleGrid.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ export const InnerWaffleGrid = ({
2424
blankCellComponent = svgDefaultProps.blankCellComponent,
2525
valueCellComponent = svgDefaultProps.valueCellComponent,
2626
blankCellsMotionConfig,
27+
blankCellsStaggeredDelay = svgDefaultProps.blankCellsStaggeredDelay,
2728
valueCellsMotionConfig,
29+
valueCellsStaggeredDelay = svgDefaultProps.valueCellsStaggeredDelay,
2830
role,
2931
ariaLabel,
3032
ariaLabelledBy,
@@ -60,9 +62,11 @@ export const InnerWaffleGrid = ({
6062
blankCells={blankCells}
6163
blankCellComponent={blankCellComponent}
6264
blankCellsMotionConfig={blankCellsMotionConfig}
65+
blankCellsStaggeredDelay={blankCellsStaggeredDelay}
6366
valueCells={valueCells}
6467
valueCellComponent={valueCellComponent}
6568
valueCellsMotionConfig={valueCellsMotionConfig}
69+
valueCellsStaggeredDelay={valueCellsStaggeredDelay}
6670
/>
6771
)
6872
}

‎packages/waffle-grid/src/WaffleGridBlankCells.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ export const WaffleGridBlankCells = ({
77
cells,
88
cellComponent,
99
motionConfig,
10+
staggeredDelay,
1011
}: {
1112
cells: WaffleGridCellData[]
1213
cellComponent: WaffleGridCellComponent
1314
motionConfig: WaffleGridSvgProps['blankCellsMotionConfig']
15+
staggeredDelay: number
1416
}) => {
1517
const { animate, config: defaultSpringConfig } = useMotionConfig()
1618
const springConfig = useSpringConfig(motionConfig || defaultSpringConfig)
@@ -30,7 +32,7 @@ export const WaffleGridBlankCells = ({
3032
enter: finalTransition,
3133
update: finalTransition,
3234
leave: inOutTransition,
33-
trail: animate ? 2 : undefined,
35+
trail: animate ? staggeredDelay : undefined,
3436
config: springConfig,
3537
immediate: !animate,
3638
})

‎packages/waffle-grid/src/WaffleGridCells.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,34 @@ export const WaffleGridCells = ({
66
blankCells,
77
blankCellComponent,
88
blankCellsMotionConfig,
9+
blankCellsStaggeredDelay,
910
valueCells,
1011
valueCellComponent,
1112
valueCellsMotionConfig,
13+
valueCellsStaggeredDelay,
1214
}: {
1315
blankCells: WaffleGridCellData[]
1416
blankCellComponent: WaffleGridCellComponent
1517
blankCellsMotionConfig: WaffleGridSvgProps['blankCellsMotionConfig']
18+
blankCellsStaggeredDelay: number
1619
valueCells: WaffleGridCellData[]
1720
valueCellComponent: WaffleGridCellComponent
1821
valueCellsMotionConfig: WaffleGridSvgProps['valueCellsMotionConfig']
22+
valueCellsStaggeredDelay: number
1923
}) => {
2024
return (
2125
<g>
2226
<WaffleGridBlankCells
2327
cells={blankCells}
2428
cellComponent={blankCellComponent}
2529
motionConfig={blankCellsMotionConfig}
30+
staggeredDelay={blankCellsStaggeredDelay}
2631
/>
2732
<WaffleGridValueCells
2833
cells={valueCells}
2934
cellComponent={valueCellComponent}
3035
motionConfig={valueCellsMotionConfig}
36+
staggeredDelay={valueCellsStaggeredDelay}
3137
/>
3238
</g>
3339
)

‎packages/waffle-grid/src/WaffleGridValueCells.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ export const WaffleGridValueCells = ({
77
cells,
88
cellComponent,
99
motionConfig,
10+
staggeredDelay,
1011
}: {
1112
cells: WaffleGridCellData[]
1213
cellComponent: WaffleGridCellComponent
1314
motionConfig: WaffleGridSvgProps['valueCellsMotionConfig']
15+
staggeredDelay: number
1416
}) => {
1517
const { animate, config: defaultSpringConfig } = useMotionConfig()
1618
const springConfig = useSpringConfig(motionConfig || defaultSpringConfig)
@@ -30,7 +32,7 @@ export const WaffleGridValueCells = ({
3032
enter: finalTransition,
3133
update: finalTransition,
3234
leave: outTransition,
33-
trail: animate ? 2 : undefined,
35+
trail: animate ? staggeredDelay : undefined,
3436
config: springConfig,
3537
immediate: !animate,
3638
})

‎packages/waffle-grid/src/props.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,6 @@ export const svgDefaultProps = {
1818
...commonDefaultProps,
1919
blankCellComponent: WaffleGridCell,
2020
valueCellComponent: WaffleGridCell,
21+
blankCellsStaggeredDelay: 2,
22+
valueCellsStaggeredDelay: 2,
2123
}

‎packages/waffle-grid/src/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,5 +83,7 @@ export type WaffleGridSvgProps = Partial<WaffleGridCommonProps> &
8383
Dimensions &
8484
ModernMotionProps & {
8585
blankCellsMotionConfig?: SpringConfigPresetName | SpringConfig
86+
blankCellsStaggeredDelay?: number
8687
valueCellsMotionConfig?: SpringConfigPresetName | SpringConfig
88+
valueCellsStaggeredDelay?: number
8789
}

‎website/src/components/controls/NumberArrayControl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface NumberArrayControlProps {
1313
flavors: Flavor[]
1414
currentFlavor: Flavor
1515
options: {
16-
unit: 'px' | '°'
16+
unit: 'px' | '°' | 'ms'
1717
items: {
1818
label: ReactNode
1919
min: number

‎website/src/components/controls/RangeControl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ interface RangeControlProps {
1515
value: number
1616
onChange: (value: number) => void
1717
options: {
18-
unit: 'px' | '°'
18+
unit: 'px' | '°' | 'ms'
1919
min: number
2020
max: number
2121
step?: number

‎website/src/data/components/waffle-grid/props.ts‎

Lines changed: 47 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -8,77 +8,36 @@ import {
88
import { ChartProperty } from '../../../types'
99

1010
const props: ChartProperty[] = [
11-
/*
1211
{
1312
key: 'data',
1413
group: 'Base',
15-
type: 'object[]',
14+
type: 'number[][]',
1615
required: true,
1716
help: 'Chart data.',
1817
description: `
19-
Here is what the data for a single chart with 2 bars would look like:
20-
21-
\`\`\`
22-
[
23-
{
24-
id: 'Fruits',
25-
data: [{ x: 'Apples', y: 32 }]
26-
},
27-
{
28-
id: 'Vegetables',
29-
data: [{ x: 'Eggplants', y: 27 }]
30-
}
31-
]
32-
\`\`\`
33-
34-
You can add several metrics per group:
35-
36-
\`\`\`
37-
[
38-
{
39-
id: 'Fruits',
40-
data: [
41-
{ x: 'Apples', y: 32 },
42-
{ x: 'Mangoes', y: 15 }
43-
]
44-
},
45-
{
46-
id: 'Vegetables',
47-
data: [
48-
{ x: 'Eggplants', y: 27 },
49-
{ x: 'Avocados', y: 34 }
50-
]
51-
}
52-
]
53-
\`\`\`
54-
55-
When a bar is computed, the \`id\` is going to be added
56-
as the \`groupId\`, \`x\` as the \`category\` and \`y\`
57-
as the value, for example the first bar for the number of Apples
58-
in the Fruits group would be:
59-
60-
\`\`\`
61-
{
62-
groupId: 'Fruits',
63-
category: 'Apples',
64-
value: 32
65-
}
66-
\`\`\`
67-
68-
You might read those values when adding an \`onClick\` handler
69-
for example, or when customizing the tooltip.
18+
Please note that the number of rows should match the length
19+
of \`yRange\` and each row number of columns should match
20+
the length of \`xRange\`.
7021
`,
7122
flavors: ['svg'],
7223
},
7324
{
74-
key: 'maxValue',
25+
key: 'xRange',
7526
group: 'Base',
76-
type: `'auto' | number`,
77-
required: false,
78-
help: `If 'auto', the max value is derived from the data, otherwise use a static value.`,
27+
type: 'string[]',
28+
required: true,
29+
help: 'X range.',
7930
flavors: ['svg'],
80-
defaultValue: svgDefaultProps.maxValue,
8131
},
32+
{
33+
key: 'yRange',
34+
group: 'Base',
35+
type: 'string[]',
36+
required: true,
37+
help: 'Y range.',
38+
flavors: ['svg'],
39+
},
40+
/*
8241
{
8342
key: 'valueFormat',
8443
group: 'Base',
@@ -356,12 +315,42 @@ const props: ChartProperty[] = [
356315
undefined,
357316
'Optional motion config override for blank cells.'
358317
),
318+
{
319+
key: 'blankCellsStaggeredDelay',
320+
group: 'Motion',
321+
type: 'number',
322+
required: false,
323+
help: 'Control the delay between each blank cell transition.',
324+
flavors: ['svg'],
325+
defaultValue: svgDefaultProps.blankCellsStaggeredDelay,
326+
controlType: 'range',
327+
controlOptions: {
328+
min: 0,
329+
max: 20,
330+
unit: 'ms',
331+
},
332+
},
359333
motionConfigProperty(
360334
'valueCellsMotionConfig',
361335
['svg'],
362336
undefined,
363337
'Optional motion config override for value cells.'
364338
),
339+
{
340+
key: 'valueCellsStaggeredDelay',
341+
group: 'Motion',
342+
type: 'number',
343+
required: false,
344+
help: 'Control the delay between each value cell transition.',
345+
flavors: ['svg'],
346+
defaultValue: svgDefaultProps.valueCellsStaggeredDelay,
347+
controlType: 'range',
348+
controlOptions: {
349+
min: 0,
350+
max: 20,
351+
unit: 'ms',
352+
},
353+
},
365354
]
366355

367356
export const groups = groupProperties(props)

‎website/src/pages/waffle-grid/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ const initialProperties: UnmappedRadarProps = {
2828
animate: svgDefaultProps.animate,
2929
motionConfig: 'gentle' as const,
3030
blankCellsMotionConfig: 'gentle' as const,
31+
blankCellsStaggeredDelay: svgDefaultProps.blankCellsStaggeredDelay,
3132
valueCellsMotionConfig: 'stiff' as const,
33+
valueCellsStaggeredDelay: svgDefaultProps.valueCellsStaggeredDelay,
3234

3335
isInteractive: svgDefaultProps.isInteractive,
3436

0 commit comments

Comments
 (0)