From e998231fed82b3199118671b0508a49aa76b4b15 Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Mon, 31 Aug 2026 20:36:03 +0200 Subject: [PATCH] Zeitachse duennt sich selbst aus, statt Monatsnamen zusammenzudruecken MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Zwoelf Monatsnamen brauchen rund 340 px. In einer Drittelkarte bei 1400 px sind knapp 300 da — "Aug", "Sep" und "Okt" standen ohne Luecke aneinander und lasen sich als ein Wort. Die Ursache war eine Schwelle, die nur die Datenmenge kannte: Erst ab mehr als zwoelf Punkten wurde ueberhaupt ausgeduennt. Genau zwoelf Monate lagen darunter und wurden alle gezeichnet, egal wie schmal die Karte war. Jetzt zwei Stufen, und die zweite haengt an der Breite statt an der Menge: Ueber zwoelf Werten weiterhin fest jede n-te Beschriftung — das ist eine Entscheidung ueber die Reihe und darf nicht vom Bildschirm abhaengen. Darunter entscheidet Recharts zur Laufzeit (preserveStartEnd mit minTickGap) und laesst weg, was nicht passt, haelt dabei aber die erste und letzte Beschriftung; ohne die waere der Zeitraum nicht mehr ablesbar. Ergebnis: bei 1920 px stehen alle zwoelf Monate mit Luft, bei 1400 px zeigt dieselbe Karte Jan, Maer, Mai, Jul, Sep, Dez. Diagramme mit wenigen Punkten (fuenf Kalenderwochen im Auftragseingang) bleiben unveraendert vollstaendig. Die Regel liegt jetzt als achsenIntervall() in chartTheme.ts, weil sie zwei Diagramme betrifft. Der Zeitverlauf hatte den Fall schon behoben, das Saeulendiagramm nicht — genau so laeuft so etwas auseinander. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX --- .../components/charts/AreaVerlauf.tsx | 31 ++++++------------ .../components/charts/BalkenVertikal.tsx | 15 ++++++--- features/dashboard/utils/chartTheme.ts | 32 +++++++++++++++++++ 3 files changed, 53 insertions(+), 25 deletions(-) diff --git a/features/dashboard/components/charts/AreaVerlauf.tsx b/features/dashboard/components/charts/AreaVerlauf.tsx index 6c442c8..04b6f57 100644 --- a/features/dashboard/components/charts/AreaVerlauf.tsx +++ b/features/dashboard/components/charts/AreaVerlauf.tsx @@ -16,11 +16,12 @@ import { ChartLeer } from "./ChartLeer"; import { CHART, MARGIN, - MAX_ACHSENLABELS, + MIN_TICK_ABSTAND, PRIMAER_FARBE, VERGLEICH_FARBE, achseX, achseY, + achsenIntervall, nettesRaster, } from "../../utils/chartTheme"; import type { ZeitreihePunkt } from "../../data/types"; @@ -66,25 +67,8 @@ export function AreaVerlauf({ const hatWerte = daten.some((d) => d.value > 0 || (d.vergleich ?? 0) > 0); if (!daten.length || !hatWerte) return ; - /** - * Beschriftungen der Zeitachse ausdünnen — zweistufig, weil zwei - * verschiedene Dinge sie zum Kollidieren bringen. - * - * Viele Punkte: Bei mehr als zwölf Werten wird fest jede n-te Beschriftung - * gezeigt. Das ist eine Entscheidung über die Lesbarkeit der Reihe und darf - * nicht von der Kartenbreite abhängen, sonst zeigt dieselbe Reihe auf zwei - * Bildschirmen verschiedene Stützstellen. - * - * Wenige Punkte in einer schmalen Karte: Fünf Kalenderwochen brauchen rund - * 200 px. Eine halbe Kachel bei 768 px hat 150 px — dort liefen "KW 27" und - * "KW 28" ineinander. `preserveStartEnd` mit `minTickGap` überlässt Recharts - * das Weglassen und hält dabei die erste und letzte Beschriftung, damit der - * Zeitraum ablesbar bleibt. - */ - const vieleWerte = daten.length > MAX_ACHSENLABELS; - const intervall = vieleWerte - ? Math.ceil(daten.length / MAX_ACHSENLABELS) - 1 - : ("preserveStartEnd" as const); + // Ausdünnen der Zeitachse: siehe achsenIntervall() in chartTheme.ts. + const intervall = achsenIntervall(daten.length); const maximum = Math.max( ...daten.map((d) => Math.max(d.value, zeigeVergleich ? (d.vergleich ?? 0) : 0)) @@ -103,7 +87,12 @@ export function AreaVerlauf({ - + ({ label: d.label ?? d.name ?? "", value: d.value })); if (!punkte.length || !punkte.some((p) => p.value > 0)) return ; - const intervall = - punkte.length > MAX_ACHSENLABELS ? Math.ceil(punkte.length / MAX_ACHSENLABELS) - 1 : 0; + // Ausdünnen der Zeitachse: siehe achsenIntervall() in chartTheme.ts. Zwölf + // Monatsnamen standen in einer Drittelkarte ohne Lücke aneinander. + const intervall = achsenIntervall(punkte.length); // Ganzzahlreihen brauchen ganzzahlige Ticks — sonst steht "1,5 Vorgänge". const maximum = Math.max(...punkte.map((p) => p.value)); @@ -69,7 +71,12 @@ export function BalkenVertikal({ onMouseLeave={() => setAktiv(null)} > - + MAX_ACHSENLABELS + ? Math.ceil(anzahlPunkte / MAX_ACHSENLABELS) - 1 + : "preserveStartEnd"; +} + /** Farbe nach Index, rotiert sicher innerhalb der Palette. */ export function farbe(index: number): string { return KATEGORIE_FARBEN[index % KATEGORIE_FARBEN.length];