bugfix dashboard

This commit is contained in:
Jordy Hoogeveen
2026-09-17 17:25:41 +02:00
parent ad45e372e6
commit 2420a00777
6 changed files with 45 additions and 11 deletions
+13 -2
View File
@@ -10,7 +10,7 @@ Eigen vermogen · Schulden · Voortgang · Gebruikersbeheer
![Node.js](https://img.shields.io/badge/Node.js_22-339933?style=flat&logo=node.js&logoColor=white)
![PostgreSQL](https://img.shields.io/badge/PostgreSQL_18-4169E1?style=flat&logo=postgresql&logoColor=white)
![Docker](https://img.shields.io/badge/Docker_Compose-2496ED?style=flat&logo=docker&logoColor=white)
![Version](https://img.shields.io/badge/versie-1.0.8-8b5cf6?style=flat)
![Version](https://img.shields.io/badge/versie-1.0.9-8b5cf6?style=flat)
![Built with Claude](https://img.shields.io/badge/Gebouwd_met-Claude.ai-8b5cf6?style=flat&logo=anthropic&logoColor=white)
<img src="docs/screenshot-dashboard.png" alt="VibeFinance dashboard" width="820">
@@ -181,6 +181,16 @@ inleglijn is per definitie gelijk aan de KPI "Totaal geïnvesteerde fiat" — be
rekenen het oudste voortgangsmoment als startinleg en tellen daar de stortingen
per rij bij op.
De x-as noemt maanden (`sep '26`), niet losse datums: de grafiek rekent uit
hoeveel labels er naast elkaar passen en toont er zoveel, terugtellend vanaf het
laatste punt zodat dat er altijd bij staat. Bij een langere reeks dunt hij
vanzelf verder uit. De exacte dag lees je in de tooltip. De vermogenslijn is een
Catmull-Rom spline; de inleglijn krijgt bewust rechte segmenten, omdat een
spline tussen twee punten iets buiten hun bereik uitschiet en dat bij een reeks
die nooit terugloopt een daling zou tekenen die er niet is. Beide lijnen delen
de tekenhulp in
[`frontend/src/utils/grafiek.js`](frontend/src/utils/grafiek.js).
Onder **Instellingen** kies je een van de negen kleurthema's. Thema en
licht/donker staan los van elkaar: het thema levert het accent, de schakelaar de
ondergrond. De paletten staan in
@@ -233,7 +243,8 @@ vibefinance/
│ ├── main.jsx
│ ├── version.js # Draaiende versie (__APP_VERSION__ uit de build)
│ ├── constants/ # index.js (kleuren, tabs, begindata), themas.js
│ ├── utils/ # format.js (bedragen/datums), storage.js
│ ├── utils/ # format.js (bedragen/datums), storage.js,
│ │ # grafiek.js (SVG-padberekening)
│ ├── hooks/ # useTheme, useUpdateCheck, useKolomBreedtes
│ ├── context/ # AppContext (global state + API sync + backup)
│ ├── components/