echarts-radar-chart

1"use client";
2 
3import {
4  resolveTooltipPosition,
5  roundnessClass,
6  tooltipIndicatorHtml,
7  tooltipRow,
8  tooltipVariantClass,
9  type TooltipPosition,
10  type TooltipRoundness,
11  type TooltipVariant,
12} from "@/registry/ui/echarts-tooltip";
13import {
14  Children,
15  isValidElement,
16  useCallback,
17  useEffect,
18  useId,
19  useMemo,
20  useRef,
21  useState,
22  type CSSProperties,
23  type FC,
24  type ReactNode,
25} from "react";
26import {
27  buildChartCss,
28  getColorsCount,
29  resolveColors,
30  withAlpha,
31  type ChartConfig,
32  type ResolvedColors,
33} from "@/registry/ui/echarts-chart";
34import {
35  RadarComponent,
36  TooltipComponent,
37  type RadarComponentOption,
38  type TooltipComponentOption,
39} from "echarts/components";
40import { dotStyle, sampleGradient, type DotVariant } from "@/registry/ui/echarts-dot";
41import { LegendOverlay, type LegendVariant } from "@/registry/ui/echarts-legend";
42import { RadarChart, type RadarSeriesOption } from "echarts/charts";
43import { motion, useReducedMotion } from "motion/react";
44import { CanvasRenderer } from "echarts/renderers";
45import type { ComposeOption } from "echarts/core";
46import * as echarts from "echarts/core";
47 
48// Re-export the shared types that were previously declared inline here, so
49// existing consumers/examples keep importing them from the chart module.
50export type {
51  ChartConfig,
52  DotVariant,
53  LegendVariant,
54  TooltipPosition,
55  TooltipRoundness,
56  TooltipVariant,
57};
58 
59// Modular registration keeps the bundle lean — only the pieces this chart needs.
60// `RadarComponent` is the polar coordinate system (indicators, rings, spokes);
61// `RadarChart` is the series that draws polygons inside it. No GraphicComponent —
62// this chart has no zrender overlays (the recharts twin has no brush).
63echarts.use([RadarChart, RadarComponent, TooltipComponent, CanvasRenderer]);
64 
65type EChartsInstance = ReturnType<typeof echarts.init>;
66 
67// The exact option surface this chart uses — radar series, the radar coordinate
68// component, and the tooltip. Narrower than echarts' full EChartsOption, so a
69// misspelled key fails the compile instead of silently reaching setOption. Radar
70// has no cartesian axes, so unlike the area chart there are no derived x/y types.
71type EChartsOption = ComposeOption<
72  RadarSeriesOption | RadarComponentOption | TooltipComponentOption
73>;
74 
75// Single-item view of the radar component's array-or-single field, used where a
76// single radar coordinate system is built.
77type ArrayItem<T> = T extends readonly (infer U)[] ? U : T;
78// … truncated