Heatmap-Block
Ein Zeilen-×-Spalten-Raster aus Werten, schattiert auf einer fortlaufenden Farbskala von hell bis dunkel — um zu erkennen, wo sich Aktivität entlang zweier Dimensionen gleichzeitig konzentriert, etwa Wochentag × Uhrzeit.
Wie es funktioniert
Das Diagramm wird als einzelnes, serverseitig erzeugtes PNG gerendert (keine clientseitige Diagramm-Bibliothek, kein JavaScript) mit einer stets sichtbaren HTML-Datentabelle darunter — dieselbe nicht verhandelbare Kombination, zu der sich jedes Diagramm dieser Familie verpflichtet. Eine Heatmap hat keine Reihen- oder Anteils-Form wie ihre Geschwister: Die Größenordnung wird ausschließlich durch die Farbintensität entlang einer fortlaufenden Farbskala codiert, nie durch eine zweite Identitätsfarbe. Ihre „Legende“ über der Tabelle ist ein Verlaufsbalken (echtes CSS, keine Liste von Farbfeldern), beschriftet mit 0 an einem Ende und dem tatsächlichen Maximalwert des Rasters am anderen — sie zeigt, welcher Farbton welcher Größenordnung entspricht.
Zeilen werden im „Langformat“ erfasst: eine Zeile, eine Spalte und ein Wert pro erfasster Zeile — eine Zelle des Rasters, nicht eine ganze Zeile oder Spalte auf einmal. Das passt hier natürlich, da Projektdaten keine Arrays innerhalb von Arrays verschachteln können. Der Block gruppiert jede erfasste Zelle zum Renderzeitpunkt zu einer Zeilen-×-Spalten-Matrix. Eindeutige Zeilen- und Spaltenbeschriftungen behalten die Reihenfolge, in der sie zuerst erfasst wurden, bei — nie sortiert: Eine Heatmap, die Wochentage auflistet, behält Montag an erster Stelle, weil Sie es zuerst eingegeben haben, nicht aufgrund einer alphabetischen oder chronologischen Ableitung.
Eine tatsächlich fehlende Kombination (ein (Zeile, Spalte)-Paar, für das Sie überhaupt nie einen Wert erfasst haben) wird im Bild als eigene, einheitlich graue „Keine Daten“-Zelle gerendert. Ein „Keine Daten“-Farbfeld erscheint in der Legende, sobald das Raster mindestens eine solche Lücke aufweist. Das unterscheidet sich bewusst davon, wie eine Null gerendert würde.
Eine Null ist ein echter, am unteren Ende der Farbskala passend eingeordneter Wert — der niedrige Bereich, aber trotzdem gemessen —, während eine Lücke bedeutet, dass niemand jemals etwas für diese Zelle erfasst hat. Beides zu vermischen würde „wir haben hier keine Daten“ genauso aussehen lassen wie „die Aktivität hier ist genau null“, was eine inhaltlich andere Aussage ist. Die Datentabelle listet ausschließlich Zellen auf, für die Sie tatsächlich einen Wert erfasst haben; eine echte Lücke trägt ebenfalls keine Zeile zur Tabelle bei, da es keinen Wert gibt, der angezeigt werden könnte.
Zellen zeigen ihren exakten Wert nur dann als Text direkt im Rasterbild an, solange das Raster klein bleibt: bis zu 40 Zellen insgesamt (Zeilen × Spalten). Darüber hinaus trägt allein die Schattierung der Farbskala die Größenordnung im Bild selbst, und die stets sichtbare Datentabelle wird zur Stelle, an der exakte Zahlen abzulesen sind. Lesbaren Text in eine schrumpfende Zahl zunehmend kleinerer Zellen zu quetschen, funktioniert schon lange bevor das Raster groß wird, nicht mehr gut. Das Raster ist auf 12 eindeutige Zeilen und 24 eindeutige Spalten begrenzt. Eine zusätzliche neue Zeilen- oder Spalten-Identität über diese Grenzen hinaus wird verworfen statt in eine bestehende eingegliedert, da das Zusammenführen zweier tatsächlich unterschiedlicher Zeilen oder Spalten falsch darstellen würde, was jede von ihnen tatsächlich gemessen hat.
Die Farbskala verwendet standardmäßig einen von der Markenfarbe des Projekts abgeleiteten Farbton; Skalenfarbe überschreibt ihn mit Ihrer eigenen.
Dieser Block funktioniert nur mit selbst erfassten Zeilen — er hat keinen Modus zur Bindung an eine Datenquelle oder an Kampagnen-Antworten. Siehe Diagramme an echte Daten binden, welche vier Diagrammtypen eine Bindung unterstützen.
Konfigurierbare Felder:
- Diagrammtitel — wird über dem Bild angezeigt.
- Zellen (Zeile, Spalte, Wert) — die Zeilenliste; eine Rasterzelle pro erfasster Zeile.
- Skalenfarbe — überschreibt den standardmäßig von der Marke abgeleiteten Farbton der Skala.
- Hintergrundfarbe, Innenabstand, Rahmen, Eckenradius der Karte.
- Unabhängige Farbe-/Schriftgröße-Paare für den Titel und den Legenden-/Tabellentext.
Beispiele
Subject
When your RSVPs are opening
Ein Veranstaltungs-Digest kann RSVP-Aktivität als Heatmap nach Wochentag × Tageszeit darstellen (eine klassische 7×24-Form, die bequem innerhalb der Zeilen-/Spaltengrenzen bleibt), um Organisatoren zu zeigen, wann Einladungen tatsächlich geöffnet und wahrgenommen werden. Ein Support-Ops-Bericht könnte das Ticketvolumen nach Wochentag × Kategorie rastern und so ohne ein Dutzend separater Balkendiagramme deutlich machen, welche Kategorie an welchem Tag ausschlägt. Ein Saisonbericht eines Sportteams könnte die Anwesenheit nach Mannschaft × Monat als Heatmap darstellen. Echte „Keine Daten“-Lücken — eine Mannschaft, die in einem frühen Monat noch nicht existierte — werden deutlich grau dargestellt, statt wie ein Monat mit null Anwesenheit auszusehen, was die tatsächliche Beteiligung des Teams falsch darstellen würde.
So sieht der statische Fallback aus
<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>
Die Verlaufslegende beschriftet die Endpunkte 0 und Maximum der Farbskala; die Tabelle listet Zeile/Spalte/Wert für jede Zelle auf, die tatsächlich Daten hat — eine echte Lücke trägt hier überhaupt keine Zeile bei.