feat(sunburst): pass child node to childColor function (#1520)

plouc · May 22, 2021 · 5580e96 · 5580e96
1 parent cb98390
commit 5580e96
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/colors/src/inheritedColor.ts b/packages/colors/src/inheritedColor.ts
@@ -15,7 +15,7 @@ export type ColorModifierFunction = (color: RGBColor) => RGBColor
 
 export type InheritedColorConfigStaticColor = string
 
-export type InheritedColorConfigCustomFunction<Datum> = (d: Datum) => string
+export type InheritedColorConfigCustomFunction<Datum> = (d: Datum, ...drest: Datum[]) => string
 
 export interface InheritedColorConfigFromTheme {
     theme: string
@@ -61,7 +61,7 @@ export const getInheritedColorGenerator = <Datum = any>(
 ) => {
     // user provided function
     if (typeof config === 'function') {
-        return (datum: Datum) => config(datum)
+        return config
     }
 
     if (isPlainObject(config)) {

diff --git a/packages/sunburst/src/hooks.ts b/packages/sunburst/src/hooks.ts
@@ -108,7 +108,7 @@ export const useSunburst = <RawDatum>({
             }
 
             if (inheritColorFromParent && parent && normalizedNode.depth > 1) {
-                normalizedNode.color = getChildColor(parent)
+                normalizedNode.color = getChildColor(parent, normalizedNode)
             } else {
                 normalizedNode.color = getColor(normalizedNode)
             }

diff --git a/packages/sunburst/stories/sunburst.stories.tsx b/packages/sunburst/stories/sunburst.stories.tsx
@@ -46,6 +46,13 @@ stories.add('with custom colors', () => (
     <Sunburst<RawDatum> {...commonProperties} colors={customPalette} />
 ))
 
+stories.add('with custom child colors', () => (
+    <Sunburst<RawDatum> {...commonProperties} childColor={(parent, child) => {
+        // @ts-expect-error
+        return child.data.color;
+    }} />
+))
+
 stories.add('with formatted tooltip value', () => (
     <Sunburst<RawDatum> {...commonProperties} valueFormat=" >-$,.2f" />
 ))