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:Td110,"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 CSSProperties, type FC, type ReactNode, } from "react"; import { TooltipComponent, type TooltipComponentOption } from "echarts/components"; import { LegendOverlay, type LegendVariant } from "@/registry/ui/echarts-legend"; import { PieChart, type PieSeriesOption } 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. // A pie has no coordinate system, so there is no GridComponent and no axes; the // tooltip is item-triggered. Never register GraphicComponent: the loading shimmer // and selection dim are per-sector itemStyle updates, not graphic overlays. echarts.use([PieChart, TooltipComponent]); type EChartsInstance = ReturnType; // The exact option surface this chart uses — a pie series plus the tooltip // component. Narrower than echarts' full EChartsOption, so a misspelled key fails // the compile instead of silently reaching setOption. type EChartsOption = ComposeOption; // Sector paint — structurally assignable to a pie datum's itemStyle. `color` // accepts the same solid-or-gradient value sectorPaint returns, and the optional // border fields carry the constant-width gap / overlap separator. type PieItemStyle = { color: string | echarts.graphic.LinearGradient; opacity: number; borderRadius: number; borderColor?: string; borderWidth?: number; }; // ───────────────────────────────────────────────────────────────────────────── // Constants // ───────────────────────────────────────────────────────────────────────────── const REVEAL_DURATION = 1000; // intro draw-in length, in milliseconds (ECharts' default) // NOTE: the intro is ECharts' RAW default pie entrance (`animationType: "expansion"` // — sectors sweep out from the start angle). We only gate whether it plays; we do // not customize its easing, matching the area chart's "raw default" policy. const LOADING_ANIMATION_DURATION = 2000; // shimmer loop, in milliseconds const LOADING_SECTORS = 5; // skeleton sector count — Recharts twin uses 5 equal sectors const DEFAULT_INNER_RADIUS: number | string = 0; const DEFAULT_OUTER_RADIUS: number | string = "80%"; const DEFAULT_CORNER_RADIUS = 0; const DEFAULT_PADDING_ANGLE = 0; const DEFAULT_START_ANGLE = 0; const DEFAULT_END_ANGLE = 360; const FALLBACK_COLOR = "rgba(120, 120, 120, 1)"; // Overlapping sectors (negative paddingAngle) get a background-colored border to // separate the petals — the canvas analogue of the Recharts twin's // `stroke="var(--background)" strokeWidth={5}`. const OVERLAP_BORDER_WIDTH = 5; // Selecting a sector pops it radially OUTWARD from the center — the offset-slice // look from the official ECharts pie-pattern example. This is the pixel distance // the chosen sector translates along its own bisector; deselecting returns it. const SELECTED_OFFSET = 12; // The selected sector stays fully opaque; the others recede to this dimmed // opacity. Tuned to ~half the former 0.3 so the selected sector reads with more // contrast against the dimmed ones — the analogue of the area chart's dim-fill // halving (its dimmed fill went 0.2 → 0.1 while the selected state stays full). const DIMMED_OPACITY = 0.15; // Positive gaps between sectors are drawn as a CONSTANT-WIDTH background-colored // border (px), NOT an angular padAngle. An angular pad tapers to a wedge toward // the center; a border keeps every gap parallel-edged all the way from the rim to // the center. The px width tracks the requested `paddingAngle` for familiar sizing. function gapBorderWidth(paddingAngle: number): number { return Math.max(paddingAngle, 0); } // Resolves each sector's separator border. Negative paddingAngle keeps the // overlapping-petal look (a real angular overlap plus a wide separator); positive // paddingAngle becomes a constant-width gap; zero draws no border at all. function sectorBorder( paddingAngle: number, background: string, ): { borderColor: string; borderWidth: number } | null { if (paddingAngle < 0) return { borderColor: background, borderWidth: OVERLAP_BORDER_WIDTH }; const width = gapBorderWidth(paddingAngle); if (width > 0) return { borderColor: background, borderWidth: width }; return null; } // Loading shimmer opacities (× the foreground token's own alpha). A sine-feathered // window sweeps around the ring, brightening each sector from base → peak as it // passes — the angular twin of the area chart's swept clip window, and a match for // the Recharts twin's staggered sector pulse. const LOADING_BASE_OPACITY = 0.15; // resting sector fill, × foreground alpha const LOADING_PEAK_OPACITY = 0.5; // fill inside the sweep window, × foreground alpha const LOADING_SHIMMER_BAND = 0.28; // window half-width, fraction of the ring (0..1) const LOADING_SHIMMER_FEATHER = 0.22; // sine-eased edge softening of the window // ───────────────────────────────────────────────────────────────────────────── // Public types // ───────────────────────────────────────────────────────────────────────────── // The pie has a single fill style — a per-sector color gradient. Kept as a named // union for API parity with the Recharts twin (and room to grow). export type PieVariant = "gradient"; // Where sector labels sit: "inside" draws value text on the sector (the default), // "outside" moves the sector's name past the rim with a leader line, matching the // classic ECharts pie (echarts.apache.org/examples/en/editor.html?c=pie-simple). export type LabelPosition = "inside" | "outside"; // 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 type BackgroundVariant = | "dots" | "grid" | "cross-hatch" | "diagonal-lines" | "plus" | "falling-triangles" | "4-pointed-star" | "tiny-checkers" | "overlapping-circles" | "wiggle-lines" | "bubbles"; export interface EChartsPieChartProps> { data: TData[]; // rows rendered by the chart — one sector each config: ChartConfig; // sector colors + labels, keyed by the sector name dataKey: keyof TData & string; // key holding each sector's numeric value nameKey: keyof TData & string; // key holding each sector's name className?: string; // extra classes for the chart container renderer?: EChartsRenderer; // rendering engine — canvas by default, or SVG // Master switch for the intro draw-in. Not present on the Recharts twin (which // hardcodes its animation); added here as the ECharts off-switch, mirroring the // ECharts area chart's `animation` prop. OS reduce-motion also disables it. animation?: boolean; defaultSelectedSector?: string | null; // sector selected on first render selectedSector?: string | null; // controlled selection — overrides internal state when set onSelectionChange?: (selection: { dataKey: string; value: number } | null) => void; // fires when the selected sector changes isLoading?: boolean; // shows the animated loading skeleton 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 === Pie, …) 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 PieProps { variant?: PieVariant; // fill style for the pie's sectors innerRadius?: number | string; // inner radius — set above 0 for a donut outerRadius?: number | string; // outer radius of the pie cornerRadius?: number; // border-radius of each sector in pixels paddingAngle?: number; // gap between sectors in degrees — negative overlaps them startAngle?: number; // angle the pie starts drawing from endAngle?: number; // angle the pie stops drawing at isClickable?: boolean; // lets sectors be selected by clicking them — the selected sector pops outward children?: ReactNode; // optional composition for sector labels } /** * The pie series. Declares its own shape (radii, angles, corner rounding, * padding) and clickability. Renders nothing — the root reads these props to * build the ECharts pie. When clickable, the selected sector pops radially * outward. Compose a inside it to draw labels on each sector. */ const Pie: FC = () => null; export interface LabelProps { dataKey?: string; // data key for the label text — defaults to the pie's value key position?: LabelPosition; // "inside" (value on the sector) or "outside" (name past the rim, with a leader line) } /** Declares per-sector labels for the enclosing . Renders nothing. */ const Label: FC = () => null; export interface TooltipProps { variant?: TooltipVariant; // visual style of the tooltip surface roundness?: TooltipRoundness; // border-radius of the tooltip defaultIndex?: number; // sector 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 sector } /** Presence enables the HTML legend overlay. Renders nothing. */ const Legend: FC = () => null; export interface BackgroundProps { variant?: BackgroundVariant; // background pattern style } /** Presence draws a decorative SVG pattern behind the pie. Renders nothing. */ const Background: FC = () => null; // ───────────────────────────────────────────────────────────────────────────── // Children collection — walk the declarative config into plain objects the // option builder consumes. is read from the 's own children; a // missing means sector labels do not render. // ───────────────────────────────────────────────────────────────────────────── type PieSlot = { variant: PieVariant; innerRadius: number | string; outerRadius: number | string; cornerRadius: number; paddingAngle: number; startAngle: number; endAngle: number; isClickable: boolean; labelDataKey: string | null; // null when no child is present labelPosition: LabelPosition; // where the sits — only meaningful when labelDataKey !== null }; 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 BackgroundSlot = { present: boolean; variant: BackgroundVariant }; type CollectedConfig = { pie: PieSlot | null; tooltip: TooltipSlot; legend: LegendSlot; background: BackgroundSlot; }; function collectConfig(children: ReactNode): CollectedConfig { let pie: PieSlot | null = null; let tooltip: TooltipSlot = { present: false, variant: "default", roundness: "lg", position: "variable", }; // Pie legend defaults differ from the area chart's: centered along the bottom. let legend: LegendSlot = { present: false, variant: "rounded-square", align: "center", verticalAlign: "bottom", isClickable: false, }; let background: BackgroundSlot = { present: false, variant: "dots" }; Children.forEach(children, (child) => { if (!isValidElement(child)) return; const type = child.type; if (type === Pie) { const props = child.props as PieProps; // A child (if any) declares per-sector labels. let labelDataKey: string | null = null; let labelPosition: LabelPosition = "inside"; Children.forEach(props.children, (labelChild) => { if (!isValidElement(labelChild) || labelChild.type !== Label) return; const labelProps = labelChild.props as LabelProps; labelDataKey = labelProps.dataKey ?? ""; labelPosition = labelProps.position ?? "inside"; }); pie = { variant: props.variant ?? "gradient", innerRadius: props.innerRadius ?? DEFAULT_INNER_RADIUS, outerRadius: props.outerRadius ?? DEFAULT_OUTER_RADIUS, cornerRadius: props.cornerRadius ?? DEFAULT_CORNER_RADIUS, paddingAngle: props.paddingAngle ?? DEFAULT_PADDING_ANGLE, startAngle: props.startAngle ?? DEFAULT_START_ANGLE, endAngle: props.endAngle ?? DEFAULT_END_ANGLE, isClickable: props.isClickable ?? false, labelDataKey, labelPosition, }; } 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, }; } else if (type === Background) { const props = child.props as BackgroundProps; background = { present: true, variant: props.variant ?? "dots" }; } }); return { pie, tooltip, legend, background }; } // Color plumbing (ChartConfig, getColorsCount, buildChartCss, withAlpha, // ResolvedColors, resolveColors) now lives in @/registry/ui/echarts-chart and is // imported at the top of this file. The pie keeps its own DIAGONAL sectorPaint // below (the shared seriesPaint is a horizontal gradient). // ───────────────────────────────────────────────────────────────────────────── // Sector fill // ───────────────────────────────────────────────────────────────────────────── // Per-sector fill: a solid color for a single-color config, else a diagonal // top-left → bottom-right gradient across the sector's own bounding box. This // mirrors the Recharts twin's `RadialColorGradient` (a `linearGradient` with // x1/y1 = 0 and x2/y2 = 1). ECharts gradients are bbox-relative by default — // exactly what a per-sector gradient wants — so no `global` override is needed. function sectorPaint(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); } // ───────────────────────────────────────────────────────────────────────────── // Loading skeleton helpers // ───────────────────────────────────────────────────────────────────────────── // Per-sector shimmer alpha: a sine-feathered window centered on `center` (both // values are ring fractions in [0, 1)). Sectors inside the window read at // `LOADING_PEAK_OPACITY`, outside at `LOADING_BASE_OPACITY`, with a sine falloff // across the feather so the sweep edge isn't a hard cut. Distance wraps around // the ring — the highlight travels continuously, like the Recharts twin's pulse. function loadingSectorAlpha(pos: number, center: number): number { const raw = Math.abs(pos - center); const dist = Math.min(raw, 1 - raw); // shortest way around the ring const half = LOADING_SHIMMER_BAND; const feather = LOADING_SHIMMER_FEATHER; if (dist >= half) return LOADING_BASE_OPACITY; if (dist <= half - feather) return LOADING_PEAK_OPACITY; // Sine-eased ramp — a linear one still reads as a hard cut. const t = 1 - (dist - (half - feather)) / feather; const eased = Math.sin((t * Math.PI) / 2); return LOADING_BASE_OPACITY + (LOADING_PEAK_OPACITY - LOADING_BASE_OPACITY) * eased; } // Tooltip styling (roundnessClass, tooltipVariantClass, tooltipRow, // tooltipIndicatorHtml) and the legend overlay (LegendOverlay + its indicators) // now live in @/registry/ui/echarts/{tooltip,legend} and are imported at the top // of this file. // ───────────────────────────────────────────────────────────────────────────── // Background overlay (SVG) — the Recharts twin renders its decorative pattern in // SVG, so we render the SAME SVG patterns as a layer BEHIND the transparent // ECharts canvas. Copied verbatim from the repo's so this file // depends on nothing outside `react`, `echarts`, and `motion`. The Tailwind // `text-border` classes resolve in the DOM; the blur-masked rect fades the edges. // ───────────────────────────────────────────────────────────────────────────── 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 BackgroundLayer({ 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 PatternComponent = 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. // ───────────────────────────────────────────────────────────────────────────── type OptionBuildContext = { data: Record[]; config: ChartConfig; nameKey: string; dataKey: string; pie: PieSlot | null; selectedSector: string | null; tooltipSlot: TooltipSlot; legendSlot: LegendSlot; isLoading: boolean; resolved: ResolvedColors; }; // The pie's vertical centre reserves room for the HTML legend overlay: a legend // along the bottom nudges the pie up, one along the top nudges it down. Kept as a // percentage so it tracks the container size (the legend is fixed-height text). function pieCenterY(legendSlot: LegendSlot): string { if (!legendSlot.present) return "50%"; if (legendSlot.verticalAlign === "bottom") return "45%"; if (legendSlot.verticalAlign === "top") return "55%"; return "50%"; } // Tooltip HTML builder, closed over the build context. The pie tooltip is // item-triggered, so each hover surfaces exactly one sector — its indicator, // label, and value, matching ChartTooltipContent with `hideLabel` (no header). function createTooltipFormatter(ctx: OptionBuildContext) { const { config, selectedSector, tooltipSlot } = ctx; return (params: unknown): string => { const p = (Array.isArray(params) ? params[0] : params) as { name?: string; value?: number | string; seriesId?: string; } | null; // The loading skeleton is a `__`-prefixed series and never surfaces a tooltip. if (!p || String(p.seriesId ?? "").startsWith("__")) return ""; const name = String(p.name ?? ""); const item = config[name]; const colorsCount = item ? getColorsCount(item) : 1; const labelText = typeof item?.label === "string" ? item.label : name; const value = typeof p.value === "number" ? p.value.toLocaleString() : String(p.value ?? ""); const dimmed = selectedSector != null && selectedSector !== name ? " opacity-30" : ""; // The row shape matches the area chart's indicator + label + value, so it // reuses the shared tooltipRow/tooltipIndicatorHtml. The pie tooltip is // item-triggered with NO header (hideLabel), so it keeps its own no-header // shell — built from the shared roundnessClass/tooltipVariantClass — rather // than the header-carrying tooltipShell. const row = tooltipRow({ indicatorHtml: tooltipIndicatorHtml(name, colorsCount), labelText, valueText: value, dimmed, }); return `

