Heatmap Chart

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3import { ChartEmpty } from './chart'
4 
5export interface HeatmapCellData {
6  row: string
7  col: string
8  value: number
9}
10 
11export interface HeatmapChartProps extends React.HTMLAttributes<HTMLDivElement> {
12  data: HeatmapCellData[]
13  rows: string[]
14  cols: string[]
15  /** CSS color at 0 intensity (default: transparent primary) */
16  colorLow?: string
17  /** CSS color at max intensity (default: primary) */
18  colorHigh?: string
19  showLabels?: boolean
20  showTooltip?: boolean
21  cellSize?: number
22  /** Accessible label for screen readers (default: "Heatmap chart") */
23  ariaLabel?: string
24  /** Fires when a cell is clicked or activated via keyboard (Enter/Space). */
25  onCellClick?: (cell: HeatmapCellData) => void
26  emptyState?: React.ReactNode
27}
28 
29function interpolateOpacity(value: number, min: number, max: number): number {
30  if (max === min) return 0.5
31  return (value - min) / (max - min)
32}
33 
34/**
35 * Compute cell background color from colorLow → colorHigh using CSS color-mix(),
36 * which works with any valid CSS color string including hsl(var(--*)) tokens.
37 * Falls back to primary-opacity when custom colors are not provided.
38 */
39function getCellColor(
40  intensity: number,
41  colorLow: string | undefined,
42  colorHigh: string | undefined
43): string {
44  if (colorLow && colorHigh) {
45    // color-mix interpolates in srgb space: at t=0 we want colorLow, at t=1 we want colorHigh.
46    // color-mix(in srgb, colorHigh <t*100>%, colorLow) gives us colorHigh at t=1 and colorLow at t=0.
47    const pct = Math.round(Math.max(0, Math.min(1, intensity)) * 100)
48    return `color-mix(in srgb, ${colorHigh} ${pct}%, ${colorLow})`
49  }
50  // Default: vary opacity of primary from 0.08 (low) to 1 (high)
51  return `hsl(var(--primary) / ${Math.max(0.08, intensity)})`
52}
53 
54const HeatmapChart = React.forwardRef<HTMLDivElement, HeatmapChartProps>(
55  (
56    {
57      data,
58      rows,
59      cols,
60      colorLow,
61      colorHigh,
62      showLabels = true,
63      showTooltip = true,
64      cellSize = 40,
65      ariaLabel = 'Heatmap chart',
66      onCellClick,
67      emptyState,
68      className,
69      ...props
70    },
71    ref
72  ) => {
73    const [tooltip, setTooltip] = React.useState<{ x: number; y: number; row: string; col: string; value: number } | null>(null)
74    const isInteractive = !!onCellClick
75    const cellTabIndex = showTooltip || isInteractive ? 0 : undefined
76 
77    const valueMap = React.useMemo(() => {
78      const map = new Map<string, number>()
79// … truncated