Sunburst chart

package.json

@@ -93,10 +93,10 @@
     "@storybook/addon-links": "^7.6.3",
     "@storybook/addon-mdx-gfm": "^7.6.3",
     "@storybook/addon-storysource": "^7.6.3",
-    "@storybook/source-loader": "^7.6.3",
     "@storybook/jest": "^0.2.3",
     "@storybook/react": "^7.6.3",
     "@storybook/react-webpack5": "^7.6.3",
+    "@storybook/source-loader": "^7.6.3",
     "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^5.16.5",
@@ -123,6 +123,7 @@
     "chromatic": "^6.15.0",
     "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",
+    "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
     "d3-time": "^3.1.0",
     "d3-time-format": "^4.1.0",

src/chart/SunburstChart.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { scaleLinear } from 'd3-scale';
+import { Surface } from '../container/Surface';
+import { Layer } from '../container/Layer';
+import { Sector } from '../shape/Sector';
+
+export interface SunburstData {
+  name: string;
+  value?: number;
+  fill?: string;
+  children?: SunburstData[];
+}
+
+export interface SunburstChartProps {
+  data?: SunburstData;
+  width?: number;
+  height?: number;
+  padding?: number;
+  ringPadding?: number;
+  innerRadius?: number;
+  children?: React.ReactNode;
+  fill?: string;
+}
+
+interface DrawArcOptions {
+  r: number;
+  innerR: number;
+  initialAngle: number;
+  childColor?: string;
+}
+
+function maxDepth(node: SunburstData): number {
+  if (!node.children || node.children.length === 0) return 1;
+
+  // Calculate depth for each child and find the maximum
+  const childDepths = node.children.map(d => maxDepth(d));
+  return 1 + Math.max(...childDepths);
+}
+
+function polarToCartesian(r: number, angleInDegrees: number): number[] {
+  const angleInRadians = (angleInDegrees * Math.PI) / 180.0;
+  const x = r * Math.cos(angleInRadians);
+  const y = r * Math.sin(angleInRadians);
+  return [x, y];
+}
+
+export const SunburstChart = ({
+  data,
+  children,
+  width,
+  height,
+  padding = 2,
+  ringPadding = 2,
+  innerRadius = 50,
+  fill = '#333',
+}: SunburstChartProps) => {
+  // get the max possible radius for a circle inscribed in the chart container
+  const outerRadius = Math.min(width, height) / 2;
+
+  const cx = width / 2,
+    cy = height / 2;
+
+  const rScale = scaleLinear([0, data.value], [0, 360]);
+  const treeDepth = maxDepth(data);
+  const thickness = (outerRadius - innerRadius) / treeDepth;
+
+  const sectors: React.ReactNode[] = [];
+
+  // recursively add nodes for each data point and its children
+  function drawArcs(childNodes: SunburstData[] | undefined, options: DrawArcOptions): any {
+    const { r, innerR, initialAngle, childColor } = options;
+
+    let currentAngle = initialAngle;
+
+    if (!childNodes) return; // base case: no children of this node
+
+    childNodes.forEach(d => {
+      const arcLength = rScale(d.value);
+      const start = currentAngle;
+      // color priority - if there's a color on the individual point use that, otherwise use parent color or default
+      const fillColor = d?.fill ?? childColor ?? fill;
+      const [textX, textY] = polarToCartesian(innerR + (innerR + r - innerR) / 2, start + arcLength - arcLength / 2);
+      currentAngle += arcLength;
+      sectors.push(
+        <g>
+          <Sector
+            fill={fillColor}
+            stroke="#FFF"
+            strokeWidth={padding}
+            startAngle={start}
+            endAngle={start + arcLength}
+            innerRadius={innerR}
+            outerRadius={innerR + r}
+            cx={cx}
+            cy={cy}
+          />
+          <text
+            fontSize=".875rem"
+            alignmentBaseline="middle"
+            textAnchor="middle"
+            stroke="#FFF"
+            strokeWidth={0.5}
+            paintOrder="stroke fill"
+            fill="#333"
+            fontFamily="sans-serif"
+            fontWeight="bold"
+            x={textX + cx}
+            y={cy - textY}
+          >
+            {d.value}
+          </text>
+        </g>,
+      );
+
+      return drawArcs(d.children, { r, innerR: innerR + r + ringPadding, initialAngle: start, childColor: fillColor });
+    });
+  }
+
+  drawArcs(data.children, { r: thickness, innerR: innerRadius, initialAngle: 0 });
+
+  return (
+    <Surface width={width} height={height}>
+      {children}
+      <Layer>{sectors}</Layer>
+    </Surface>
+  );
+};

