7932830def
Die Beträge stehen am Balken im Tooltip und in der Kachel Kontostände – in der Legende kosteten sie nur Breite. Ohne sie kommen die Namen mit schmalen Spalten aus, und die Kachel greift im engeren Cockpit-Raster über zwei Spalten statt über zwei breite: 602 statt 808 Pixel. Dazu zwei Anpassungen an die schmalere Kachel: Der Kopftext gibt nach, damit der Schalter oben rechts stehen bleibt, und die Schrift im SVG wächst, weil sie mit dem viewBox schrumpft. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
3.9 KiB
Cockpit
Die Startseite. Jede Kachel beantwortet eine Frage auf einen Blick; ausgebaut wird sie Stück für Stück in Phase 4.
Vermögensentwicklung
Ein gestapeltes Balkendiagramm der Kontostände zum Monatsende über die letzten zwölf Monate – ein Balken je Monat, ein Farbton je Konto.
Woher die Zahlen kommen
Vermoegensentwicklung::reihe() zählt dieselben Konten wie die Summe der Kontenübersicht:
die mit gesetztem Σ-Kennzeichen (in_summe). Der Stand eines Monats ist der Stand des
Vormonats plus dessen Bewegungen:
Buchung::saldenJeKonto()liefert den Stand am Tag vor dem Zeitraum – alles Ältere steckt damit im ersten Balken.Buchung::bewegungenJeKontoUndMonat()liefert die Bewegungen innerhalb des Zeitraums, nach Monat getrennt.
Zwei Abfragen statt zwölf Stichtagsabfragen. Beide Methoden zählen dieselben drei Quellen: die Buchungen des Kontos, die Gegenseiten fremder Umbuchungen und die Gegenseiten aus Splitzeilen. Eine Umbuchung verschiebt deshalb zwischen zwei Balkenstücken, ohne die Summe zu ändern.
Konten, die zwölf Monate lang auf null standen, fallen weg; sie zeichnen ohnehin keinen Balken.
Der Schalter „nur aktive“
Oben rechts an der Kachel sitzt ein Ein/Aus-Schalter. Eingeschaltet – der Standard – zählen nur Konten, die noch geführt werden. Ausgeschaltet kommen stillgelegte dazu: Sonst fehlte im Rückblick Vermögen, das damals auf einem inzwischen aufgelösten Konto lag.
Der Zustand liegt unter cockpit_vermoegen_nur_aktive in den Einstellungen und gilt bis zur
nächsten Umschaltung – auch über das Abmelden hinaus. Im Einstellungsdialog erscheint er
nicht: Er gehört an die Kachel, nicht in einen Reiter.
Umgeschaltet wird über einen abschickenden Knopf, nicht über ein Ankreuzfeld. Ein Ankreuzfeld könnte sein Formular nur mit einem Inline-Skript selbst abschicken, und die Content-Security-Policy verbietet Inline-Skripte.
Stapel und Farben
Positive Stände stapeln sich über der Nulllinie, negative darunter – ein überzogenes Girokonto oder eine Kreditkarte zieht den Balken nach unten.
Die Palette in app.css hat zwölf Töne (.serie-1 bis .serie-12). Gibt es mehr Konten,
behalten die größten ihre eigene Farbe und der Rest wird zu Übrige Konten (n)
zusammengefasst – zwei Konten in derselben Farbe wären in der Legende nicht auseinander zu
halten. Jede Serie setzt --farbe; davon leben der Balken (fill) und der Legendenpunkt
(background) gleichermaßen, und beide folgen dem hellen wie dem dunklen Thema.
SVG von Hand
Keine Diagrammbibliothek (siehe PLAN.md): src/Views/cockpit/vermoegensdiagramm.php
schreibt das SVG selbst. Farben stehen als Klasse am Element, nicht als fill-Attribut –
ein Attribut käme zwar an der Content-Security-Policy vorbei, könnte aber nicht auf die
Themenumschaltung reagieren. Ein style-Attribut verwürfe die CSP ohnehin.
Die Achse rundet über Vermoegensentwicklung::skala() auf Schritte von 1, 2, 2,5 oder 5
mal einer Zehnerpotenz und schließt die Null immer ein. Jedes Balkenstück trägt ein
<title> mit Konto, Monat und Betrag – das ist der Tooltip, ohne eine Zeile JavaScript.
Die Legende führt nur Farbe und Kontoname. Die Beträge stehen am Balken im Tooltip und in
der Kachel Kontostände; in der Legende kosteten sie nur Breite. Die Kachel greift über
zwei Spalten des Cockpit-Rasters (.kachelraster.dicht) – schmal genug, um die übrigen
Kacheln danebenstehen zu lassen, breit genug für zwölf Balken. Unterhalb von 820 px fällt
der Ausgriff weg, sonst erzwänge er im einspaltigen Raster einen waagerechten Rollbalken.
Tests
tests/13_VermoegensentwicklungTest.php– Zeitraum, Fortschreibung der Stände, Umbuchungen, Σ-Kennzeichen, Schalter „nur aktive“, Zusammenfassen jenseits der Palette, Skalatests/e2e/specs/smoke.spec.js– die Kachel zeichnet zwölf Balken, keine Farbe der Legende kommt doppelt vor, und der Schalter behält seinen Zustand über den Neuaufruf