recharts-radial-chart

1"use client";
2 
3import {
4  PolarAngleAxis,
5  RadialBar as RechartsRadialBar,
6  RadialBarChart as RechartsRadialBarChart,
7  Sector,
8  type SectorProps,
9} from "recharts";
10import {
11  createContext,
12  use,
13  useCallback,
14  useEffect,
15  useId,
16  useMemo,
17  useState,
18  type ComponentProps,
19  type ReactNode,
20} from "react";
21import {
22  ChartTooltip,
23  ChartTooltipContent,
24  type TooltipRoundness,
25  type TooltipVariant,
26} from "@/registry/ui/recharts-tooltip";
27import {
28  type ChartConfig,
29  ChartContainer,
30  getColorsCount,
31  LoadingIndicator,
32} from "@/registry/ui/recharts-chart";
33import {
34  ChartLegend,
35  ChartLegendContent,
36  type ChartLegendVariant,
37} from "@/registry/ui/recharts-legend";
38import { ChartBackground, type BackgroundVariant } from "@/registry/ui/recharts-background";
39import { TypedDataKey } from "recharts/types/util/typedDataKey";
40 
41// Constants
42const DEFAULT_INNER_RADIUS = "30%";
43const DEFAULT_OUTER_RADIUS = "100%";
44const DEFAULT_CORNER_RADIUS = 5;
45const DEFAULT_BAR_SIZE = 14;
46const LOADING_BARS = 5;
47const LOADING_ANIMATION_DURATION = 1500; // in milliseconds — interval between skeleton data changes
48 
49type RadialBarChartProps = ComponentProps<typeof RechartsRadialBarChart>;
50type RadialBarRechartsProps = ComponentProps<typeof RechartsRadialBar>;
51 
52type RadialVariant = "full" | "semi";
53 
54// ─────────────────────────────────────────────────────────────────────────────
55// Shared context
56// ─────────────────────────────────────────────────────────────────────────────
57 
58/**
59 * Shared state for every part of the chart. Lifted into <EvilRadialChart /> so
60 * that <RadialBar />, <Tooltip />, and <Legend /> can read it without prop
61 * drilling. Sub-components are composed freely — the provider is the single
62 * source of truth.
63 */
64type RadialChartContextValue = {
65  config: ChartConfig; // colors + labels for every bar
66  nameKey: string; // data key holding each bar's name
67  chartId: string; // colon-free id scoping this chart's style defs
68  isLoading: boolean; // whether the chart shows its loading skeleton
69  selectedBar: string | null; // currently selected bar name, or null when none
70// … truncated