${row}

`; }; } function buildTooltipOption(ctx: OptionBuildContext): TooltipComponentOption { const { tooltipSlot, isLoading } = ctx; // The pie tooltip is item-triggered (no axis, no cursor line), so it can't use // the shared tooltipBaseOption (which is trigger:"axis" with an axisPointer). // It keeps its own item-tooltip fields and wires the position prop directly // through the shared resolveTooltipPosition — "variable" → undefined (default // follow-the-pointer behavior), "fixed" → pinned near the top, tracking X. return { show: tooltipSlot.present && !isLoading, trigger: "item", confine: true, backgroundColor: "transparent", borderWidth: 0, padding: 0, extraCssText: "box-shadow:none;", displayTransition: false, position: resolveTooltipPosition(tooltipSlot.position), formatter: createTooltipFormatter(ctx), }; } // The pie series. Each row becomes a sector whose fill is its own color gradient, // dimmed when another sector is selected, and separated from its neighbors by a // constant-width background border (see sectorBorder). The selected sector pops // radially outward via ECharts' native select state (selectedOffset). function buildPieSeries(ctx: OptionBuildContext): PieSeriesOption[] { const { data, config, nameKey, dataKey, pie, selectedSector, legendSlot, resolved } = ctx; if (!pie) return []; const { tokens } = resolved; const hasSelection = selectedSector !== null; // Selection (dim + pop-out) is only meaningful on a clickable pie. const border = sectorBorder(pie.paddingAngle, tokens.background); const sectors = data.map((row) => { const name = String(row[nameKey]); const slots = resolved.series[name] ?? [FALLBACK_COLOR]; // Only a clickable pie dims — a static one never has a selection to dim from. const isSelected = pie.isClickable && selectedSector === name; const isDimmed = pie.isClickable && hasSelection && selectedSector !== name; const itemStyle: PieItemStyle = { color: sectorPaint(slots), opacity: isDimmed ? DIMMED_OPACITY : 1, borderRadius: pie.cornerRadius, }; // Constant-width background gap (positive paddingAngle) or overlap separator // (negative). Parallel-edged from rim to center — no wedge-shaped taper. if (border) { itemStyle.borderColor = border.borderColor; itemStyle.borderWidth = border.borderWidth; } // The `selected` flag drives the native offset — React selection is the single // source of truth, re-applied on every notMerge push so it survives rebuilds. return { name, value: Number(row[dataKey]) || 0, itemStyle, selected: isSelected }; }); const showLabel = pie.labelDataKey !== null; const isOutside = pie.labelPosition === "outside"; // An explicit always wins. Otherwise inside labels show the // sector's value (Recharts parity) and outside labels show the sector's name/ // config label — matching the classic ECharts pie-simple outer labels. const explicitKey = pie.labelDataKey ? pie.labelDataKey : null; const labelFormatter = (labelParams: { dataIndex: number; name?: string; value?: unknown }) => { if (explicitKey) return String(data[labelParams.dataIndex]?.[explicitKey] ?? ""); if (isOutside) { const item = config[String(labelParams.name ?? "")]; return typeof item?.label === "string" ? item.label : String(labelParams.name ?? ""); } return String(data[labelParams.dataIndex]?.[dataKey] ?? labelParams.value ?? ""); }; const label = { show: showLabel, // Inner value labels sit on the colored sector (background-colored text); // outer name labels sit past the rim in muted-foreground with a leader. position: (isOutside ? "outside" : "inner") as "outside" | "inner", color: isOutside ? tokens.mutedForeground : tokens.background, fontSize: 12, fontWeight: 500, formatter: labelFormatter, }; return [ { id: "pie", type: "pie", center: ["50%", pieCenterY(legendSlot)], radius: [pie.innerRadius, pie.outerRadius], startAngle: pie.startAngle, endAngle: pie.endAngle, // Recharts sweeps counterclockwise from 3 o'clock; ECharts angles share that // orientation, so `clockwise: false` reproduces the twin's sector order. clockwise: false, // Only a NEGATIVE paddingAngle reaches padAngle (petal overlap). Positive // gaps are drawn as constant-width borders instead — an angular pad would // taper to a wedge toward the center. padAngle: Math.min(pie.paddingAngle, 0), cursor: pie.isClickable ? "pointer" : "default", // No hover scale on ANY variant — hovering only surfaces the tooltip. The // pop-out below is the sole selection affordance, never a hover effect. emphasis: { scale: false }, // Native select state: the chosen sector translates SELECTED_OFFSET px along // its bisector, away from the center (the offset-slice pie-pattern look). // Driven by each datum's `selected` flag; deselecting returns it. selectedMode: pie.isClickable ? "single" : false, selectedOffset: SELECTED_OFFSET, // Neutralize any default select styling — the selected sector keeps its // normal paint (inherited via state merge) and only its position moves. select: { itemStyle: {} }, label, labelLine: isOutside ? { show: true, length: 14, length2: 14, smooth: false, // Leader lines drawn in a muted token, matching the docs aesthetic. lineStyle: { color: withAlpha(tokens.mutedForeground, 0.45), width: 1 }, } : { show: false }, data: sectors, }, ]; } // Loading skeleton — ONE gray ring of equal sectors regardless of the real data // (Recharts parity), swept by the shimmer rAF. Respects the pie's shape so a // donut skeleton stays a donut. The per-sector color is a placeholder; the rAF // loop retints each sector every frame. function buildLoadingOption(ctx: OptionBuildContext): EChartsOption { const { pie, legendSlot, resolved } = ctx; const { tokens } = resolved; const innerRadius = pie?.innerRadius ?? DEFAULT_INNER_RADIUS; const outerRadius = pie?.outerRadius ?? DEFAULT_OUTER_RADIUS; const cornerRadius = pie?.cornerRadius ?? DEFAULT_CORNER_RADIUS; const paddingAngle = pie?.paddingAngle ?? DEFAULT_PADDING_ANGLE; const startAngle = pie?.startAngle ?? DEFAULT_START_ANGLE; const endAngle = pie?.endAngle ?? DEFAULT_END_ANGLE; const border = sectorBorder(paddingAngle, tokens.background); const sectors = Array.from({ length: LOADING_SECTORS }, (_, i) => { const itemStyle: PieItemStyle = { color: withAlpha(tokens.foreground, LOADING_BASE_OPACITY), opacity: 1, borderRadius: cornerRadius, }; // Same constant-width gap / overlap separator as the real pie. if (border) { itemStyle.borderColor = border.borderColor; itemStyle.borderWidth = border.borderWidth; } return { name: `__loading-${i}`, value: 1, itemStyle }; }); return { animation: false, tooltip: { show: false }, series: [ { id: "__loading", type: "pie", center: ["50%", pieCenterY(legendSlot)], radius: [innerRadius, outerRadius], startAngle, endAngle, clockwise: false, padAngle: Math.min(paddingAngle, 0), silent: true, emphasis: { scale: false }, label: { show: false }, labelLine: { show: false }, data: sectors, }, ], }; } // ───────────────────────────────────────────────────────────────────────────── // Live imperative state — everything the ECharts event handlers and rAF loops // 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 rAF loops hasRevealed: boolean; // the intro draw-in already played on this chart instance // Latest callbacks/flags for the imperative ECharts click handler. handlers: { isClickable: boolean; selectedSector: string | null; selectSector: (name: string | null) => void; }; // Update-style re-push for paths that bypass React entirely (theme flips) — // set by the sync effect. repush: () => void; }; // ───────────────────────────────────────────────────────────────────────────── // Component // ───────────────────────────────────────────────────────────────────────────── /** * Apache ECharts port of the EvilCharts pie 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 EChartsPieChart>({ data, config, dataKey, nameKey, className, renderer = DEFAULT_ECHARTS_RENDERER, animation = true, defaultSelectedSector = null, selectedSector: selectedSectorProp, onSelectionChange, isLoading = false, chartOptions, children, }: EChartsPieChartProps) { 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 object identity is stable // for the component's lifetime. const live = useRef({ resolved: null, hasRevealed: false, handlers: { isClickable: false, selectedSector: defaultSelectedSector, selectSector: () => {}, }, repush: () => {}, }).current; const shouldReduceMotion = useReducedMotion(); // Selection is controlled when the `selectedSector` prop is provided; otherwise // the internal state (seeded by defaultSelectedSector) drives it. const [internalSelectedSector, setSelectedSector] = useState( defaultSelectedSector, ); const selectedSector = selectedSectorProp !== undefined ? selectedSectorProp : internalSelectedSector; // ── Declarative config, collected from children by reference ───────────────── const collected = useMemo(() => collectConfig(children), [children]); const { pie, tooltip: tooltipSlot, legend: legendSlot, background: backgroundSlot } = collected; // Sector names in data order — the keys color resolution, the legend, and the // click handler all agree on. Config is keyed by these same names. const sectorKeys = useMemo( () => data.map((row) => String(row[nameKey as string])), [data, nameKey], ); const css = useMemo(() => buildChartCss(chartId, config), [chartId, config]); // Sets selection state and notifies the parent with the sector's value. const selectSector = useCallback( (name: string | null) => { setSelectedSector(name); if (name === null) { onSelectionChange?.(null); return; } const item = data.find((row) => String(row[nameKey as string]) === name); onSelectionChange?.( item ? { dataKey: name, value: Number(item[dataKey as string]) || 0 } : null, ); }, [data, dataKey, nameKey, onSelectionChange], ); // Refresh the click handler's snapshot of the latest callbacks/flags every render. live.handlers = { isClickable: pie?.isClickable ?? false, selectedSector, selectSector, }; // ── Option builder ─────────────────────────────────────────────────────────── // Thin orchestrator over the pure builders above: snapshot the resolved colors // into an OptionBuildContext, then assemble. const buildOption = useCallback((): EChartsOption => { const resolved = live.resolved; if (!resolved) return {}; const ctx: OptionBuildContext = { data, config, nameKey: nameKey as string, dataKey: dataKey as string, pie, selectedSector, tooltipSlot, legendSlot, isLoading, resolved, }; if (isLoading) return buildLoadingOption(ctx); return { animation: false, tooltip: buildTooltipOption(ctx), series: buildPieSeries(ctx), }; }, [ live, data, config, nameKey, dataKey, pie, selectedSector, tooltipSlot, legendSlot, isLoading, ]); // ── 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. The pie has no // renderer-sized textures, so a plain resize() (which re-lays the // percentage geometry) is all a size change needs. if (mount.clientWidth === chart.getWidth() && mount.clientHeight === chart.getHeight()) { return; } chart.resize(); }); 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) => { const { isClickable, selectedSector: selected, selectSector: select } = live.handlers; if (!isClickable) return; const p = params as { name?: string; seriesId?: string }; // Ignore the loading skeleton's `__`-prefixed series. if (String(p.seriesId ?? "").startsWith("__")) return; const name = p.name; if (typeof name !== "string") return; // Clicking the selected sector clears the selection, otherwise selects it. select(selected === name ? null : 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