recharts-pie-chart

1"use client";
2 
3import {
4  Children,
5  createContext,
6  isValidElement,
7  use,
8  useCallback,
9  useId,
10  useMemo,
11  useState,
12  type ComponentProps,
13  type FC,
14  type ReactElement,
15  type ReactNode,
16} from "react";
17import {
18  LabelList as RechartsLabelList,
19  Pie as RechartsPie,
20  PieChart as RechartsPieChart,
21  Sector,
22  type PieSectorShapeProps,
23} from "recharts";
24import {
25  ChartTooltip,
26  ChartTooltipContent,
27  type TooltipRoundness,
28  type TooltipVariant,
29} from "@/registry/ui/recharts-tooltip";
30import {
31  type ChartConfig,
32  ChartContainer,
33  getColorsCount,
34  LoadingIndicator,
35} from "@/registry/ui/recharts-chart";
36import { ChartLegend, ChartLegendContent, type ChartLegendVariant } from "@/registry/ui/recharts-legend";
37import { ChartBackground, type BackgroundVariant } from "@/registry/ui/recharts-background";
38import { motion } from "motion/react";
39 
40// Constants
41const LOADING_SECTORS = 5;
42const LOADING_ANIMATION_DURATION = 2000; // full loading cycle duration in milliseconds
43const DEFAULT_INNER_RADIUS = 0;
44const DEFAULT_OUTER_RADIUS = "80%";
45const DEFAULT_CORNER_RADIUS = 0;
46const DEFAULT_PADDING_ANGLE = 0;
47const DEFAULT_START_ANGLE = 0;
48const DEFAULT_END_ANGLE = 360;
49// Stable empty-array reference so the `glowingSectors` default doesn't change every render
50const EMPTY_GLOWING_SECTORS: string[] = [];
51 
52type LabelListProps = ComponentProps<typeof RechartsLabelList>;
53 
54// ─────────────────────────────────────────────────────────────────────────────
55// Shared context
56// ─────────────────────────────────────────────────────────────────────────────
57 
58/**
59 * Shared state for every part of the chart. Lifted into <EvilPieChart /> so that
60 * <Pie />, <Tooltip />, <Legend />, and friends can read it without prop drilling.
61 * Sub-components are composed freely — the provider is the single source of truth.
62 */
63type PieChartContextValue = {
64  config: ChartConfig; // colors + labels for every sector
65  data: Record<string, unknown>[]; // rows rendered by the chart
66  dataKey: string; // key holding each sector's numeric value
67  nameKey: string; // key holding each sector's name
68  isLoading: boolean; // whether the chart shows its loading skeleton
69// … truncated