echarts-radial-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  buildChartCss,
15  getColorsCount,
16  resolveColors,
17  withAlpha,
18  type ChartConfig,
19  type ResolvedColors,
20} from "@/registry/ui/echarts-chart";
21import {
22  Children,
23  isValidElement,
24  useCallback,
25  useEffect,
26  useId,
27  useMemo,
28  useRef,
29  useState,
30  type FC,
31  type ReactNode,
32} from "react";
33import {
34  PolarComponent,
35  TooltipComponent,
36  type PolarComponentOption,
37  type TooltipComponentOption,
38} from "echarts/components";
39import { LegendIndicator, type LegendVariant } from "@/registry/ui/echarts-legend";
40import { BarChart, type BarSeriesOption } from "echarts/charts";
41import { motion, useReducedMotion } from "motion/react";
42import { CanvasRenderer } from "echarts/renderers";
43import type { ComposeOption } from "echarts/core";
44import * as echarts from "echarts/core";
45 
46// Re-export the shared types that were previously declared inline here, so
47// existing consumers/examples keep importing them from the chart module.
48export type { ChartConfig, LegendVariant, TooltipPosition, TooltipRoundness, TooltipVariant };
49 
50// Modular registration keeps the bundle lean — only the pieces this chart needs.
51// `PolarComponent` bundles the polar coordinate system together with its
52// `angleAxis` + `radiusAxis` (concentric rings are a polar `bar` series whose
53// value drives the sweep angle). No GraphicComponent: unlike the area chart's
54// brush, nothing here draws raw zrender overlays — selection is per-datum
55// opacity, and the skeleton shimmer is a swept gradient.
56echarts.use([BarChart, PolarComponent, TooltipComponent, CanvasRenderer]);
57 
58type EChartsInstance = ReturnType<typeof echarts.init>;
59 
60// The exact option surface this chart uses — a polar bar series plus the polar
61// component (which carries angle/radius axes as dependencies) and the tooltip.
62// Narrower than echarts' full EChartsOption, so a misspelled key fails the
63// compile instead of silently reaching setOption.
64type EChartsOption = ComposeOption<BarSeriesOption | TooltipComponentOption | PolarComponentOption>;
65 
66// Single-entry views of the composed option's array-or-single fields — the
67// modular entry points don't export the polar/axis option types directly, so
68// they are recovered from the composed option (angleAxis/radiusAxis enter it as
69// … truncated