echarts-composed-chart

1"use client";
2 
3import {
4  tooltipBaseOption,
5  tooltipIndicatorHtml,
6  tooltipRow,
7  tooltipShell,
8  type TooltipPosition,
9  type TooltipRoundness,
10  type TooltipVariant,
11} from "@/registry/ui/echarts-tooltip";
12import {
13  Brush,
14  buildBrushDataZoom,
15  syncBrushOverlay,
16  type BrushGeometry,
17  type BrushOverlayElements,
18  type BrushProps,
19  type BrushRange,
20} from "@/registry/ui/echarts-brush";
21import {
22  DataZoomComponent,
23  GridComponent,
24  TooltipComponent,
25  type DataZoomComponentOption,
26  type GridComponentOption,
27  type TooltipComponentOption,
28} from "echarts/components";
29import {
30  buildChartCss,
31  flattenColor,
32  getColorsCount,
33  resolveColors,
34  seriesPaint,
35  withAlpha,
36  type ChartConfig,
37  type ResolvedColors,
38} from "@/registry/ui/echarts-chart";
39import {
40  Children,
41  isValidElement,
42  useCallback,
43  useEffect,
44  useId,
45  useMemo,
46  useRef,
47  useState,
48  type CSSProperties,
49  type FC,
50  type ReactNode,
51} from "react";
52import { dotItemStyle, dotStyle, sampleGradient, type DotVariant } from "@/registry/ui/echarts-dot";
53import { BarChart, LineChart, type BarSeriesOption, type LineSeriesOption } from "echarts/charts";
54import { LegendOverlay, type LegendVariant } from "@/registry/ui/echarts-legend";
55import type { ComposeOption, ImagePatternObject } from "echarts/core";
56import { motion, useReducedMotion } from "motion/react";
57import { CanvasRenderer } from "echarts/renderers";
58import * as echarts from "echarts/core";
59 
60// Re-export the shared types that were previously declared inline here, so
61// existing consumers/examples keep importing them from the chart module.
62export type {
63  ChartConfig,
64  DotVariant,
65  LegendVariant,
66  TooltipPosition,
67  TooltipRoundness,
68  TooltipVariant,
69};
70 
71// Modular registration keeps the bundle lean — only the pieces a composed chart
72// needs. A composed chart mixes `BarChart` and `LineChart` series in one grid.
73// `DataZoomComponent` bundles both the slider (brush footer) and inside (wheel/
74// drag) zoom; the brush's frame/handles/labels are raw zrender elements, NOT the
75// graphic component (never registered) — see syncBrushOverlay.
76echarts.use([
77  BarChart,
78  LineChart,
79  GridComponent,
80  TooltipComponent,
81  DataZoomComponent,
82  CanvasRenderer,
83]);
84 
85type EChartsInstance = ReturnType<typeof echarts.init>;
86 
87// The exact option surface this chart uses — bar + line series, grid, tooltip,
88// and dataZoom, plus the axis options they pull in as dependencies. Narrower than
89// … truncated