Der Eintrag "Vorjahr" war ein 10 px grosses Kaestchen mit gestricheltem Rand.
Auf zehn Pixel bleiben von einem gestrichelten Rechteck ein paar Eckstriche
uebrig; das sah aus wie ein Zeichenfehler.
Es stimmte auch inhaltlich nicht: Im Diagramm ist die Vergleichsreihe keine
Flaeche, sondern eine Linie. Ein Marker, der etwas anderes zeigt als die
Reihe, die er benennt, ist genau die Art Kleinigkeit, die eine Legende
nutzlos macht.
Jetzt ein gestricheltes Linienstueck als SVG, mit derselben Staerke und
demselben Muster wie die Reihe im Chart (1,5 px, 4/4). Gefuellte Reihen
behalten ihren Punkt. Die Werte stehen als Konstante neben dem Marker mit dem
Hinweis, dass sie zu AreaVerlauf.tsx passen muessen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
467 Stellen. Nicht durch einen anderen Strich ersetzt, sondern durch das
Satzzeichen, das an der jeweiligen Stelle richtig ist: Doppelpunkt, wo eine
Erlaeuterung folgt; Komma, wo der Satz weiterlaeuft; Punkt, wo zwei
Hauptsaetze aneinanderstiessen. Ein Halbgeviertstrich waere nur derselbe
Griff mit kuerzerem Strich gewesen.
Regelbasiert ersetzt und danach nachgeprueft, weil eine Regel allein nicht
reicht. Gefunden und einzeln korrigiert:
- Eingeschobene Saetze mit Strichpaar. Nur der oeffnende Strich passte ins
Muster, der schliessende blieb als "—," stehen. Drei Stellen, jetzt mit
Klammern oder als eigener Satz.
- Doppelte Doppelpunkte, wo beide Striche eines Paars zu Doppelpunkten wurden
("Globale Regeln: Schrift, Groessen, Abstaende: kommen aus HiveGrid").
Sieben Stellen in Doku und Oberflaeche, jetzt in Klammern.
- Pfade, denen ein Komma statt eines Doppelpunkts folgte.
- Ausgerichtete Kommentartabellen, in denen der Strich eine Spalte war.
Nicht angefasst: drei Geviertstriche, die keine Prosa sind, sondern
Tabellenplatzhalter fuer "kein Wert" (Trichter, Auftraege, Kunden). Dort ist
der Strich die Angabe selbst; ihn zu entfernen liesse leere Zellen zurueck.
tsc, lint, build, verify:carbon und verify:layout laufen sauber.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Aus dem Sparring, alle drei auch in Analytics wirksam.
1. Vertriebstrichter: Zeilen-Hervorhebung statt Ausgrauen der uebrigen Balken.
Bisher setzte das Ueberfahren einer Zeile alle anderen Balken auf 45 %
Deckkraft. Das war aus drei Gruenden falsch: Es liess fuenf von sechs
Balken verblassen und las sich dadurch wie eine Auswahl statt wie ein
Ueberfahren; es war in sich widerspruechlich, weil die Balken verblassten
und die Namen daneben schwarz blieben; und Deckkraft traegt in diesem
Diagramm bereits Bedeutung — der Balken kodiert einen Anteil, ihn heller zu
machen heisst dort "weniger" und nicht "gerade nicht beruehrt".
Jetzt bekommt die beruehrte Zeile einen Untergrund, die uebrigen bleiben
unveraendert. Derselbe Untergrund wie in der Handlungsbedarf-Liste und in
den Tabellen. Die Spur des aktiven Balkens wird weiss: neutral-50 und
neutral-100 liegen nur fuenf Stufen auseinander, grau auf grau haette dem
Balken den Bezugsrahmen genommen.
2. KPI-Karten einer Reihe auf gleiche Hoehe.
Die Umsatzkarte war hoeher als ihre drei Nachbarn, weil sie als einzige
eine Trendzeile mit Verlaufskurve traegt. Auf dem Dashboard steht zwischen
Rasterzelle und Karte ein Link, und der reichte die Streckung des Rasters
nicht durch. h-full auf der Karte.
3. Handlungsbedarf: Hover-Flaeche greift ueber den Inhalt hinaus.
Der Untergrund endete hart am Pfeil — bei zwei Spalten besonders sichtbar,
weil daneben 32 px Spaltenabstand ungefaerbt blieben. Jetzt acht Pixel
Ueberstand und runde Ecken.
Dabei mitgenommen: Der Trennstrich sass unten und brauchte eine Ausnahme
fuer "die letzte Zeile" — die es bei zwei Spalten zweimal gibt. Die rechte
Spalte behielt dadurch einen Strich, unter dem nichts mehr kam. Oben
liegend ist die Ausnahme die erste Zeile jeder Spalte, und die steht immer
an derselben Stelle, unabhaengig von der Anzahl der Eintraege.
tsc, lint, build und verify:layout laufen sauber; Hover-Zustaende und
Kartenhoehen nachgemessen statt begutachtet.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Das Dashboard ist ein eigenes Feature neben Analytics: der
Begruessungsbildschirm, nicht ein zweiter Analysebereich. Es zeigt heute nur
Auswertungen, ist aber so gebaut, dass die spaeteren Bereiche als weitere
Kacheln dazukommen und nicht als Umbau.
Aufbau: Begruessung, vier Kennzahlen (je ein Link in die Analyse),
Handlungsbedarf, vier Diagramme, drei reservierte Plaetze.
Drei Entscheidungen, die dabei getroffen wurden:
- Kein seitenweiter Filter. Jede Kachel traegt ihren eigenen Zeitraum und
schreibt ihn in den Kopf. Das ist das Bedienmodell der Software (P11) und
war die unbequemere Variante; eine Filterleiste haette beim Einbau alle
Kacheln wieder auseinandergenommen.
- Das Raster ist aus DashboardPage.tsx der Software uebernommen, nicht
erfunden: dieselben Klassen, dieselbe Ableitung aus size.w und position.x.
Der Software fehlt dafuer eine Zeile (position.x === 9); vermerkt in
WidgetRaster.tsx.
- Die reservierten Plaetze zeigen keine erfundenen Zahlen. "2 neue Antraege"
aus dem Nichts liest sich in einer Abnahme wie eine fertige Funktion.
Absichtliche Doppelung: Der Handlungsbedarf steht jetzt auf dem Dashboard und
weiterhin auf der Analytics-Uebersicht. Ihn dort zu entfernen haette die
offene Frage 5.1 mitentschieden. Dokumentiert in Abschnitt 3a des
Scope-Papiers, aufzuloesen vor dem Port.
Nebenbei zwei Fehler behoben, die auch Analytics betrafen:
- Die Beschriftungen der Zeitachse liefen in schmalen Karten ineinander
(fuenf Kalenderwochen brauchen 200px, eine halbe Kachel bei 768px hat 150).
Recharts duennt sie jetzt selbst aus und haelt Anfang und Ende.
- Das Zeitraum-Etikett im Kachelkopf schaltete per Viewport-Breakpoint, die
Kachelbreite haengt aber am Raster. Bei 1024px blieben dem Untertitel 77px,
und er lief ins Diagramm. Jetzt Container-Query.
Die Wurzel leitet auf /dashboard statt /analytics — wie in der Software, wo
nach der Anmeldung der Begruessungsbildschirm steht.
tsc, lint, build, verify:carbon und verify:layout (7 Seiten x 9 Breiten)
laufen sauber.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Der Prototyp war auf Schreibtischbreiten gebaut. Bei 375 px lief die Seite um
306 px seitlich über, und dem Inhalt blieben 135 px, weil die Seitenleiste ihre
vollen 240 px behielt.
Seitenleiste (an HiveGrid abgeglichen, nicht erfunden):
- Unterhalb 768 px faehrt sie als Schublade ueber den Inhalt. Derselbe
Breakpoint, den die Software als MOBILE_BREAKPOINT fuehrt.
- Hamburger links in der Kopfzeile, FeatherMenu, 32x32, md:hidden, vor dem
Breadcrumb — wie SubframeAppShell ihn rendert.
- Abdeckung dahinter, Escape schliesst, Fokus wandert beim Oeffnen auf den
ersten Eintrag und kehrt beim Schliessen zum Ausloeser zurueck.
- Fokusfalle mit Tab und Umschalt+Tab: Der Rahmen traegt role=dialog und
aria-modal, ohne Falle waere das gegenueber einem Screenreader unwahr.
- Der Einklapp-Knopf ist unterhalb md ausgeblendet. Er ragt bauartbedingt
17 px nach rechts heraus und blieb sonst als angeschnittener, wirkungsloser
Rest bei x = -16 am Bildrand stehen — der gemeldete Fehler.
Inhalte: Raster einspaltig ab 375 px, Seitenkopf mit Aktionen unter dem Titel
und Icon-only, Zeitraum-Segment und Reiterstreifen waagerecht scrollend statt
umbrechend (ein Segment ueber zwei Zeilen liest sich als zwei Steuerelemente),
Filter-Panel auf volle Zeilenbreite, Tabellen mit eigenem Scrollbereich.
Zwei abgeschnittene Fehler mitbehoben, die der Prueferer nicht sieht:
- KPI-Label lief bei 1280 px um 5 px aus seinem Kasten; bricht jetzt um. Die
Karte wird dadurch eine Zeile hoeher — der Preis fuer eine vollstaendig
lesbare Beschriftung.
- Randmarken der Auslastungsachse ragten je rund 10 px ueber die Spur. In sehr
schmalen Karten entfaellt die Achse ganz; dort bleibt nur rund 40 px Spur,
auf der selbst zwei Marken aneinanderstossen.
verify-layout deckt jetzt 375-1920 px ab (vorher ab 1024) und meldet zusaetzlich
Seitenueberlauf: ein waagerechter Scrollbalken auf Dokumentebene ist immer ein
Fehler, nie ein Kompromiss. 7 Seiten x 9 Breiten gruen.
Ab 1024 px ist der abgenommene Stand unveraendert — numerisch geprueft ueber die
Bounding-Boxen aller Karten, Raster, Tabellen und Kopfelemente.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Gemeldeter Fehler: In der Ringlegende klebten Bezeichnung und Wert aneinander
("Gestellt189,1 T€"). Ursache war eine eigene Regression — beim Beheben der
abgeschnittenen Legendennamen war das truncate entfallen, ohne Ersatz. Damit
schrumpft die Namensspalte durch min-w-0 + grow auf null Breite, und der Text
läuft sichtbar über seinen Kasten hinaus:
1280 px Kastenbreite 0 px, Text 43 px darüber hinaus
1440 px Kastenbreite 25 px, Text 18 px darüber hinaus
1600 px unauffällig
Genau deshalb war es auf den Screenshots nicht zu sehen: Der Fehler tritt nur in
bestimmten Fensterbreiten auf.
Neu: scripts/verify-layout.mjs + npm run verify:layout. Lädt alle sechs Seiten in
sieben Breiten (1024–1920) und misst jede Textzeile über Range.getClientRects.
Gemessen wird auf Textzeilen, nicht auf Elementkästen — sonst melden benachbarte
Tabellenzellen mit Innenabstand falsch positiv. Mindestabstand 8 px = Carbon
$spacing-03. Der Lauf fand 110 Fehler; alle behoben:
- Ringlegende: Container-Query statt fester Zweispaltigkeit. Legende sitzt rechts
vom Ring, wenn Platz ist, sonst darunter — Carbon: "positioned to the right of
the chart when space is plentiful". Namen brechen um statt überzulaufen.
- Auslastungs-Achse: Beschriftungsdichte staffelt sich über drei Container-Stufen,
vorher überlappten die Zahlen in schmalen Karten um bis zu 16 px.
- Handlungsbedarf und Kennzahl-Labels: break-words statt Überlauf.
- Kartentitel und -untertitel: break-words, weil Dateipfade keine Leerzeichen
zum Umbrechen haben.
Dokumentiert als DESIGN-SYSTEM.md §9 mit Begründung, warum das ein gemessener
Prüfer sein muss und keine Sichtprüfung.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Recherche an der Quelle statt an der Dokumentation. Zwei Ergebnisse:
1. Carbon regelt Datenvisualisierung nur teilweise. Farben, Gitter, Achsen,
Tooltip und Tickanzahl sind verbindlich festgelegt — Paddings, Margins und
Dashboard-Raster dagegen NICHT. Die Carbon-Seiten zu Chart-Anatomie und
Dashboards tragen ausdrücklich den Hinweis "this guidance is a work in
progress" und enthalten keine Zahlenwerte. Unsere Abstandswerte stammen
deshalb aus der Carbon-Spacing-Skala und der Planung mit dem Branchenpartner,
nicht aus der Data-Viz-Norm. Das steht jetzt so in DESIGN-SYSTEM.md §0.
2. Eine echte Abweichung gefunden: Der Tooltip ist seit Carbon v11 hell
(--cds-layer-02 #ffffff auf --cds-text-primary #161616, abgesetzt allein
durch den Schatten). Unser Theme führte den dunklen v10-Stand (#393939) und
berief sich dabei auf das ausgelieferte Stylesheet — die Angabe war veraltet.
Korrigiert.
Neu:
- docs/carbon-referenz.json — kanonische Werte mit Quelle, Version und
Prüfdatum, gezogen aus @carbon/charts 1.23.0 styles.min.css und
configuration.ts. Bewusste Abweichungen (Balkenbreite 48 statt 16, feste
Kategoriefarben statt n-Serien-Paletten) sind dort begründet.
- scripts/verify-carbon.mjs + npm run verify:carbon — gleicht chartTheme.ts
gegen die Referenz ab und bricht bei Drift ab.
- docs/PRUEFFRAGEN.md — Prüffragen für die Gestaltungsabnahme mit
nachprüfbarem Ja/Nein, plus Leseliste (FT Visual Vocabulary, IBCS,
Cleveland & McGill, Few, Datawrapper Academy).
Die 14er-Palette wurde gegen die CSS-Variablen --cds-charts-14-1-* geprüft und
stimmt exakt; ebenso Gitter #e0e0e0, Achse #8d8d8d und Achsentext #525252.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
UI/UX-Prototyp der Analytics-Dashboards in HiveGrid, fachlich auf einen
SHK-/Handwerksbetrieb zugeschnitten. Ziel ist die Übergabe an die Entwicklung,
nicht der Produktivbetrieb.
Inhalt: sechs Seiten (Übersicht, Finanzen, Aufträge, Kunden, Team, Komponenten),
26 KPIs, neun Chart-Bausteine, Filtersystem mit seitenabhängiger Relevanz und ein
deterministischer Demo-Datensatz (420 Kunden, 1.900 Aufträge, Stichtag 30.07.2026).
Drei Quellen sind zusammengeführt: die fachliche Planung mit dem Branchenpartner
(Januar 2026), die Subframe-Komponentenbibliothek aus dem HiveGrid-Pitch und
IBM Carbon Data Visualization für die Diagrammregeln. Herkunft und bewusste
Abweichungen stehen in docs/HERKUNFT.md.
Dokumentation: README, HANDOVER (was echte Logik braucht), docs/DESIGN-SYSTEM,
KPI-KATALOG, DATENMODELL, NAVIGATION, HERKUNFT, ZIELSYSTEM (Einbauort in
HiveGrid Cloud) und LEITPLANKEN (welche Cloud-Screens als Vorbild taugen).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
dejanandClaude Opus 5