52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T14db,"use client"; import { getColorsCount, indicatorBackground, type ChartConfig } from "@/registry/ui/echarts-chart"; import type { CSSProperties } from "react"; // ───────────────────────────────────────────────────────────────────────────── // Legend overlay (React) — replicates ChartLegendContent + its 7 indicators. // The legend is HTML inside `[data-chart={id}]`, so it uses the injected // `--color-*` vars directly. Shared by every ECharts chart. // ───────────────────────────────────────────────────────────────────────────── export type LegendVariant = | "square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | "vertical-bar" | "horizontal-bar"; export function legendFillStyle(key: string, colorsCount: number): CSSProperties { if (colorsCount <= 1) return { backgroundColor: `var(--color-${key}-0)` }; return { background: indicatorBackground(key, colorsCount) }; } // Punches out the centre with a mask-composite so only the "border" shows — // works with gradients and border-radius, unlike plain border-color. export function legendOutlineStyle(key: string, colorsCount: number): CSSProperties { const mask: CSSProperties = { WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)", WebkitMaskComposite: "xor", mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)", maskComposite: "exclude", }; return { ...legendFillStyle(key, colorsCount), ...mask }; } export function LegendIndicator({ variant, dataKey, colorsCount, }: { variant: LegendVariant; dataKey: string; colorsCount: number; }) { const fill = legendFillStyle(dataKey, colorsCount); const outline = legendOutlineStyle(dataKey, colorsCount); switch (variant) { case "square": return

; case "circle": return

; case "circle-outline": return

; case "vertical-bar": return

; case "horizontal-bar": return

; case "rounded-square-outline": return

; case "rounded-square": default: return

; } } // ───────────────────────────────────────────────────────────────────────────── // LegendOverlay — the positioned HTML legend row. The chart computes the // absolute-positioned `style` (it owns the brush/verticalAlign layout math) and // passes it in; this renders the entries, their indicators, and the // selection/hover dim. `verticalAlign` is carried on the props for parity with // the chart's LegendSlot even though positioning arrives fully via `style`. // ───────────────────────────────────────────────────────────────────────────── type LegendOverlayProps = { seriesKeys: string[]; config: ChartConfig; variant: LegendVariant; align: "left" | "center" | "right"; verticalAlign: "top" | "middle" | "bottom"; selectedKey: string | null; hoveredKey: string | null; isClickable: boolean; onToggle: (key: string) => void; style: CSSProperties; }; export function LegendOverlay({ seriesKeys, config, variant, align, selectedKey, hoveredKey, isClickable, onToggle, style, }: LegendOverlayProps) { const legendJustify = align === "left" ? "justify-start" : align === "center" ? "justify-center" : "justify-end"; return (

{seriesKeys.map((key) => { const item = config[key]; const colorsCount = item ? getColorsCount(item) : 1; const isSelected = (selectedKey === null || selectedKey === key) && (hoveredKey === null || hoveredKey === key); return ( // No entrance here — the Recharts legend appears instantly, and a // fade-in reads as disconnected from the canvas draw-in.

{ if (isClickable) onToggle(key); }} > {item?.label}

); })}

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@blockdex","registryDependencies":["@evilcharts/echarts-chart"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/ui/echarts-legend.tsx","content":"$54","type":"registry:component","target":"components/evilcharts/ui/echarts-legend.tsx"}],"className":"h-[70svh] min-h-80"}]]}]