Sunburst Chart

1"use client";
2 
3import type { Transition } from "motion/react";
4import { animate, motion } from "motion/react";
5import {
6  Children,
7  isValidElement,
8  memo,
9  type ReactElement,
10  type ReactNode,
11  useCallback,
12  useEffect,
13  useMemo,
14  useRef,
15  useState,
16} from "react";
17import {
18  type ArcDatum,
19  buildArcs,
20  buildHoverGrowTargets,
21  buildSunburstEnterTiming,
22  defaultSunburstGrowPadding,
23  maxHoverSegmentThickness,
24} from "./sunburst";
25import {
26  defaultSunburstColors,
27  opacityForRelativeDepth,
28  type SunburstContextValue,
29  SunburstProvider,
30} from "./sunburst-context";
31import type { SunburstNode } from "./sunburst-data";
32 
33export type { ArcDatum, Focus } from "./sunburst";
34export type { SunburstNode } from "./sunburst-data";
35 
36const DEFAULT_HOVER_POP = 8;
37 
38function componentDisplayName(child: ReactElement): string {
39  return (
40    (child.type as { displayName?: string }).displayName ||
41    (child.type as { name?: string }).name ||
42    ""
43  );
44}
45 
46function isDefsComponent(child: ReactElement): boolean {
47  const name = componentDisplayName(child);
48  return (
49    name.includes("Gradient") ||
50    name.includes("Pattern") ||
51    name === "LinearGradient" ||
52    name === "RadialGradient"
53  );
54}
55 
56function isOutsideSvgComponent(name: string): boolean {
57  return name === "SunburstBreadcrumb" || name === "SunburstHint";
58}
59 
60function isSunburstSegment(
61  child: ReactNode
62): child is ReactElement<{ index: number }> {
63  return (
64    isValidElement(child) && componentDisplayName(child) === "SunburstSegment"
65  );
66}
67 
68/** Inner rings last so parent segments win hit testing at ring boundaries. */
69function sortSunburstSegments(
70  segments: ReactElement<{ index: number }>[],
71  arcs: ArcDatum[]
72): ReactElement<{ index: number }>[] {
73  return [...segments].sort((a, b) => {
74    const arcA = arcs[a.props.index];
75    const arcB = arcs[b.props.index];
76    const depthA = arcA?.depth ?? 0;
77    const depthB = arcB?.depth ?? 0;
78    if (depthA !== depthB) {
79      return depthB - depthA;
80    }
81    return (b.props.index ?? 0) - (a.props.index ?? 0);
82  });
83}
84 
85export interface SunburstChartProps {
86  data: SunburstNode;
87  size?: number;
88  /** Bump to replay the initialization animation. */
89  playKey?: number;
90  className?: string;
91  /** Controlled focus node id for drill-down. */
92  focusId?: string;
93  /** Called when focus changes via segment click or breadcrumb. */
94  onFocusChange?: (focusId: string) => void;
95  /** Controlled hover — arc index in the arcs array. */
96// … truncated