feat(waffle): restore support for patterns & gradients for the SVG im…

…plementation
plouc · May 7, 2023 · 5d95efc · 5d95efc
1 parent 4cca1e3
commit 5d95efc
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 14 deletions.
diff --git a/packages/waffle/src/Waffle.tsx b/packages/waffle/src/Waffle.tsx
@@ -33,8 +33,8 @@ const InnerWaffle = <D extends Datum>({
     borderRadius = svgDefaultProps.borderRadius,
     borderWidth = svgDefaultProps.borderWidth,
     borderColor = svgDefaultProps.borderColor,
-    // defs = svgDefaultProps.defs,
-    // fill = svgDefaultProps.fill,
+    defs = svgDefaultProps.defs,
+    fill = svgDefaultProps.fill,
     isInteractive = svgDefaultProps.isInteractive,
     onMouseEnter,
     onMouseMove,
@@ -56,7 +56,7 @@ const InnerWaffle = <D extends Datum>({
         partialMargin
     )
 
-    const { cells, legendData, computedData } = useWaffle<D>({
+    const { cells, legendData, computedData, boundDefs } = useWaffle<D>({
         width: innerWidth,
         height: innerHeight,
         data,
@@ -71,6 +71,8 @@ const InnerWaffle = <D extends Datum>({
         emptyOpacity,
         borderColor,
         forwardLegendData,
+        defs,
+        fill,
     })
 
     const layerById: Record<LayerId, ReactNode> = {
@@ -136,7 +138,7 @@ const InnerWaffle = <D extends Datum>({
             width={outerWidth}
             height={outerHeight}
             margin={margin}
-            //defs={boundDefs}
+            defs={boundDefs}
             role={role}
             ariaLabel={ariaLabel}
             ariaLabelledBy={ariaLabelledBy}

diff --git a/packages/waffle/src/WaffleCell.tsx b/packages/waffle/src/WaffleCell.tsx
@@ -16,7 +16,7 @@ export const WaffleCell = <D extends Datum>({
         rx={borderRadius}
         ry={borderRadius}
         opacity={animatedProps.opacity}
-        fill={animatedProps.fill}
+        fill={cell.fill || animatedProps.color}
         stroke={animatedProps.borderColor}
         strokeWidth={borderWidth}
         data-test-id={testIdPrefix ? `${testIdPrefix}.cell_${cell.key}` : undefined}

diff --git a/packages/waffle/src/WaffleCellHtml.tsx b/packages/waffle/src/WaffleCellHtml.tsx
@@ -15,7 +15,7 @@ export const WaffleCellHtml = <D extends Datum>({
             left: animatedProps.x,
             width: animatedProps.size,
             height: animatedProps.size,
-            background: animatedProps.fill,
+            background: animatedProps.color,
             opacity: animatedProps.opacity,
             boxSizing: 'content-box',
             borderStyle: 'solid',

diff --git a/packages/waffle/src/hooks.ts b/packages/waffle/src/hooks.ts
@@ -1,7 +1,13 @@
 import { createElement, MouseEvent, useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTransition } from '@react-spring/web'
 import { line as d3Line, curveLinearClosed } from 'd3-shape'
-import { useMotionConfig, useTheme, useValueFormatter } from '@nivo/core'
+import {
+    useMotionConfig,
+    useTheme,
+    useValueFormatter,
+    // @ts-ignore
+    bindDefs,
+} from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
 import { OrdinalColorScaleConfig, useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
 import { generateGrid, GridCell, GridFillDirection, Vertex, getCellsPolygons } from '@nivo/grid'
@@ -88,6 +94,10 @@ export const mergeCellsData = <RawDatum extends Datum>(
                 cellWithData.color = datum.color
                 cellWithData.opacity = 1
                 cellWithData.borderColor = datum.borderColor
+
+                if (datum.fill) {
+                    cellWithData.fill = datum.fill
+                }
             }
         }
     }, [])
@@ -127,10 +137,10 @@ export const useWaffle = <D extends Datum = Datum>({
     emptyOpacity = commonDefaultProps.emptyOpacity,
     borderColor = commonDefaultProps.borderColor,
     forwardLegendData,
-}: // `defs` and `fill` are only supported for the SVG implementation
-// defs = [],
-// fill = [],
-Pick<
+    // `defs` and `fill` are only supported for the SVG implementation
+    defs = [],
+    fill = [],
+}: Pick<
     CommonProps<D>,
     | 'hiddenIds'
     | 'valueFormat'
@@ -195,6 +205,9 @@ Pick<
         return enhancedData
     }, [data, hiddenIds, unit, formatValue, getColor, getBorderColor])
 
+    // Please note that this also mutates `computedData`.
+    const boundDefs = useMemo(() => bindDefs(defs, computedData, fill), [computedData, defs, fill])
+
     const emptyCells = useMemo(
         () =>
             computeGrid({
@@ -252,6 +265,7 @@ Pick<
         computedData,
         legendData,
         getBorderColor,
+        boundDefs,
     }
 }
 
@@ -332,7 +346,7 @@ export const useAnimatedCells = <D extends Datum>({
             (cell: Cell<D>): CellAnimatedProps => ({
                 x: cell.x + padding / 2,
                 y: cell.y + padding / 2,
-                fill: cell.color,
+                color: cell.color,
                 size: cell.width - padding,
                 opacity: cell.opacity,
                 borderColor: cell.borderColor,

diff --git a/packages/waffle/src/types.ts b/packages/waffle/src/types.ts
@@ -24,13 +24,16 @@ export interface ComputedDatum<D extends Datum> extends Datum {
     endAt: number
     polygons: Vertex[][]
     color: string
-    borderColor: string
+    // Used for patterns & gradients
     fill?: string
+    borderColor: string
 }
 
 // Used for cells without data, considered empty.
 export interface EmptyCell extends GridCell {
     color: string
+    // Used for patterns & gradients
+    fill?: string
     opacity: number
     borderColor: string
 }
@@ -50,7 +53,7 @@ export type CellAnimatedProps = {
     x: number
     y: number
     size: number
-    fill: string
+    color: string
     opacity: number
     borderColor: string
 }

diff --git a/storybook/stories/waffle/Waffle.stories.tsx b/storybook/stories/waffle/Waffle.stories.tsx
@@ -152,6 +152,8 @@ export const Patterns: Story = {
         <Waffle
             {...commonProps}
             fillDirection={args.fillDirection}
+            padding={0}
+            borderRadius={0}
             defs={[
                 patternDotsDef('dots', {
                     background: 'inherit',