From 896a1e36ae0f15d8ea9f75bf48f91b44d5f726d0 Mon Sep 17 00:00:00 2001 From: fds2610-bot Date: Tue, 11 Aug 2026 13:13:56 +0200 Subject: [PATCH] =?UTF-8?q?Cockpit:=20Verm=C3=B6gensentwicklung=20als=20ge?= =?UTF-8?q?stapeltes=20Balkendiagramm?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die Kachel war ein Platzhalter und zeigt jetzt die Kontostände der letzten zwölf Monate je Monatsende – ein Balken pro Monat, ein Farbton pro Konto. Gezählt wird, was auch in der Kontenübersicht in die Summe zählt: Konten mit Σ-Kennzeichen. Der Schalter „nur aktive“ oben rechts blendet stillgelegte Konten aus und merkt sich seinen Zustand über die Einstellungen. Mehr Konten als Farbtöne fasst „Übrige Konten (n)“ zusammen – zwei Konten in derselben Farbe wären in der Legende nicht auseinanderzuhalten. Eigenes SVG, keine Diagrammbibliothek. Die Farben stehen als Klasse am Element und folgen damit dem hellen wie dem dunklen Thema. Co-Authored-By: Claude Opus 5 --- Changes.md | 19 ++ PLAN.md | 5 +- README.md | 6 +- docs/cockpit.md | 72 +++++++ public/index.php | 1 + public/static/app.css | 164 +++++++++++++++ src/Controllers/CockpitController.php | 30 ++- src/Models/Buchung.php | 45 ++++ src/Services/Vermoegensentwicklung.php | 213 +++++++++++++++++++ src/Views/cockpit/index.php | 38 +++- src/Views/cockpit/vermoegensdiagramm.php | 143 +++++++++++++ tests/13_VermoegensentwicklungTest.php | 248 +++++++++++++++++++++++ tests/e2e/specs/smoke.spec.js | 42 ++++ 13 files changed, 1015 insertions(+), 11 deletions(-) create mode 100644 docs/cockpit.md create mode 100644 src/Services/Vermoegensentwicklung.php create mode 100644 src/Views/cockpit/vermoegensdiagramm.php create mode 100644 tests/13_VermoegensentwicklungTest.php diff --git a/Changes.md b/Changes.md index adcdde7..7b0a24c 100644 --- a/Changes.md +++ b/Changes.md @@ -1,5 +1,24 @@ # Änderungen +## Cockpit: Vermögensentwicklung als gestapeltes Balkendiagramm (11.08.2026) + +- Die Kachel *Vermögensentwicklung* war ein Platzhalter und zeigt jetzt die Kontostände + der letzten zwölf Monate je Monatsende – ein Balken pro Monat, ein Farbton pro Konto + (`Vermoegensentwicklung::reihe()`, `src/Views/cockpit/vermoegensdiagramm.php`). +- Gezählt wird, was auch in der Kontenübersicht in die Summe zählt: Konten mit + Σ-Kennzeichen. Negative Stände stapeln unter der Nulllinie. +- Schalter *nur aktive* oben rechts an der Kachel, im Standard eingeschaltet: Er blendet + stillgelegte Konten aus und merkt sich seinen Zustand über die Einstellungen + (`cockpit_vermoegen_nur_aktive`) – auch über das Abmelden hinaus. +- `Buchung::bewegungenJeKontoUndMonat()` liefert die Monatsbewegungen in einer Abfrage je + Quelle – zwölf Stichtagsabfragen wären es sonst. +- Mehr Konten als Farbtöne: Die größten behalten ihre Farbe, der Rest wird zu *Übrige + Konten (n)* zusammengefasst. Zwei Konten in derselben Farbe wären in der Legende nicht + auseinanderzuhalten. +- Eigenes SVG, keine Diagrammbibliothek. Die Farben stehen als Klasse am Element und + folgen damit dem hellen wie dem dunklen Thema; jedes Balkenstück trägt ein `` + als Tooltip, ohne eine Zeile JavaScript. + ## Budgetplaner: drei Ansichten und Verteilen über das Zahnrad (11.08.2026) - Abgelaufene Monate werden **nicht mehr zusammengefasst**. Alle zwölf Monate stehen diff --git a/PLAN.md b/PLAN.md index 01f98b2..6472e7c 100644 --- a/PLAN.md +++ b/PLAN.md @@ -269,8 +269,9 @@ Saldo nicht — dort werden Bestand und Einstandswert je Wertpapier zum Stichtag „Planung", „Steuern"): **Summenbericht, Buchungsbericht, Vergleichsbericht, Kontostandsbericht, Budgetbericht**, jeweils mit Zeitraum, Spalten-Aufteilung, Zeilen-Summe (Kategorie/Klasse/Konto/Empfänger), Filter auf Konten/Kategorien/Klassen. -* Grafiken als SVG: Einnahmen/Ausgaben je Monat, Vermögensentwicklung, Ausgaben nach - Kategorie. +* Grafiken als SVG: Einnahmen/Ausgaben je Monat, Vermögensentwicklung *(erledigt: Cockpit- + Kachel mit den letzten zwölf Monaten, gestapelt je Konto — `docs/cockpit.md`)*, Ausgaben + nach Kategorie. * Export CSV; Drilldown von der Berichtszeile in die zugrunde liegenden Buchungen. * **Cockpit** mit konfigurierbaren Kacheln (Vermögensentwicklung, Einnahmen/Ausgaben, Meine Ausgaben, Kontostände, offene Vorgänge). diff --git a/README.md b/README.md index 2251181..be34ba7 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,9 @@ Phase 0 bis 3 sind gebaut: Anmeldung, zentraler Einstellungsdialog, Debug-Log, Migrationsmechanik und Test-Harness; Konten, Kontengruppen, Kategorien und Klassen; Kontoblatt, Buchungsmaske mit Splitbuchungen und Umbuchungen sowie der QIF-Import für Stammdaten und Buchungen; Budgetplaner mit Monatswerten je Kategorie und der -Monatsabschluss samt Prüflauf, Snapshot und Sperre. Als Nächstes folgen nach `PLAN.md` -die Auswertungen und das Cockpit (Phase 4). +Monatsabschluss samt Prüflauf, Snapshot und Sperre. Aus Phase 4 steht die erste +Cockpit-Kachel: die Vermögensentwicklung der letzten zwölf Monate als gestapeltes +Balkendiagramm. Als Nächstes folgen nach `PLAN.md` die übrigen Auswertungen. ## Technik @@ -85,4 +86,5 @@ Ohne `--uebernehmen` läuft nur der Trockenlauf. - `docs/stammdaten.md` – Konten, Kontengruppen, Kategorien, Klassen - `docs/buchungen.md` – Kontoblatt, Umbuchungen, Splitbuchungen, Salden - `docs/planung.md` – Budgetplaner und Monatsabschluss +- `docs/cockpit.md` – Startseite und die Kachel Vermögensentwicklung - `docs/qif-import.md` – Aufbau des QIF-Exports und Arbeitsweise des Importeurs diff --git a/docs/cockpit.md b/docs/cockpit.md new file mode 100644 index 0000000..5f31de0 --- /dev/null +++ b/docs/cockpit.md @@ -0,0 +1,72 @@ +# 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. + +## 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 diff --git a/public/index.php b/public/index.php index 55c8249..be62498 100644 --- a/public/index.php +++ b/public/index.php @@ -55,6 +55,7 @@ $router->get('/einrichtung', fn() => (new LoginController())->einrichtungFormul $router->post('/einrichtung', fn() => (new LoginController())->einrichtungSpeichern()); $router->get('/', fn() => (new CockpitController())->index()); +$router->post('/cockpit/vermoegen/konten', fn() => (new CockpitController())->kontenfilter()); $router->get('/einstellungen', fn() => (new EinstellungenController())->index()); $router->post('/einstellungen', fn() => (new EinstellungenController())->speichern()); diff --git a/public/static/app.css b/public/static/app.css index 99da9e1..100ff7d 100644 --- a/public/static/app.css +++ b/public/static/app.css @@ -274,8 +274,28 @@ form.inline { display: inline; margin: 0; } .kachel.einzeln { max-width: 640px; } +/* Ein Diagramm mit zwölf Balken braucht mehr als eine Spalte – aber nicht die + ganze Zeile: über zwei Spalten bleibt es lesbar und die Kachel handlich. Unter + der Umbruchbreite muss der Ausgriff weg, sonst erzwänge er eine zweite Spalte, + die dort nicht mehr hineinpasst (siehe Media Query am Dateiende). */ +.kachel.breit { grid-column: span 2; } + .kachel header { margin-bottom: .6rem; } +.kachel header.mitschalter { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + flex-wrap: wrap; +} + +.kachelhinweis { + margin: .25rem 0 0; + color: var(--text-gedaempft); + font-size: .85rem; +} + .kachel h2 { margin: 0; font-size: 1rem; @@ -321,6 +341,146 @@ form.inline { display: inline; margin: 0; } .checkliste li.erledigt { color: var(--text); } .checkliste li.erledigt::before { content: "●"; color: var(--positiv); } +/* ── Diagramme ─────────────────────────────────────────────────────────────── + + Selbst erzeugtes SVG, keine Diagrammbibliothek. Die Farbe eines Kontos steht + als Klasse am Element: Ein fill-Attribut ginge zwar an der CSP vorbei, könnte + aber nicht auf das dunkle Thema reagieren. Jede Serie setzt --farbe, davon + leben Balken (fill) und Legendenpunkt (background) gleichermaßen. */ +.serie-1 { --farbe: #4c78a8; } +.serie-2 { --farbe: #f58518; } +.serie-3 { --farbe: #54a24b; } +.serie-4 { --farbe: #e45756; } +.serie-5 { --farbe: #72b7b2; } +.serie-6 { --farbe: #b279a2; } +.serie-7 { --farbe: #d8b02c; } +.serie-8 { --farbe: #9d755d; } +.serie-9 { --farbe: #2f8f8a; } +.serie-10 { --farbe: #8f8ad4; } +.serie-11 { --farbe: #e07b91; } +.serie-12 { --farbe: #7b8a99; } + +.diagramm { + width: 100%; + height: auto; + display: block; + overflow: visible; +} + +.diagramm rect { fill: var(--farbe); } + +.diagramm-gitter { + stroke: var(--rand); + stroke-width: 1; +} + +.diagramm-nulllinie { + stroke: var(--rand-kraeftig); + stroke-width: 1.5; +} + +.diagramm-achse, +.diagramm-beschriftung { + fill: var(--text-gedaempft); + font-family: var(--schrift); + font-size: 11px; +} + +.diagramm-achse { font-family: var(--schrift-zahl); } + +.diagramm-beschriftung.schwach { opacity: .7; } + +.diagrammlegende { + list-style: none; + margin: .9rem 0 0; + padding: 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); + gap: .1rem 1.2rem; + font-size: .88rem; +} + +.diagrammlegende li { + display: flex; + align-items: center; + gap: .5rem; + padding: .15rem 0; +} + +.legendenfarbe { + width: .8rem; + height: .8rem; + border-radius: 2px; + background: var(--farbe); + flex: none; +} + +.legendenname { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.legendenwert { + margin-left: auto; + font-family: var(--schrift-zahl); + font-variant-numeric: tabular-nums; +} + +/* ── Ein/Aus-Schalter ──────────────────────────────────────────────────────── + + Die Bahn mit dem laufenden Knopf, wie man ihn von Mobilgeräten kennt. Ein + abschickender Knopf statt eines Ankreuzfelds: Ohne Inline-Skript könnte ein + Ankreuzfeld sein Formular nicht selbst abschicken, und Inline-Skripte + verbietet die Content-Security-Policy. */ +.schalterform { margin: 0; } + +.schalter { + display: inline-flex; + align-items: center; + gap: .5rem; + padding: .15rem; + border: none; + border-radius: var(--radius); + background: none; + color: var(--text-gedaempft); + font: inherit; + font-size: .85rem; + cursor: pointer; +} + +.schalter[aria-checked="true"] { color: var(--text); } + +.schalter:focus-visible { + outline: 2px solid var(--akzent); + outline-offset: 1px; +} + +.schalterbahn { + position: relative; + flex: none; + width: 2.3rem; + height: 1.25rem; + border-radius: 999px; + background: var(--rand-kraeftig); + transition: background .15s ease; +} + +.schalterknopf { + position: absolute; + top: .15rem; + left: .15rem; + width: .95rem; + height: .95rem; + border-radius: 50%; + background: #fff; + box-shadow: 0 1px 2px rgb(0 0 0 / 35%); + transition: transform .15s ease; +} + +.schalter[aria-checked="true"] .schalterbahn { background: var(--akzent); } +.schalter[aria-checked="true"] .schalterknopf { transform: translateX(1.05rem); } + /* ── Tabellen ────────────────────────────────────────────────────────────── */ table.liste { @@ -836,6 +996,10 @@ body.schlicht { @media (max-width: 820px) { .rahmen { grid-template-columns: 1fr; } + /* Einspaltiges Raster: Ein Ausgriff über zwei Spalten erzwänge hier eine + zweite Spalte und damit den waagerechten Rollbalken. */ + .kachel.breit { grid-column: auto; } + .seitenleiste { position: static; height: auto; diff --git a/src/Controllers/CockpitController.php b/src/Controllers/CockpitController.php index 5feb25b..e64e8f4 100644 --- a/src/Controllers/CockpitController.php +++ b/src/Controllers/CockpitController.php @@ -4,19 +4,45 @@ declare(strict_types=1); namespace Finanzmanager\Controllers; +use Finanzmanager\Models\Einstellung; use Finanzmanager\Models\Konto; +use Finanzmanager\Services\Vermoegensentwicklung; +use Finanzmanager\View; class CockpitController extends BaseController { + /** + * Der Schalter „nur aktive“ an der Vermögenskachel. Er merkt sich seinen + * Zustand über die Einstellungen und nicht in der Sitzung: Er soll auch beim + * nächsten Anmelden noch so stehen, wie der Nutzer ihn gelassen hat. Im + * Einstellungsdialog taucht er nicht auf – er gehört an die Kachel. + */ + public const SCHALTER_NUR_AKTIVE = 'cockpit_vermoegen_nur_aktive'; + public function index(): void { $this->verlangeAnmeldung(); - // Die Kontostandskachel zeigt schon jetzt echte Zahlen; die übrigen - // Kacheln brauchen Buchungen und füllen sich ab Phase 2. + $nurAktive = Einstellung::getBool(self::SCHALTER_NUR_AKTIVE, true); + $this->render('cockpit/index.php', [ 'titel' => 'Cockpit', 'uebersicht' => Konto::uebersicht(), + 'vermoegen' => Vermoegensentwicklung::reihe($nurAktive), + 'nurAktive' => $nurAktive, ]); } + + public function kontenfilter(): void + { + $this->verlangeAnmeldung(); + + Einstellung::set( + self::SCHALTER_NUR_AKTIVE, + $this->post('nur_aktive') === '1' ? '1' : '0', + 'darstellung' + ); + + View::redirect('/'); + } } diff --git a/src/Models/Buchung.php b/src/Models/Buchung.php index bd8977b..d589c70 100644 --- a/src/Models/Buchung.php +++ b/src/Models/Buchung.php @@ -257,6 +257,51 @@ class Buchung return $salden; } + /** + * Dieselben drei Quellen wie saldenJeKonto(), aber nach Monat getrennt und + * auf einen Zeitraum begrenzt. Für die Vermögensentwicklung: Ein Stichtag je + * Monat wären zwölf Abfragen, so genügt eine je Quelle. + * + * @return array<int, array<string, float>> konto_id => ['JJJJ-MM' => Bewegung] + */ + public static function bewegungenJeKontoUndMonat(string $von, string $bis): array + { + $benutzer = Mandant::id(); + $p = [$benutzer, $von, $bis]; + + $quellen = [ + "SELECT b.konto_id AS k, DATE_FORMAT(b.datum, '%Y-%m') AS m, SUM(b.betrag) AS s + FROM buchungen b + WHERE b.benutzer_id = ? AND b.datum BETWEEN ? AND ? + GROUP BY b.konto_id, m", + + "SELECT b.gegenkonto_id AS k, DATE_FORMAT(b.datum, '%Y-%m') AS m, -SUM(b.betrag) AS s + FROM buchungen b + WHERE b.benutzer_id = ? AND b.datum BETWEEN ? AND ? + AND b.gegenkonto_id IS NOT NULL AND b.gesplittet = 0 + GROUP BY b.gegenkonto_id, m", + + "SELECT s.gegenkonto_id AS k, DATE_FORMAT(b.datum, '%Y-%m') AS m, -SUM(s.betrag) AS s + FROM buchung_splits s + JOIN buchungen b ON b.id = s.buchung_id + WHERE b.benutzer_id = ? AND b.datum BETWEEN ? AND ? + AND s.gegenkonto_id IS NOT NULL + GROUP BY s.gegenkonto_id, m", + ]; + + $bewegungen = []; + foreach ($quellen as $sql) { + foreach (Database::fetchAll($sql, $p) as $zeile) { + $id = (int)$zeile['k']; + $monat = (string)$zeile['m']; + + $bewegungen[$id][$monat] = ($bewegungen[$id][$monat] ?? 0.0) + (float)$zeile['s']; + } + } + + return $bewegungen; + } + /** Wie viele Buchungen hat das Konto (beide Sichten)? */ public static function anzahlFuerKonto(int $kontoId): int { diff --git a/src/Services/Vermoegensentwicklung.php b/src/Services/Vermoegensentwicklung.php new file mode 100644 index 0000000..977592c --- /dev/null +++ b/src/Services/Vermoegensentwicklung.php @@ -0,0 +1,213 @@ +<?php + +declare(strict_types=1); + +namespace Finanzmanager\Services; + +use Finanzmanager\Models\Buchung; +use Finanzmanager\Models\Konto; + +/** + * Die Kontostände der letzten zwölf Monate, je Konto und Monatsende – Grundlage + * der Cockpit-Kachel *Vermögensentwicklung*. + * + * Gezählt wird, was auch in der Kontenübersicht in die Summe zählt: Konten mit + * gesetztem Kennzeichen `in_summe`. Der Schalter „nur aktive“ an der Kachel + * entscheidet, ob stillgelegte Konten dazugehören: ausgeschaltet zeigt er auch + * das Vermögen, das damals auf inzwischen aufgelösten Konten lag. + */ +class Vermoegensentwicklung +{ + public const MONATE = 12; + + /** So viele Farbtöne hat die Palette in `app.css`. */ + public const SERIEN = 12; + + /** + * @return array{ + * monate: list<array{jahr:int, monat:int, bis:string, kuerzel:string, jahrKurz:string}>, + * konten: list<array{id:int, name:string, werte:list<float>}>, + * summen: list<float>, + * hatWerte: bool + * } + */ + public static function reihe( + bool $nurAktive = true, + int $anzahl = self::MONATE, + ?string $heute = null + ): array { + $monate = self::monate($anzahl, $heute); + $erster = $monate[0]; + $letzter = $monate[count($monate) - 1]; + + // Alles vor dem Zeitraum steckt im Anfangsstand; innerhalb zählt Monat + // für Monat dazu. So genügen zwei Abfragen statt einer je Stichtag. + $vorlauf = date('Y-m-d', strtotime($erster['bis'] . ' first day of this month -1 day')); + + $anfang = Buchung::saldenJeKonto($vorlauf); + $bewegungen = Buchung::bewegungenJeKontoUndMonat( + date('Y-m-01', strtotime($erster['bis'])), + $letzter['bis'] + ); + + $konten = []; + $summen = array_fill(0, count($monate), 0.0); + + foreach (Konto::alle($nurAktive) as $konto) { + if ((int)$konto['in_summe'] !== 1) { + continue; + } + + $id = (int)$konto['id']; + $stand = (float)$konto['anfangssaldo'] + ($anfang[$id] ?? 0.0); + $werte = []; + $bewegt = false; + + foreach ($monate as $nummer => $monat) { + $schluessel = sprintf('%04d-%02d', $monat['jahr'], $monat['monat']); + $stand += $bewegungen[$id][$schluessel] ?? 0.0; + $werte[] = round($stand, 2); + + $summen[$nummer] += $stand; + $bewegt = $bewegt || round($stand, 2) !== 0.0; + } + + // Konten, die im ganzen Zeitraum auf null standen, blähen nur die + // Legende auf – sie zeichnen ohnehin keinen Balken. + if ($bewegt) { + $konten[] = ['id' => $id, 'name' => (string)$konto['name'], 'werte' => $werte]; + } + } + + if (count($konten) > self::SERIEN) { + $konten = self::zusammenfassen($konten, count($monate)); + } + + $hatWerte = false; + foreach ($summen as $nummer => $summe) { + $summen[$nummer] = round($summe, 2); + $hatWerte = $hatWerte || $summen[$nummer] !== 0.0; + } + + return [ + 'monate' => $monate, + 'konten' => $konten, + 'summen' => array_values($summen), + 'hatWerte' => $hatWerte || $konten !== [], + ]; + } + + /** + * Mehr Konten als Farbtöne: Die größten behalten ihre eigene Farbe, der Rest + * wird zu einem Balkenstück zusammengefasst. Sonst bekämen zwei Konten + * denselben Ton – und wer die Legende liest, ordnete falsch zu. + * + * @param list<array{id:int, name:string, werte:list<float>}> $konten + * @return list<array{id:int, name:string, werte:list<float>}> + */ + private static function zusammenfassen(array $konten, int $spalten): array + { + $groesse = []; + foreach ($konten as $nummer => $konto) { + $groesse[$nummer] = max(array_map('abs', $konto['werte'])); + } + arsort($groesse); + + // Die größten behalten, aber in ihrer ursprünglichen Reihenfolge – der + // Stapel soll nicht bei jedem Aufruf anders sortiert sein. + $eigene = array_slice(array_keys($groesse), 0, self::SERIEN - 1); + sort($eigene); + + $rest = array_fill(0, $spalten, 0.0); + $restKonten = 0; + $ergebnis = []; + + foreach ($konten as $nummer => $konto) { + if (in_array($nummer, $eigene, true)) { + $ergebnis[] = $konto; + continue; + } + + foreach ($konto['werte'] as $spalte => $wert) { + $rest[$spalte] += $wert; + } + $restKonten++; + } + + $ergebnis[] = [ + 'id' => 0, + 'name' => 'Übrige Konten (' . $restKonten . ')', + 'werte' => array_map(static fn(float $wert): float => round($wert, 2), $rest), + ]; + + return $ergebnis; + } + + /** + * Die letzten `$anzahl` Monate bis einschließlich des laufenden, jeweils mit + * dem Monatsletzten als Stichtag. + * + * @return list<array{jahr:int, monat:int, bis:string, kuerzel:string, jahrKurz:string}> + */ + public static function monate(int $anzahl = self::MONATE, ?string $heute = null): array + { + $heute = $heute ?? date('Y-m-d'); + $start = strtotime(substr($heute, 0, 8) . '01'); + + $monate = []; + for ($rueckwaerts = $anzahl - 1; $rueckwaerts >= 0; $rueckwaerts--) { + $zeit = strtotime('-' . $rueckwaerts . ' month', $start); + $jahr = (int)date('Y', $zeit); + $nr = (int)date('n', $zeit); + + $monate[] = [ + 'jahr' => $jahr, + 'monat' => $nr, + 'bis' => date('Y-m-t', $zeit), + 'kuerzel' => Budgetplaner::MONATSKUERZEL[$nr], + 'jahrKurz' => date('y', $zeit), + ]; + } + + return $monate; + } + + /** + * Skala für die Achse: Nulllinie inbegriffen, Schritte in 1/2/2,5/5 mal + * Zehnerpotenz – die Beschriftung soll lesbare Zahlen zeigen, nicht die + * krummen Maxima der Konten. + * + * @param list<float> $werte + * @return array{min: float, max: float, schritt: float} + */ + public static function skala(array $werte): array + { + $max = max(0.0, ...($werte === [] ? [0.0] : $werte)); + $min = min(0.0, ...($werte === [] ? [0.0] : $werte)); + + if ($max - $min < 0.01) { + return ['min' => 0.0, 'max' => 1.0, 'schritt' => 1.0]; + } + + $schritt = self::schritt(($max - $min) / 4); + + return [ + 'min' => floor($min / $schritt) * $schritt, + 'max' => ceil($max / $schritt) * $schritt, + 'schritt' => $schritt, + ]; + } + + private static function schritt(float $roh): float + { + $potenz = 10 ** floor(log10(max($roh, 0.01))); + + foreach ([1, 2, 2.5, 5, 10] as $faktor) { + if ($roh <= $faktor * $potenz) { + return $faktor * $potenz; + } + } + + return 10 * $potenz; + } +} diff --git a/src/Views/cockpit/index.php b/src/Views/cockpit/index.php index a43985a..453e263 100644 --- a/src/Views/cockpit/index.php +++ b/src/Views/cockpit/index.php @@ -3,6 +3,9 @@ use Finanzmanager\View; /** @var array{gruppen: list<array<string,mixed>>, summe: float} $uebersicht */ +/** @var array{monate: list<array<string,mixed>>, konten: list<array<string,mixed>>, summen: list<float>, hatWerte: bool} $vermoegen */ +/** @var bool $nurAktive */ +/** @var string $csrfToken */ include __DIR__ . '/../layout/kopf.php'; ?> @@ -12,10 +15,35 @@ include __DIR__ . '/../layout/kopf.php'; </div> <div class="kachelraster"> - <section class="kachel"> - <header><h2>Vermögensentwicklung</h2></header> - <p class="platzhalter">Zeigt Kontostände über die Zeit, sobald Buchungen - erfasst sind (Phase 2).</p> + <section class="kachel breit"> + <header class="mitschalter"> + <div> + <h2>Vermögensentwicklung</h2> + <p class="kachelhinweis">Kontostände der letzten zwölf Monate, je Monatsende + gestapelt – ein Farbton pro Konto.</p> + </div> + + <?php /* Ein Knopf, kein Ankreuzfeld: Ohne Inline-Skript könnte ein + Ankreuzfeld das Formular nicht selbst abschicken, und die + Content-Security-Policy verbietet Inline-Skripte. */ ?> + <form method="post" action="/cockpit/vermoegen/konten" class="schalterform"> + <input type="hidden" name="csrf_token" value="<?= View::h($csrfToken) ?>"> + <input type="hidden" name="nur_aktive" value="<?= $nurAktive ? '0' : '1' ?>"> + <button type="submit" class="schalter" role="switch" + aria-checked="<?= $nurAktive ? 'true' : 'false' ?>"> + <span class="schalterbahn" aria-hidden="true"><span class="schalterknopf"></span></span> + <span class="schaltertext">nur aktive</span> + </button> + </form> + </header> + <?php if (!$vermoegen['hatWerte']): ?> + <p class="platzhalter"> + Zeigt die Kontostände über die Zeit, sobald <?= $nurAktive ? 'aktive ' : '' ?>Konten + mit Σ-Kennzeichen Buchungen haben. + </p> + <?php else: ?> + <?php $reihe = $vermoegen; include __DIR__ . '/vermoegensdiagramm.php'; ?> + <?php endif; ?> </section> <section class="kachel"> @@ -66,7 +94,7 @@ include __DIR__ . '/../layout/kopf.php'; <li class="erledigt">Phase 0 – Grundgerüst, Anmeldung, Einstellungen</li> <li class="erledigt">Phase 1 – Konten, Kategorien, Klassen, QIF-Stammdaten</li> <li class="erledigt">Phase 2 – Buchungen, Kontoblatt, Splitbuchungen</li> - <li>Phase 3 – Budgetplaner und Monatsabschluss</li> + <li class="erledigt">Phase 3 – Budgetplaner und Monatsabschluss</li> <li>Phase 4 – Auswertungen und Cockpit-Kacheln</li> </ul> </section> diff --git a/src/Views/cockpit/vermoegensdiagramm.php b/src/Views/cockpit/vermoegensdiagramm.php new file mode 100644 index 0000000..29c05bc --- /dev/null +++ b/src/Views/cockpit/vermoegensdiagramm.php @@ -0,0 +1,143 @@ +<?php + +use Finanzmanager\Services\Vermoegensentwicklung; +use Finanzmanager\View; + +/** + * Gestapeltes Balkendiagramm der Kontostände je Monatsende – ein Balken je + * Monat, ein Farbton je Konto. + * + * Eigenes SVG statt einer Diagrammbibliothek (siehe PLAN.md). Die Farben stehen + * als Klasse am Element und kommen aus `app.css`: Ein `fill`-Attribut je Konto + * ginge zwar, verlöre aber die Themenumschaltung, und ein `style`-Attribut + * verwürfe die Content-Security-Policy ohnehin. + * + * @var array{ + * monate: list<array{jahr:int, monat:int, bis:string, kuerzel:string, jahrKurz:string}>, + * konten: list<array{id:int, name:string, werte:list<float>}>, + * summen: list<float>, + * hatWerte: bool + * } $reihe + */ + +$monate = $reihe['monate']; +$konten = $reihe['konten']; +$anzahl = count($monate); + +// Die Achse muss den gestapelten Positiv- und Negativteil jedes Balkens fassen. +// Die Nettosumme liegt immer dazwischen und braucht keine eigene Grenze. +$grenzwerte = []; +foreach ($monate as $nummer => $monat) { + $plus = 0.0; + $minus = 0.0; + foreach ($konten as $konto) { + $wert = $konto['werte'][$nummer]; + if ($wert >= 0) { + $plus += $wert; + } else { + $minus += $wert; + } + } + $grenzwerte[] = $plus; + $grenzwerte[] = $minus; +} + +$skala = Vermoegensentwicklung::skala($grenzwerte); + +$breite = 760; +$hoehe = 250; +$links = 82; +$rechts = 10; +$oben = 12; +$unten = 34; + +$plotB = $breite - $links - $rechts; +$plotH = $hoehe - $oben - $unten; +$spalte = $plotB / max(1, $anzahl); +$balken = min(40.0, $spalte * 0.62); + +$y = static function (float $wert) use ($skala, $oben, $plotH): float { + return round($oben + $plotH * ($skala['max'] - $wert) / ($skala['max'] - $skala['min']), 2); +}; + +$mitte = static function (int $nummer) use ($links, $spalte): float { + return round($links + ($nummer + 0.5) * $spalte, 2); +}; + +$achsenzahl = static function (float $wert): string { + return number_format($wert, 0, ',', '.'); +}; + +$serie = static function (int $nummer): string { + return 'serie-' . ($nummer % 12 + 1); +}; + +$zeitraum = $monate[0]['kuerzel'] . ' ' . $monate[0]['jahrKurz'] + . ' bis ' . $monate[$anzahl - 1]['kuerzel'] . ' ' . $monate[$anzahl - 1]['jahrKurz']; +?> + +<svg class="diagramm" viewBox="0 0 <?= $breite ?> <?= $hoehe ?>" role="img" + preserveAspectRatio="xMidYMid meet" + aria-label="Kontostände je Monatsende, <?= View::h($zeitraum) ?>"> + <title>Vermögensentwicklung <?= View::h($zeitraum) ?> + + + + + + + + + $monat): ?> + + $konto): ?> + 0) { + $von = $oberkante; + $bis = $oberkante + $wert; + $oberkante = $bis; + } else { + $von = $unterkante + $wert; + $bis = $unterkante; + $unterkante = $von; + } + ?> + + <?= View::h($konto['name'] . ' – ' . $monat['kuerzel'] . ' ' . $monat['jahr'] + . ': ' . View::betrag($wert)) ?> + + + + + + + + + + + diff --git a/tests/13_VermoegensentwicklungTest.php b/tests/13_VermoegensentwicklungTest.php new file mode 100644 index 0000000..24a0825 --- /dev/null +++ b/tests/13_VermoegensentwicklungTest.php @@ -0,0 +1,248 @@ +mandantAnlegen(); + $this->stammdaten(); + + $this->zwoelfMonateBisHeute(); + $this->staendeWachsenMonatFuerMonat(); + $this->umbuchungVerschiebtZwischenKonten(); + $this->ohneSummenkennzeichenKeinBalken(); + $this->schalterFiltertStillgelegteKonten(); + $this->mehrKontenAlsFarbenWerdenZusammengefasst(); + $this->skalaRundetAufLesbareSchritte(); + } + + private function stammdaten(): void + { + $this->giro = Konto::anlegen([ + 'name' => 'Vermögensgiro', 'kontoart' => 'bank', 'anfangssaldo' => 1000, 'aktiv' => 1, + ]); + $this->sparkonto = Konto::anlegen([ + 'name' => 'Vermögenssparbuch', 'kontoart' => 'sparkonto', 'anfangssaldo' => 0, 'aktiv' => 1, + ]); + $this->kreditkarte = Konto::anlegen([ + 'name' => 'Vermögenskarte', 'kontoart' => 'kreditkarte', 'anfangssaldo' => -200, 'aktiv' => 1, + ]); + // Durchlaufende Auslagen sind kein Vermögen und tragen kein Σ-Kennzeichen. + $this->auslagen = Konto::anlegen([ + 'name' => 'Vermögensauslagen', 'kontoart' => 'sonstiges', 'anfangssaldo' => 5000, + 'aktiv' => 1, 'in_summe' => 0, + ]); + + $this->kategorie = Kategorie::findenOderAnlegenNachPfad('600 - Vermögenstest', 'ausgabe'); + } + + private function reihe(bool $nurAktive = true): array + { + return Vermoegensentwicklung::reihe($nurAktive, 12, self::HEUTE); + } + + /** @return array|null */ + private function konto(array $reihe, int $id): ?array + { + foreach ($reihe['konten'] as $konto) { + if ($konto['id'] === $id) { + return $konto; + } + } + + return null; + } + + private function zwoelfMonateBisHeute(): void + { + $monate = Vermoegensentwicklung::monate(12, self::HEUTE); + + $this->assertEquals(12, count($monate), 'Zwölf Monate'); + $this->assertEquals(2025, $monate[0]['jahr'], 'Der Rückblick beginnt im Vorjahr'); + $this->assertEquals(9, $monate[0]['monat'], 'Zwölf Monate vor August 2026 ist September 2025'); + $this->assertEquals(2026, $monate[11]['jahr'], 'Der letzte Balken ist der laufende Monat'); + $this->assertEquals(8, $monate[11]['monat'], 'August 2026'); + $this->assertEquals('2026-08-31', $monate[11]['bis'], 'Stichtag ist das Monatsende'); + $this->assertEquals('2026-02-28', $monate[5]['bis'], 'Auch im Februar das echte Monatsende'); + $this->assertEquals('Sep', $monate[0]['kuerzel'], 'Monatskürzel für die Achse'); + } + + /** + * Der Stand eines Monats ist der Stand des Vormonats plus dessen Bewegungen – + * und Buchungen vor dem Zeitraum stecken im Anfangsstand des ersten Balkens. + */ + private function staendeWachsenMonatFuerMonat(): void + { + // Lange vor dem Zeitraum: zählt in den ersten Balken hinein. + Buchung::anlegen([ + 'konto_id' => $this->giro, 'datum' => '2024-05-10', 'betrag' => 500, + 'empfaenger' => 'Altbestand', 'kategorie_id' => $this->kategorie, + ]); + // Im Zeitraum: hebt den Stand ab Dezember 2025. + Buchung::anlegen([ + 'konto_id' => $this->giro, 'datum' => '2025-12-05', 'betrag' => 300, + 'empfaenger' => 'Zufluss', 'kategorie_id' => $this->kategorie, + ]); + // Nach dem letzten Balken: bleibt außen vor. + Buchung::anlegen([ + 'konto_id' => $this->giro, 'datum' => '2026-11-01', 'betrag' => 9999, + 'empfaenger' => 'Zukunft', 'kategorie_id' => $this->kategorie, + ]); + + $reihe = $this->reihe(); + $giro = $this->konto($reihe, $this->giro); + + $this->assertNotEmpty($giro, 'Das Girokonto hat einen Balken'); + $this->assertEquals(1500.0, $giro['werte'][0], 'September 2025: Anfangssaldo plus Altbestand'); + $this->assertEquals(1500.0, $giro['werte'][2], 'November 2025 unverändert'); + $this->assertEquals(1800.0, $giro['werte'][3], 'Dezember 2025 mit dem Zufluss'); + $this->assertEquals(1800.0, $giro['werte'][11], 'Der Stand trägt bis in den letzten Monat'); + + // Die Kreditkarte steht im Minus – sie zieht die Summe herunter. + $karte = $this->konto($reihe, $this->kreditkarte); + $this->assertEquals(-200.0, $karte['werte'][11], 'Negativer Stand bleibt negativ'); + $this->assertEquals(1600.0, $reihe['summen'][11], 'Summe ist Giro minus Kreditkarte'); + $this->assert($reihe['hatWerte'], 'Es gibt etwas zu zeichnen'); + } + + private function umbuchungVerschiebtZwischenKonten(): void + { + Buchung::anlegen([ + 'konto_id' => $this->giro, 'datum' => '2026-03-15', 'betrag' => -400, + 'empfaenger' => 'Umbuchung aufs Sparbuch', 'gegenkonto_id' => $this->sparkonto, + ]); + + $reihe = $this->reihe(); + $giro = $this->konto($reihe, $this->giro); + $spar = $this->konto($reihe, $this->sparkonto); + + $this->assertEquals(1800.0, $giro['werte'][5], 'Februar 2026 noch ohne Umbuchung'); + $this->assertEquals(1400.0, $giro['werte'][6], 'März 2026: 400 weniger auf dem Giro'); + $this->assertEquals(400.0, $spar['werte'][6], 'Dieselben 400 liegen auf dem Sparbuch'); + $this->assertEquals( + $reihe['summen'][5], + $reihe['summen'][6], + 'Eine Umbuchung ändert das Vermögen nicht' + ); + } + + private function ohneSummenkennzeichenKeinBalken(): void + { + $reihe = $this->reihe(); + + $this->assertNull( + $this->konto($reihe, $this->auslagen), + 'Ein Konto ohne Σ-Kennzeichen zeichnet keinen Balken' + ); + + // Ein Konto, das im ganzen Zeitraum auf null steht, bläht nur die Legende auf. + $leer = Konto::anlegen([ + 'name' => 'Vermögensleerkonto', 'kontoart' => 'bank', 'anfangssaldo' => 0, 'aktiv' => 1, + ]); + $this->assertNull($this->konto($this->reihe(), $leer), 'Ein durchgehend leeres Konto fehlt'); + } + + /** + * Der Schalter „nur aktive“ an der Kachel: eingeschaltet zählt nur, was noch + * geführt wird; ausgeschaltet auch das Vermögen auf stillgelegten Konten. + */ + private function schalterFiltertStillgelegteKonten(): void + { + $stillgelegt = Konto::anlegen([ + 'name' => 'Vermögensaltkonto', 'kontoart' => 'bank', 'anfangssaldo' => 2500, 'aktiv' => 0, + ]); + + $this->assertNull( + $this->konto($this->reihe(), $stillgelegt), + 'Eingeschaltet bleibt das stillgelegte Konto draußen' + ); + + $alle = $this->reihe(false); + $this->assertNotEmpty($this->konto($alle, $stillgelegt), 'Ausgeschaltet ist es dabei'); + $this->assertEquals( + 2500.0, + $this->konto($alle, $stillgelegt)['werte'][11], + 'Mit seinem Stand' + ); + $this->assertEquals( + round($this->reihe()['summen'][11] + 2500.0, 2), + $alle['summen'][11], + 'Und die Summe wächst um genau diesen Stand' + ); + } + + /** + * Zwölf Farbtöne hat die Palette; darüber hinaus behalten die größten Konten + * ihre Farbe, der Rest wird zu einem Stück zusammengefasst. + */ + private function mehrKontenAlsFarbenWerdenZusammengefasst(): void + { + for ($nummer = 1; $nummer <= 15; $nummer++) { + Konto::anlegen([ + 'name' => 'Vermögensklein ' . $nummer, + 'kontoart' => 'bank', + 'anfangssaldo' => $nummer, + 'aktiv' => 1, + ]); + } + + $reihe = $this->reihe(); + $konten = $reihe['konten']; + $letzte = $konten[count($konten) - 1]; + + $this->assertEquals( + Vermoegensentwicklung::SERIEN, + count($konten), + 'Nicht mehr Balkenstücke als Farbtöne' + ); + $this->assertEquals(0, $letzte['id'], 'Das letzte Stück steht für kein einzelnes Konto'); + $this->assert(str_starts_with($letzte['name'], 'Übrige Konten ('), 'Es heißt „Übrige Konten“'); + + // Die größten behalten ihre eigene Farbe – das Sparbuch ist dabei. + $this->assertNotEmpty($this->konto($reihe, $this->sparkonto), 'Ein großes Konto bleibt eigenständig'); + + // Zusammengefasst wird, nicht weggelassen: Die Summe bleibt dieselbe. + $gestapelt = 0.0; + foreach ($konten as $konto) { + $gestapelt += $konto['werte'][11]; + } + $this->assertEquals( + $reihe['summen'][11], + round($gestapelt, 2), + 'Die Balkenstücke ergeben zusammen die Summe' + ); + } + + private function skalaRundetAufLesbareSchritte(): void + { + $skala = Vermoegensentwicklung::skala([0.0, 1234.0, 4870.0]); + $this->assertEquals(0.0, $skala['min'], 'Die Null gehört immer dazu'); + $this->assertGreaterThan(4869.0, $skala['max'], 'Der größte Wert passt hinein'); + $this->assertEquals(0.0, fmod($skala['max'], $skala['schritt']), 'Das Maximum liegt auf einem Schritt'); + + $mitMinus = Vermoegensentwicklung::skala([-820.0, 2500.0]); + $this->assert($mitMinus['min'] <= -820.0, 'Auch der negative Ausschlag passt hinein'); + $this->assert($mitMinus['max'] >= 2500.0, 'Und der positive'); + + $leer = Vermoegensentwicklung::skala([]); + $this->assertGreaterThan(0.0, $leer['schritt'], 'Ohne Werte bleibt die Skala brauchbar'); + } +} diff --git a/tests/e2e/specs/smoke.spec.js b/tests/e2e/specs/smoke.spec.js index aeddaf3..6fbd491 100644 --- a/tests/e2e/specs/smoke.spec.js +++ b/tests/e2e/specs/smoke.spec.js @@ -54,6 +54,48 @@ test.describe('Grundgerüst', () => { await expect(page.locator('.seitenleiste')).toContainText('Kontenübersicht') }) + test('Vermögensentwicklung zeigt zwölf gestapelte Monatsbalken', async ({ page }) => { + await anmelden(page) + + const kachel = page.locator('.kachel', { hasText: 'Vermögensentwicklung' }) + await expect(kachel.locator('svg.diagramm')).toBeVisible() + + // Zwölf Monate, jeder mit eigener Beschriftung unter dem Balken. + await expect(kachel.locator('.diagramm-beschriftung:not(.schwach)')).toHaveCount(12) + await expect(kachel.locator('.diagramm rect').first()).toBeVisible() + + // Jedes Balkenstück gehört zu einem Eintrag der Legende, keiner doppelt. + const farben = await kachel.locator('.legendenfarbe:not(.leer)').evaluateAll( + knoten => knoten.map(k => getComputedStyle(k).backgroundColor) + ) + expect(farben.length).toBeGreaterThan(0) + expect(new Set(farben).size).toBe(farben.length) + }) + + test('Schalter „nur aktive“ behält seinen Zustand', async ({ page }) => { + await anmelden(page) + + const schalter = page.locator('.kachel', { hasText: 'Vermögensentwicklung' }) + .locator('.schalter') + await expect(schalter).toContainText('nur aktive') + + // Ein früherer Lauf kann den Schalter umgelegt haben. + if (await schalter.getAttribute('aria-checked') === 'false') { + await schalter.click() + } + await expect(schalter).toHaveAttribute('aria-checked', 'true') + + await schalter.click() + await expect(schalter).toHaveAttribute('aria-checked', 'false') + + // Gespeichert, nicht nur angezeigt: Der Zustand überlebt den Neuaufruf. + await page.goto('/') + await expect(schalter).toHaveAttribute('aria-checked', 'false') + + await schalter.click() + await expect(schalter).toHaveAttribute('aria-checked', 'true') + }) + test('Einstellungsdialog zeigt alle Reiter', async ({ page }) => { await anmelden(page) await page.click('a[href="/einstellungen"]')