Bloc Carte de chaleur
Une grille lignes × colonnes de valeurs, teintée sur une rampe de couleur séquentielle de clair à foncé — pour repérer où l'activité se concentre selon deux dimensions à la fois, comme jour de la semaine × heure.
Comment ça fonctionne
Le graphique se rend comme un seul PNG généré côté serveur (aucune bibliothèque de graphiques côté client, aucun JavaScript) avec un tableau de données HTML toujours visible en dessous — le même appariement non négociable que respecte chaque graphique de cette famille. Une carte de chaleur n'a pas de forme de série ou de part de catégorie comme ses semblables : la magnitude est encodée uniquement par l'intensité de couleur le long d'une rampe séquentielle, jamais par une seconde couleur d'identité. Sa « légende » au-dessus du tableau est une barre de dégradé (du vrai CSS, pas une liste de nuances), étiquetée avec 0 à une extrémité et le maximum réel de la grille à l'autre, montrant quelle teinte correspond à quelle magnitude.
Les lignes sont saisies en « format long » : une Ligne, une Colonne, et une Valeur par ligne saisie — une cellule de la grille, pas une ligne ou une colonne entière à la fois. C'est la forme naturelle ici, puisque les données de projet ne peuvent pas imbriquer des tableaux dans des tableaux. Le bloc regroupe chaque cellule saisie en une matrice ligne × colonne au moment du rendu. Les libellés de ligne et de colonne distincts sont conservés dans l'ordre de première apparition à la saisie, jamais triés — une carte de chaleur listant les jours de la semaine garde Lundi en premier parce que vous l'avez tapé en premier, pas à cause d'une inférence alphabétique ou chronologique.
Une véritable combinaison manquante (une paire (ligne, colonne) pour laquelle vous n'avez jamais saisi de valeur du tout) se rend comme une cellule grise plate distincte de « pas de données » dans l'image. Une nuance « Pas de données » apparaît dans la légende dès que la grille comporte au moins un tel manque. C'est délibérément différent de la façon dont un zéro se rendrait.
Un zéro est une valeur réelle, à sa place sur la rampe — le bas de l'échelle, mais tout de même mesuré — alors qu'un manque signifie que personne n'a jamais rien enregistré pour cette cellule. Confondre les deux ferait ressembler « nous n'avons pas de données ici » à « l'activité ici est exactement nulle », ce qui est une affirmation matériellement différente. Le tableau de données ne liste jamais que les cellules pour lesquelles vous avez réellement saisi une valeur ; un véritable manque ne contribue non plus aucune ligne au tableau, puisqu'il n'y a pas de valeur à montrer.
Les cellules affichent leur valeur exacte en texte directement dans l'image de la grille uniquement tant que la grille reste petite : jusqu'à 40 cellules au total (lignes × colonnes). Au-delà, la teinte de la rampe seule porte la magnitude dans l'image elle-même, et le tableau de données toujours visible devient l'endroit où lire les chiffres exacts. Entasser du texte lisible dans un nombre décroissant de cellules de plus en plus petites cesse de bien fonctionner bien avant que la grille ne devienne grande. La grille est plafonnée à 12 lignes distinctes et 24 colonnes distinctes. Une nouvelle identité de ligne ou de colonne au-delà de ces plafonds est abandonnée plutôt que fusionnée dans une existante, puisque fusionner deux lignes ou colonnes véritablement différentes déformerait ce que chacune mesurait.
La rampe utilise par défaut une teinte dérivée de la couleur de marque du projet ; Couleur de la rampe la remplace par la vôtre.
Ce bloc est uniquement à lignes saisies — il n'a pas de mode de liaison à une source de données ou aux réponses de campagne. Voir Lier des graphiques à de vraies données pour savoir quels quatre types de graphique prennent en charge la liaison.
Champs configurables :
- Titre du graphique — affiché au-dessus de l'image.
- Cellules (ligne, colonne, valeur) — la liste de lignes ; une cellule de grille par ligne saisie.
- Couleur de la rampe — remplace la teinte de rampe par défaut dérivée de la marque.
- Couleur de fond, remplissage, bordure, rayon de bordure sur la carte.
- Paires indépendantes de couleur/taille de police pour le titre et le texte de légende/tableau.
Exemples
Subject
When your RSVPs are opening
Un digest d'événements peut représenter en carte de chaleur l'activité de RSVP par jour de la semaine × heure du jour (une forme classique 7×24, confortablement dans les plafonds de lignes/colonnes) pour montrer aux organisateurs quand les invitations sont réellement ouvertes et suivies d'action. Un rapport d'opérations de support pourrait quadriller le volume de tickets par jour de la semaine × catégorie, rendant évident quelle catégorie fait un pic quel jour sans une douzaine de graphiques à barres séparés. Un rapport de saison d'une équipe sportive pourrait représenter en carte de chaleur la fréquentation par escouade × mois. Les véritables manques « pas de données » — une escouade qui n'existait pas encore un mois donné — se rendent distinctement en gris, plutôt que de ressembler à un mois de fréquentation nulle qui déformerait le taux de participation réel de l'équipe.
À quoi ressemble l'alternative statique
<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 légende en dégradé étiquette les extrémités 0 et max de la rampe ; le tableau liste Ligne/Colonne/Valeur pour chaque cellule qui a réellement des données — un véritable manque n'y contribue aucune ligne du tout.