TimeseriesChart
Ausgaben über die Zeit: y-Beschriftungen rechts, ein gestricheltes Raster, kluge Zeitmarken, Fadenkreuz und Tooltip.
| Zeit | GPT-5 | GPT-5 mini | Claude Sonnet 4.5 | Claude Haiku 4.5 |
|---|---|---|---|---|
| 13. Sept. | 4,72 $ | 8,22 $ | 11,71 $ | 13,34 $ |
| 14. Sept. | 7,39 $ | 7,76 $ | 12,36 $ | 13,16 $ |
| 15. Sept. | 7,07 $ | 8,23 $ | 10,78 $ | 15,20 $ |
| 16. Sept. | 8,46 $ | 10,01 $ | 12,02 $ | 13,03 $ |
| 17. Sept. | 6,09 $ | 10,51 $ | 12,44 $ | 14,08 $ |
| 18. Sept. | 8,56 $ | 8,27 $ | 12,49 $ | 13,61 $ |
| 19. Sept. | 6,90 $ | 9,46 $ | 10,43 $ | 12,20 $ |
| 20. Sept. | 5,61 $ | 9,89 $ | 9,90 $ | 11,02 $ |
| 21. Sept. | 5,12 $ | 7,28 $ | 9,93 $ | 11,17 $ |
| 22. Sept. | 7,23 $ | 7,59 $ | 9,88 $ | 10,10 $ |
| 23. Sept. | 6,54 $ | 6,26 $ | 8,40 $ | 9,04 $ |
| 24. Sept. | 4,59 $ | 5,62 $ | 7,99 $ | 9,76 $ |
| 25. Sept. | 3,84 $ | 5,88 $ | 8,76 $ | 10,08 $ |
| 26. Sept. | 3,79 $ | 6,34 $ | 9,35 $ | 11,23 $ |
| 27. Sept. | 3,82 $ | 5,21 $ | 7,75 $ | 12,03 $ |
| 28. Sept. | 4,41 $ | 5,05 $ | 9,90 $ | 12,36 $ |
| 29. Sept. | 4,71 $ | 7,67 $ | 8,46 $ | 11,40 $ |
| 30. Sept. | 4,10 $ | 7,52 $ | 9,33 $ | 13,41 $ |
| 1. Okt. | 4,86 $ | 7,44 $ | 12,00 $ | 13,67 $ |
| 2. Okt. | 6,66 $ | 9,94 $ | 11,86 $ | 12,56 $ |
| 3. Okt. | 5,84 $ | 8,97 $ | 10,76 $ | 14,79 $ |
| 4. Okt. | 6,76 $ | 8,47 $ | 10,52 $ | 15,05 $ |
| 5. Okt. | 6,01 $ | 8,93 $ | 11,26 $ | 14,06 $ |
| 6. Okt. | 8,21 $ | 10,94 $ | 12,65 $ | 14,53 $ |
| 7. Okt. | 8,48 $ | 9,74 $ | 12,06 $ | 11,59 $ |
| 8. Okt. | 6,85 $ | 9,05 $ | 9,86 $ | 13,02 $ |
| 9. Okt. | 5,91 $ | 7,55 $ | 10,11 $ | 11,43 $ |
| 10. Okt. | 7,77 $ | 7,68 $ | 10,19 $ | 12,50 $ |
| 11. Okt. | 4,55 $ | 6,26 $ | 8,56 $ | 11,76 $ |
| 12. Okt. | 4,89 $ | 5,12 $ | 7,81 $ | 9,30 $ |
<div className="w-full">
<TimeseriesChart aria-label="Spend per model, last 30 days" series={series} formatValue={money} />
</div>import { TimeseriesChart } from "@logicplanes/kaeso-ui";Props
aria-labelstringDer zugängliche Name des Diagramms („Anfragen nach Modell“).
emptybooleanZeigt den leeren Zustand (
emptyText) anstelle der Daten. Standardmäßig erscheint er, wenn jeder Wert 0 ist.emptyTextReactNodeWas der leere Zustand sagt. Standardmäßig „Keine Daten für diesen Zeitraum“ in der Sprache des LocaleProvider.
errorReactNodeDie Daten ließen sich nicht laden: Das Diagramm behält seine Höhe, sagt es leise und bietet „Erneut versuchen“ an. Fehler sind Toasts, daher wird der Wert nicht angezeigt; zeige die Meldung dort als Toast, wo die Anfrage fehlschlägt.
formatTime((t: Date) => string)Benennt die Zeit eines Punkts in Tooltip, Tabelle und für Screenreader, wo ein Punkt für mehr als seinen Moment steht: „Woche vom 3. Aug.“, „Aug. 2026“. Die Achse behält ihre Kalendermarken.
formatValue((v: number) => string) = (v) => formatNumber(v)Formatiert Werte auf der Achse und im Tooltip.
heightnumber = 240Die Höhe des Diagramms in px (standardmäßig 240).
hideLegendbooleanDie Legende ausblenden (eine Reihe).
highlightnumberHebt einen Zeitpunkt hervor wie der Mauszeiger, mit Fadenkreuz und Tooltip: für verknüpfte Ansichten oder die Zustandsseiten.
kind"stacked" | "line" | "area" = linelinezeichnet Linien (Standard),areaergänzt eine helle Füllung unter jeder Linie, undstackedstapelt die Flächen.loadingbooleanDie Daten werden geladen: Das Diagramm behält seine Höhe und zeigt einen ruhigen Ladebalken.
onRetry(() => void)Wird aufgerufen, wenn nach
error„Erneut versuchen“ gedrückt wird; ohne diese Funktion erscheint der Button nicht.seriesTimeSeries[]Die Serien, jede mit
id,label,pointsaust(einer Zeit) undvsowie optionalercolor.threshold{ value: number; label: string; }Eine Schwellenlinie (ein Budget) in Gefahrenfarbe, gestrichelt.