4f: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"] 50: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"] 51:Tfe5,"use client"; import { getColorsCount, indicatorBackground, type ChartConfig } from "@/components/ui/charts/chart"; import type { CSSProperties } from "react"; 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) }; } 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

; } } 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); const content = ( <> {item?.label} ); const className = `flex min-h-6 items-center gap-1.5 transition-opacity ${ !isSelected ? "opacity-30" : "" }`; return isClickable ? ( ) : (

{content}

); })}

); } 4e:["$","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,["$","$L4f",null,{"namespace":"@honestui","registryDependencies":["https://www.honestui.com/r/chart.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"legend.tsx","content":"$51","type":"registry:ui","target":"components/ui/legend.tsx"}],"className":"h-[70svh] min-h-80"}]]}]