Heatmap · CropWatch UI

CwHeatmap

A 24-hour × N-day grid with colour-coded cells, a legend and tooltips. Readings in the same hour are averaged, days without data stay in the grid, and hours follow the locale.

Read-only (default)

Field temperature, last 7 days

Without onCellClick the grid is a single image with a text summary for screen readers.

<CwHeatmap
	data={weekData}
	unit="°C"
	title="Field temperature, last 7 days"
/>

<!-- Cells become buttons only when onCellClick is set -->
<CwHeatmap data={weekData} onCellClick={(cell) => openHour(cell)} />

Interactive cells

Click or tab to a cell

Last event: none yet

14 days, custom colours

Soil temperature, last 14 days

colors accepts any CSS colour, including var(--token).

Fahrenheit scale, fixed range

Temperature (°F), fixed 50–90 range

Loading and no data

Loading

No readings yet

No data available

API

Usage and API reference

CwHeatmap turns timestamped numeric readings into a day-by-hour grid. Feed it normalized points, then choose whether the scale should auto-fit the data or stay fixed across screens.

How to think about it

Normalize the data to timestamp + value The component expects a flat array of points. You do not need to group by day or hour yourself.
Decide between auto and fixed scale Auto scale makes one chart read well by itself. Fixed `min` and `max` make multiple charts easier to compare directly.
Use `onCellClick` for drill-downs The callback gives you the resolved day, hour, and value so you can open a detail view or filter another widget.

Props and callbacks

API	Type	Details
`data` Required	`CwHeatmapDataPoint[]`	Timestamped numeric readings.
`days` Default: `7`	`number`	How many days to render.
`min`	`number`	Optional fixed low end of the scale.
`max`	`number`	Optional fixed high end of the scale.
`unit` Default: `degC`	`string`	Unit label shown in tooltips and headings.
`title` Default: `Temperature Heatmap`	`string`	Heading shown above the chart.
`rowHeight` Default: `24`	`number`	Height of each day row in pixels.
`colors`	`[string, string, string]`	Low, mid, and high scale colors.
`onCellClick`	`(point: { date: string; hour: number; value: number \| null }) => void`	Runs when a heatmap cell is clicked.
`noData`	`string \| boolean`	When present, blurs the chart and shows an overlay. Pass localized text, or use the bare `noData` attribute for "No data available".
`loading` Default: `false`	`boolean`	Shows a skeleton grid and sets `aria-busy` while data loads.
`locale`	`string`	BCP 47 locale for number and date formatting. Defaults to the runtime locale.
`decimals`	`number`	Fixed number of fraction digits for displayed values.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Auto-scaled temperature heatmap

Use this when the chart only needs to read well on its own.

<CwHeatmap
	data={weekData}
	title="Field temperature - last 7 days"
	unit="degC"
	onCellClick={(point) => console.log(point)}
/>

Fixed range comparison heatmap

Use fixed ranges when multiple heatmaps should be compared directly.

<CwHeatmap
	data={twoWeekData}
	days={14}
	title="Soil temperature"
	unit="degF"
	min={50}
	max={90}
	rowHeight={20}
	colors={['#06b6d4', '#a3e635', '#f97316']}
/>