echarts-brush

1import { withAlpha, type ResolvedColors } from "@/registry/ui/echarts-chart";
2import type { DataZoomComponentOption } from "echarts/components";
3import type { FC } from "react";
4import * as echarts from "echarts/core";
5 
6type EChartsInstance = ReturnType<typeof echarts.init>;
7 
8const BRUSH_BORDER_OPACITY = 1; // brush frame, × border alpha (evil-brush uses the full token)
9 
10export { BRUSH_BORDER_OPACITY };
11 
12// ─────────────────────────────────────────────────────────────────────────────
13// Brush marker — the declarative `<Chart.Brush/>` child. Rendering nothing, its
14// PRESENCE turns the brush on (replacing the old showBrush prop) and its props
15// carry the brush's height, handle-label formatter, and range callback. Shared
16// so every cartesian chart attaches the SAME component to its root.
17// ─────────────────────────────────────────────────────────────────────────────
18 
19export interface BrushProps {
20  height?: number; // brush preview strip height in px (default 56)
21  formatLabel?: (value: string, index: number) => string; // formats the range-handle labels
22  onChange?: (range: { startIndex: number; endIndex: number }) => void; // fires as the range moves
23}
24 
25/** Declares the zoom brush below the chart. Presence renders it; renders nothing itself. */
26export const Brush: FC<BrushProps> = () => null;
27 
28// ─────────────────────────────────────────────────────────────────────────────
29// Brush overlays — the evil-brush look: a rounded border around the SELECTED
30// range, dimmed unselected sides, centered grip-dot handle pills, and range
31// label pills below the frame. None of that is a dataZoom capability. They are
32// raw zrender elements updated imperatively — routing them through setOption
33// re-renders the dataZoom component mid-drag, resetting its drag anchor (the
34// handle progressively lags the pointer).
35// … truncated