Heatmap

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4export type HeatmapVariant = 'GREEN' | 'AMBER' | 'RED'
5 
6export interface HeatmapCell {
7  value:  number
8  label?: string
9}
10 
11export interface HeatmapProps extends React.HTMLAttributes<HTMLDivElement> {
12  /** Flat array of cells, filled left-to-right, top-to-bottom */
13  data:        HeatmapCell[] | number[]
14  columns:     number
15  rowLabels?:  string[]
16  colLabels?:  string[]
17  title?:      string
18  variant?:    HeatmapVariant
19  /** Override the max value for normalization. Defaults to max(data). */
20  max?:        number
21  /** Cell size in px. Default 16. */
22  cellSize?:   number
23}
24 
25function accentForVariant(v: HeatmapVariant): string {
26  switch (v) {
27    case 'GREEN': return 'var(--color-green)'
28    case 'AMBER': return 'var(--color-amber)'
29    case 'RED':   return 'var(--color-red)'
30  }
31}
32 
33const Heatmap = React.forwardRef<HTMLDivElement, HeatmapProps>(
34  (
35    {
36      className,
37      data,
38      columns,
39      rowLabels,
40      colLabels,
41      title,
42      variant   = 'GREEN',
43      max,
44      cellSize  = 16,
45      style,
46      ...props
47    },
48    ref
49  ) => {
50    // Normalise to HeatmapCell[]
51    const cells: HeatmapCell[] = data.map((d) =>
52      typeof d === 'number' ? { value: d } : d
53    )
54 
55    const computedMax = max ?? Math.max(...cells.map((c) => c.value), 1)
56    const accentColor  = accentForVariant(variant)
57    const rows         = Math.ceil(cells.length / columns)
58    const hasRowLabels = rowLabels && rowLabels.length > 0
59    const hasColLabels = colLabels && colLabels.length > 0
60 
61    return (
62      <div
63        ref={ref}
64        className={cn(className)}
65        style={{
66          border:      '1px solid var(--border)',
67          background:  'var(--surface)',
68          fontFamily:  'var(--font-mono)',
69          overflowX:   'auto',
70          // Keep component sized to content so parent controls overflow
71          display:     'inline-block',
72          maxWidth:    '100%',
73          ...style,
74        }}
75        {...props}
76      >
77        {/* Title bar */}
78        {title && (
79          <div
80            style={{
81              padding:       '0.4rem 0.75rem',
82              borderBottom:  '1px solid var(--border)',
83              background:    'var(--surface-raised)',
84              fontSize:      '0.6rem',
85              color:         'var(--text-muted)',
86              letterSpacing: '0.12em',
87              textTransform: 'uppercase',
88            }}
89          >
90            {title}
91// … truncated