Data

HeatmapMatrix

Heatmap a matrice righe × colonne (es. categorie × settimane) resa come tabella accessibile, con i colori presi dai token della palette.

Import

import { HeatmapMatrix } from '@pzeta/vue-components'

I tipi (HeatmapMatrixCellClickEvent, HeatmapMatrixProps…) si importano dalla radice del pacchetto dalla 1.24.1: nella 1.24.0 non erano esportati.

Esempio Base

Per un solo indicatore lungo l'anno c'è HeatmapCalendar; per confronti fra serie, Chart.

Props

Prop	Tipo	Default	Descrizione
`rows`	`string[]`	—	Etichette delle righe (es. categorie)
`columns`	`string[]`	—	Etichette delle colonne (es. settimane)
`values`	`Array<Array<number \| null \| undefined>>`	—	Valori, una riga per ogni `rows`: `values[r][c]`. `null` = nessun dato
`colorScale`	`string[]`	vedi sotto	Colori dal vuoto all'intensità massima, almeno due
`maxValue`	`number`	massimo dei dati	Valore che corrisponde al colore più intenso
`minValue`	`number`	`0`	Valore che corrisponde al colore vuoto
`formatValue`	`(value: number) => string`	`Intl.NumberFormat`	Formattazione dei valori in cella, legenda e lettura
`showValues`	`boolean`	`true`	Mostra i valori dentro le celle
`showLegend`	`boolean`	`true`	Mostra la legenda della scala
`clickable`	`boolean`	`false`	Celle cliccabili (pulsanti) che emettono `cellClick`
`caption`	`string`	—	Didascalia della tabella, cioè il suo nome accessibile
`showCaption`	`boolean`	`false`	Mostra la didascalia sopra la tabella (altrimenti resta solo per gli screen reader)
`rowHeader`	`string`	`''`	Intestazione della colonna delle etichette di riga

Emits

Evento	Payload	Descrizione
`cellClick`	`HeatmapMatrixCellClickEvent`	Cella cliccata, solo con `clickable`

interface HeatmapMatrixCellClickEvent {
  row: string
  column: string
  value: number | null
  rowIndex: number
  columnIndex: number
}

colorScale va dal colore vuoto all'intensità massima. Ogni voce è un token di palette, risolto nella sua variabile CSS ('primary-300' → var(--color-primary-300)), oppure un colore CSS qualsiasi ('#eeeeee', 'var(--mio-colore)'). Il default è:

['surface-hover', 'primary-100', 'primary-300', 'primary-600', 'primary-800']

I colori sono stili inline: montata dalla shell del portale non servono utility da aggiungere alla safelist. Un valore uguale o sotto minValue, e un dato mancante, prendono il colore vuoto; gli altri si distribuiscono sui livelli successivi in proporzione a maxValue.

Il testo in cella è bianco sulla metà più intensa della scala e scuro sul resto; con la scala di default il contrasto è almeno 5:1. Con una scala propria conviene verificare che i colori intensi reggano il testo bianco.

Accessibilità

È una <table> vera: intestazioni di colonna e di riga con scope, valori come testo e caption come nome. Senza vedere i colori la si legge comunque, quindi non serve una tabella equivalente nascosta.
Un dato mancante mostra «—» e si legge «nessun dato»; con show-values spento i valori restano disponibili agli screen reader.
Con clickable ogni cella è un pulsante con nome «Divise, S39: 150».
La legenda è un'immagine con nome «Scala di intensità, da 0 a 162»; i campioni sono decorativi.
Stringhe nella sezione i18n heatmapMatrix dei cinque dizionari.

TypeScript

import type {
  HeatmapMatrixProps,
  HeatmapMatrixEmits,
  HeatmapMatrixCellClickEvent,
} from '@pzeta/vue-components'

HeatmapCalendar

Heatmap calendario annuale stile GitHub con colonne settimane, righe giorni e intensità del colore in base a un valore numerico per giorno.

Image

Componente immagine con supporto per preview modale, zoom e gestione degli eventi di caricamento.