echarts-area-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 { LegendOverlay, type LegendVariant } from "@/registry/ui/echarts-legend";
54import type { ComposeOption, ImagePatternObject } from "echarts/core";
55import { LineChart, type LineSeriesOption } from "echarts/charts";
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 this chart needs.
72// `DataZoomComponent` bundles both the slider (brush footer) and inside (wheel/drag)
73// zoom. The brush's frame/handles/labels are raw zrender elements, not the
74// graphic component — see syncBrushOverlay.
75echarts.use([LineChart, GridComponent, TooltipComponent, DataZoomComponent, CanvasRenderer]);
76 
77type EChartsInstance = ReturnType<typeof echarts.init>;
78 
79// The exact option surface this chart uses — line series, grid, tooltip, and
80// dataZoom, plus the axis options they pull in as dependencies. Narrower than
81// echarts' full EChartsOption, so a misspelled key fails the compile instead of
82// silently reaching setOption.
83type EChartsOption = ComposeOption<
84// … truncated