src/index.ts

@@ -1,6 +1,7 @@
 // "export type" declarations on separate lines are in use
 // to workaround babel issue(s) 11465 12578
 //
+
 // see https://github.com/babel/babel/issues/11464#issuecomment-617606898
 export { Surface } from './container/Surface';
 export type { Props as SurfaceProps } from './container/Surface';
@@ -96,6 +97,7 @@ export { ScatterChart } from './chart/ScatterChart';
 export { AreaChart } from './chart/AreaChart';
 export { RadialBarChart } from './chart/RadialBarChart';
 export { ComposedChart } from './chart/ComposedChart';
+export { SunburstChart } from './chart/SunburstChart';
 
 export { Funnel } from './numberAxis/Funnel';
 export type { FunnelProps } from './numberAxis/Funnel';

storybook/stories/API/chart/SunburstChart.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ResponsiveContainer, SunburstChart, Tooltip } from '../../../../src';
+import { CategoricalChartProps } from '../props/ChartProps';
+import { hierarchy } from '../../data';
+
+export default {
+  argTypes: {
+    ...CategoricalChartProps,
+  },
+  component: SunburstChart,
+};
+
+export const Sunburst = {
+  render: (args: Record<string, any>) => {
+    return (
+      <ResponsiveContainer width="100%" height={400}>
+        <SunburstChart fill="purple" {...args}>
+          <Tooltip />
+        </SunburstChart>
+      </ResponsiveContainer>
+    );
+  },
+  args: {
+    data: hierarchy,
+  },
+};

storybook/stories/data/Hierarchy.ts

@@ -0,0 +1,88 @@
+export interface SunburstData {
+  name: string;
+  value?: number;
+  children?: SunburstData[];
+  fill?: string;
+}
+
+const hierarchy: SunburstData = {
+  name: 'Root',
+  value: 100,
+  children: [
+    {
+      name: 'Child1',
+      fill: 'steelblue',
+      value: 30,
+      children: [
+        {
+          name: 'third child',
+          value: 10,
+        },
+        {
+          name: 'another child',
+          value: 5,
+        },
+        {
+          name: 'next child',
+          value: 15,
+          children: [
+            {
+              name: 'third level child',
+              value: 5,
+            },
+            {
+              name: 'third level child',
+              value: 5,
+            },
+            {
+              name: 'third level child',
+              value: 5,
+              children: [{ name: 'level 4', value: 2 }],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'Child2',
+      fill: 'green',
+      value: 20,
+      children: [
+        {
+          name: 'another child',
+          value: 10,
+        },
+        {
+          name: 'next child',
+          value: 10,
+          children: [
+            { name: 'level 3 of child 2', value: 5 },
+            { name: 'level 3 of child 2', value: 3 },
+            { name: 'level 3 of child 2', value: 2 },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'Child3',
+      fill: 'red',
+      value: 20,
+    },
+    {
+      name: 'Child4',
+      fill: 'purple',
+      value: 10,
+      children: [
+        { name: 'child4 child', value: 5 },
+        { name: 'child4 child', value: 5 },
+      ],
+    },
+    {
+      name: 'Child5',
+      fill: 'orange',
+      value: 20,
+    },
+  ],
+};
+
+export { hierarchy };

storybook/stories/data/index.ts

@@ -9,3 +9,4 @@ export * from './Time';
 export * from './BoxPlot';
 export * from './Impression';
 export * from './Error';
+export * from './Hierarchy';