echarts-chart

1import type { ComponentType, ReactNode } from "react";
2import * as echarts from "echarts/core";
3 
4// ─────────────────────────────────────────────────────────────────────────────
5// Theme keys + config — replicated from the repo's <ChartStyle> so the ECharts
6// charts stay self-contained (no recharts ui imports). Shared by every ECharts
7// chart and the tooltip/legend/brush ui modules.
8// ─────────────────────────────────────────────────────────────────────────────
9 
10// Theme selectors mirror the repo's <ChartStyle>: light is the bare root, dark is `.dark`.
11export const THEMES = { light: "", dark: ".dark" } as const;
12export type ThemeKey = keyof typeof THEMES;
13export const THEME_KEYS = Object.keys(THEMES) as ThemeKey[];
14 
15// Require at least one theme key — identical constraint to the repo's ChartConfig.
16export type AtLeastOneThemeColor =
17  | { light: string[]; dark?: string[] }
18  | { light?: string[]; dark: string[] };
19 
20export type ChartConfig = Record<
21  string,
22  {
23    label?: ReactNode;
24    icon?: ComponentType;
25    colors?: AtLeastOneThemeColor;
26  }
27>;
28 
29// ─────────────────────────────────────────────────────────────────────────────
30// Color plumbing — replicated from the repo's <ChartStyle> so the charts stay
31// self-contained (no @/registry/ui/recharts imports).
32// ─────────────────────────────────────────────────────────────────────────────
33 
34// Max slots a key needs = longest color array across themes (min 1). Both themes
35// always emit the same number of `--color-{key}-{n}` vars.
36export function getColorsCount(item: ChartConfig[string]): number {
37  if (!item.colors) return 1;
38  const counts = THEME_KEYS.map((theme) => item.colors?.[theme]?.length ?? 0);
39  return Math.max(...counts, 1);
40}
41 
42// Distribute colors evenly across slots; extra slots go to the LAST color(s).
43// … truncated