Sunburst children get parent's data in childColor function instead of their own

[leobudima]

When trying to make sunburst children data dependent on their value, I came across an issue where parent's data node is passed to the function instead of child's (parent's data is accessible from the child's "ancestor" property), which prevents accessing child's node data:

<ResponsiveSunburst
	data={data}
	margin={{ top: 10, right: 0, bottom: 10, left: 0 }}
	borderWidth={1}
	borderColor="white"
	colors={['#61cdbb', 'rgb(232, 168, 56)']}
	childColor={(d) => {
		console.warn(d); // this will print parent's data, instead of child's
	}}
	animate
	motionStiffness={90}
	motionDamping={15}
	isInteractive
/>

Code in question - nivo/packages/sunburst/src/Sunburst.js, around line 195:

} else if (node.depth > 1) {
        node.data.color = getChildColor(node.parent.data)  // should be node.data
}

I'll be sending a simple PR shortly.

Thanks for an absolutely amazing library!

[wyze]

I responded to your PR, but I think this breaks Sunburst. I believe you can achieve the same results with a little different code:

<ResponsiveSunburst
	data={data}
	margin={{ top: 10, right: 0, bottom: 10, left: 0 }}
	borderWidth={1}
	borderColor="white"
-	colors={['#61cdbb', 'rgb(232, 168, 56)']}
- 	childColor={(d) => {
-		console.warn(d); // this will print parent's data, instead of child's
-	}}
+	colors={(d) => {
+		switch (d.depth) {
+			case 0:
+				return '#61cdbb'
+			case 1:
+				return 'rgb(232, 168, 56)'
+		}
+	}}
+	childColor="noinherit"
	animate
	motionStiffness={90}
	motionDamping={15}
	isInteractive
/>

[plouc]

Please see the comment on #1210