53:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 54:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 55:Td356,"use client"; import { resolveTooltipPosition, roundnessClass, tooltipIndicatorHtml, tooltipRow, tooltipVariantClass, type TooltipPosition, type TooltipRoundness, type TooltipVariant, } from "@/registry/ui/echarts-tooltip"; import { DEFAULT_ECHARTS_RENDERER, buildChartCss, getColorsCount, resolveColors, withAlpha, type ChartConfig, type EChartsRenderer, type ResolvedColors, } from "@/registry/ui/echarts-chart"; import { Children, isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState, type FC, type ReactNode, } from "react"; import { PolarComponent, TooltipComponent, type PolarComponentOption, type TooltipComponentOption, } from "echarts/components"; import { LegendIndicator, type LegendVariant } from "@/registry/ui/echarts-legend"; import { BarChart, type BarSeriesOption } from "echarts/charts"; import { motion, useReducedMotion } from "motion/react"; import type { ComposeOption } from "echarts/core"; import * as echarts from "echarts/core"; // Re-export the shared types that were previously declared inline here, so // existing consumers/examples keep importing them from the chart module. export type { ChartConfig, EChartsRenderer, LegendVariant, TooltipPosition, TooltipRoundness, TooltipVariant, }; // Modular registration keeps the bundle lean — only the pieces this chart needs. // `PolarComponent` bundles the polar coordinate system together with its // `angleAxis` + `radiusAxis` (concentric rings are a polar `bar` series whose // value drives the sweep angle). No GraphicComponent: unlike the area chart's // brush, nothing here draws raw zrender overlays — selection is per-datum // opacity, and the skeleton shimmer is a swept gradient. echarts.use([BarChart, PolarComponent, TooltipComponent]); type EChartsInstance = ReturnType; // The exact option surface this chart uses — a polar bar series plus the polar // component (which carries angle/radius axes as dependencies) and the tooltip. // Narrower than echarts' full EChartsOption, so a misspelled key fails the // compile instead of silently reaching setOption. type EChartsOption = ComposeOption; // Single-entry views of the composed option's array-or-single fields — the // modular entry points don't export the polar/axis option types directly, so // they are recovered from the composed option (angleAxis/radiusAxis enter it as // dependencies of the polar component). type ArrayItem = T extends readonly (infer U)[] ? U : T; type PolarOption = ArrayItem>; type AngleAxisOption = ArrayItem>; type RadiusAxisOption = ArrayItem>; // Per-datum bar paint — structurally assignable to the per-datum itemStyle. A // gradient `color` reproduces each bar's diagonal fill. type BarItemStyle = { color?: string | echarts.graphic.LinearGradient; opacity?: number; }; // ───────────────────────────────────────────────────────────────────────────── // Constants // ───────────────────────────────────────────────────────────────────────────── const DEFAULT_INNER_RADIUS = "30%"; const DEFAULT_OUTER_RADIUS = "100%"; const DEFAULT_CORNER_RADIUS = 5; const DEFAULT_BAR_SIZE = 14; const LOADING_BARS = 5; // skeleton ring count — matches the Recharts twin const LOADING_MAX = 100; // fixed angle-axis extent while loading (values roll in a 40–100 band) const LOADING_ANIMATION_DURATION = 2000; // shimmer sweep loop, in milliseconds const REVEAL_DURATION = 1000; // intro sweep-in length, in milliseconds // NOTE: the intro draw-in runs ECharts' RAW default bar entrance (each ring // sweeps out from the start angle). Like the area twin, it plays on the FIRST // real push only; every later push (selection, theme) sends animation:false // because notMerge would otherwise replay the entrance on each change. // ───────────────────────────────────────────────────────────────────────────── // Theme knobs — every neutral tone draws from these. Base colors come from the // consumer's CSS tokens (resolved off the live DOM), so only the opacity factors // live here. Factors MULTIPLY the token's own alpha — a border token that is // already 10%-white stays subtle. Tune here, not in the builder. // ───────────────────────────────────────────────────────────────────────────── const TRACK_OPACITY = 0.15; // unfilled background ring, × muted-foreground alpha const SELECTED_DIM_OPACITY = 0.15; // unselected bars while a selection is active // The skeleton track stays faintly visible; a bright band is CLIPPED to a small // sweeping window (only the arc slice inside it exists) and swept diagonally // across the rings, like a clip-path sliding over the chart. const LOADING_SHIMMER_MAX_OPACITY = 0.4; // shimmer arc peak, × foreground alpha const LOADING_SHIMMER_BAND = 0.2; // window half-width, fraction of the sweep axis const LOADING_SHIMMER_FEATHER = 0.2; // eased edge softening of the clip window // Stable series ids. `__`-prefixed ids are internal (background track, skeleton) // and stay silent; the main ring series is the only one that reports clicks and // feeds the tooltip. const MAIN_SERIES_ID = "radial-bars"; const TRACK_SERIES_ID = "__track"; // The track rides a second, identical polar so it never shares a bar band with // the data rings — see buildTrackSeries for why that matters. const TRACK_POLAR_INDEX = 1; const LOADING_SERIES_ID = "__loading"; const LOADING_TRACK_ID = "__loading-track"; const FALLBACK_COLOR = "rgba(120, 120, 120, 1)"; // ───────────────────────────────────────────────────────────────────────────── // Public types // ───────────────────────────────────────────────────────────────────────────── export type RadialVariant = "full" | "semi"; // TooltipVariant, TooltipRoundness, TooltipPosition, LegendVariant, and // ChartConfig now live in the shared @/registry/ui/echarts/* modules and are // imported + re-exported at the top of this file. export interface EChartsRadialChartProps> { data: TData[]; // rows rendered by the chart — one bar (ring) per row config: ChartConfig; // bar colors + labels, keyed by each bar's name nameKey: keyof TData & string; // data key holding each bar's name className?: string; // extra classes for the chart container renderer?: EChartsRenderer; // rendering engine — canvas by default, or SVG variant?: RadialVariant; // arc shape — full circle or half circle // Value a full sweep represents. Without it the scale is derived from the data, // so the largest bar always fills the arc — set it (e.g. 100) for gauges, where // a single value has to read against a fixed total. max?: number; innerRadius?: number | string; // inner radius of the radial bars outerRadius?: number | string; // outer radius of the radial bars defaultSelectedDataKey?: string | null; // bar selected on first render onSelectionChange?: (selection: { dataKey: string; value: number } | null) => void; // fires when the selected bar changes isLoading?: boolean; // shows the animated loading skeleton backgroundVariant?: BackgroundVariant; // decorative pattern behind the chart chartOptions?: Record; // escape hatch merged over the built ECharts option children?: ReactNode; // declarative config — , , } // ───────────────────────────────────────────────────────────────────────────── // Composible parts — DECLARATIVE CONFIG. Every part renders `null`; the root // walks `children` by reference (child.type === RadialBar, …) to collect its // props. Presence semantics mirror the Recharts twin: omit a child and that part // does not render. These are never mounted into the tree — they only carry props. // ───────────────────────────────────────────────────────────────────────────── export interface RadialBarProps { dataKey: string; // value key — determines each bar's arc length cornerRadius?: number; // rounding of each bar's ends (mapped to a rounded cap) barSize?: number; // thickness of each radial bar in pixels showBackground?: boolean; // renders the unfilled track behind each bar isClickable?: boolean; // lets bars be selected by clicking them } /** * The radial bar series. Each data row becomes one concentric ring. Pass * `isClickable` to make bars selectable. Renders nothing — the root reads these * props to build the series. */ const RadialBar: FC = () => null; export interface TooltipProps { variant?: TooltipVariant; // visual style of the tooltip surface roundness?: TooltipRoundness; // border-radius of the tooltip defaultIndex?: number; // data index shown by default with no hover position?: TooltipPosition; // "variable" follows the pointer (default); "fixed" pins the tooltip near the top and tracks the pointer's X } /** Presence enables the hover tooltip. Renders nothing. */ const Tooltip: FC = () => null; export interface LegendProps { variant?: LegendVariant; // visual style of the legend indicators align?: "left" | "center" | "right"; // horizontal placement verticalAlign?: "top" | "middle" | "bottom"; // vertical placement isClickable?: boolean; // lets each entry toggle selection of its bar } /** Presence enables the HTML legend overlay. Renders nothing. */ const Legend: FC = () => null; // ───────────────────────────────────────────────────────────────────────────── // Children collection — walk the declarative config into plain objects the // option builder consumes. A missing part becomes an absent slot. // ───────────────────────────────────────────────────────────────────────────── type RadialBarSlot = { present: boolean; dataKey: string; cornerRadius: number; barSize: number; showBackground: boolean; isClickable: boolean; }; type TooltipSlot = { present: boolean; variant: TooltipVariant; roundness: TooltipRoundness; defaultIndex?: number; position: TooltipPosition; }; type LegendSlot = { present: boolean; variant: LegendVariant; align: "left" | "center" | "right"; verticalAlign: "top" | "middle" | "bottom"; isClickable: boolean; }; type CollectedConfig = { radialBar: RadialBarSlot; tooltip: TooltipSlot; legend: LegendSlot; }; function collectConfig(children: ReactNode): CollectedConfig { // Defaults hold even when is omitted, so the loading skeleton // (which needs a bar size) always has sane geometry. let radialBar: RadialBarSlot = { present: false, dataKey: "", cornerRadius: DEFAULT_CORNER_RADIUS, barSize: DEFAULT_BAR_SIZE, showBackground: true, isClickable: false, }; let tooltip: TooltipSlot = { present: false, variant: "default", roundness: "lg", position: "variable", }; let legend: LegendSlot = { present: false, variant: "rounded-square", align: "center", verticalAlign: "bottom", isClickable: false, }; Children.forEach(children, (child) => { if (!isValidElement(child)) return; const type = child.type; if (type === RadialBar) { const props = child.props as RadialBarProps; radialBar = { present: true, dataKey: props.dataKey, cornerRadius: props.cornerRadius ?? DEFAULT_CORNER_RADIUS, barSize: props.barSize ?? DEFAULT_BAR_SIZE, showBackground: props.showBackground ?? true, isClickable: props.isClickable ?? false, }; } else if (type === Tooltip) { const props = child.props as TooltipProps; tooltip = { present: true, variant: props.variant ?? "default", roundness: props.roundness ?? "lg", defaultIndex: props.defaultIndex, position: props.position ?? "variable", }; } else if (type === Legend) { const props = child.props as LegendProps; legend = { present: true, variant: props.variant ?? "rounded-square", align: props.align ?? "center", verticalAlign: props.verticalAlign ?? "bottom", isClickable: props.isClickable ?? false, }; } }); return { radialBar, tooltip, legend }; } // ───────────────────────────────────────────────────────────────────────────── // Color plumbing (ChartConfig, getColorsCount, distributeColors, buildChartCss, // normalizeColor, withAlpha, ResolvedColors, resolveColors, indicatorBackground) // now lives in @/registry/ui/echarts-chart and is imported at the top of this // file. Only barPaint below is chart-specific — see its note. // ───────────────────────────────────────────────────────────────────────────── // Diagonal multi-stop color for a bar — a solid string when there is only one // color, else a top-left→bottom-right LinearGradient across the bar's bounding // box. Mirrors the Recharts `` applied to // every sector. function barPaint(slots: string[]): string | echarts.graphic.LinearGradient { if (slots.length <= 1) return slots[0] ?? FALLBACK_COLOR; const stops = slots.map((color, i) => ({ offset: i / (slots.length - 1), color })); return new echarts.graphic.LinearGradient(0, 0, 1, 1, stops); } // ───────────────────────────────────────────────────────────────────────────── // Misc helpers // ───────────────────────────────────────────────────────────────────────────── // Angle + center configuration for the chart's arc shape. Angles follow the // Recharts twin: `full` sweeps a whole clockwise circle from the top; `semi` // domes over the top from left to right (center pushed low, like cy="70%"). // ECharts' `clockwise: true` makes rising values rotate clockwise on screen. function getVariantGeometry(variant: RadialVariant): { center: [string, string]; startAngle: number; endAngle: number; } { switch (variant) { case "semi": return { center: ["50%", "70%"], startAngle: 180, endAngle: 0 }; case "full": default: return { center: ["50%", "50%"], startAngle: 90, endAngle: -270 }; } } // A "nice" ceiling for the angle-axis max, so the largest ring stops just shy of // a full wrap (mirrors the auto-scaled domain the Recharts twin derives instead // of letting the biggest bar close into an ambiguous full circle). ~ECharts' // default value-axis nicing for a 5-way split. function niceCeil(value: number): number { if (!Number.isFinite(value) || value <= 0) return 1; const rough = value / 5; const power = Math.floor(Math.log10(rough)); const base = Math.pow(10, power); const fraction = rough / base; const niceFraction = fraction < 1.5 ? 1 : fraction < 3 ? 2 : fraction < 7 ? 5 : 10; const interval = niceFraction * base; return Math.ceil(value / interval) * interval; } // Skeleton ring values as a smooth random walk in a comfortable band — reads // like a resting chart instead of raw noise. function getLoadingData(count: number): number[] { const rows: number[] = []; let value = 55 + Math.random() * 30; for (let i = 0; i < count; i++) { value = Math.min(LOADING_MAX, Math.max(40, value + (Math.random() - 0.5) * 30)); rows.push(Math.round(value)); } return rows; } // Gradient stops forming a hard clip window around `center`: full `peak` alpha // inside, zero outside, with a small sine feather so the edge isn't aliased. // `center` may run outside [0, 1] so the window fully enters and exits the frame. function shimmerWindowStops(center: number, color: string, peak: number) { const half = LOADING_SHIMMER_BAND; const feather = LOADING_SHIMMER_FEATHER; const alphaAt = (x: number) => { const dist = Math.abs(x - center); if (dist <= half - feather) return peak; if (dist >= half) return 0; // Sine-eased falloff — a linear ramp still reads as a hard cut. return peak * Math.sin(((1 - (dist - (half - feather)) / feather) * Math.PI) / 2); }; const offsets = [ 0, center - half, center - half + feather, center, center + half - feather, center + half, 1, ] .filter((x) => x >= 0 && x <= 1) .sort((a, b) => a - b); const stops: { offset: number; color: string }[] = []; for (const offset of offsets) { if (stops.length === 0 || offset - stops[stops.length - 1].offset > 1e-4) { stops.push({ offset, color: withAlpha(color, alphaAt(offset)) }); } } return stops; } // ───────────────────────────────────────────────────────────────────────────── // Tooltip / legend HTML primitives (roundnessClass, tooltipVariantClass, // indicatorBackground, legendFillStyle, legendOutlineStyle, LegendIndicator) now // live in the shared @/registry/ui/echarts/{tooltip,legend} modules and are // imported at the top of this file. The tooltip shell + item row below compose // those shared primitives; the legend overlay uses the shared LegendIndicator. // ───────────────────────────────────────────────────────────────────────────── // ───────────────────────────────────────────────────────────────────────────── // Background patterns — a self-contained port of . The Recharts // twin draws these inside a Recharts ; canvas has no such layer, so // here they render as a plain SVG overlay sitting behind the transparent ECharts // canvas. Same patterns, same `text-border` tint, same soft edge-fade mask. // ───────────────────────────────────────────────────────────────────────────── export type BackgroundVariant = | "dots" | "grid" | "cross-hatch" | "diagonal-lines" | "plus" | "falling-triangles" | "4-pointed-star" | "tiny-checkers" | "overlapping-circles" | "wiggle-lines" | "bubbles"; type PatternProps = { id: string }; const BACKGROUND_PATTERNS: Record> = { dots: ({ id }) => ( ), grid: ({ id }) => ( ), "cross-hatch": ({ id }) => ( ), "diagonal-lines": ({ id }) => ( ), plus: ({ id }) => ( ), "falling-triangles": ({ id }) => ( ), "4-pointed-star": ({ id }) => ( ), "tiny-checkers": ({ id }) => ( ), "overlapping-circles": ({ id }) => ( ), "wiggle-lines": ({ id }) => ( ), bubbles: ({ id }) => ( ), }; function ChartBackground({ variant }: { variant: BackgroundVariant }) { const baseId = useId().replace(/:/g, ""); const patternId = `${baseId}-bg-${variant}`; const maskId = `${baseId}-bg-edge-fade`; const filterId = `${baseId}-bg-blur`; const Pattern = BACKGROUND_PATTERNS[variant]; return ( ); } // ───────────────────────────────────────────────────────────────────────────── // Option builders — pure functions from a snapshot context to ECharts option // fragments. The component reads its refs ONCE per build into this context; // nothing below touches React state or the chart instance, so each fragment can // be reasoned about (and tested) in isolation. // ───────────────────────────────────────────────────────────────────────────── type OptionBuildContext = { categories: string[]; // bar names, in data order (inner → outer ring) values: number[]; // bar values aligned with categories config: ChartConfig; radialBar: RadialBarSlot; variant: RadialVariant; innerRadius: number | string; outerRadius: number | string; angleMax: number; selectedBar: string | null; hasSelection: boolean; tooltipSlot: TooltipSlot; isLoading: boolean; loadingData: () => number[]; resolved: ResolvedColors; }; // The polar coordinate systems: concentric rings live between innerRadius and // outerRadius, centered per the arc variant. TWO identical systems are emitted — // index 0 carries the data rings, index 1 the background track, so neither can // eat into the other's bar band (see buildTrackSeries). function buildPolar(ctx: OptionBuildContext): PolarOption[] { const geom = getVariantGeometry(ctx.variant); const polar: PolarOption = { center: geom.center, radius: [ctx.innerRadius, ctx.outerRadius] as (number | string)[], }; return [polar, { ...polar }]; } // The VALUE axis: a bar's length is its arc sweep, so the value maps to the // angle. Fully hidden — the Recharts twin shows no angular ticks or gridlines. function buildAngleAxis(ctx: OptionBuildContext): AngleAxisOption[] { const geom = getVariantGeometry(ctx.variant); const axis: AngleAxisOption = { type: "value", min: 0, max: ctx.angleMax, startAngle: geom.startAngle, endAngle: geom.endAngle, clockwise: true, show: false, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false }, }; // One per polar — an axis binds to its system through `polarIndex`. return [ { ...axis, polarIndex: 0 }, { ...axis, polarIndex: TRACK_POLAR_INDEX }, ]; } // The CATEGORY axis: one band per ring. Category index 0 sits innermost, which // matches the Recharts twin (first data row = innermost ring). Fully hidden. function buildRadiusAxis(ctx: OptionBuildContext): RadiusAxisOption[] { const axis: RadiusAxisOption = { type: "category", data: ctx.categories, show: false, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false }, }; // Identical bands on both polars, so a ring and its track land on the same radius. return [ { ...axis, polarIndex: 0 }, { ...axis, polarIndex: TRACK_POLAR_INDEX }, ]; } // The unfilled track behind each bar — a full-range ring drawn only when // `showBackground` is set. ECharts' native `showBackground` always spans a full // 360° ring even in the `semi` variant (createBackgroundShape hardcodes // startAngle 0 / endAngle 2π for tangential polar bars), so the track is a real // (silent) bar series at the axis max instead: it fills exactly the arc range. // // `polarIndex: 1` is load-bearing. Bar series on ONE polar share the radiusAxis // band, and ECharts hands out that band per stack id, first come first served: // `barWidth = min(remainedWidth, barWidth)` (layout/barPolar.js). Two series // each asking for the same barSize therefore split the band — the ring claims // its full width and the track is clamped to the leftover, rendering thinner // and hugging the ring's inner edge instead of underlaying it. `barGap: "-100%"` // does NOT fix this: it only overlaps their offsets, never their widths. Giving // the track its own (identical) polar means each series is alone in its band, so // both get the requested width and the same centered offset — concentric by // construction, in every variant and at any barSize. function buildTrackSeries(ctx: OptionBuildContext, loading: boolean): BarSeriesOption { const { radialBar } = ctx; const trackColor = withAlpha(ctx.resolved.tokens.mutedForeground, TRACK_OPACITY); return { id: loading ? LOADING_TRACK_ID : TRACK_SERIES_ID, type: "bar", coordinateSystem: "polar", polarIndex: TRACK_POLAR_INDEX, data: ctx.categories.map(() => ctx.angleMax), barWidth: radialBar.barSize, roundCap: radialBar.cornerRadius > 0, silent: true, // Static: the track is present from the first frame, only the data rings // sweep in (Recharts parity — its background sectors don't animate). animation: false, emphasis: { disabled: true }, itemStyle: { color: trackColor }, z: 1, }; } // The data rings. Each datum carries its own diagonal color fill and selection dim. function buildBarSeries(ctx: OptionBuildContext): BarSeriesOption[] { const { categories, values, radialBar, selectedBar, hasSelection, resolved } = ctx; const data = categories.map((name, i) => { const slots = resolved.series[name] ?? [FALLBACK_COLOR]; const isSelected = selectedBar === null || selectedBar === name; // Selection only dims when the bar is actually clickable (Recharts twin). const dimmed = radialBar.isClickable && hasSelection && !isSelected; const itemStyle: BarItemStyle = { color: barPaint(slots), opacity: dimmed ? SELECTED_DIM_OPACITY : 1, }; return { value: values[i] ?? 0, itemStyle }; }); const main: BarSeriesOption = { id: MAIN_SERIES_ID, type: "bar", coordinateSystem: "polar", // Sole series on polar 0 — the track rides its own polar (see buildTrackSeries). polarIndex: 0, data, barWidth: radialBar.barSize, roundCap: radialBar.cornerRadius > 0, cursor: radialBar.isClickable ? "pointer" : "default", // The radial twin has no hover-highlight, so bars don't emphasise on hover. emphasis: { disabled: true }, z: 3, // above the track (z 1) }; // Main first (index 0) so `showTip` can target it by a stable index; z keeps it // above the track regardless of array order. return [main, ...(radialBar.showBackground ? [buildTrackSeries(ctx, false)] : [])]; } // Tooltip HTML builder, closed over the build context. `trigger: "item"` — each // ring is an item; hovering one shows that bar. Labels by name (hideLabel parity: // no separate header row). function buildTooltipOption(ctx: OptionBuildContext): TooltipComponentOption { const { tooltipSlot, config, categories, isLoading } = ctx; const formatter = (params: unknown): string => { const p = (Array.isArray(params) ? params[0] : params) as { dataIndex?: number; value?: number | string; seriesId?: string; }; if (p == null || String(p.seriesId ?? "").startsWith("__")) return ""; const index = typeof p.dataIndex === "number" ? p.dataIndex : 0; const key = categories[index] ?? ""; const item = config[key]; const colorsCount = item ? getColorsCount(item) : 1; const labelText = typeof item?.label === "string" ? item.label : key; const value = typeof p.value === "number" ? p.value.toLocaleString() : String(p.value ?? ""); // Item-trigger tooltip: one ring per hover, with no separate header row // (hideLabel parity), so the shared tooltipShell — which always renders a // label div — is intentionally NOT used. The row shape matches the shared // indicator + label + value, so tooltipRow/tooltipIndicatorHtml build it. const row = tooltipRow({ indicatorHtml: tooltipIndicatorHtml(key, colorsCount), labelText, valueText: value, dimmed: "", }); return `

