echarts-legend

1"use client";
2 
3import { getColorsCount, indicatorBackground, type ChartConfig } from "@/registry/ui/echarts-chart";
4import type { CSSProperties } from "react";
5 
6// ─────────────────────────────────────────────────────────────────────────────
7// Legend overlay (React) — replicates ChartLegendContent + its 7 indicators.
8// The legend is HTML inside `[data-chart={id}]`, so it uses the injected
9// `--color-*` vars directly. Shared by every ECharts chart.
10// ─────────────────────────────────────────────────────────────────────────────
11 
12export type LegendVariant =
13  | "square"
14  | "circle"
15  | "circle-outline"
16  | "rounded-square"
17  | "rounded-square-outline"
18  | "vertical-bar"
19  | "horizontal-bar";
20 
21export function legendFillStyle(key: string, colorsCount: number): CSSProperties {
22  if (colorsCount <= 1) return { backgroundColor: `var(--color-${key}-0)` };
23  return { background: indicatorBackground(key, colorsCount) };
24}
25 
26// Punches out the centre with a mask-composite so only the "border" shows —
27// works with gradients and border-radius, unlike plain border-color.
28export function legendOutlineStyle(key: string, colorsCount: number): CSSProperties {
29  const mask: CSSProperties = {
30    WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
31    WebkitMaskComposite: "xor",
32    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
33    maskComposite: "exclude",
34  };
35  return { ...legendFillStyle(key, colorsCount), ...mask };
36}
37 
38export function LegendIndicator({
39  variant,
40  dataKey,
41  colorsCount,
42}: {
43  variant: LegendVariant;
44  dataKey: string;
45  colorsCount: number;
46}) {
47  const fill = legendFillStyle(dataKey, colorsCount);
48  const outline = legendOutlineStyle(dataKey, colorsCount);
49 
50  switch (variant) {
51    case "square":
52      return <div className="h-2 w-2 shrink-0" style={fill} />;
53    case "circle":
54      return <div className="h-2 w-2 shrink-0 rounded-full" style={fill} />;
55    case "circle-outline":
56      return <div className="h-2.5 w-2.5 shrink-0 rounded-full p-[1.5px]" style={outline} />;
57    case "vertical-bar":
58      return <div className="h-3 w-1 shrink-0 rounded-[2px]" style={fill} />;
59// … truncated