Pie Chart

1"use client";
2 
3import { Group } from "@visx/group";
4import { ParentSize } from "@visx/responsive";
5import { arc as arcGenerator } from "@visx/shape";
6import { pie as d3Pie } from "d3-shape";
7import type { Transition } from "motion/react";
8import {
9  Children,
10  isValidElement,
11  memo,
12  type ReactElement,
13  type ReactNode,
14  useCallback,
15  useEffect,
16  useMemo,
17  useRef,
18  useState,
19} from "react";
20import { cn } from "@/lib/utils";
21import {
22  defaultPieColors,
23  type PieArcData,
24  type PieContextValue,
25  type PieData,
26  PieProvider,
27} from "./pie-context";
28 
29/** Default hover offset in pixels */
30export const DEFAULT_HOVER_OFFSET = 10;
31 
32export interface PieChartProps {
33  /** Data array - each item represents a slice */
34  data: PieData[];
35  /** Chart size in pixels. If not provided, uses parent container size */
36  size?: number;
37  /** Inner radius for donut charts. Default: 0 (solid pie) */
38  innerRadius?: number;
39  /** Padding angle between slices in radians. Default: 0 */
40  padAngle?: number;
41  /** Corner radius for rounded slice edges. Default: 0 */
42  cornerRadius?: number;
43  /** Start angle in radians. Default: -PI/2 (top) */
44  startAngle?: number;
45  /** End angle in radians. Default: 3*PI/2 (full circle from top) */
46  endAngle?: number;
47  /** Additional class name for the container */
48  className?: string;
49  /** Controlled hover state - index of hovered slice */
50  hoveredIndex?: number | null;
51  /** Callback when hover state changes */
52  onHoverChange?: (index: number | null) => void;
53  /**
54   * Hover offset in pixels for slice hover effects.
55   * This also determines the padding around the chart to prevent clipping.
56   * Default: 10
57   */
58  hoverOffset?: number;
59  /** Child components (PieSlice, PieCenter, patterns, gradients, etc.) */
60  children: ReactNode;
61  /** Framer Motion transition for slice enter animation */
62  enterTransition?: Transition;
63  /** Scales slice stagger delays (1 = default). */
64  enterStaggerScale?: number;
65  /**
66   * High-frequency geometry updates (e.g. studio NumberField scrub).
67   * Uses plain SVG paths instead of Motion `d` / spring hover morphing.
68   */
69  geometryScrubbing?: boolean;
70}
71 
72interface PieChartInnerProps {
73  width: number;
74  height: number;
75  data: PieData[];
76  innerRadius: number;
77  padAngle: number;
78  cornerRadius: number;
79  startAngle: number;
80  endAngle: number;
81  hoverOffset: number;
82  children: ReactNode;
83  containerRef: React.RefObject<HTMLDivElement | null>;
84  hoveredIndexProp?: number | null;
85// … truncated