Aktivitäts-Raster (Heatmap)
Jahres-Raster nach GitHub-Muster: eine Kachel je Tag, Intensität in fünf Stufen aus einem Ton-Token, Wochentag- und Monats-Beschriftung, Legende und Gesamtzahl
Beispiele
26 Wochen Aktivität (Werte im Tooltip)
FebMärAprMaiJunJul
MoMiFrSo
650 Aufgabenwenigermehr
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| start * | string | — | Beginn (TT.MM.JJJJ) |
| weeks | number | 26 | Wochen |
| tone | string: primary | accent | success | "success" | Ton |
| max | number | 0 | Höchstwert (0 = automatisch) |
| unit | string | "Beiträge" | Einheit (Legende) |
| values | array | [] | Werte |
* Pflicht-Prop
Genutzte Design-Tokens
border.hairlinecolor.accentcolor.action.primarycolor.border.defaultcolor.status.successcolor.surface.defaultcolor.surface.sunkencolor.text.mutedfont.family.defaultradius.surfacesize.1size.3size.4size.8text.smtext.xs
LLM-Notizen
component.activity-heatmap
Jahres-Raster nach GitHub-Muster: eine Kachel je Tag, fünf Intensitätsstufen.
Wichtige Props
start* (TT.MM.JJJJ — wird automatisch auf den Montag der Startwoche gezogen),weeks,tone:primary|accent|success,max(0 = automatisch aus den Werten),unit,values=[{date, value}].
Hinweise
- Die Stufen entstehen per
color-mixaus EINEM Ton-Token — ein Theme-Wechsel färbt das ganze Raster um. - Tageswerte stehen im Tooltip; fehlende Tage sind Stufe 0.
Beispiel-Node
{"definition": "component.activity-heatmap", "props": {"start": "02.02.2026", "weeks": 26, "unit": "Aufgaben", "values": [{"date": "03.02.2026", "value": 7}]}}