Loading...
Loading...
> A data visualization component that displays values in a grid with color-coded cells based on intensity.
1import { Heatmap, HeatmapDataItem } from "@/components/ui/heatmap";
1const data: HeatmapDataItem[] = [2 { x: "Mon", y: "Week 1", value: 12 },3 { x: "Tue", y: "Week 1", value: 18 },4 { x: "Wed", y: "Week 1", value: 24 },5 // ... more data6];78<Heatmap data={data} />
1<Heatmap2 data={data}3 showValues={true}4 cellSize={60}5/>
1<Heatmap2 data={data}3 showLabels={false}4/>
1<Heatmap2 data={data}3 cellSize={50}4 gap={4}5/>
1<Heatmap2 data={data}3 colorScale={[4 "var(--color-muted)",5 "oklch(80% 0.15 160)",6 "oklch(70% 0.20 160)",7 "oklch(60% 0.25 160)",8 "oklch(50% 0.30 160)",9 ]}10/>
1<Heatmap2 data={data}3 onCellClick={(item) => {4 alert(`${item.y} × ${item.x}: ${item.value}`);5 }}6/>
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | HeatmapDataItem[] | - | Array of data points with x, y, and value properties |
| cellSize | number | 40 | Size of each cell in pixels |
| gap | number | 2 | Gap between cells in pixels |
| colorScale | string[] | 5-color blue gradient | Array of colors for intensity gradient from low to high |
| showValues | boolean | false | Display numeric values inside cells |
| showLabels | boolean | true | Show axis labels for x and y coordinates |
| className | string | - | Additional CSS classes for the container |
| onCellClick | (item: HeatmapDataItem) => void | - | Callback function when a cell is clicked |