feat(waffle-grid): add the ability to define staggered delay for blan…

…k and value cells

packages/waffle-grid/src/WaffleGrid.tsx

@@ -24,7 +24,9 @@ export const InnerWaffleGrid = ({
  blankCellComponent = svgDefaultProps.blankCellComponent,
  valueCellComponent = svgDefaultProps.valueCellComponent,
  blankCellsMotionConfig,
+ blankCellsStaggeredDelay = svgDefaultProps.blankCellsStaggeredDelay,
  valueCellsMotionConfig,
+ valueCellsStaggeredDelay = svgDefaultProps.valueCellsStaggeredDelay,
  role,
  ariaLabel,
  ariaLabelledBy,
@@ -60,9 +62,11 @@ export const InnerWaffleGrid = ({
  blankCells={blankCells}
  blankCellComponent={blankCellComponent}
  blankCellsMotionConfig={blankCellsMotionConfig}
+ blankCellsStaggeredDelay={blankCellsStaggeredDelay}
  valueCells={valueCells}
  valueCellComponent={valueCellComponent}
  valueCellsMotionConfig={valueCellsMotionConfig}
+ valueCellsStaggeredDelay={valueCellsStaggeredDelay}
  />
  )
  }

packages/waffle-grid/src/WaffleGridBlankCells.tsx

@@ -7,10 +7,12 @@ export const WaffleGridBlankCells = ({
  cells,
  cellComponent,
  motionConfig,
+ staggeredDelay,
 }: {
  cells: WaffleGridCellData[]
  cellComponent: WaffleGridCellComponent
  motionConfig: WaffleGridSvgProps['blankCellsMotionConfig']
+ staggeredDelay: number
 }) => {
  const { animate, config: defaultSpringConfig } = useMotionConfig()
  const springConfig = useSpringConfig(motionConfig || defaultSpringConfig)
@@ -30,7 +32,7 @@ export const WaffleGridBlankCells = ({
  enter: finalTransition,
  update: finalTransition,
  leave: inOutTransition,
- trail: animate ? 2 : undefined,
+ trail: animate ? staggeredDelay : undefined,
  config: springConfig,
  immediate: !animate,
  })

packages/waffle-grid/src/WaffleGridCells.tsx

@@ -6,28 +6,34 @@ export const WaffleGridCells = ({
  blankCells,
  blankCellComponent,
  blankCellsMotionConfig,
+ blankCellsStaggeredDelay,
  valueCells,
  valueCellComponent,
  valueCellsMotionConfig,
+ valueCellsStaggeredDelay,
 }: {
  blankCells: WaffleGridCellData[]
  blankCellComponent: WaffleGridCellComponent
  blankCellsMotionConfig: WaffleGridSvgProps['blankCellsMotionConfig']
+ blankCellsStaggeredDelay: number
  valueCells: WaffleGridCellData[]
  valueCellComponent: WaffleGridCellComponent
  valueCellsMotionConfig: WaffleGridSvgProps['valueCellsMotionConfig']
+ valueCellsStaggeredDelay: number
 }) => {
  return (
  <g>
  <WaffleGridBlankCells
  cells={blankCells}
  cellComponent={blankCellComponent}
  motionConfig={blankCellsMotionConfig}
+ staggeredDelay={blankCellsStaggeredDelay}
  />
  <WaffleGridValueCells
  cells={valueCells}
  cellComponent={valueCellComponent}
  motionConfig={valueCellsMotionConfig}
+ staggeredDelay={valueCellsStaggeredDelay}
  />
  </g>
  )

packages/waffle-grid/src/WaffleGridValueCells.tsx

@@ -7,10 +7,12 @@ export const WaffleGridValueCells = ({
  cells,
  cellComponent,
  motionConfig,
+ staggeredDelay,
 }: {
  cells: WaffleGridCellData[]
  cellComponent: WaffleGridCellComponent
  motionConfig: WaffleGridSvgProps['valueCellsMotionConfig']
+ staggeredDelay: number
 }) => {
  const { animate, config: defaultSpringConfig } = useMotionConfig()
  const springConfig = useSpringConfig(motionConfig || defaultSpringConfig)
@@ -30,7 +32,7 @@ export const WaffleGridValueCells = ({
  enter: finalTransition,
  update: finalTransition,
  leave: outTransition,
- trail: animate ? 2 : undefined,
+ trail: animate ? staggeredDelay : undefined,
  config: springConfig,
  immediate: !animate,
  })

packages/waffle-grid/src/props.ts

@@ -18,4 +18,6 @@ export const svgDefaultProps = {
  ...commonDefaultProps,
  blankCellComponent: WaffleGridCell,
  valueCellComponent: WaffleGridCell,
+ blankCellsStaggeredDelay: 2,
+ valueCellsStaggeredDelay: 2,
 }

packages/waffle-grid/src/types.ts

@@ -83,5 +83,7 @@ export type WaffleGridSvgProps = Partial<WaffleGridCommonProps> &
  Dimensions &
  ModernMotionProps & {
  blankCellsMotionConfig?: SpringConfigPresetName | SpringConfig
+ blankCellsStaggeredDelay?: number
  valueCellsMotionConfig?: SpringConfigPresetName | SpringConfig
+ valueCellsStaggeredDelay?: number
  }

website/src/components/controls/NumberArrayControl.tsx

@@ -13,7 +13,7 @@ interface NumberArrayControlProps {
  flavors: Flavor[]
  currentFlavor: Flavor
  options: {
- unit: 'px' | '°'
+ unit: 'px' | '°' | 'ms'
  items: {
  label: ReactNode
  min: number

website/src/components/controls/RangeControl.tsx

@@ -15,7 +15,7 @@ interface RangeControlProps {
  value: number
  onChange: (value: number) => void
  options: {
- unit: 'px' | '°'
+ unit: 'px' | '°' | 'ms'
  min: number
  max: number
  step?: number

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

@@ -8,77 +8,36 @@ import {
 import { ChartProperty } from '../../../types'
 
 const props: ChartProperty[] = [
- /*
  {
  key: 'data',
  group: 'Base',
- type: 'object[]',
+ type: 'number[][]',
  required: true,
  help: 'Chart data.',
  description: `
- Here is what the data for a single chart with 2 bars would look like:
- 
- \`\`\`
- [
- {
- id: 'Fruits',
- data: [{ x: 'Apples', y: 32 }]
- },
- {
- id: 'Vegetables',
- data: [{ x: 'Eggplants', y: 27 }]
- }
- ]
- \`\`\`
- 
- You can add several metrics per group:
- 
- \`\`\`
- [
- {
- id: 'Fruits',
- data: [
- { x: 'Apples', y: 32 },
- { x: 'Mangoes', y: 15 }
- ]
- },
- {
- id: 'Vegetables',
- data: [
- { x: 'Eggplants', y: 27 },
- { x: 'Avocados', y: 34 }
- ]
- }
- ]
- \`\`\`
- 
- When a bar is computed, the \`id\` is going to be added
- as the \`groupId\`, \`x\` as the \`category\` and \`y\`
- as the value, for example the first bar for the number of Apples
- in the Fruits group would be:
- 
- \`\`\`
- {
- groupId: 'Fruits',
- category: 'Apples',
- value: 32
- }
- \`\`\`
- 
- You might read those values when adding an \`onClick\` handler
- for example, or when customizing the tooltip.
+ Please note that the number of rows should match the length
+ of \`yRange\` and each row number of columns should match
+ the length of \`xRange\`.
  `,
  flavors: ['svg'],
  },
  {
- key: 'maxValue',
+ key: 'xRange',
  group: 'Base',
- type: `'auto' | number`,
- required: false,
- help: `If 'auto', the max value is derived from the data, otherwise use a static value.`,
+ type: 'string[]',
+ required: true,
+ help: 'X range.',
  flavors: ['svg'],
- defaultValue: svgDefaultProps.maxValue,
  },
+ {
+ key: 'yRange',
+ group: 'Base',
+ type: 'string[]',
+ required: true,
+ help: 'Y range.',
+ flavors: ['svg'],
+ },
+ /*
  {
  key: 'valueFormat',
  group: 'Base',
@@ -356,12 +315,42 @@ const props: ChartProperty[] = [
  undefined,
  'Optional motion config override for blank cells.'
  ),
+ {
+ key: 'blankCellsStaggeredDelay',
+ group: 'Motion',
+ type: 'number',
+ required: false,
+ help: 'Control the delay between each blank cell transition.',
+ flavors: ['svg'],
+ defaultValue: svgDefaultProps.blankCellsStaggeredDelay,
+ controlType: 'range',
+ controlOptions: {
+ min: 0,
+ max: 20,
+ unit: 'ms',
+ },
+ },
  motionConfigProperty(
  'valueCellsMotionConfig',
  ['svg'],
  undefined,
  'Optional motion config override for value cells.'
  ),
+ {
+ key: 'valueCellsStaggeredDelay',
+ group: 'Motion',
+ type: 'number',
+ required: false,
+ help: 'Control the delay between each value cell transition.',
+ flavors: ['svg'],
+ defaultValue: svgDefaultProps.valueCellsStaggeredDelay,
+ controlType: 'range',
+ controlOptions: {
+ min: 0,
+ max: 20,
+ unit: 'ms',
+ },
+ },
 ]
 
 export const groups = groupProperties(props)

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

@@ -28,7 +28,9 @@ const initialProperties: UnmappedRadarProps = {
  animate: svgDefaultProps.animate,
  motionConfig: 'gentle' as const,
  blankCellsMotionConfig: 'gentle' as const,
+ blankCellsStaggeredDelay: svgDefaultProps.blankCellsStaggeredDelay,
  valueCellsMotionConfig: 'stiff' as const,
+ valueCellsStaggeredDelay: svgDefaultProps.valueCellsStaggeredDelay,
 
  isInteractive: svgDefaultProps.isInteractive,