feat(circle-packing): add a dedicated prop to enable parent color inh…

…eritance
plouc · Apr 26, 2021 · b864de9 · b864de9
1 parent b91c057
commit b864de9
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 7 deletions.
diff --git a/packages/circle-packing/src/CirclePacking.tsx b/packages/circle-packing/src/CirclePacking.tsx
@@ -37,6 +37,7 @@ const InnerCirclePacking = <RawDatum,>({
         Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>
     >,
     colorBy = defaultProps.colorBy,
+    inheritColorFromParent = defaultProps.inheritColorFromParent,
     childColor = defaultProps.childColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
     borderWidth = defaultProps.borderWidth,
     borderColor = defaultProps.borderColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
@@ -74,6 +75,7 @@ const InnerCirclePacking = <RawDatum,>({
         leavesOnly,
         colors,
         colorBy,
+        inheritColorFromParent,
         childColor,
     })
 

diff --git a/packages/circle-packing/src/CirclePackingCanvas.tsx b/packages/circle-packing/src/CirclePackingCanvas.tsx
@@ -33,6 +33,7 @@ const InnerCirclePackingCanvas = <RawDatum,>({
         Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>
     >,
     colorBy = defaultProps.colorBy,
+    inheritColorFromParent = defaultProps.inheritColorFromParent,
     childColor = defaultProps.childColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
     borderWidth = defaultProps.borderWidth,
     borderColor = defaultProps.borderColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
@@ -69,6 +70,7 @@ const InnerCirclePackingCanvas = <RawDatum,>({
         leavesOnly,
         colors,
         colorBy,
+        inheritColorFromParent,
         childColor,
     })
 

diff --git a/packages/circle-packing/src/CirclePackingHtml.tsx b/packages/circle-packing/src/CirclePackingHtml.tsx
@@ -31,6 +31,7 @@ export const InnerCirclePackingHtml = <RawDatum,>({
         Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>
     >,
     colorBy = defaultProps.colorBy,
+    inheritColorFromParent = defaultProps.inheritColorFromParent,
     childColor = defaultProps.childColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
     borderWidth = defaultProps.borderWidth,
     borderColor = defaultProps.borderColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
@@ -68,6 +69,7 @@ export const InnerCirclePackingHtml = <RawDatum,>({
         leavesOnly,
         colors,
         colorBy,
+        inheritColorFromParent,
         childColor,
     })
 

diff --git a/packages/circle-packing/src/hooks.ts b/packages/circle-packing/src/hooks.ts
@@ -27,6 +27,7 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
     leavesOnly,
     colors,
     colorBy,
+    inheritColorFromParent,
     childColor,
 }: {
     data: RawDatum
@@ -38,6 +39,7 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
     leavesOnly: CirclePackingCommonProps<RawDatum>['leavesOnly']
     colors: CirclePackingCommonProps<RawDatum>['colors']
     colorBy: CirclePackingCommonProps<RawDatum>['colorBy']
+    inheritColorFromParent: CirclePackingCommonProps<RawDatum>['inheritColorFromParent']
     childColor: CirclePackingCommonProps<RawDatum>['childColor']
 }): ComputedDatum<RawDatum>[] => {
     const getId = usePropertyAccessor<RawDatum, string>(id)
@@ -97,7 +99,7 @@ export const useCirclePacking = <RawDatum extends DatumWithChildren<RawDatum>>({
             height: descendant.height,
         }
 
-        if (childColor !== 'noinherit' && parent && normalizedNode.depth > 1) {
+        if (inheritColorFromParent && parent && normalizedNode.depth > 1) {
             normalizedNode.color = getChildColor(parent)
         } else {
             normalizedNode.color = getColor(normalizedNode)

diff --git a/packages/circle-packing/src/props.ts b/packages/circle-packing/src/props.ts
@@ -10,6 +10,7 @@ export const defaultProps = {
     layers: ['circles', 'labels'] as CirclePackingLayerId[],
     colors: { scheme: 'nivo' } as OrdinalColorScaleConfig,
     colorBy: 'depth' as const,
+    inheritColorFromParent: false,
     childColor: 'noinherit',
     borderWidth: 0,
     borderColor: {

diff --git a/packages/circle-packing/src/types.ts b/packages/circle-packing/src/types.ts
@@ -62,8 +62,8 @@ export interface CirclePackingCommonProps<RawDatum> {
     theme?: Theme
     colors: OrdinalColorScaleConfig<Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>>
     colorBy: 'id' | 'depth'
-    // if specified, will determine the node's color
-    // according to its parent
+    inheritColorFromParent: boolean
+    // used if `inheritColorFromParent` is `true`
     childColor: InheritedColorConfig<ComputedDatum<RawDatum>>
     borderWidth: number
     borderColor: InheritedColorConfig<ComputedDatum<RawDatum>>

diff --git a/website/src/data/components/circle-packing/props.js b/website/src/data/components/circle-packing/props.js
@@ -207,9 +207,19 @@ const props = [
             ],
         },
     },
+    {
+        key: 'inheritColorFromParent',
+        help: 'Inherit color from parent node starting from 2nd level.',
+        type: 'boolean',
+        required: false,
+        defaultValue: defaultProps.inheritColorFromParent,
+        controlType: 'switch',
+        group: 'Style',
+    },
     {
         key: 'childColor',
-        help: 'Defines how to compute child nodes color.',
+        help:
+            'Defines how to compute child nodes color, only used when inheritColorFromParent is enabled.',
         type: 'string | object | Function',
         required: false,
         defaultValue: defaultProps.childColor,

diff --git a/website/src/pages/circle-packing/canvas.js b/website/src/pages/circle-packing/canvas.js
@@ -33,7 +33,11 @@ const initialProperties = {
     valueFormat: { format: '', enabled: false },
     colors: { scheme: 'spectral' },
     colorBy: 'id',
-    childColor: 'noinherit',
+    inheritColorFromParent: false,
+    childColor: {
+        from: 'color',
+        modifiers: [['brighter', 0.4]],
+    },
     padding: 1,
     leavesOnly: true,
     enableLabels: true,

diff --git a/website/src/pages/circle-packing/html.js b/website/src/pages/circle-packing/html.js
@@ -20,7 +20,11 @@ const initialProperties = {
     valueFormat: { format: '', enabled: false },
     colors: { scheme: 'spectral' },
     colorBy: 'depth',
-    childColor: 'noinherit',
+    inheritColorFromParent: false,
+    childColor: {
+        from: 'color',
+        modifiers: [['brighter', 0.4]],
+    },
     padding: 2,
     leavesOnly: false,
     enableLabels: true,

diff --git a/website/src/pages/circle-packing/index.js b/website/src/pages/circle-packing/index.js
@@ -19,7 +19,11 @@ const initialProperties = {
     valueFormat: { format: '', enabled: false },
     colors: { scheme: 'nivo' },
     colorBy: 'depth',
-    childColor: 'noinherit',
+    inheritColorFromParent: false,
+    childColor: {
+        from: 'color',
+        modifiers: [['brighter', 0.4]],
+    },
     padding: 4,
     leavesOnly: false,
     enableLabels: true,