51: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"] 52: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"] 53:T2266,import * as React from 'react' import { cn } from '@/lib/utils' import { ChartEmpty } from './chart' export interface HeatmapCellData { row: string col: string value: number } export interface HeatmapChartProps extends React.HTMLAttributes { data: HeatmapCellData[] rows: string[] cols: string[] /** CSS color at 0 intensity (default: transparent primary) */ colorLow?: string /** CSS color at max intensity (default: primary) */ colorHigh?: string showLabels?: boolean showTooltip?: boolean cellSize?: number /** Accessible label for screen readers (default: "Heatmap chart") */ ariaLabel?: string /** Fires when a cell is clicked or activated via keyboard (Enter/Space). */ onCellClick?: (cell: HeatmapCellData) => void emptyState?: React.ReactNode } function interpolateOpacity(value: number, min: number, max: number): number { if (max === min) return 0.5 return (value - min) / (max - min) } /** * Compute cell background color from colorLow → colorHigh using CSS color-mix(), * which works with any valid CSS color string including hsl(var(--*)) tokens. * Falls back to primary-opacity when custom colors are not provided. */ function getCellColor( intensity: number, colorLow: string | undefined, colorHigh: string | undefined ): string { if (colorLow && colorHigh) { // color-mix interpolates in srgb space: at t=0 we want colorLow, at t=1 we want colorHigh. // color-mix(in srgb, colorHigh %, colorLow) gives us colorHigh at t=1 and colorLow at t=0. const pct = Math.round(Math.max(0, Math.min(1, intensity)) * 100) return `color-mix(in srgb, ${colorHigh} ${pct}%, ${colorLow})` } // Default: vary opacity of primary from 0.08 (low) to 1 (high) return `hsl(var(--primary) / ${Math.max(0.08, intensity)})` } const HeatmapChart = React.forwardRef( ( { // Defaulted at the destructure: the memos below run *above* the empty // guard, so `undefined` (the shape a still-loading fetch passes) would // throw before the guard could render . data = [], rows, cols, colorLow, colorHigh, showLabels = true, showTooltip = true, cellSize = 40, ariaLabel = 'Heatmap chart', onCellClick, emptyState, className, ...props }, ref ) => { const [tooltip, setTooltip] = React.useState<{ x: number; y: number; row: string; col: string; value: number } | null>(null) const isInteractive = !!onCellClick // Only genuinely interactive cells belong in the tab order. This used to // include `showTooltip` (on by default), so a 12x30 heatmap injected 360 // sequential tab stops for a mouse-only hover affordance. const cellTabIndex = isInteractive ? 0 : undefined const valueMap = React.useMemo(() => { const map = new Map() data.forEach(d => map.set(`${d.row}__${d.col}`, d.value)) return map }, [data]) const { min, max } = React.useMemo(() => { if (data.length === 0) return { min: 0, max: 1 } // Reduce instead of Math.min(...vals) spread: the spread passes every // value as a function argument and throws RangeError on very large datasets. let min = data[0].value let max = data[0].value for (const d of data) { if (d.value < min) min = d.value if (d.value > max) max = d.value } return { min, max } }, [data]) const labelWidth = showLabels ? 72 : 8 const headerHeight = showLabels ? 32 : 8 if (!data || data.length === 0) { return } return (

{/* Top-left empty corner */}

{/* Column headers */} {cols.map(col => showLabels ? (

{col}

) : (

) )} {/* Rows */} {rows.map(row => ( {/* Row label */} {showLabels ? (

{row}

) : (

)} {/* Cells */} {cols.map(col => { const value = valueMap.get(`${row}__${col}`) ?? 0 const intensity = interpolateOpacity(value, min, max) return (

{ if (showTooltip) { const rect = e.currentTarget.getBoundingClientRect() setTooltip({ x: rect.left + rect.width / 2, y: rect.top, row, col, value }) } }} onMouseLeave={() => setTooltip(null)} onFocus={(e) => { if (showTooltip) { const rect = e.currentTarget.getBoundingClientRect() setTooltip({ x: rect.left + rect.width / 2, y: rect.top, row, col, value }) } }} onBlur={() => setTooltip(null)} onClick={onCellClick ? () => onCellClick({ row, col, value }) : undefined} onKeyDown={ onCellClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() onCellClick({ row, col, value }) } } : undefined } /> ) })} ))}

{/* Tooltip */} {showTooltip && tooltip && (

{tooltip.row} × {tooltip.col}

{tooltip.value}

)}

) } ) HeatmapChart.displayName = 'HeatmapChart' export { HeatmapChart } 50:["$","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,["$","$L51",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils","@boldkit/chart"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/heatmap-chart.tsx","content":"$53","type":"registry:ui","target":"components/ui/heatmap-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]