Versie 0.2.0

client/wealth/year-chart.js

@@ -0,0 +1,80 @@
+// Generated, do not edit. sha256:2b462247335f4413d5ae4038e57da8d4d3e70b4fb676fc84dcbba876e90e1c18
+import { loadCharting, readPalette } from '../ui/chart-setup.js';
+import { t } from '../i18n/index.js';
+import { fmtBase } from '../ui/format.js';
+
+let tipEl = null;
+const verberg = () => tipEl?.classList.remove('is-visible');
+
+function tip({ chart, tooltip }, rijen) {
+  if (!tipEl) {
+    tipEl = document.createElement('div');
+    tipEl.className = 'ring-tip';
+    document.body.appendChild(tipEl);
+    window.addEventListener('scroll', verberg, { capture: true, passive: true });
+  }
+  if (!tooltip.opacity || !tooltip.dataPoints?.length) { verberg(); return; }
+  const r = rijen[tooltip.dataPoints[0].dataIndex];
+  const regel = (label, bedrag) => {
+    const rij = document.createElement('span');
+    rij.className = 'ring-tip-row';
+    const naam = document.createElement('span');
+    naam.className = 'ring-tip-pct';
+    naam.textContent = label;
+    const val = document.createElement('span');
+    val.className = 'val';
+    val.textContent = fmtBase(bedrag || 0);
+    rij.append(naam, val);
+    return rij;
+  };
+  const kop = document.createElement('span');
+  kop.className = 'ring-tip-label';
+  kop.textContent = r.label;
+  tipEl.replaceChildren(kop,
+    regel(t('wealth.valueEnd'), r.waarde),
+    regel(t('wealth.investedNet'), r.inleg),
+    regel(t('wealth.result'), r.resultaat));
+  const box = chart.canvas.getBoundingClientRect();
+  tipEl.style.left = `${Math.round(box.left + tooltip.caretX)}px`;
+  tipEl.style.top = `${Math.round(box.top + tooltip.caretY)}px`;
+  tipEl.classList.add('is-visible');
+}
+
+export async function tekenJaarGrafiek(canvas, rijen) {
+  const Chart = await loadCharting();
+  const pal = readPalette();
+  const resultaat = rijen.map(r => r.resultaat || 0);
+  const grafiek = new Chart(canvas, {
+    data: {
+      labels: rijen.map(r => r.label),
+      datasets: [
+        { type: 'bar', label: t('wealth.investedNet'), data: rijen.map(r => r.inleg || 0),
+          backgroundColor: pal.accentFaint, order: 2, yAxisID: 'y' },
+        { type: 'bar', label: t('wealth.result'), data: resultaat,
+          backgroundColor: resultaat.map(v => (v >= 0 ? pal.sigGreen : pal.sigRed)), order: 2, yAxisID: 'y' },
+        { type: 'line', label: t('wealth.valueEnd'), data: rijen.map(r => r.waarde || 0),
+          borderColor: pal.accent, backgroundColor: pal.accent, borderWidth: 2, pointRadius: 3,
+          cubicInterpolationMode: 'monotone', order: 1, yAxisID: 'waarde' },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      interaction: { mode: 'index', intersect: false },
+      scales: {
+        x: { grid: { display: false }, ticks: { color: pal.textSec } },
+        y: { ticks: { display: false }, grid: { color: pal.grid }, border: { display: false } },
+        waarde: { position: 'right', display: false, beginAtZero: true },
+      },
+      plugins: {
+        legend: { display: true, position: 'bottom', labels: { color: pal.textSec, boxWidth: 10, boxHeight: 10 } },
+        tooltip: { enabled: false, external: ctx => tip(ctx, rijen) },
+      },
+    },
+  });
+  canvas.addEventListener('mouseleave', verberg);
+  const destroy = grafiek.destroy.bind(grafiek);
+  grafiek.destroy = () => { verberg(); destroy(); };
+  return grafiek;
+}