feat(sunburst): add innerRadius and renderRootNode props

Author: uson1x

packages/sunburst/package.json

@@ -36,6 +36,8 @@
         "@nivo/tooltip": "workspace:*",
         "@types/d3-hierarchy": "^3.1.7",
         "d3-hierarchy": "^3.1.2",
+        "@types/d3-scale": "^4.0.8",
+        "d3-scale": "^4.0.2",
         "lodash": "^4.17.21"
     },
     "peerDependencies": {

packages/sunburst/src/Sunburst.tsx

@@ -25,6 +25,8 @@ const InnerSunburst = <RawDatum,>({
     data,
     id = defaultProps.id,
     value = defaultProps.value,
+    innerRadius = defaultProps.innerRadius,
+    renderRootNode = defaultProps.renderRootNode,
     valueFormat,
     cornerRadius = defaultProps.cornerRadius,
     layers = defaultProps.layers as SunburstLayer<RawDatum>[],
@@ -74,6 +76,8 @@ const InnerSunburst = <RawDatum,>({
         valueFormat,
         radius,
         cornerRadius,
+        innerRadius,
+        renderRootNode,
         colors,
         colorBy,
         inheritColorFromParent,

packages/sunburst/src/hooks.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { partition as d3Partition, hierarchy as d3Hierarchy } from 'd3-hierarchy'
+import { scaleRadial as d3ScaleRadial } from 'd3-scale'
 import cloneDeep from 'lodash/cloneDeep.js'
 import sortBy from 'lodash/sortBy.js'
 import { usePropertyAccessor, useValueFormatter } from '@nivo/core'
@@ -22,6 +23,8 @@ export const useSunburst = <RawDatum>({
     valueFormat,
     radius,
     cornerRadius = defaultProps.cornerRadius,
+    innerRadius = defaultProps.innerRadius,
+    renderRootNode = defaultProps.renderRootNode,
     colors = defaultProps.colors,
     colorBy = defaultProps.colorBy,
     inheritColorFromParent = defaultProps.inheritColorFromParent,
@@ -33,6 +36,8 @@ export const useSunburst = <RawDatum>({
     valueFormat?: DataProps<RawDatum>['valueFormat']
     radius: number
     cornerRadius?: SunburstCommonProps<RawDatum>['cornerRadius']
+    innerRadius?: SunburstCommonProps<RawDatum>['innerRadius']
+    renderRootNode?: SunburstCommonProps<RawDatum>['renderRootNode']
     colors?: SunburstCommonProps<RawDatum>['colors']
     colorBy?: SunburstCommonProps<RawDatum>['colorBy']
     inheritColorFromParent?: SunburstCommonProps<RawDatum>['inheritColorFromParent']
@@ -58,8 +63,10 @@ export const useSunburst = <RawDatum>({
         const hierarchy = d3Hierarchy(clonedData).sum(getValue)
 
         const partition = d3Partition<RawDatum>().size([2 * Math.PI, radius * radius])
-        // exclude root node
-        const descendants = partition(hierarchy).descendants().slice(1)
+        // exclude root node if renderRootNode is false
+        const descendants = renderRootNode
+            ? partition(hierarchy).descendants()
+            : partition(hierarchy).descendants().slice(1)
 
         const total = hierarchy.value ?? 0
 
@@ -69,6 +76,12 @@ export const useSunburst = <RawDatum>({
         // are going to be computed first
         const sortedNodes = sortBy(descendants, 'depth')
 
+        const innerRadiusOffset = radius * Math.min(innerRadius, 1)
+
+        const maxDepth = Math.max(...sortedNodes.map(n => n.depth))
+
+        const radiusScale = d3ScaleRadial().domain([0, maxDepth]).range([innerRadiusOffset, radius])
+
         return sortedNodes.reduce<ComputedDatum<RawDatum>[]>((acc, descendant) => {
             const id = getId(descendant.data)
             // d3 hierarchy node value is optional by default as it depends on
@@ -79,12 +92,13 @@ export const useSunburst = <RawDatum>({
             const value = descendant.value!
             const percentage = (100 * value) / total
             const path = descendant.ancestors().map(ancestor => getId(ancestor.data))
+            const isRootNode = renderRootNode && descendant.depth === 0
 
             const arc: Arc = {
                 startAngle: descendant.x0,
                 endAngle: descendant.x1,
-                innerRadius: Math.sqrt(descendant.y0),
-                outerRadius: Math.sqrt(descendant.y1),
+                innerRadius: isRootNode ? 0 : radiusScale(descendant.depth - 1),
+                outerRadius: isRootNode ? innerRadiusOffset : radiusScale(descendant.depth),
             }
 
             let parent: ComputedDatum<RawDatum> | undefined
@@ -119,6 +133,8 @@ export const useSunburst = <RawDatum>({
     }, [
         data,
         radius,
+        innerRadius,
+        renderRootNode,
         getValue,
         getId,
         valueFormat,

packages/sunburst/src/props.ts

@@ -7,6 +7,8 @@ export const defaultProps = {
     id: 'id',
     value: 'value',
     cornerRadius: 0,
+    innerRadius: 0.4,
+    renderRootNode: false,
     layers: ['arcs', 'arcLabels'] as SunburstLayerId[],
     colors: { scheme: 'nivo' } as unknown as OrdinalColorScaleConfig,
     colorBy: 'id' as const,

packages/sunburst/src/types.ts

@@ -58,6 +58,8 @@ export type SunburstCommonProps<RawDatum> = {
     margin?: Box
     cornerRadius: number
     theme: PartialTheme
+    innerRadius: number
+    renderRootNode: boolean
     colors: OrdinalColorScaleConfig<Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>>
     colorBy: 'id' | 'depth'
     inheritColorFromParent: boolean

packages/sunburst/tests/Sunburst.test.tsx

@@ -181,6 +181,35 @@ describe('Sunburst', () => {
             expect(layer.exists()).toBeTruthy()
             expect(layer.prop('arcGenerator').cornerRadius()()).toEqual(3)
         })
+
+        it('should render the root node correctly when innerRadius and renderRootNode are set', () => {
+            const width = 400
+            const height = 400
+            const innerRadiusProp = 0.6
+
+            // Assuming default margins { top: 0, right: 0, bottom: 0, left: 0 }
+            // as per Sunburst defaultProps
+            const chartRadius = Math.min(width, height) / 2
+            const expectedRootOuterRadius = chartRadius * innerRadiusProp
+
+            const wrapper = mount(
+                <Sunburst
+                    width={width}
+                    height={height}
+                    data={sampleData} // sampleData has a root with id: 'root'
+                    innerRadius={innerRadiusProp}
+                    renderRootNode
+                />
+            )
+
+            const rootArcShape = wrapper.find(ArcShape).filterWhere(n => n.prop('datum').depth === 0)
+            expect(rootArcShape.exists()).toBe(true)
+
+            const rootDatum = rootArcShape.prop('datum')
+            expect(rootDatum.id).toEqual('root') // Verify we got the correct root node
+            expect(rootDatum.arc.innerRadius).toEqual(0)
+            expect(rootDatum.arc.outerRadius).toEqual(expectedRootOuterRadius)
+        })
     })
 
     describe('colors', () => {