Preview Updated 2026-05-10

LatencyHeatmap

2D matrix heatmap with green→yellow→red OKLCH hue lerp.

Basic usage

Data is passed via props; pure SVG rendering with no third-party chart library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

src/App.vue vue

<CfLatencyHeatmap ... />

src/App.tsx tsx

<CfLatencyHeatmap ... />

Week × 24 hours

Rows = Mon–Sun, columns = hours. Colors map to oklch(70% 0.16 H) where H lerps from 152 (green) → 78 (yellow) → 22 (red).

src/App.vue vue

<CfLatencyHeatmap :data="data" :row-labels="days" :col-labels="hours" />

src/App.tsx tsx

<CfLatencyHeatmap data={data} rowLabels={days} colLabels={hours} />

API

Prop	Type	Default	Description
`data`	`number[][]`	`—`	rows × cols numeric matrix
`rowLabels / colLabels`	`string[]`	`—`
`min / max`	`number`	`auto`	Color mapping range