recharts-radar-chart

1"use client";
2 
3import {
4  PolarAngleAxis as RechartsPolarAngleAxis,
5  PolarGrid as RechartsPolarGrid,
6  PolarRadiusAxis as RechartsPolarRadiusAxis,
7  Radar as RechartsRadar,
8  RadarChart as RechartsRadarChart,
9} from "recharts";
10import {
11  Children,
12  createContext,
13  isValidElement,
14  use,
15  useCallback,
16  useEffect,
17  useId,
18  useMemo,
19  useState,
20  type ComponentProps,
21  type FC,
22  type ReactElement,
23  type ReactNode,
24} from "react";
25import {
26  ChartTooltip,
27  ChartTooltipContent,
28  type TooltipRoundness,
29  type TooltipVariant,
30} from "@/registry/ui/recharts-tooltip";
31import {
32  type ChartConfig,
33  ChartContainer,
34  getColorsCount,
35  LoadingIndicator,
36} from "@/registry/ui/recharts-chart";
37import { ChartLegend, ChartLegendContent, type ChartLegendVariant } from "@/registry/ui/recharts-legend";
38import { ChartBackground, type BackgroundVariant } from "@/registry/ui/recharts-background";
39import { ChartDot, type DotVariant } from "@/registry/ui/recharts-dot";
40 
41// Constants
42const STROKE_WIDTH = 1;
43const DEFAULT_FILL_OPACITY = 0.3;
44const LOADING_POINTS = 6;
45const LOADING_ANIMATION_DURATION = 1500; // in milliseconds
46const LOADING_RADAR_DATA_KEY = "value";
47 
48type RadarVariant = "filled" | "lines";
49 
50// ─────────────────────────────────────────────────────────────────────────────
51// Shared context
52// ─────────────────────────────────────────────────────────────────────────────
53 
54/**
55 * Shared state for every part of the chart. Lifted into <EvilRadarChart /> so that
56 * <Radar />, <PolarAngleAxis />, <Legend />, and friends can read it without prop
57 * drilling. Sub-components are composed freely — the provider is the single source
58 * of truth.
59 */
60type RadarChartContextValue = {
61  config: ChartConfig; // colors + labels for every series
62  isLoading: boolean; // whether the chart shows its loading skeleton
63  selectedDataKey: string | null; // currently selected series, or null when none
64  selectDataKey: (dataKey: string | null) => void; // sets the selected series
65};
66 
67const RadarChartContext = createContext<RadarChartContextValue | null>(null);
68 
69// Reads the chart context, throwing a helpful error when used outside <EvilRadarChart />
70function useRadarChart() {
71// … truncated