Heatmap Grid
Heatmap Grid
Una griglia di intensità in stile calendario/attività — per un valore che varia lungo due dimensioni discrete (giorno × settimana, ora × giorno della settimana, ...) mostrato come colore della cella invece che come altezza di barra/linea. Semplice CSS grid, non una libreria di grafici: non c'è alcun meccanismo di assi/tooltip di cui una griglia fissa di celle colorate abbia realmente bisogno.
import { HeatmapGrid } from "@pompeitech/vesuvius-ui";Default
API
HeatmapGrid
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
rows | string[] | Obbligatorio — etichette delle righe, dall'alto in basso. | |
columns | string[] | Obbligatorio — etichette delle colonne, da sinistra a destra. | |
cells | number[][] | Obbligatorio — cells[rowIndex][columnIndex], ciascuno 0–1, usato direttamente come opacità di riempimento della cella. | |
color | string | "var(--primary)" | Colore base che ogni cella tinge, all'intensità specificata da cells. |
legend | { label: string; value: number }[] | Mostrata sotto la griglia come chiave etichettata dell'intensità colore. |
Più ogni prop nativa di <div> sul wrapper radice.
Accessibilità
Una griglia di intensità visiva non ha un testo alternativo intrinseco — se i dati sottostanti contano oltre a un colpo d'occhio (non solo un indicatore di tendenza decorativo), abbinala a una Table/DataTable che presenti gli stessi valori come testo, o come minimo dai al wrapper un aria-label che riassuma cosa mostra la griglia.