echarts-tooltip

1import { indicatorBackground, type ResolvedColors } from "@/registry/ui/echarts-chart";
2import type { TooltipComponentOption } from "echarts/components";
3 
4// ─────────────────────────────────────────────────────────────────────────────
5// Tooltip — the shared HTML shell/row primitives and the chart-agnostic option
6// fields. The tooltip DOM lives inside `[data-chart={id}]`, so the injected
7// `--color-*` vars and Tailwind classes resolve directly (no color read). Each
8// chart composes its own rows but shares the shell/styling and base option.
9// ─────────────────────────────────────────────────────────────────────────────
10 
11export type TooltipVariant = "default" | "frosted-glass";
12export type TooltipRoundness = "sm" | "md" | "lg" | "xl";
13// Tooltip anchoring: "variable" follows both axes (ECharts default, current
14// behavior); "fixed" tracks the pointer's X (centered) but stays pinned near
15// the top (fixed Y).
16export type TooltipPosition = "fixed" | "variable";
17 
18export const roundnessClass: Record<TooltipRoundness, string> = {
19  sm: "rounded-sm",
20  md: "rounded-md",
21  lg: "rounded-lg",
22  xl: "rounded-xl",
23};
24 
25export const tooltipVariantClass: Record<TooltipVariant, string> = {
26  default: "bg-background",
27  "frosted-glass": "bg-background/50 backdrop-blur-md",
28};
29 
30// The standard series indicator swatch — a rounded square filled with the
31// series' solid var or multi-stop gradient (indicatorBackground). A chart drops
32// this into a tooltipRow's `indicatorHtml`.
33export function tooltipIndicatorHtml(key: string, colorsCount: number): string {
34  return `<div class="h-2.5 w-2.5 shrink-0 rounded-[2px]" style="background:${indicatorBackground(key, colorsCount)}"></div>`;
35}
36 
37// One tooltip row: indicator swatch + label/value pair. `dimmed` is a class
38// fragment (e.g. " opacity-30") appended to the row so the selection/hover dim
39// stays byte-identical to the inlined markup.
40export function tooltipRow({
41  indicatorHtml,
42  labelText,
43  valueText,
44  dimmed,
45}: {
46  indicatorHtml: string;
47  labelText: string;
48  valueText: string;
49  dimmed: string;
50}): string {
51  return `<div class="flex w-full flex-wrap items-center gap-2${dimmed}">
52          ${indicatorHtml}
53// … truncated