~/docs/custom/heatmap

▚Heatmapcustom

Background-colored matrix with labels and gradient legend

~/custom/heatmap

live

$ termino heatmap — latency matrix

s1s2s3s4s5s6s7s8s9s0

0 ▄▄▄▄▄▄▄▄▄▄▄▄ 100

cells bg-colored — ramp lo→hi, legend under

##API

Each matrix cell renders as `cellWidth` spaces with a background color interpolated across the `colors` ramp. Row and column labels frame the grid; a gradient legend row prints min/max. Colors stop at 7 points by default (Tokyonight ramp).

properties

prop	type	default	description
data	number[][]	-	Row-major values
rowLabels / colLabels	string[]	-	Axis labels; row labels pad the left
colors	string[]	7-stop ramp	Interpolation stops low→high
min / max	number	auto	Scale bounds
cellWidth	number	2	Characters per cell
legend / legendWidth	boolean / number	true / 10	Legend row and gradient width

##Keymap

~/keymap

—Display only

##Notes

▸Background colors are real cell backgrounds — the terminal dims nothing.
▸Feed live latency numbers and the ramp does the rest.

##Source

Real implementation — this is the code that runs in your terminal.

tsxheatmap.tsx

1import { createElement as h, useMemo } from "react";
2import { Canvas } from "./canvas";
3import { renderHeatmap } from "./chart";
4
5export interface HeatmapProps {
6  data: number[][];
7  rowLabels?: string[];
8  colLabels?: string[];
9  colors?: readonly string[];
10  min?: number;
11  max?: number;
12  cellWidth?: number;
13  legend?: boolean;
14  legendWidth?: number;
15}
16
17export function Heatmap({
18  data,
19  rowLabels,
20  colLabels,
21  colors,
22  min,
23  max,
24  cellWidth,
25  legend,
26  legendWidth,
27}: Readonly<HeatmapProps>) {
28  const rows = useMemo(
29    () =>
30      renderHeatmap(data, {
31        rowLabels,
32        colLabels,
33        colors,
34        min,
35        max,
36        cellWidth,
37        legend,
38        legendWidth,
39      }),
40    [data, rowLabels, colLabels, colors, min, max, cellWidth, legend, legendWidth],
41  );
42  const inner = Math.max(...data.map((l) => l.length), 0);
43  const pad = Math.max(...(rowLabels ?? []).map((l) => l.length), 1);
44  return h(
45    "box",
46    { flexDirection: "column", gap: 0, width: pad + 1 + inner * (cellWidth ?? 2) },
47    h(Canvas, { rows, width: pad + 1 + inner * (cellWidth ?? 2) }),
48  );
49}
50

← Gauge

Semicircle arc with warn/danger zones and needle

CandlestickChart →

OHLC candles with wicks, up/down colors and index labels