4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T41d1,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { Grid3X3 } from "lucide-react" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" import { formatChartValue, type FormatPreset } from "@/lib/format-utils" // ── Types ────────────────────────────────────────────────────────────────── export type HeatmapPalette = "blue" | "green" | "orange" | "purple" | "red" | "custom" export interface HeatmapCell { /** Column label */ x: string /** Row label */ y: string value: number /** Optional override label shown inside the cell */ label?: string } export interface HeatmapChartProps extends React.HTMLAttributes { data: HeatmapCell[] title?: string subtitle?: string footer?: React.ReactNode /** Preset color palette for the gradient scale */ palette?: HeatmapPalette /** Low-end color for custom palette — any CSS color */ colorFrom?: string /** High-end color for custom palette — any CSS color */ colorTo?: string /** Display the numeric value inside each cell */ showValues?: boolean /** Show a gradient legend bar below the heatmap */ showScale?: boolean /** Fixed cell width in px; auto-sizes when omitted */ cellSize?: number /** Fixed cell height in px — defaults to `cellSize` when set, or `32` for fluid-width cells */ cellHeight?: number /** Gap between cells in px */ gap?: number /** Format cell values in tooltips and inside cells */ valueFormatter?: (value: number) => string format?: FormatPreset decimals?: number currency?: string abbreviate?: boolean /** Override the computed min (floor of the color scale) */ min?: number /** Override the computed max (ceiling of the color scale) */ max?: number /** Show animated skeleton in place of the chart while data loads */ loading?: boolean locale?: UILocale } // ── Constants ────────────────────────────────────────────────────────────── const PALETTES: Record< Exclude, { from: string; to: string } > = { blue: { from: "var(--card)", to: "var(--chart-1)" }, green: { from: "var(--card)", to: "var(--chart-2)" }, orange: { from: "var(--card)", to: "var(--chart-3)" }, purple: { from: "var(--card)", to: "var(--chart-4)" }, red: { from: "var(--card)", to: "var(--chart-5)" }, } // ── Variants ─────────────────────────────────────────────────────────────── const chartWrapperVariants = cva("flex w-full flex-col") const chartHeaderVariants = cva("flex flex-col px-1 pb-4") const chartTitleVariants = cva( "text-sm leading-tight font-semibold text-foreground" ) const chartSubtitleVariants = cva("mt-0.5 text-xs text-muted-foreground") const chartFooterVariants = cva( "mt-4 flex items-center gap-2 border-t border-border px-1 pt-3 text-xs text-muted-foreground" ) // ── Helpers ──────────────────────────────────────────────────────────────── function unique(arr: T[]): T[] { return Array.from(new Set(arr)) } function clamp(v: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, v)) } /** CSS color-mix interpolation between two colors at `t` (0 = from, 1 = to) */ function mixColor(from: string, to: string, t: number) { const pct = Math.round(clamp(t, 0, 1) * 100) return `color-mix(in oklch, ${to} ${pct}%, ${from})` } // ── Skeleton ─────────────────────────────────────────────────────────────── interface HeatmapChartSkeletonProps { height?: number hasTitle?: boolean hasSubtitle?: boolean hasFooter?: boolean className?: string } function HeatmapChartSkeleton({ hasTitle = false, hasSubtitle = false, hasFooter = false, className, }: HeatmapChartSkeletonProps) { const rows = 6 const cols = 8 return (

{(hasTitle || hasSubtitle) && (

{hasTitle && ( )} {hasSubtitle && ( )}

)}

{/* X-axis header row */}

{Array.from({ length: cols }).map((_, i) => ( ))}

{/* Rows */} {Array.from({ length: rows }).map((_, row) => (

{/* Y-axis label */}

{/* Cells */}

{Array.from({ length: cols }).map((_, col) => ( ))}

))}

{hasFooter && (

)}

) } // ── Sub-components ───────────────────────────────────────────────────────── interface CellTooltipProps { x: string y: string formatted: string } function CellTooltip({ x, y, formatted }: CellTooltipProps) { return (

{y} · {x}

{formatted}

) } // ── HeatmapChart ─────────────────────────────────────────────────────────── export function HeatmapChart({ data, title, subtitle, footer, palette = "blue", colorFrom, colorTo, showValues = false, showScale = true, cellSize, cellHeight, gap = 3, valueFormatter, format, decimals, currency, abbreviate, min: minProp, max: maxProp, loading = false, locale = "en-US", className, ...props }: HeatmapChartProps) { // Hooks must be called unconditionally before any early returns const [hovered, setHovered] = React.useState<{ x: string; y: string } | null>( null ) const fmt = React.useCallback( (v: number) => formatChartValue(v, { format, decimals, locale, currency, abbreviate, valueFormatter, }), [valueFormatter, format, decimals, locale, currency, abbreviate] ) const lookup = React.useMemo(() => { const m = new Map() data.forEach((d) => m.set(`${d.y}|||${d.x}`, d)) return m }, [data]) if (loading) { return ( ) } if (data.length === 0) { return (

{(title || subtitle) && (

{title &&

{title}

} {subtitle &&

{subtitle}

}

)}

{UI_I18N[locale].emptyState.noData}

{UI_I18N[locale].emptyState.dataWillAppear}

{footer && (

{footer}

)}

) } // Derive ordered axis labels const xLabels = unique(data.map((d) => d.x)) const yLabels = unique(data.map((d) => d.y)) // Color scale const values = data.map((d) => d.value) const computedMin = minProp ?? Math.min(...values) const computedMax = maxProp ?? Math.max(...values) const range = computedMax - computedMin || 1 const { from, to } = palette === "custom" ? { from: colorFrom ?? "var(--card)", to: colorTo ?? "var(--chart-1)" } : PALETTES[palette] const getCellColor = (value: number) => mixColor(from, to, (value - computedMin) / range) // Text contrast: use foreground on light cells, card on dark cells const getTextColor = (value: number): string => { const t = (value - computedMin) / range return t > 0.55 ? "var(--card)" : "var(--foreground)" } const fixedCell = !!cellSize // Priority: explicit cellHeight > cellSize (when fixed) > 32px default (fluid mode) const effectiveHeight = cellHeight ?? (fixedCell ? cellSize : 32) const cellStyle = fixedCell ? { width: cellSize, height: effectiveHeight, flexShrink: 0 } : { flex: 1, minWidth: 0, height: effectiveHeight } return (

{(title || subtitle) && (

{title &&

{title}

} {subtitle &&

{subtitle}

}

)} {/* Grid */}

{/* X-axis labels */}

{xLabels.map((x) => (

{x}

))}

{/* Rows */} {yLabels.map((y) => (

{/* Y-axis label */}

{y}

{/* Cells */}

{xLabels.map((x) => { const cell = lookup.get(`${y}|||${x}`) const isHovered = hovered?.x === x && hovered?.y === y const isFaded = hovered !== null && (hovered.x !== x || hovered.y !== y) if (!cell) { return (

) } const bg = getCellColor(cell.value) const textColor = getTextColor(cell.value) return (

setHovered({ x, y })} onMouseLeave={() => setHovered(null)} > {/* Value label */} {showValues && ( {cell.label ?? fmt(cell.value)} )} {/* Tooltip */} {isHovered && ( )}

) })}

))}

{/* Color scale legend */} {showScale && (

{fmt(computedMin)}

{fmt(computedMax)}

)} {footer && (

{footer}

)}

) } 4b:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4c",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","ui-i18n","format-utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ds/heatmap-chart.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-heatmap-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]