Radar Chart

1"use client";
2 
3import { Group } from "@visx/group";
4import { ParentSize } from "@visx/responsive";
5import { scaleLinear } from "@visx/scale";
6import type { Transition } from "motion/react";
7import { type ReactNode, useCallback, useState } from "react";
8import { cn } from "@/lib/utils";
9import {
10  defaultRadarColors,
11  type RadarContextValue,
12  type RadarData,
13  type RadarMetric,
14  RadarProvider,
15} from "./radar-context";
16 
17export interface RadarChartProps {
18  /** Data array - each item represents a data series (polygon) */
19  data: RadarData[];
20  /** Metrics to display on the radar */
21  metrics: RadarMetric[];
22  /** Chart size in pixels. If not provided, uses parent container size */
23  size?: number;
24  /** Number of concentric grid circles. Default: 5 */
25  levels?: number;
26  /** Margin around the chart. Default: 60 */
27  margin?: number;
28  /** Enable animations. Default: true */
29  animate?: boolean;
30  /** Enter animation budget in ms. Default: 1100 */
31  enterDurationMs?: number;
32  /** Scales stagger timing (1 = default). */
33  staggerScale?: number;
34  /** Motion enter transition (spring or cubic-bezier tween). */
35  enterTransition?: Transition;
36  /** Changes when motion settings change — replays enter animations. */
37  motionReplayKey?: string;
38  /** Controlled hover state - index of hovered area */
39  hoveredIndex?: number | null;
40  /** Callback when hover state changes */
41  onHoverChange?: (index: number | null) => void;
42  /** Additional class name for the container */
43  className?: string;
44  /** Child components (RadarGrid, RadarAxis, RadarLabels, RadarArea) */
45  children: ReactNode;
46}
47 
48interface RadarChartInnerProps {
49  width: number;
50  height: number;
51  data: RadarData[];
52  metrics: RadarMetric[];
53  levels: number;
54  margin: number;
55  animate: boolean;
56  enterDurationMs: number;
57  staggerScale: number;
58  enterTransition?: Transition;
59  motionReplayKey: string;
60  children: ReactNode;
61  hoveredIndexProp?: number | null;
62  onHoverChange?: (index: number | null) => void;
63}
64 
65function RadarChartInner({
66  width,
67  height,
68  data,
69  metrics,
70  levels,
71  margin,
72  animate,
73  enterDurationMs,
74  staggerScale,
75  enterTransition,
76  motionReplayKey,
77  children,
78  hoveredIndexProp,
79  onHoverChange,
80}: RadarChartInnerProps) {
81  const [internalHoveredIndex, setInternalHoveredIndex] = useState<
82    number | null
83  >(null);
84 
85  // Use controlled or uncontrolled hover state
86  const isControlled = hoveredIndexProp !== undefined;
87// … truncated