Blocco Mappa di calore
Una griglia di valori riga × colonna, sfumata su una rampa di colori sequenziale dal chiaro allo scuro — per individuare dove si concentra l'attività lungo due dimensioni contemporaneamente, come giorno della settimana × ora.
Come funziona
Il grafico viene renderizzato come una singola immagine PNG generata sul server (nessuna libreria di grafici lato client, nessun JavaScript) con una tabella dei dati HTML sempre visibile sotto di essa — lo stesso abbinamento non negoziabile a cui si impegna ogni grafico di questa famiglia. Una mappa di calore non ha una forma a serie o a quota-categoria come i suoi fratelli: la grandezza è codificata puramente dall'intensità del colore lungo un'unica rampa sequenziale, mai da un secondo colore identificativo. La sua "legenda" sopra la tabella è una barra sfumata (vero CSS, non un elenco di campioni), etichettata con 0 a un'estremità e il valore massimo effettivo della griglia all'altra, per mostrare a quale sfumatura corrisponde quale grandezza.
Le righe vengono inserite in "formato lungo": una Riga, una Colonna e un Valore per ogni riga inserita — una cella della griglia, non un'intera riga o colonna in una volta. È la soluzione naturale qui, poiché i dati di un progetto non possono annidare array dentro array. Il blocco raggruppa ogni cella inserita in una matrice riga × colonna al momento del rendering. Le etichette distinte di riga e colonna vengono mantenute nell'ordine in cui sono state inserite per la prima volta, mai ordinate — una mappa di calore che elenca i giorni della settimana mantiene lunedì per primo perché lo hai digitato per primo, non per una qualche inferenza alfabetica o cronologica.
Una combinazione realmente mancante (una coppia (riga, colonna) per cui non è mai stato inserito alcun valore) viene renderizzata come una distinta cella grigia piatta "nessun dato" nell'immagine. Un campione "Nessun dato" compare nella legenda ogni volta che la griglia presenta almeno una lacuna del genere. È deliberatamente diverso da come verrebbe renderizzato uno zero.
Uno zero è un valore reale, appropriatamente scuro, sulla rampa — l'estremità bassa, ma comunque misurata — mentre una lacuna significa che nessuno ha mai registrato nulla per quella cella. Confondere le due cose farebbe sembrare "qui non abbiamo dati" identico a "qui l'attività è esattamente zero", il che è un'affermazione sostanzialmente diversa. La tabella dei dati elenca solo le celle per cui è stato effettivamente inserito un valore; una lacuna genuina non contribuisce con nessuna riga alla tabella, poiché non c'è alcun valore da mostrare per essa.
Le celle mostrano il loro valore esatto come testo direttamente dentro l'immagine della griglia solo finché la griglia resta piccola: fino a 40 celle totali (righe × colonne). Oltre quel limite, è la sola sfumatura della rampa a portare la grandezza nell'immagine stessa, e la tabella dei dati sempre visibile diventa il punto in cui leggere i numeri esatti. Stipare testo leggibile in un numero decrescente di celle sempre più piccole smette di funzionare bene ben prima che la griglia diventi grande. La griglia è limitata a 12 righe distinte e 24 colonne distinte. Un'ulteriore identità di riga o colonna oltre questi limiti viene scartata anziché accorpata in una esistente, poiché unire due righe o colonne genuinamente diverse rappresenterebbe in modo scorretto ciò che ciascuna misurava.
La rampa usa per impostazione predefinita una tonalità derivata dal colore del brand del progetto; Colore della rampa la sovrascrive con uno a tua scelta.
Questo blocco funziona solo con righe inserite manualmente — non ha una modalità di associazione a fonte dati o a risposte di campagna. Vedi Associare i grafici a dati reali per sapere quali quattro tipi di grafico supportano l'associazione.
Campi configurabili:
- Titolo del grafico — mostrato sopra l'immagine.
- Celle (riga, colonna, valore) — l'elenco righe; una cella della griglia per ogni riga inserita.
- Colore della rampa — sovrascrive la tonalità di rampa predefinita derivata dal brand.
- Colore di sfondo, padding, bordo, raggio del bordo della card.
- Coppie indipendenti di colore/dimensione carattere per il titolo e per il testo di legenda/tabella.
Esempi
Subject
When your RSVPs are opening
Un digest di eventi può mappare l'attività di RSVP per giorno della settimana × ora del giorno (una classica forma 7×24, comodamente entro i limiti riga/colonna) per mostrare agli organizzatori quando gli inviti vengono effettivamente aperti e su cui si agisce. Un report di operazioni di supporto potrebbe disporre in griglia il volume dei ticket per giorno della settimana × categoria, rendendo evidente quale categoria ha un picco in quale giorno senza una dozzina di grafici a barre separati. Un report di stagione di una squadra sportiva potrebbe mappare la presenza per squadra × mese. Le lacune genuine di "nessun dato" — una squadra che non esisteva ancora in un mese precedente — vengono renderizzate in modo distintamente grigio, invece di sembrare un mese a presenza zero che rappresenterebbe in modo scorretto la partecipazione reale della squadra.
Come appare il fallback statico
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Activity by day and time</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
alt="Heatmap: 3 rows × 4 columns, values from 0 to 15"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px">
<span style="font-size:12px;color:#6b7280">0</span>
<span aria-hidden="true" style="display:inline-block;width:120px;height:10px;border-radius:5px;background:linear-gradient(to right,#eef2ff,#3730a3)"></span>
<span style="font-size:12px;color:#6b7280">15</span>
</div>
<table style="width:100%;border-collapse:collapse;margin-top:4px">
<tr>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Row</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Column</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Value</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Tue</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Afternoon</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">15</td>
</tr>
</table>
</div>
La legenda a gradiente etichetta gli estremi 0 e massimo della rampa; la tabella elenca Riga/Colonna/Valore per ogni cella che ha effettivamente dati — una lacuna reale qui non contribuisce con nessuna riga.