From 750dc69e56daacfa78d2cdf58b6e285dd703f470 Mon Sep 17 00:00:00 2001 From: Jordy Hoogeveen Date: Fri, 11 Sep 2026 17:11:11 +0200 Subject: [PATCH] dashboard tooltip update --- Changelog.md | 12 ++++++++++++ README.md | 2 +- frontend/package.json | 2 +- frontend/src/pages/DashboardTab.jsx | 16 +++++++++++----- package.json | 2 +- 5 files changed, 26 insertions(+), 8 deletions(-) diff --git a/Changelog.md b/Changelog.md index ab0ecc7..a10df3a 100644 --- a/Changelog.md +++ b/Changelog.md @@ -2,6 +2,18 @@ ## [Niet vrijgegeven] +### Opgelost +- De tooltip van de dashboardgrafiek viel buiten de tekening zodra vermogen en + inleg ver uit elkaar lagen. Hij werd boven het hoogste punt geplaatst en klapte + naar onderen als daar geen ruimte was — maar dat "onderen" rekende vanaf het + laagste punt, en met een kaart van 76px kwam hij dan onder het tekenvlak + terecht: over de datumlabels heen en half afgekapt. Precies in het midden van + de grafiek, waar je hem het meest gebruikt. De kaart staat nu náást de + hoverlijn (links of rechts, afhankelijk van waar de meeste ruimte is) en wordt + verticaal geklemd binnen het tekenvlak, dus hij past altijd + +## [1.0.6] - 2026-09-11 + ### Toegevoegd - De grafiek "Ontwikkeling van Eigen Vermogen" op het dashboard heeft een tweede lijn: de **cumulatief geïnvesteerde fiat**. Die is opgebouwd uit dezelfde diff --git a/README.md b/README.md index 392cfd1..3489dd5 100644 --- a/README.md +++ b/README.md @@ -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.5-8b5cf6?style=flat) +![Version](https://img.shields.io/badge/versie-1.0.6-8b5cf6?style=flat) ![Built with Claude](https://img.shields.io/badge/Gebouwd_met-Claude.ai-8b5cf6?style=flat&logo=anthropic&logoColor=white) VibeFinance dashboard diff --git a/frontend/package.json b/frontend/package.json index f1f922b..8fb2ccc 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "vibefinance-frontend", - "version": "1.0.5", + "version": "1.0.6", "private": true, "type": "module", "scripts": { diff --git a/frontend/src/pages/DashboardTab.jsx b/frontend/src/pages/DashboardTab.jsx index ac149f2..14db405 100644 --- a/frontend/src/pages/DashboardTab.jsx +++ b/frontend/src/pages/DashboardTab.jsx @@ -214,11 +214,17 @@ function MiniLineChart({ vData, fiatData, darkMode }) { const h = hovered; const tipW = 150, tipH = 76; - const tipX = h !== null ? Math.min(Math.max(xs[h] - tipW / 2, pl), W - tipW - 4) : 0; - // Ankeren op de hoogste van de twee punten, zodat de tooltip nooit over de - // andere lijn heen valt. - const tipAnker = h !== null ? Math.min(ys[h], fYs[h]) : 0; - const tipY = h !== null ? (tipAnker - tipH - 14 < pt ? Math.max(ys[h], fYs[h]) + 14 : tipAnker - tipH - 14) : 0; + // Náást de hoverlijn, niet erboven of eronder. Zodra de twee punten ver uit + // elkaar liggen is er verticaal geen ruimte voor een kaart van 76px: dan + // klapte hij naar onderen tot buiten de tekening, over de datumlabels heen en + // half afgekapt. Zijwaarts past hij altijd; de klemmen houden hem binnen het + // tekenvlak. + const naarRechts = h !== null && xs[h] < pl + iW / 2; + const tipX = h === null ? 0 : naarRechts + ? Math.min(xs[h] + 16, W - pr - tipW) + : Math.max(xs[h] - tipW - 16, pl); + const tipY = h === null ? 0 + : Math.max(pt, Math.min((ys[h] + fYs[h]) / 2 - tipH / 2, pt + iH - tipH)); const resultaat = h !== null ? vals[h] - fVals[h] : 0; return ( diff --git a/package.json b/package.json index 420e94b..5e05c69 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vibefinance", - "version": "1.0.6", + "version": "1.0.7", "description": "VibeFinance — persoonlijk vermogensbeheer", "private": true, "repository": "https://vibehoogie.duckdns.org/vibe/VibeFinance",