Verlaufslinie (Sparkline)
Kleine Verlaufsgrafik ohne Achsen für Kennzahl-Karten und Tabellenzellen — reines Inline-SVG, KEINE Diagramm-Bibliothek nötig; Farbe aus Tokens, Wertetabelle als Rückfall entfällt (Werte stehen im aria-label)
Beispiele
Steigend (Ton automatisch grün)
Fallend (Ton automatisch rot)
Balken, fester Ton
Nur Linie, breiter
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| values * | array | — | Werte |
| tone | string: primary | accent | success | warning | danger | auto | "auto" | Ton (auto = steigend grün, fallend rot) |
| type | string: line | area | bar | "area" | Art |
| width | number | 120 | Breite (px) |
| height | number | 32 | Höhe (px) |
| label | string | "" | Beschreibung (aria) |
* Pflicht-Prop
Genutzte Design-Tokens
color.accentcolor.action.primarycolor.status.dangercolor.status.successcolor.status.warningcolor.surface.sunkenradius.smsize.4size.8
LLM-Notizen
component.sparkline
Kleine Verlaufsgrafik ohne Achsen — bewusst ohne Diagramm-Bibliothek: das SVG wird serverseitig gerechnet. Eine Kennzahl-Karte soll keine 839 kB nachladen.
Wann nutzen
- In
component.metric-card, Tabellenzellen, Listen — überall, wo der Verlauf nebensächlich, aber hilfreich ist. - Sobald Achsen, Legende oder Tooltips nötig sind:
component.chart.
Wichtige Props
values* (Zahlen),type:line | area | bar,tone:auto(steigend grün, fallend rot) oder fester Ton,width,height,label(aria).
Beispiel-Node
{"definition": "component.sparkline", "props": {"values": [12, 14, 13, 17, 19, 24], "type": "area", "label": "Umsatz letzte 6 Wochen"}}