Ring Chart

1"use client";
2 
3import { Group } from "@visx/group";
4import { ParentSize } from "@visx/responsive";
5import { arc as arcGenerator } from "@visx/shape";
6import type { Transition } from "motion/react";
7import {
8  Children,
9  isValidElement,
10  memo,
11  type ReactNode,
12  useCallback,
13  useEffect,
14  useMemo,
15  useRef,
16  useState,
17} from "react";
18import { cn } from "@/lib/utils";
19import {
20  defaultRingColors,
21  type RingContextValue,
22  type RingData,
23  RingProvider,
24  ringCssVars,
25} from "./ring-context";
26 
27function generateRingArcPath(
28  innerRadius: number,
29  outerRadius: number,
30  startAngle: number,
31  endAngle: number,
32  cornerRadius: number
33): string {
34  const generator = arcGenerator<unknown>({
35    innerRadius,
36    outerRadius,
37    cornerRadius,
38  });
39  return generator({ startAngle, endAngle } as unknown as null) || "";
40}
41 
42export interface RingChartProps {
43  /** Data array - each item represents a ring */
44  data: RingData[];
45  /** Chart size in pixels. If not provided, uses parent container size */
46  size?: number;
47  /** Stroke width of each ring. Default: 12 */
48  strokeWidth?: number;
49  /** Gap between rings. Default: 6 */
50  ringGap?: number;
51  /** Inner radius of the innermost ring. Default: 60 */
52  baseInnerRadius?: number;
53  /** Animation duration in milliseconds. Default: 1100 */
54  animationDuration?: number;
55  /** Additional class name for the container */
56  className?: string;
57  /** Controlled hover state - index of hovered ring */
58  hoveredIndex?: number | null;
59  /** Callback when hover state changes */
60  onHoverChange?: (index: number | null) => void;
61  /** Start angle in radians. Default: -PI/2 (top) */
62  startAngle?: number;
63  /** End angle in radians. Default: 3*PI/2 (full circle) */
64  endAngle?: number;
65  /** Framer Motion transition for ring enter animation */
66  enterTransition?: Transition;
67  /** Scales ring stagger delays (1 = default). */
68  enterStaggerScale?: number;
69  /**
70   * High-frequency geometry updates (e.g. studio NumberField scrub).
71   * Uses plain SVG paths instead of Motion `d` morphing.
72   */
73  geometryScrubbing?: boolean;
74  /** Child components (Ring, RingCenter, etc.) */
75  children: ReactNode;
76}
77 
78interface RingChartInnerProps {
79  width: number;
80  height: number;
81  data: RingData[];
82  strokeWidth: number;
83  ringGap: number;
84  baseInnerRadius: number;
85  children: ReactNode;
86  containerRef: React.RefObject<HTMLDivElement | null>;
87  hoveredIndexProp?: number | null;
88  onHoverChange?: (index: number | null) => void;
89// … truncated