数据

Heatmap

一格一格按轻重去读的值。

什么时候用它

活跃度日历、混淆矩阵、按小时与星期分布的负载。这是单色系统反而比彩色系统渲染得更好的那一种图。

示例

default

Commits by weekday and hourDarker is busier

diverging

Weekly delta against targetZero is the page; darker is further from target in either direction

一格一格按轻重去读的值组成的网格——活跃度日历、混淆矩阵、按小时与星期分布的负载。

这是整套里唯一一种单色系统反而渲染得更好的形式。热力图需要一把眼睛不用查图例就能读出顺序的刻度，而明度是唯一一个顺序毫无歧义的通道——这正是别处那句“单一色相，由浅到深”的来历，也正是彩虹热力图长年是个错误的原因。而在这里，根本没有色相可以搞错。

它是用真正的 <table> 而不是 SVG 搭起来的，所以读屏软件走的结构就是眼睛读的结构：一行表头、一列表头，以及一个会念出自己数值的格子。这个包里没有别的东西能这么说，也不需要——这同时也是它压根不需要渲染引擎的原因。

Heatmap props
属性	类型	默认值	说明
cells必填	`HeatmapCell[]`		—
columns必填	`string[]`		列表头，按它们应该出现的顺序。
rows必填	`string[]`		行表头，按它们应该出现的顺序。
title必填	`string`		这张网格在讲什么。必填，同时它也是这张表的名字。
className	`string`		—
description	`ReactNode`		标题下面的一行——单位、时间窗口、需要提醒的地方。
domain	`[number, number]`		取值域，写成 `[min, max]`。不传就从数据里推。只要两张网格是要拿来对照的，就一定要把它固定下来：各自独立取域的两张热力图长得一模一样、含义却不同，而这正是共享一个图例也补不了的那个错。
formatValue	`(value: number) => string`	`(value) => value.toLocaleString()`	格式化一个值，用于这一格的播报和它印出来的标签。
scale	`HeatmapScale`	`'sequential'`	—
showTitle	`boolean`	`false`	把标题印在网格上方，而不是藏起来。
showValues	`boolean`	`false`	把数字印在每个格子里。只有在网格足够粗的时候才读得清。

TSX

export type HeatmapScale = 'sequential' | 'diverging'