0285b760fc
Der Schalter „nur aktive“ änderte kaum etwas: Neben ihm filterte noch das Σ-Kennzeichen, und stillgelegte Konten tragen es meist nicht – von 17 inaktiven Konten kam beim Ausschalten genau eines dazu. Das Kennzeichen filtert hier nicht mehr mit, der Schalter ist das einzige Kriterium. Balken jetzt 18 Bildpunkte breit mit 3 Punkten Abstand. Damit das auf dem Schirm ankommt, trägt das SVG seine Maße als Attribute und wird nicht mehr auf die Kachel gestreckt. Die Legende steht neben der Zeichnung, die sonst die halbe Kachel leer ließe. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
88 lines
4.6 KiB
Markdown
88 lines
4.6 KiB
Markdown
# 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
|
||
|
||
Welche Konten zählen, entscheidet allein der Schalter „nur aktive“. Das Σ-Kennzeichen
|
||
(`in_summe`) spielt hier **keine** Rolle – anders als in der Kontenübersicht. Stillgelegte
|
||
Konten tragen es meist nicht; würde es mitfiltern, fiele beim Ausschalten des Schalters
|
||
genau das weg, was man sehen will. Die Summe der Kachel kann bei ausgeschaltetem Schalter
|
||
deshalb von der Summe der Kontenübersicht abweichen.
|
||
|
||
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 Maße stehen in echten Bildpunkten: Ein Balken ist 18 Punkte breit, zwischen zwei
|
||
Monaten bleiben 3. Damit das auch auf dem Schirm so ankommt, trägt das `<svg>` Breite und
|
||
Höhe als Attribute und wird **nicht** auf die Kachel gestreckt; `max-width: 100%` lässt es
|
||
erst mitschrumpfen, wenn die Kachel schmaler wird als die Zeichnung.
|
||
|
||
Die Legende führt nur Farbe und Kontoname und steht neben der Zeichnung – die schmale
|
||
Zeichnung ließe sonst die halbe Kachel leer. 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`). Unterhalb von 820 px fällt der
|
||
Ausgriff weg, sonst erzwänge er im einspaltigen Raster einen waagerechten Rollbalken; dort
|
||
rutscht auch die Legende unter die Zeichnung.
|
||
|
||
## Tests
|
||
|
||
* `tests/13_VermoegensentwicklungTest.php` – Zeitraum, Fortschreibung der Stände,
|
||
Umbuchungen, Σ-Kennzeichen, Schalter „nur aktive“, Zusammenfassen jenseits der Palette,
|
||
Skala
|
||
* `tests/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
|