feat(sunburst): add innerRadius and renderRootNode props - v2 rebased

packages/arcs/src/centers.ts

@@ -47,6 +47,11 @@ export const useArcCentersTransition = <Datum extends DatumWithArc, ExtraProps =
     mode: ArcTransitionMode = 'innerRadius',
     extra?: TransitionExtra<Datum, ExtraProps>
 ) => {
+    // center root node label
+    const dataWithCenteredRoot = data.map(d =>
+        d.arc.innerRadius === 0 ? { ...d, arc: { ...d.arc, outerRadius: 0 } } : d
+    )
+
     const { animate, config: springConfig } = useMotionConfig()
 
     const phases = useArcTransitionMode<Datum, ExtraProps>(mode, extra)
@@ -60,7 +65,7 @@ export const useArcCentersTransition = <Datum extends DatumWithArc, ExtraProps =
             innerRadius: number
             outerRadius: number
         } & ExtraProps
-    >(data, {
+    >(dataWithCenteredRoot, {
         keys: datum => datum.id,
         initial: phases.update,
         from: phases.enter,

packages/sunburst/package.json

@@ -35,6 +35,7 @@
         "@nivo/tooltip": "workspace:*",
         "@types/d3-hierarchy": "^1.1.8",
         "d3-hierarchy": "^1.1.8",
+        "d3-scale": "^3.2.3",
         "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>[],
@@ -73,6 +75,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'
 import sortBy from 'lodash/sortBy'
 import { usePropertyAccessor, useTheme, useValueFormatter } from '@nivo/core'
@@ -21,6 +22,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,
@@ -32,6 +35,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,7 +63,9 @@ export const useSunburst = <RawDatum>({
 
         const partition = d3Partition<RawDatum>().size([2 * Math.PI, radius * radius])
         // exclude root node
-        const descendants = partition(hierarchy).descendants().slice(1)
+        const descendants = renderRootNode
+            ? partition(hierarchy).descendants()
+            : partition(hierarchy).descendants().slice(1)
 
         const total = hierarchy.value ?? 0
 
@@ -68,6 +75,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 scale = 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
@@ -82,8 +95,12 @@ export const useSunburst = <RawDatum>({
             const arc: Arc = {
                 startAngle: descendant.x0,
                 endAngle: descendant.x1,
-                innerRadius: Math.sqrt(descendant.y0),
-                outerRadius: Math.sqrt(descendant.y1),
+                innerRadius:
+                    renderRootNode && descendant.depth === 0 ? 0 : scale(descendant.depth - 1),
+                outerRadius:
+                    renderRootNode && descendant.depth === 0
+                        ? innerRadius
+                        : scale(descendant.depth),
             }
 
             let parent: ComputedDatum<RawDatum> | undefined
@@ -125,6 +142,8 @@ export const useSunburst = <RawDatum>({
         getColor,
         inheritColorFromParent,
         getChildColor,
+        innerRadius,
+        renderRootNode,
     ])
 
     const arcGenerator = useArcGenerator({ cornerRadius })

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

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

packages/sunburst/stories/sunburst.stories.tsx

@@ -0,0 +1,238 @@
+import { useState } from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { withKnobs, boolean, select } from '@storybook/addon-knobs'
+// @ts-ignore
+import { linearGradientDef, patternDotsDef, useTheme } from '@nivo/core'
+// @ts-ignore
+import { generateLibTree } from '@nivo/generators'
+import { colorSchemes } from '@nivo/colors'
+// @ts-ignore
+import { Sunburst, ComputedDatum, SunburstCustomLayerProps } from '../src'
+
+interface RawDatum {
+    name: string
+    loc: number
+}
+
+const commonProperties = {
+    width: 900,
+    height: 500,
+    data: generateLibTree(),
+    id: 'name',
+    value: 'loc',
+}
+
+const stories = storiesOf('Sunburst', module)
+
+stories.addDecorator(withKnobs)
+
+stories.add('default', () => <Sunburst {...commonProperties} />)
+
+stories.add('with child color modifier', () => (
+    <Sunburst<RawDatum>
+        {...commonProperties}
+        childColor={{ from: 'color', modifiers: [['brighter', 0.13]] }}
+    />
+))
+
+stories.add('with child colors independent of parent', () => (
+    <Sunburst<RawDatum> {...commonProperties} inheritColorFromParent={false} />
+))
+
+const customPalette = ['#ffd700', '#ffb14e', '#fa8775', '#ea5f94', '#cd34b5', '#9d02d7', '#0000ff']
+
+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" />
+))
+
+const CustomTooltip = ({ id, value, color }: ComputedDatum<unknown>) => {
+    const theme = useTheme()
+
+    return (
+        <strong style={{ ...theme.tooltip.container, color }}>
+            {id}: {value}
+        </strong>
+    )
+}
+
+stories.add('custom tooltip', () => (
+    <Sunburst<RawDatum>
+        {...commonProperties}
+        tooltip={CustomTooltip}
+        theme={{
+            tooltip: {
+                container: {
+                    background: '#333',
+                },
+            },
+        }}
+    />
+))
+
+stories.add('enter/leave (check actions)', () => (
+    <Sunburst<RawDatum>
+        {...commonProperties}
+        onMouseEnter={action('onMouseEnter')}
+        onMouseLeave={action('onMouseLeave')}
+    />
+))
+
+stories.add('patterns & gradients', () => (
+    <Sunburst<RawDatum>
+        {...commonProperties}
+        defs={[
+            linearGradientDef('gradient', [
+                { offset: 0, color: '#ffffff' },
+                { offset: 15, color: 'inherit' },
+                { offset: 100, color: 'inherit' },
+            ]),
+            patternDotsDef('pattern', {
+                background: 'inherit',
+                color: '#ffffff',
+                size: 2,
+                padding: 3,
+                stagger: true,
+            }),
+        ]}
+        fill={[
+            {
+                match: (node: ComputedDatum<RawDatum>) =>
+                    ['viz', 'text', 'utils'].includes(node.id),
+                id: 'gradient',
+            },
+            {
+                match: (node: ComputedDatum<RawDatum>) =>
+                    ['set', 'generators', 'misc'].includes(node.id),
+                id: 'pattern',
+            },
+        ]}
+    />
+))
+
+const flatten = data =>
+    data.reduce((acc, item) => {
+        if (item.children) {
+            return [...acc, item, ...flatten(item.children)]
+        }
+
+        return [...acc, item]
+    }, [])
+
+const findObject = (data, name) => data.find(searchedName => searchedName.name === name)
+
+const drillDownColors = colorSchemes.brown_blueGreen[7]
+const drillDownColorMap = {
+    viz: drillDownColors[0],
+    colors: drillDownColors[1],
+    utils: drillDownColors[2],
+    generators: drillDownColors[3],
+    set: drillDownColors[4],
+    text: drillDownColors[5],
+    misc: drillDownColors[6],
+}
+const getDrillDownColor = (node: Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>) => {
+    const category = [...node.path].reverse()[1] as keyof typeof drillDownColorMap
+
+    return drillDownColorMap[category]
+}
+
+stories.add(
+    'children drill down',
+    () => {
+        const [data, setData] = useState(commonProperties.data)
+
+        return (
+            <>
+                <button onClick={() => setData(commonProperties.data)}>Reset</button>
+                <Sunburst<RawDatum>
+                    {...commonProperties}
+                    colors={getDrillDownColor}
+                    inheritColorFromParent={false}
+                    borderWidth={1}
+                    borderColor={{
+                        from: 'color',
+                        modifiers: [['darker', 0.6]],
+                    }}
+                    animate={boolean('animate', true)}
+                    motionConfig={select(
+                        'motion config',
+                        ['default', 'gentle', 'wobbly', 'stiff', 'slow', 'molasses'],
+                        'gentle'
+                    )}
+                    enableArcLabels
+                    arcLabelsSkipAngle={12}
+                    arcLabelsTextColor={{
+                        from: 'color',
+                        modifiers: [['darker', 3]],
+                    }}
+                    data={data}
+                    transitionMode="pushIn"
+                    onClick={clickedData => {
+                        const foundObject = findObject(flatten(data.children), clickedData.id)
+                        if (foundObject && foundObject.children) {
+                            setData(foundObject)
+                        }
+                    }}
+                />
+            </>
+        )
+    },
+    {
+        info: {
+            text: `
+            You can drill down into individual children by clicking on them
+        `,
+        },
+    }
+)
+
+const CenteredMetric = ({ nodes, centerX, centerY }: SunburstCustomLayerProps<RawDatum>) => {
+    const total = nodes.reduce((total, datum) => total + datum.value, 0)
+
+    return (
+        <text
+            x={centerX}
+            y={centerY}
+            textAnchor="middle"
+            dominantBaseline="central"
+            style={{
+                fontSize: '42px',
+                fontWeight: 600,
+            }}
+        >
+            {Number.parseFloat(`${total}`).toExponential(2)}
+        </text>
+    )
+}
+
+stories.add('adding a metric in the center using a custom layer', () => (
+    <Sunburst<RawDatum> {...commonProperties} layers={['arcs', 'arcLabels', CenteredMetric]} />
+))
+
+stories.add('with root node', () => (
+    <Sunburst<RawDatum>
+        {...commonProperties}
+        innerRadius={number('innerRadius', 0.25, {
+            range: true,
+            min: 0.0,
+            max: 0.95,
+            step: 0.05,
+        })}
+        renderRootNode={boolean('renderRootNode', true)}
+    />
+))