Heatmap Table

1'use client'
2 
3import { useMemo } from 'react'
4import {
5  flexRender,
6  getCoreRowModel,
7  useReactTable,
8} from '@tanstack/react-table'
9import type { ColumnDef } from '@tanstack/react-table'
10 
11import {
12  Table,
13  TableBody,
14  TableCell,
15  TableHead,
16  TableHeader,
17  TableRow,
18} from '#/components/ui/table'
19import { cn } from '#/lib/utils.ts'
20import type { HeatmapRow } from './heatmap'
21import { getHeatColor, getHeatmapRange } from './heatmap'
22 
23interface HeatmapTableProps {
24  columns: string[]
25  data: HeatmapRow[]
26  formatValue?: (value: number) => string
27}
28 
29export function HeatmapTable({
30  columns,
31  data,
32  formatValue = (value) => String(value),
33}: HeatmapTableProps) {
34  const { min, max } = useMemo(
35    () => getHeatmapRange(data, columns),
36    [data, columns],
37  )
38 
39  const tableColumns = useMemo<ColumnDef<HeatmapRow>[]>(
40    () => [
41      {
42        id: 'label',
43        header: '',
44        accessorKey: 'label',
45        cell: ({ getValue }) => (
46          <span className="font-medium">{getValue() as string}</span>
47        ),
48      },
49      ...columns.map(
50        (col): ColumnDef<HeatmapRow> => ({
51          id: col,
52          header: col,
53          accessorFn: (row) => row.values[col],
54          cell: ({ getValue }) => {
55            const value = getValue() as number
56            const { backgroundColor, isDark } = getHeatColor(value, min, max)
57            return (
58              <div
59                style={{ backgroundColor }}
60                className={cn(
61                  'flex h-full w-full items-center justify-center px-3 py-2.5 text-sm tabular-nums',
62                  isDark ? 'text-white' : 'text-foreground',
63                )}
64              >
65                {formatValue(value)}
66              </div>
67            )
68          },
69        }),
70      ),
71    ],
72    [columns, min, max, formatValue],
73  )
74 
75  const table = useReactTable({
76    data,
77    columns: tableColumns,
78    getCoreRowModel: getCoreRowModel(),
79  })
80 
81  const legendLow = getHeatColor(min, min, max).backgroundColor
82  const legendHigh = getHeatColor(max, min, max).backgroundColor
83 
84  return (
85    <div>
86      <div className="overflow-hidden rounded-md border">
87        <Table>
88          <TableHeader>
89            {table.getHeaderGroups().map((headerGroup) => (
90              <TableRow key={headerGroup.id}>
91                {headerGroup.headers.map((header) => (
92                  <TableHead key={header.id} className="text-center">
93                    {header.isPlaceholder
94                      ? null
95// … truncated