feat(circle-packing): restore patterns and gradients support for the …

…SVG implementation
plouc · Apr 26, 2021 · 08ee515 · 08ee515
1 parent b864de9
commit 08ee515
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/packages/circle-packing/src/CirclePacking.tsx b/packages/circle-packing/src/CirclePacking.tsx
@@ -1,4 +1,4 @@
-import React, { createElement, Fragment, ReactNode } from 'react'
+import React, { createElement, Fragment, ReactNode, useMemo } from 'react'
 import {
     // @ts-ignore
     bindDefs,
@@ -42,6 +42,8 @@ const InnerCirclePacking = <RawDatum,>({
     borderWidth = defaultProps.borderWidth,
     borderColor = defaultProps.borderColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
     circleComponent = CircleSvg,
+    defs = defaultProps.defs,
+    fill = defaultProps.fill,
     enableLabels = defaultProps.enableLabels,
     label = defaultProps.label,
     labelsFilter,
@@ -81,6 +83,12 @@ const InnerCirclePacking = <RawDatum,>({
 
     const zoomedNodes = useCirclePackingZoom<RawDatum>(nodes, zoomedId, innerWidth, innerHeight)
 
+    const boundDefs = useMemo(() => bindDefs(defs, zoomedNodes, fill, { targetKey: 'fill' }), [
+        defs,
+        zoomedNodes,
+        fill,
+    ])
+
     const layerById: Record<CirclePackingLayerId, ReactNode> = {
         circles: null,
         labels: null,
@@ -127,7 +135,7 @@ const InnerCirclePacking = <RawDatum,>({
             width={outerWidth}
             height={outerHeight}
             margin={margin}
-            //defs={boundDefs}
+            defs={boundDefs}
             role={role}
         >
             {layers.map((layer, i) => {

diff --git a/packages/circle-packing/src/CircleSvg.tsx b/packages/circle-packing/src/CircleSvg.tsx
@@ -24,7 +24,7 @@ export const CircleSvg = <RawDatum,>({
             cx={style.x}
             cy={style.y}
             r={style.radius}
-            fill={style.color}
+            fill={node.fill || style.color}
             stroke={style.borderColor}
             strokeWidth={style.borderWidth}
             opacity={style.opacity}

diff --git a/packages/circle-packing/src/props.ts b/packages/circle-packing/src/props.ts
@@ -17,6 +17,8 @@ export const defaultProps = {
         from: 'color',
         modifiers: [['darker', 0.3]],
     },
+    defs: [],
+    fill: [],
     enableLabels: false,
     label: 'id',
     labelTextColor: {

diff --git a/packages/circle-packing/src/types.ts b/packages/circle-packing/src/types.ts
@@ -1,11 +1,12 @@
 import * as React from 'react'
+import { Interpolation, SpringValue } from 'react-spring'
 import {
     Box,
-    Dimensions,
     ModernMotionProps,
     Theme,
     PropertyAccessor,
     ValueFormat,
+    SvgDefsAndFill,
 } from '@nivo/core'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 
@@ -84,7 +85,8 @@ export interface CirclePackingCommonProps<RawDatum> {
 }
 
 export type CirclePackingSvgProps<RawDatum> = CirclePackingCommonProps<RawDatum> &
-    MouseHandlers<RawDatum>
+    MouseHandlers<RawDatum> &
+    SvgDefsAndFill<ComputedDatum<RawDatum>>
 
 export type CirclePackingHtmlProps<RawDatum> = CirclePackingCommonProps<RawDatum> &
     MouseHandlers<RawDatum>