${row}

`; }; return { show: tooltipSlot.present && !isLoading, trigger: "item", confine: true, backgroundColor: "transparent", borderWidth: 0, padding: 0, extraCssText: "box-shadow:none;", // "variable" → undefined (ECharts default item anchoring, current behavior); // "fixed" → pin near the top, tracking the pointer's X only. position: resolveTooltipPosition(tooltipSlot.position), formatter, }; } // Loading skeleton — a faint set of full rings (the always-visible track) with a // bright band CLIPPED to a sweeping window on top (the `__loading` rings). One // gray skeleton regardless of the real data, matching the area twin's approach. function buildLoadingOption(ctx: OptionBuildContext): EChartsOption { const { tokens } = ctx.resolved; const loadingCats = Array.from({ length: LOADING_BARS }, (_, i) => String(i)); const loadingCtx: OptionBuildContext = { ...ctx, categories: loadingCats, angleMax: LOADING_MAX, }; return { animation: false, polar: buildPolar(loadingCtx), angleAxis: buildAngleAxis(loadingCtx), radiusAxis: buildRadiusAxis(loadingCtx), tooltip: { show: false }, series: [ buildTrackSeries(loadingCtx, true), { id: LOADING_SERIES_ID, type: "bar", coordinateSystem: "polar", polarIndex: 0, data: ctx.loadingData(), barWidth: loadingCtx.radialBar.barSize, roundCap: loadingCtx.radialBar.cornerRadius > 0, silent: true, emphasis: { disabled: true }, // Invisible until the first shimmer tick positions the clip window. itemStyle: { color: withAlpha(tokens.foreground, 0) }, z: 2, }, ], }; } // ───────────────────────────────────────────────────────────────────────────── // Live imperative state — everything the ECharts event handlers, rAF loop, and // theme/resize repushes read or write OUTSIDE the React render cycle, grouped in // one ref-stable object so the whole imperative surface is visible at a glance. // None of it is render output, which is exactly why it is not React state. // ───────────────────────────────────────────────────────────────────────────── type LiveState = { resolved: ResolvedColors | null; // colors read off the live DOM — feeds builds and the shimmer loop hasRevealed: boolean; // the intro sweep already played on this chart instance loadingRows: number[] | null; // skeleton data, lazily rolled and re-rolled per shimmer sweep categories: string[]; // bar names of the last build (click → name lookup) valueByName: Map; // bar values (legend/click → selection value) handlers: { clickable: boolean }; // latest flags for the imperative click handler // Update-style re-push for paths that bypass React entirely (theme flips, // resizes) — set by the sync effect. repush: () => void; }; // ───────────────────────────────────────────────────────────────────────────── // Component // ───────────────────────────────────────────────────────────────────────────── /** * Apache ECharts port of the EvilCharts radial chart, exposing a * compound-as-config API so its JSX reads identically to the Recharts twin. The * root owns the data, config, selection state, loading skeleton, and intro * reveal; every visual part — ``, ``, `` — is * composed as a declarative child that renders nothing. The root walks those * children by reference and drives a single imperative ECharts instance. Fully * self-contained: its only dependencies are `react`, `echarts`, and `motion`. */ export function EChartsRadialChart>({ data, config, nameKey, className, renderer = DEFAULT_ECHARTS_RENDERER, variant = "full", max, innerRadius = DEFAULT_INNER_RADIUS, outerRadius = DEFAULT_OUTER_RADIUS, defaultSelectedDataKey = null, onSelectionChange, isLoading = false, backgroundVariant, chartOptions, children, }: EChartsRadialChartProps) { const rawId = useId(); const chartId = `chart-${rawId.replace(/:/g, "")}`; const containerRef = useRef(null); const mountRef = useRef(null); const echartsRef = useRef(null); // The single imperative surface (see LiveState). `resolved` lives here rather // than in state: as state it would force an extra render pass and an effect // whose only job is to trigger the option push — the "chain of computations" // react.dev/learn/you-might-not-need-an-effect warns about. The object // identity is stable for the component's lifetime. const live = useRef({ resolved: null, hasRevealed: false, loadingRows: null, categories: [], valueByName: new Map(), handlers: { clickable: false }, repush: () => {}, }).current; // Skeleton rows roll lazily on first use — an impure useRef initializer would // re-roll Math.random() on every render. const loadingData = useCallback( () => (live.loadingRows ??= getLoadingData(LOADING_BARS)), [live], ); const shouldReduceMotion = useReducedMotion(); const [selectedBar, setSelectedBar] = useState(defaultSelectedDataKey); // ── Declarative config, collected from children by reference ───────────────── const collected = useMemo(() => collectConfig(children), [children]); const { radialBar, tooltip: tooltipSlot, legend: legendSlot } = collected; const configKeys = useMemo(() => Object.keys(config), [config]); // Bar names + values, in data order (index 0 → innermost ring). const categories = useMemo(() => data.map((row) => String(row[nameKey])), [data, nameKey]); const values = useMemo( () => data.map((row) => Number(row[radialBar.dataKey]) || 0), [data, radialBar.dataKey], ); // An explicit `max` pins what a full sweep means (gauges). Otherwise a nice // ceiling over the data so the largest ring stops just shy of a full wrap // (Recharts derives an auto-scaled domain; the exact niced max differs slightly // but keeps the same look). const angleMax = useMemo( () => (max != null && max > 0 ? max : niceCeil(Math.max(0, ...values))), [max, values], ); const css = useMemo(() => buildChartCss(chartId, config), [chartId, config]); const hasSelection = selectedBar !== null; // Refresh the imperative snapshots every render so the click handler and the // legend/click selection see current values. live.categories = categories; live.handlers = { clickable: radialBar.isClickable }; live.valueByName = useMemo(() => { const map = new Map(); categories.forEach((name, i) => map.set(name, values[i] ?? 0)); return map; }, [categories, values]); // Toggle selection and notify the parent with the bar's value (or null on // deselect). Selecting the active bar clears the selection. const toggleSelection = useCallback( (name: string) => { setSelectedBar((prev) => { const next = prev === name ? null : name; onSelectionChange?.( next === null ? null : { dataKey: next, value: live.valueByName.get(next) ?? 0 }, ); return next; }); }, [onSelectionChange, live], ); // ── Option builder ─────────────────────────────────────────────────────────── // Thin orchestrator over the pure builders: snapshot the resolved colors into // an OptionBuildContext, then assemble. const buildOption = useCallback((): EChartsOption => { const resolved = live.resolved; if (!resolved) return {}; const ctx: OptionBuildContext = { categories, values, config, radialBar, variant, innerRadius, outerRadius, angleMax, selectedBar, hasSelection, tooltipSlot, isLoading, loadingData, resolved, }; if (isLoading) return buildLoadingOption(ctx); return { animation: false, polar: buildPolar(ctx), angleAxis: buildAngleAxis(ctx), radiusAxis: buildRadiusAxis(ctx), tooltip: buildTooltipOption(ctx), series: buildBarSeries(ctx), }; }, [ live, categories, values, config, radialBar, variant, innerRadius, outerRadius, angleMax, selectedBar, hasSelection, tooltipSlot, isLoading, loadingData, ]); // ── Init + resize + theme observer (per renderer instance) ─────────────────── useEffect(() => { const mount = mountRef.current; const container = containerRef.current; if (!mount || !container) return; const chart = echarts.init(mount, null, { renderer }); echartsRef.current = chart; const resizeObserver = new ResizeObserver(() => { // Observers always fire once right after observe(). Repushing on that // no-op fire would land one frame into the intro and stomp the reveal — // only react when the renderer size actually changed. if (mount.clientWidth === chart.getWidth() && mount.clientHeight === chart.getHeight()) { return; } chart.resize(); live.repush(); }); resizeObserver.observe(mount); // Light/dark flips change no React state — re-resolve and push directly. const themeObserver = new MutationObserver(() => live.repush()); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); chart.on("click", (params) => { if (!live.handlers.clickable) return; const p = params as { seriesId?: string; dataIndex?: number; componentType?: string }; // Only the main ring series is clickable; the track/skeleton are silent. if (p.componentType !== "series" || p.seriesId !== MAIN_SERIES_ID) return; if (typeof p.dataIndex !== "number") return; const name = live.categories[p.dataIndex]; if (name != null) toggleSelection(name); }); return () => { resizeObserver.disconnect(); themeObserver.disconnect(); chart.dispose(); echartsRef.current = null; // The reveal guard belongs to the chart instance it guarded. Without this // reset, StrictMode's dev-only mount→unmount→remount plays the entrance on // the throwaway instance and the surviving one renders without it. live.hasRevealed = false; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [renderer]); // ── Sync ECharts with props/theme/selection — resolve, build, push ──────────── useEffect(() => { const chart = echartsRef.current; const container = containerRef.current; if (!chart || !container) return; // Colors come from the