feat(radial-bar): implement defs/fill, modeled after Bar implementation (#1957)

* working checkpoint of hard coded defs for a patterned render of a radial arc

* instead bind the fill to root datum

* remove disabled props for fill on datum.data

* convert hard code to story

* remove diagnostics

* run make fmt

Author: bdefore

packages/radial-bar/src/RadialBar.tsx

@@ -1,5 +1,13 @@
 import { createElement, Fragment, ReactNode } from 'react'
-import { Container, useDimensions, SvgWrapper, clampArc } from '@nivo/core'
+import {
+    Container,
+    useDimensions,
+    SvgWrapper,
+    clampArc,
+    // @ts-ignore
+    bindDefs,
+} from '@nivo/core'
+
 import { ArcLabelsLayer } from '@nivo/arcs'
 import { BoxLegendSvg } from '@nivo/legends'
 import { PolarGrid, RadialAxis, CircularAxis } from '@nivo/polar-axes'
@@ -37,6 +45,8 @@ const InnerRadialBar = <D extends RadialBarDatum>({
     circularAxisInner = svgDefaultProps.circularAxisInner,
     circularAxisOuter = svgDefaultProps.circularAxisOuter,
     colors = svgDefaultProps.colors,
+    defs = svgDefaultProps.defs,
+    fill = svgDefaultProps.fill,
     borderWidth = svgDefaultProps.borderWidth,
     borderColor = svgDefaultProps.borderColor,
     enableLabels = svgDefaultProps.enableLabels,
@@ -219,11 +229,17 @@ const InnerRadialBar = <D extends RadialBarDatum>({
         )
     }
 
+    const boundDefs = bindDefs(defs, bars, fill, {
+        dataKey: 'data',
+        targetKey: 'fill',
+    })
+
     return (
         <SvgWrapper
             width={outerWidth}
             height={outerHeight}
             margin={margin}
+            defs={boundDefs}
             role={role}
             ariaLabel={ariaLabel}
             ariaLabelledBy={ariaLabelledBy}

packages/radial-bar/src/props.ts

@@ -39,6 +39,9 @@ export const commonDefaultProps = {
 
     legends: [],
 
+    defs: [],
+    fill: [],
+
     animate: true,
     motionConfig: 'gentle' as const,
     transitionMode: 'centerRadius' as const,

packages/radial-bar/src/types.ts

@@ -6,6 +6,7 @@ import {
     ModernMotionProps,
     PropertyAccessor,
     ValueFormat,
+    SvgDefsAndFill,
 } from '@nivo/core'
 import { Arc, ArcGenerator, ArcLabelsProps, ArcTransitionMode } from '@nivo/arcs'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
@@ -123,4 +124,5 @@ export type RadialBarSvgProps<D extends RadialBarDatum = RadialBarDatum> = Parti
 > &
     RadialBarDataProps<D> &
     Dimensions &
-    ModernMotionProps
+    ModernMotionProps &
+    SvgDefsAndFill<D>

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

@@ -245,6 +245,32 @@ const demoPhases: {
             enableLabels: true,
         },
     },
+    {
+        description: 'Patterned Fill',
+        props: {
+            ...commonProperties,
+            defs: [
+                {
+                    id: 'lines',
+                    type: 'patternLines',
+                    background: 'rgba(0, 0, 0, 0)',
+                    color: 'inherit',
+                    rotation: -45,
+                    lineWidth: 4,
+                    spacing: 8,
+                },
+            ],
+            fill: [
+                {
+                    match: {
+                        // id: 'Online.Fruits'
+                        x: 'Fruits',
+                    },
+                    id: 'lines',
+                },
+            ],
+        },
+    },
 ]
 
 const demoTheme: Theme = {