Orbit UI

Heatmap Chart

PRO

Matriz de intensidad para cruzar dos dimensiones (hora x dia, canal x semana). Escala secuencial en OKLCH, celdas cuadradas y resaltado de fila y columna al pasar el cursor.

npx orbitui-cli add heatmap-chart

Sesiones por hora y día

Promedio de 4 semanas

0003060912151821
Lun
Mar
Mié
Jue
Vie
Sáb
Dom

Pasá el cursor sobre una celda

0268

Props

PropTipoDescripción
values*number[][]Matriz de valores: una fila por `rows`, una columna por `columns`.
rows*string[]
columns*string[]
seriesnumberIndice en la paleta de charts (1-8).
cellHeightnumber
formatValue(value: number) => string
classNamestring
aria-label*string

Qué instala

Archivo
components/orbit/charts/heatmap-chart.tsx
Componentes
cx
Paquetes npm
ninguno

A partir de la instalación el archivo es tuyo: editalo sin miedo. Si volvés a correr add y lo modificaste, el CLI pregunta antes de pisarlo.