echarts-pie-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 { TooltipComponent, type TooltipComponentOption } from "echarts/components";
35import { LegendOverlay, type LegendVariant } from "@/registry/ui/echarts-legend";
36import { PieChart, type PieSeriesOption } from "echarts/charts";
37import { motion, useReducedMotion } from "motion/react";
38import { CanvasRenderer } from "echarts/renderers";
39import type { ComposeOption } from "echarts/core";
40import * as echarts from "echarts/core";
41 
42// Re-export the shared types that were previously declared inline here, so
43// existing consumers/examples keep importing them from the chart module.
44export type { ChartConfig, LegendVariant, TooltipPosition, TooltipRoundness, TooltipVariant };
45 
46// Modular registration keeps the bundle lean — only the pieces this chart needs.
47// A pie has no coordinate system, so there is no GridComponent and no axes; the
48// tooltip is item-triggered. Never register GraphicComponent: the loading shimmer
49// and selection dim are per-sector itemStyle updates, not graphic overlays.
50echarts.use([PieChart, TooltipComponent, CanvasRenderer]);
51 
52type EChartsInstance = ReturnType<typeof echarts.init>;
53 
54// The exact option surface this chart uses — a pie series plus the tooltip
55// component. Narrower than echarts' full EChartsOption, so a misspelled key fails
56// the compile instead of silently reaching setOption.
57type EChartsOption = ComposeOption<PieSeriesOption | TooltipComponentOption>;
58 
59// Sector paint — structurally assignable to a pie datum's itemStyle. `color`
60// accepts the same solid-or-gradient value sectorPaint returns, and the optional
61// border fields carry the constant-width gap / overlap separator.
62type PieItemStyle = {
63  color: string | echarts.graphic.LinearGradient;
64  opacity: number;
65  borderRadius: number;
66  borderColor?: string;
67  borderWidth?: number;
68};
69 
70// … truncated