Versie 0.3.3

client/widgets/return.js

@@ -1,5 +1,5 @@
-// Generated, do not edit. sha256:ae0f941ec7a830f9f94ae85e37de1157b6e15f16cc2e9dc3f0c5c7243d3eaafd
-import { listAssets } from '../data/assets.js';
+// Generated, do not edit. sha256:dbfabff3706a8f2f1755ee61d42f71fcabb5b42dd0ab60143a9e2b568cf13043
+import { listAssets, listBookableAssets } from '../data/assets.js';
 import { listAccounts } from '../data/accounts.js';
 import { getPref, setPref } from '../data/preferences.js';
 import { t } from '../i18n/index.js';
@@ -11,8 +11,12 @@ import { rangeLabel, rangeCycleButton, wireRangeCycle } from '../ui/range-cycle.
 import { isOwnWealth } from '../../shared/wealth-scope.js';
 import { ENUMS, TARGETS, targetHash } from '../../shared/config.js';
 import { dagreeksVanNu } from '../wealth/series.js';
-import { periodChoices } from '../wealth/return-view.js';
+import { periodChoices, flatLine } from '../wealth/return-view.js';
 import { lineForData, drawLine } from '../wealth/return-dialog.js';
+import { drawReturnChart } from '../wealth/return-chart.js';
+import { localDateNl } from '../../shared/time.js';
+
+const localTodayIso = () => new Date().toISOString().slice(0, 10);
 
 const PREF_SCOPE = 'widget.return';
 const RANGES = Object.freeze({ day: 1, week: 7, month: 30, year: 365, all: 0 });
@@ -62,14 +66,27 @@ export async function renderReturnWidget(host, instance) {
     const held = assets.filter(a => (reeks.perAsset?.get(a.id) || []).some(v => v > 0));
     const periods = periodChoices(reeks.dagen?.length || 0, null);
 
+    const empty = !reeks.dagen?.length;
     const draw = async () => {
       const g = ++gen;
       const btn = host.querySelector('.range-cycle-btn');
       if (btn) btn.textContent = rangeLabel(range);
+      if (empty) {
+        const flat = flatLine(RANGES[range] || RANGES.month, localTodayIso());
+        amountEl.innerHTML = `<span class="val">${esc(fmtBaseSigned(0, colouredSigns()))}</span>`;
+        pctEl.innerHTML = `<span class="delta ${pctTone(0)}">${esc(fmtPct(0, { signs: colouredSigns() }))}</span>`;
+        chart?.destroy();
+        const canvas = host.querySelector('[data-return-chart]');
+        const c = canvas ? await drawReturnChart(canvas, flat.points, flat.labels.map(d => localDateNl(`${d}T00:00:00Z`))).catch(() => null) : null;
+        if (g !== gen || !host.isConnected) { c?.destroy(); return; }
+        chart = c;
+        return;
+      }
       const venster = periods.find(p => p.key === PERIOD_OF[range])?.venster || null;
       const line = lineForData({ reeks, assets: held, data, venster });
+      const tone = line.amount > 0.005 ? ' t-pos' : line.amount < -0.005 ? ' t-neg' : '';
       amountEl.innerHTML = line.amount == null ? '-'
-        : `<span class="val">${esc(fmtBaseSigned(line.amount, 'both'))}</span>`;
+        : `<span class="val${tone}">${esc(fmtBaseSigned(line.amount, colouredSigns()))}</span>`;
       pctEl.innerHTML = line.pct == null ? '' : `<span class="delta ${pctTone(line.pct, { fine: range === 'day' })}">${esc(fmtPct(line.pct, { fine: range === 'day', signs: colouredSigns() }))}</span>`;
       chart?.destroy();
       chart = null;
@@ -94,7 +111,7 @@ export async function renderReturnWidget(host, instance) {
 }
 
 export async function renderReturnSettings(host, instance, commit) {
-  const assets = (await listAssets()).sort(byKindAndLabel);
+  const assets = (await listBookableAssets()).sort(byKindAndLabel);
   const current = dataOf(instance);
   const opt = (value, label) => `<option value="${esc(value)}"${value === current ? ' selected' : ''}>${esc(label)}</option>`;
   const kinds = ENUMS.ASSET_KIND.filter(k => assets.some(a => a.kind === k));