1445 lines
66 KiB
JavaScript
1445 lines
66 KiB
JavaScript
// Generated, do not edit. sha256:57bab9aa8f9259dfb0fc3db59e9e7a9ee92e130476263caf08353fbfd938fe6a
|
||
import { accountHoldings, assetPositionsByAccount, positionsByAsset } from '../data/positions.js';
|
||
import { listAssets } from '../data/assets.js';
|
||
import { isOwnWealth } from '../../shared/wealth-scope.js';
|
||
import { listAssetTrades } from '../data/events.js';
|
||
import { listAccounts } from '../data/accounts.js';
|
||
import { metalHoldings } from '../data/metals.js';
|
||
import { latestPricePoint } from '../data/price-history.js';
|
||
import { herkomstContext } from '../wealth/data.js';
|
||
import { lastSpotSource, basePriceOf } from '../price/providers.js';
|
||
import { originHtml, originsHtml, infoLinesHtml } from '../ui/price-origin.js';
|
||
import { provenanceOfRow, provenanceOn, originFrom, liveOrigin } from '../../shared/price-provenance.js';
|
||
import { t } from '../i18n/index.js';
|
||
import { assetLabel, assetLabelHtml, byKindAndLabel } from '../ui/asset-label.js';
|
||
import { fmtAmount, fmtBase, fmtBasePrice, fmtBaseSigned, colouredSigns, fmtPct, fmtUnit, priceFromBase, subline, val, isMetal, isBaseAsset } from '../ui/format.js';
|
||
import { CONFIG, ENUMS } from '../../shared/config.js';
|
||
import { loadFiat } from '../ui/fiat.js';
|
||
import * as loading from '../ui/loading.js';
|
||
import * as dialog from '../ui/dialog.js';
|
||
import { tekenVerdeling } from '../wealth/chart.js';
|
||
import { accountSeries, dagreeksVanNu, jaarVensters, meetVenster, metSpotVandaag, seriesFor, windowDelta, windowResult } from '../wealth/series.js';
|
||
import { accountCards } from '../wealth/account-cards.js';
|
||
import { create as createFilter } from '../ui/filter.js';
|
||
import { windowTwr } from '../wealth/performance.js';
|
||
import { tekenJaarGrafiek } from '../wealth/year-chart.js';
|
||
import { mountSparkline } from '../ui/sparkline.js';
|
||
import { openReturnDialog, mountReturnPanel, refreshReturn } from '../wealth/return-dialog.js';
|
||
import { create as createTabs } from '../ui/tabs.js';
|
||
import { notesHtml, mountNotes } from '../ui/notes.js';
|
||
import { ARROW_DOWN, ARROW_UP, CHEVRON_RIGHT } from '../ui/icons.js';
|
||
import { getPref, setPref } from '../data/preferences.js';
|
||
import { esc } from '../ui/escape.js';
|
||
import { emptyStateHtml } from '../ui/empty-state.js';
|
||
import { ALL_YEARS, choiceToText, choiceFromText, withoutYear, yearsIn } from '../wealth/year-range.js';
|
||
import { sameSelection, selectionFromStored, hiddenFromStored, hiddenAfterFilter, splitHidden,
|
||
hiddenKindsFromStored, accountKindItems, accountKindOf, NO_ACCOUNT_KIND } from '../wealth/selection.js';
|
||
import { setPageHint, SAMPLES } from '../ui/page-hint.js';
|
||
import { assetMetrics, combinePositions } from '../../shared/wealth-metrics.js';
|
||
import { localDateNl, nowUtcIso } from '../../shared/time.js';
|
||
|
||
export const title = () => t('wealth.title');
|
||
|
||
const BASE = CONFIG.METALS.BASE_DECIMALS;
|
||
const DASH = '-';
|
||
const gekleurd = () => ({ signs: colouredSigns() });
|
||
|
||
export const headerInColumn = true;
|
||
|
||
export async function render(el) {
|
||
el.innerHTML = `<div id="vm"></div>`;
|
||
const host = el.querySelector('#vm');
|
||
loading.show(host, 'cards', { count: 3 });
|
||
load(host);
|
||
}
|
||
|
||
async function standenOp(peil, koersVan = null, toon = LEEG, herkomstVoor = null, { holdings = null } = {}) {
|
||
const [alle, perAccount] = await Promise.all([
|
||
positionsByAsset(peil ?? undefined, { ownOnly: ownOnly() }),
|
||
holdings ?? accountHoldings(alleAccounts.filter(a => !ownOnly() || isOwnWealth(a)).map(a => a.id), peil ?? undefined),
|
||
]);
|
||
const positions = alle.filter(p => p.net !== 0 || toon.has(p.id));
|
||
const assets = positions.map(p => ({
|
||
id: p.id, symbol: p.symbol, name: p.name, kind: p.kind, decimals: p.decimals,
|
||
unit: p.unit, subunit: p.subunit, displayUnit: p.displayUnit,
|
||
}));
|
||
|
||
let koersen;
|
||
let herkomsten = positions.map(() => null);
|
||
if (koersVan) {
|
||
koersen = positions.map(p => koersVan(p.id));
|
||
if (herkomstVoor) herkomsten = positions.map((p, i) => herkomstVoor(p, koersen[i]));
|
||
} else {
|
||
const spot = await loadFiat(assets);
|
||
const ctx = await herkomstContext();
|
||
const lastStored = async id => { try { return await latestPricePoint(id); } catch { return null; } };
|
||
const priceOf = async id => {
|
||
const s = spot.get(id);
|
||
const prijs = basePriceOf(s);
|
||
if (prijs != null) {
|
||
const asset = assets.find(a => a.id === id);
|
||
return { fiatPrice: prijs, origin: liveOrigin(prijs, lastSpotSource(asset)) };
|
||
}
|
||
const rij = await lastStored(id);
|
||
if (!rij) return { fiatPrice: null, origin: null };
|
||
return { fiatPrice: rij.fiatPrice, origin: originFrom(provenanceOfRow(rij, { manualProviderId: ctx.manualId }), ctx.names) };
|
||
};
|
||
const uit = await Promise.all(positions.map(p => priceOf(p.id)));
|
||
koersen = uit.map(u => u.fiatPrice);
|
||
herkomsten = uit.map(u => u.origin);
|
||
}
|
||
|
||
let total = 0;
|
||
const kaarten = positions.map((p, i) => {
|
||
const asset = assets.find(a => a.id === p.id);
|
||
const fiatPrice = koersen[i];
|
||
const k = assetMetrics(p, fiatPrice);
|
||
if (k.value != null) total += k.value;
|
||
return { asset, p, m: { fiatPrice, value: k.value, avgMain: k.avgPrice, unrealized: k.unrealized,
|
||
avgPremium: k.avgPremium, invested: k.invested, origin: herkomsten[i] } };
|
||
});
|
||
|
||
if (!ownOnly() && excludedAccounts.length) await splitsEigenEnBeheerd(kaarten, perAccount, peil);
|
||
|
||
kaarten.sort((a, b) => byKindAndLabel(a.asset, b.asset));
|
||
|
||
return {
|
||
kaarten, total, holdings: perAccount,
|
||
invested: kaarten.reduce((s, k) => s + k.m.invested, 0),
|
||
unrealized: kaarten.reduce((s, k) => s + (k.m.unrealized ?? 0), 0),
|
||
};
|
||
}
|
||
|
||
async function load(host) {
|
||
if (verdeling) { verdeling.destroy(); verdeling = null; }
|
||
ringenBelofte = null;
|
||
hoverGekoppeld = false;
|
||
selectie = null;
|
||
reeksBelofte = null;
|
||
getekendPeil = null;
|
||
nuReeks = null;
|
||
getekendVenster = null;
|
||
keuze = keuzeUitTekst(await getPref('page.wealth', 'year', String(new Date().getFullYear())));
|
||
alleAccounts = await listAccounts();
|
||
excludedAccounts = alleAccounts.filter(a => !isOwnWealth(a));
|
||
showAll = excludedAccounts.length > 0
|
||
&& (await getPref('page.wealth', 'showAll', false).catch(() => false)) === true;
|
||
const bewaard = await getPref('page.wealth', 'selection', null).catch(() => null);
|
||
verborgen = hiddenFromStored(await getPref('page.wealth', 'hidden', []).catch(() => []));
|
||
verborgenSoorten = hiddenKindsFromStored(await getPref('page.wealth', 'hiddenAccountKinds', []).catch(() => []), ENUMS.ACCOUNT_KIND);
|
||
groepering = (await getPref('page.wealth', 'grouping', GROEP.ASSET).catch(() => GROEP.ASSET)) === GROEP.ACCOUNT
|
||
? GROEP.ACCOUNT : GROEP.ASSET;
|
||
|
||
const wachtOpReeks = keuze !== ALLE_JAREN && keuze.tot < new Date().getFullYear();
|
||
if (wachtOpReeks && !reeksBelofte) reeksBelofte = reeksOphalen();
|
||
|
||
nuStanden = await standenOp(null);
|
||
if (!nuStanden.kaarten.length && ownOnly()) {
|
||
showAll = true;
|
||
if (reeksBelofte) reeksBelofte = reeksOphalen();
|
||
nuStanden = await standenOp(null);
|
||
}
|
||
if (!nuStanden.kaarten.length) {
|
||
host.innerHTML = `<div class="page-header"><h1 class="page-title">${t('wealth.title')}</h1></div>`
|
||
+ emptyStateHtml(t('wealth.none'));
|
||
return;
|
||
}
|
||
const holdings = await metalHoldings({ ownOnly: ownOnly() });
|
||
|
||
const kolom = `
|
||
<aside class="page-aside">
|
||
<div class="wealth-years" data-jaren></div>
|
||
<div class="wealth-aside-total">
|
||
<div class="wealth-aside-head">
|
||
<span class="t-label">${t('wealth.total')}</span>
|
||
${excludedAccounts.length ? `<label class="wealth-all" title="${esc(t('wealth.showAllTip'))}"><span class="toggle-switch"><input type="checkbox" data-wealth-all aria-label="${esc(t('wealth.showAllTip'))}"${showAll ? ' checked' : ''}><span class="toggle-track"></span></span></label>` : ''}
|
||
<button type="button" class="wealth-detail-btn" data-jaaroverzicht title="${esc(t('wealth.openYearOverview'))}"
|
||
aria-label="${esc(t('wealth.openYearOverview'))}">${CHEVRON_RIGHT}</button>
|
||
</div>
|
||
<div class="t-num-lg" data-som="total">…</div>
|
||
<div class="wealth-header-stats">
|
||
${stat(t('wealth.invested'), '<span data-som="invested">…</span>')}
|
||
${stat(t('wealth.unrealized'), '<span data-som="unrealized">…</span>')}
|
||
${stat(t('wealth.result'), '<span data-resultaat="totaal" class="t-muted-cell">…</span>')}
|
||
${stat(`${t('wealth.twrTotal')}<button type="button" class="wealth-detail-btn wealth-detail-btn--inline" data-rendement
|
||
title="${esc(t('wealth.openReturn'))}" aria-label="${esc(t('wealth.openReturn'))}">${CHEVRON_RIGHT}</button>`,
|
||
`<span data-twr="totaal" class="t-muted-cell">…</span>`)}
|
||
${statLeeg(t('wealth.unexplained'), 'totaal')}
|
||
</div>
|
||
</div>
|
||
<div class="wealth-group fbar fbar--chip" role="group" aria-label="${esc(t('wealth.groupBy'))}" data-groepering></div>
|
||
<div class="wealth-filter" data-filter></div>
|
||
<div class="wealth-header-rings">
|
||
<figure class="wealth-ring wealth-ring--kinds">
|
||
<figcaption class="t-label">${t('wealth.ringKinds')}</figcaption>
|
||
<div class="wealth-ring-plot"><canvas data-ring="kinds" aria-label="${esc(t('wealth.ringKindsLabel'))}"></canvas></div>
|
||
</figure>
|
||
<figure class="wealth-ring wealth-ring--assets">
|
||
<figcaption class="t-label">${t('wealth.ringAssets')}</figcaption>
|
||
<div class="wealth-ring-plot"><canvas data-ring="assets" aria-label="${esc(t('wealth.ringAssetsLabel'))}"></canvas></div>
|
||
</figure>
|
||
</div>
|
||
</aside>`;
|
||
|
||
const reeksVooraf = wachtOpReeks ? await reeksBelofte.catch(() => null) : null;
|
||
|
||
host.innerHTML = `<div class="page-layout">${kolom}`
|
||
+ `<div class="page-body">`
|
||
+ `<div class="page-header"><h1 class="page-title">${t('wealth.title')}</h1></div>`
|
||
+ `<div class="wealth-grid"></div></div></div>`;
|
||
|
||
selectie = bewaard ? selectionFromStored(bewaard) : null;
|
||
koppelGroepering(host);
|
||
|
||
legendaAanmelden(host);
|
||
buitenRegels()
|
||
.then(regels => { if (regels.length && host.isConnected) legendaAanmelden(host, regels); })
|
||
.catch(err => console.warn('[vermogen] buiten het eigen vermogen niet gewaardeerd:', err));
|
||
|
||
let ringenAlGetekend = false;
|
||
if (reeksVooraf) {
|
||
loading.show(host.querySelector('.wealth-grid'), 'cards', { count: Math.max(1, Math.min(nuStanden.kaarten.length, 6)) });
|
||
vulJaarkeuze(host, reeksVooraf);
|
||
await toonJaar(host, reeksVooraf);
|
||
ringenAlGetekend = getekendPeil !== null;
|
||
if (!ringenAlGetekend) tekenKaarten(host, nuStanden, `${PEIL_NU}|`);
|
||
} else {
|
||
tekenKaarten(host, nuStanden, `${PEIL_NU}|`);
|
||
vulTijdreeks(host);
|
||
}
|
||
if (selectie && !kaartenVoor(host, selectie).length) pasSelectieToe(host, null);
|
||
|
||
host.addEventListener('click', e => {
|
||
if (e.target.closest('[data-jaaroverzicht]')) { openJaaroverzicht(); return; }
|
||
if (e.target.closest('[data-rendement]')) { openRendement(); return; }
|
||
if (e.composedPath().some(n => n instanceof Element && n.matches('[data-groepering], [data-filter]'))) return;
|
||
const detailAccount = e.target.closest('[data-detail-account]');
|
||
if (detailAccount) {
|
||
const c = getekendeAccounts.find(x => accountSleutel(x) === Number(detailAccount.dataset.detailAccount));
|
||
if (c) openAccountDetail(c);
|
||
return;
|
||
}
|
||
const accountKaart = e.target.closest('[data-account]');
|
||
if (accountKaart) {
|
||
const c = getekendeAccounts.find(x => accountSleutel(x) === Number(accountKaart.dataset.account));
|
||
zetSelectie(host, c ? { account: accountSleutel(c), assetIds: c.assetIds } : null);
|
||
return;
|
||
}
|
||
const detail = e.target.closest('[data-detail]');
|
||
if (detail) {
|
||
const id = Number(detail.dataset.detail);
|
||
const k = nuStanden.kaarten.find(x => x.asset.id === id)
|
||
|| (getekendeStanden?.kaarten || []).find(x => x.asset.id === id);
|
||
if (k) openDetail(k, holdings);
|
||
return;
|
||
}
|
||
const kaart = e.target.closest('[data-asset]');
|
||
zetSelectie(host, kaart ? { assetIds: [Number(kaart.dataset.asset)] } : null);
|
||
});
|
||
host.addEventListener('change', async e => {
|
||
const box = e.target.closest('[data-wealth-all]');
|
||
if (!box) return;
|
||
await setPref('page.wealth', 'showAll', box.checked).catch(() => {});
|
||
if (host.isConnected) render(host.parentElement);
|
||
});
|
||
|
||
if (!ringenAlGetekend) tekenRingen(host, nuStanden.kaarten, standenGen);
|
||
|
||
spotHost = host;
|
||
if (!spotGebonden) { document.addEventListener('tick:spot', verversSpot); spotGebonden = true; }
|
||
}
|
||
|
||
let spotHost = null;
|
||
let spotGebonden = false;
|
||
let nuReeks = null;
|
||
let getekendVenster = null;
|
||
|
||
async function verversSpot() {
|
||
const host = spotHost;
|
||
if (!host || !host.isConnected) { spotHost = null; return; }
|
||
if (!nuReeks || !getekendVenster) return;
|
||
if (peilVan(nuReeks, getekendVenster) !== PEIL_NU) return;
|
||
|
||
const gen = ++standenGen;
|
||
let standen;
|
||
try {
|
||
const holdings = nuStanden.holdings;
|
||
nuStanden = await standenOp(null, null, LEEG, null, { holdings });
|
||
const bewogen = assetsInVenster(nuReeks, getekendVenster);
|
||
const nuHeeft = new Set(nuStanden.kaarten.map(k => k.asset.id));
|
||
const extra = [...bewogen].some(id => !nuHeeft.has(id));
|
||
standen = extra ? await standenOp(null, null, bewogen, null, { holdings }) : nuStanden;
|
||
} catch (err) { console.warn('[vermogen] spot niet ververst:', err); return; }
|
||
if (gen !== standenGen || !host.isConnected) return;
|
||
|
||
const prices = new Map();
|
||
for (const k of standen.kaarten) if (k.m.fiatPrice != null) prices.set(k.asset.id, k.m.fiatPrice);
|
||
metSpotVandaag(nuReeks, standen.kaarten.map(k => k.asset), prices);
|
||
|
||
tekenKaarten(host, standen, getekendPeil);
|
||
vulSparklines(host, nuReeks, getekendVenster);
|
||
vulTwr(host, nuReeks, getekendVenster);
|
||
refreshReturn();
|
||
}
|
||
|
||
const ringHaken = host => ({
|
||
onHover: sel => { markeerKaarten(host, sel); verdeling?.markeer(sel); },
|
||
onSelect: sel => zetSelectie(host, sel),
|
||
});
|
||
|
||
function tekenKaarten(host, standen, peil) {
|
||
const grid = host.querySelector('.wealth-grid');
|
||
if (!grid) return;
|
||
if (groepering === GROEP.ACCOUNT) {
|
||
getekendeAccounts = accountCards({ kaarten: standen.kaarten, holdings: standen.holdings || [],
|
||
accounts: alleAccounts, toon: accountsInVenster(nuReeks, getekendVenster) });
|
||
const { shown } = splitHidden(getekendeAccounts, verborgenSoorten, accountKindOf);
|
||
grid.innerHTML = shown.map(c => accountCardHtml(c, standen.total)).join('');
|
||
const soortLabel = kind => (kind === NO_ACCOUNT_KIND ? t('wealth.noAccount') : t(`enums.account_kind.${kind}`));
|
||
tekenFilter(host, accountKindItems(getekendeAccounts).map(kind => ({ id: kind, label: soortLabel(kind) })), verborgenSoorten);
|
||
} else {
|
||
const { shown } = splitHidden(standen.kaarten, verborgen);
|
||
grid.innerHTML = shown.map(k => cardHtml(k.asset, k.p, k.m, standen.total)).join('');
|
||
tekenFilter(host, standen.kaarten.map(k => ({ id: k.asset.id, label: k.asset.symbol, title: k.asset.name })), verborgen);
|
||
}
|
||
const zet = (sleutel, html) => {
|
||
const el = host.querySelector(`[data-som="${sleutel}"]`);
|
||
if (el) el.innerHTML = html;
|
||
};
|
||
const herkomsten = standen.kaarten.filter(k => k.m.value != null).map(k => ({ origin: k.m.origin, asset: k.asset }));
|
||
zet('total', `<span class="po-host">${val(fmtBase(standen.total))}${originsHtml(herkomsten)}</span>`);
|
||
zet('invested', val(fmtBase(standen.invested)));
|
||
zet('unrealized', kleurBedrag(standen.unrealized));
|
||
getekendeStanden = standen;
|
||
getekendPeil = peil;
|
||
pasSelectieToe(host, selectie);
|
||
}
|
||
|
||
let reeksBelofte = null;
|
||
|
||
let excludedAccounts = [];
|
||
let showAll = false;
|
||
const ownOnly = () => excludedAccounts.length > 0 && !showAll;
|
||
const scopeOf = id => excludedAccounts.find(a => a.id === id)?.wealthScope ?? null;
|
||
const reeksOphalen = () => dagreeksVanNu({
|
||
excludedAccounts: ownOnly() ? new Set(excludedAccounts.map(a => a.id)) : null,
|
||
managedAccounts: new Set(excludedAccounts.map(a => a.id)),
|
||
});
|
||
const reeksNodig = () => (reeksBelofte ??= reeksOphalen());
|
||
|
||
async function splitsEigenEnBeheerd(kaarten, perAccount, peil) {
|
||
const beheerd = new Set(excludedAccounts.map(a => a.id));
|
||
const metBeheerd = kaarten.filter(k => perAccount.some(h => h.assetId === k.asset.id && beheerd.has(h.accountId)));
|
||
if (!metBeheerd.length) return;
|
||
const [eigenRijen, reeks] = await Promise.all([
|
||
positionsByAsset(peil ?? undefined, { ownOnly: true }),
|
||
reeksNodig().catch(() => null),
|
||
]);
|
||
const potten = reeks?.beheerdeKostprijs?.(peil ?? nowUtcIso()) ?? new Map();
|
||
const leeg = { buy_amount: 0, buy_spot_raw: 0, buy_fee_total: 0, buy_events: 0, gift_amount: 0 };
|
||
for (const k of metBeheerd) {
|
||
const eigenRij = eigenRijen.find(r => r.id === k.asset.id) ?? { ...k.p, ...leeg, net: 0 };
|
||
const eigen = assetMetrics(eigenRij, k.m.fiatPrice);
|
||
const posities = new Map();
|
||
const delen = perAccount.filter(h => h.assetId === k.asset.id && beheerd.has(h.accountId)).map(h => {
|
||
const pot = potten.get(`${h.accountId}|${k.asset.id}`) ?? leeg;
|
||
const positie = { decimals: k.asset.decimals, net: h.saldo, ...pot };
|
||
posities.set(h.accountId, positie);
|
||
const m = assetMetrics(positie, k.m.fiatPrice);
|
||
return { accountId: h.accountId, saldo: h.saldo, cost: m.avgCost != null ? m.units * m.avgCost : null, unrealized: m.unrealized };
|
||
});
|
||
const alle = [{ saldo: eigenRij.net, unrealized: eigen.unrealized }, ...delen].filter(d => d.saldo);
|
||
const vanDerden = delen.filter(d => d.saldo && scopeOf(d.accountId) === 'managed');
|
||
const derden = vanDerden.length
|
||
? assetMetrics(combinePositions(vanDerden.map(d => posities.get(d.accountId))), k.m.fiatPrice) : null;
|
||
k.m = { ...k.m,
|
||
unrealized: alle.some(d => d.unrealized == null) ? null : alle.reduce((s, d) => s + d.unrealized, 0),
|
||
avgMain: eigen.avgPrice, avgPremium: eigen.avgPremium, invested: eigen.invested,
|
||
eigen: { net: eigenRij.net, unrealized: eigen.unrealized }, beheerd: delen,
|
||
derden: derden && { avgMain: derden.avgPrice, avgPremium: derden.avgPremium, invested: derden.invested,
|
||
unrealized: derden.unrealized } };
|
||
}
|
||
}
|
||
|
||
const PEIL_NU = 'nu';
|
||
const LEEG = new Set();
|
||
const LEEG_MAP = new Map();
|
||
let nuStanden = { kaarten: [], total: 0, invested: 0, unrealized: 0 };
|
||
let getekendeStanden = null;
|
||
let getekendPeil = null;
|
||
let standenGen = 0;
|
||
const ALLE_JAREN = ALL_YEARS;
|
||
const keuzeTekst = choiceToText;
|
||
const keuzeUitTekst = choiceFromText;
|
||
const zonderJaar = withoutYear;
|
||
const jarenIn = yearsIn;
|
||
let keuze = { van: new Date().getFullYear(), tot: new Date().getFullYear() };
|
||
|
||
function vulTijdreeks(host) {
|
||
if (!reeksBelofte) reeksBelofte = reeksOphalen();
|
||
reeksBelofte
|
||
.then(reeks => { vulJaarkeuze(host, reeks); toonJaar(host, reeks); })
|
||
.catch(err => console.warn('[vermogen] tijdreeks niet getekend:', err));
|
||
}
|
||
|
||
function vensterVan(reeks) {
|
||
const heel = { van: 0, tot: reeks.dagen.length - 1 };
|
||
if (keuze === ALLE_JAREN) return heel;
|
||
const vensters = jaarVensters(reeks.dagen);
|
||
const gevonden = jarenIn(keuze).map(j => vensters.get(j)).filter(Boolean);
|
||
if (!gevonden.length) return heel;
|
||
return { van: gevonden[0].van, tot: gevonden[gevonden.length - 1].tot };
|
||
}
|
||
|
||
function peilVan(reeks, venster) {
|
||
const meet = meetVenster(venster, reeks.dagen.length);
|
||
if (meet.tot >= reeks.dagen.length - 1) return PEIL_NU;
|
||
return `${reeks.dagen[meet.tot]}T23:59:59.999Z`;
|
||
}
|
||
|
||
function assetsInVenster(reeks, venster) {
|
||
const uit = new Set();
|
||
for (const [id, eenheden] of (reeks.eenhedenPerAsset || LEEG_MAP)) {
|
||
for (let i = venster.van; i <= venster.tot; i++) {
|
||
if (eenheden[i]) { uit.add(id); break; }
|
||
}
|
||
}
|
||
const raakt = dagen => (dagen || []).some(i => i >= venster.van && i <= venster.tot);
|
||
for (const [id, dagen] of (reeks.aankopen || LEEG_MAP)) if (raakt(dagen)) uit.add(id);
|
||
for (const [id, dagen] of (reeks.verkopen || LEEG_MAP)) if (raakt(dagen)) uit.add(id);
|
||
return uit;
|
||
}
|
||
|
||
async function toonJaar(host, reeks) {
|
||
const venster = vensterVan(reeks);
|
||
nuReeks = reeks;
|
||
getekendVenster = venster;
|
||
vulSparklines(host, reeks, venster);
|
||
vulTwr(host, reeks, venster);
|
||
await zetStanden(host, reeks, venster);
|
||
}
|
||
|
||
async function zetStanden(host, reeks, venster) {
|
||
const peil = peilVan(reeks, venster);
|
||
const bewogen = assetsInVenster(reeks, venster);
|
||
const nuHeeft = new Set(nuStanden.kaarten.map(k => k.asset.id));
|
||
const extra = [...bewogen].filter(id => !nuHeeft.has(id)).sort((a, b) => a - b);
|
||
const sleutel = `${peil}|${extra.join(',')}`;
|
||
if (sleutel === getekendPeil) { if (groepering === GROEP.ACCOUNT) hertekenRaster(host); return; }
|
||
const gen = ++standenGen;
|
||
let standen = nuStanden;
|
||
if (peil !== PEIL_NU || extra.length) {
|
||
const dagIndex = meetVenster(venster, reeks.dagen.length).tot;
|
||
const koersVan = id => reeks.koersPerAsset?.get(id)?.[dagIndex] ?? null;
|
||
const herkomstVoor = async () => {
|
||
const ctx = await herkomstContext();
|
||
const dag = reeks.dagen[dagIndex];
|
||
return (p, price) => (price == null ? null : originFrom(provenanceOn(reeks.rijenPerAsset?.get(p.id) || [], dag,
|
||
{ assetKind: p.kind, manualProviderId: ctx.manualId, usedPrice: price }), ctx.names));
|
||
};
|
||
try {
|
||
standen = peil === PEIL_NU
|
||
? await standenOp(null, null, bewogen)
|
||
: await standenOp(peil, koersVan, bewogen, await herkomstVoor());
|
||
} catch (err) { console.warn('[vermogen] standen van de periode niet opgehaald:', err); return; }
|
||
if (gen !== standenGen || !host.isConnected) return;
|
||
}
|
||
tekenKaarten(host, standen, sleutel);
|
||
vulSparklines(host, reeks, venster);
|
||
vulTwr(host, reeks, venster);
|
||
await tekenRingen(host, standen.kaarten, gen);
|
||
}
|
||
|
||
async function tekenRingen(host, kaarten, gen) {
|
||
const cvSoorten = host.querySelector('[data-ring="kinds"]');
|
||
const cvAssets = host.querySelector('[data-ring="assets"]');
|
||
if (!cvSoorten && !cvAssets) return;
|
||
try { await ringenBelofte; } catch { }
|
||
verdeling?.destroy();
|
||
verdeling = null;
|
||
try {
|
||
ringenBelofte = tekenVerdeling(cvSoorten, cvAssets, kaarten, ringHaken(host));
|
||
const v = await ringenBelofte;
|
||
if (gen !== standenGen || !host.isConnected) { v?.destroy(); return; }
|
||
verdeling = v;
|
||
if (!v) { if (!hoverGekoppeld) host.querySelector('.wealth-header-rings')?.remove(); return; }
|
||
if (!hoverGekoppeld) { hoverGekoppeld = true; koppelKaartHover(host); }
|
||
v.selecteer(selectie);
|
||
} catch (err) {
|
||
console.warn('[vermogen] cirkelgrafieken niet getekend:', err);
|
||
if (gen === standenGen && !hoverGekoppeld) host.querySelector('.wealth-header-rings')?.remove();
|
||
}
|
||
}
|
||
|
||
function vulJaarkeuze(host, reeks) {
|
||
const balk = host.querySelector('[data-jaren]');
|
||
if (!balk) return;
|
||
const vensters = jaarVensters(reeks.dagen);
|
||
const heel = { van: 0, tot: reeks.dagen.length - 1 };
|
||
const pctVan = j => { const v = vensters.get(j); return v ? rendementVanVenster(reeks, v) : null; };
|
||
|
||
const bekend = [...vensters.keys()];
|
||
if (keuze !== ALLE_JAREN && bekend.length) {
|
||
const raak = jarenIn(keuze).filter(j => vensters.has(j));
|
||
if (!raak.length) { const laatste = Math.max(...bekend); keuze = { van: laatste, tot: laatste }; }
|
||
else keuze = { van: raak[0], tot: raak[raak.length - 1] };
|
||
}
|
||
|
||
balk.innerHTML = `
|
||
<div class="wealth-year-boxes" data-kaders></div>
|
||
<div class="wealth-year-menu" role="group" aria-label="${esc(t('wealth.yearPick'))}">
|
||
<div class="wealth-year-grid">
|
||
${bekend.slice().sort((a, b) => b - a).map(j => menuKnop(j, String(j), pctVan(j))).join('')}
|
||
${menuKnop(ALLE_JAREN, t('wealth.allYears'), rendementVanVenster(reeks, heel))}
|
||
</div>
|
||
<div class="wealth-year-tip t-caption t-muted">${t('wealth.yearRangeTip')}</div>
|
||
</div>`;
|
||
tekenKaders(balk, pctVan, rendementVanVenster(reeks, heel));
|
||
|
||
balk.onclick = e => {
|
||
const uit = e.target.closest('[data-jaar-uit]');
|
||
if (uit) {
|
||
keuze = zonderJaar(keuze, Number(uit.dataset.jaarUit));
|
||
setPref('page.wealth', 'year', keuzeTekst(keuze)).catch(() => { });
|
||
tekenKaders(balk, pctVan, rendementVanVenster(reeks, heel));
|
||
toonJaar(host, reeks);
|
||
return;
|
||
}
|
||
const b = e.target.closest('[data-jaar]');
|
||
if (!b) return;
|
||
if (b.dataset.jaar === ALLE_JAREN) keuze = ALLE_JAREN;
|
||
else {
|
||
const gekozen = Number(b.dataset.jaar);
|
||
const anker = e.shiftKey && keuze !== ALLE_JAREN ? keuze.van : gekozen;
|
||
keuze = { van: Math.min(anker, gekozen), tot: Math.max(anker, gekozen) };
|
||
}
|
||
setPref('page.wealth', 'year', keuzeTekst(keuze)).catch(() => { });
|
||
tekenKaders(balk, pctVan, rendementVanVenster(reeks, heel));
|
||
toonJaar(host, reeks);
|
||
};
|
||
}
|
||
|
||
function menuKnop(waarde, label, pct) {
|
||
return `<button type="button" class="wealth-year" data-jaar="${esc(String(waarde))}">${jaarInhoud(label, pct)}</button>`;
|
||
}
|
||
|
||
function jaarInhoud(label, pct) {
|
||
if (pct == null) return esc(label);
|
||
return `<span>${esc(label)}</span><span class="wealth-year-pct ${pctToon(pct)}">${fmtPct(pct, gekleurd())}</span>`;
|
||
}
|
||
|
||
const pctCel = p => (p == null ? DASH : `<span class="${pctToon(p)}">${fmtPct(p, gekleurd())}</span>`);
|
||
const bedragCel = v => (v == null || Math.abs(v) < 0.01 ? DASH : kleurBedrag(v));
|
||
|
||
function pctToon(pct) {
|
||
const zichtbaar = Math.round(pct * 1000);
|
||
return zichtbaar > 0 ? 't-pos' : zichtbaar < 0 ? 't-neg' : '';
|
||
}
|
||
|
||
function tekenKaders(balk, pctVan, pctHeel) {
|
||
const kader = (label, pct, jaar) => (jaar == null
|
||
? `<span class="wealth-year-chip">${jaarInhoud(label, pct)}</span>`
|
||
: `<button type="button" class="wealth-year-chip" data-jaar-uit="${jaar}"`
|
||
+ ` title="${esc(t('wealth.yearOff'))}">${jaarInhoud(label, pct)}</button>`);
|
||
const kaders = keuze === ALLE_JAREN
|
||
? kader(t('wealth.allYears'), pctHeel, null)
|
||
: jarenIn(keuze).map(j => kader(String(j), pctVan(j), j)).join('');
|
||
balk.querySelector('[data-kaders]').innerHTML = kaders;
|
||
const gekozen = keuze === ALLE_JAREN ? [ALLE_JAREN] : jarenIn(keuze).map(String);
|
||
for (const k of balk.querySelectorAll('[data-jaar]')) k.classList.toggle('is-on', gekozen.includes(k.dataset.jaar));
|
||
}
|
||
|
||
function assetRendement(reeks, id, venster) {
|
||
return windowTwr(seriesFor(reeks, id), meetVenster(venster, reeks.dagen.length));
|
||
}
|
||
|
||
function rendementVanVenster(reeks, venster) {
|
||
return windowTwr(seriesFor(reeks), meetVenster(venster, reeks.dagen.length));
|
||
}
|
||
|
||
let verdeling = null;
|
||
let ringenBelofte = null;
|
||
let hoverGekoppeld = false;
|
||
let selectie = null;
|
||
let verborgen = new Set();
|
||
let verborgenSoorten = new Set();
|
||
|
||
const GROEP = Object.freeze({ ASSET: 'asset', ACCOUNT: 'account' });
|
||
let groepering = GROEP.ASSET;
|
||
let alleAccounts = [];
|
||
let getekendeAccounts = [];
|
||
const accountSleutel = c => c.accountId ?? 0;
|
||
const reeksSleutel = sleutel => (sleutel === 0 ? null : sleutel);
|
||
const accountNaam = c => c.account?.name ?? t('wealth.noAccount');
|
||
|
||
function koppelGroepering(host) {
|
||
const bar = host.querySelector('[data-groepering]');
|
||
if (!bar) return;
|
||
const knop = (id, label) => `<button type="button" class="fbar-item${groepering === id ? ' is-on' : ''}"
|
||
data-groep="${id}" aria-pressed="${groepering === id}">${label}</button>`;
|
||
const teken = () => {
|
||
bar.innerHTML = knop(GROEP.ASSET, t('wealth.perAsset')) + knop(GROEP.ACCOUNT, t('wealth.perAccount'));
|
||
};
|
||
teken();
|
||
bar.onclick = e => {
|
||
const id = e.target.closest('[data-groep]')?.dataset.groep;
|
||
if (!id || id === groepering) return;
|
||
groepering = id;
|
||
setPref('page.wealth', 'grouping', id).catch(() => { });
|
||
teken();
|
||
hertekenRaster(host);
|
||
};
|
||
}
|
||
|
||
function hertekenRaster(host) {
|
||
if (!host?.isConnected || !getekendeStanden) return;
|
||
tekenKaarten(host, getekendeStanden, getekendPeil);
|
||
if (nuReeks && getekendVenster) { vulSparklines(host, nuReeks, getekendVenster); vulTwr(host, nuReeks, getekendVenster); }
|
||
}
|
||
|
||
function tekenFilter(host, items, hidden) {
|
||
const el = host.querySelector('[data-filter]');
|
||
if (!el) return;
|
||
createFilter(el, {
|
||
items,
|
||
selected: new Set(items.map(i => i.id).filter(id => !hidden.has(id))),
|
||
onChange: sel => {
|
||
const lijst = hiddenAfterFilter(hidden, items.map(i => i.id), sel);
|
||
if (groepering === GROEP.ACCOUNT) verborgenSoorten = new Set(lijst);
|
||
else verborgen = new Set(lijst);
|
||
setPref('page.wealth', groepering === GROEP.ACCOUNT ? 'hiddenAccountKinds' : 'hidden', lijst).catch(() => { });
|
||
hertekenRaster(host);
|
||
},
|
||
});
|
||
}
|
||
|
||
function accountsInVenster(reeks, venster) {
|
||
const uit = new Set();
|
||
if (!reeks || !venster) return uit;
|
||
for (const [id, bezit] of (reeks.bezitPerAccount || LEEG_MAP)) {
|
||
for (let i = venster.van; i <= venster.tot; i++) if (bezit[i]) { uit.add(id); break; }
|
||
}
|
||
return uit;
|
||
}
|
||
|
||
const zelfdeSelectie = sameSelection;
|
||
|
||
function zetSelectie(host, sel) {
|
||
pasSelectieToe(host, zelfdeSelectie(selectie, sel) ? null : sel);
|
||
setPref('page.wealth', 'selection', selectie).catch(() => { });
|
||
}
|
||
|
||
function pasSelectieToe(host, sel) {
|
||
selectie = sel;
|
||
for (const el of host.querySelectorAll('.wealth-card.is-selected')) el.classList.remove('is-selected');
|
||
for (const el of kaartenVoor(host, selectie)) el.classList.add('is-selected');
|
||
verdeling?.selecteer(selectie);
|
||
}
|
||
|
||
function kaartenVoor(host, sel) {
|
||
if (!sel) return [];
|
||
const accountKaarten = [...host.querySelectorAll('[data-account]')];
|
||
if (accountKaarten.length) {
|
||
if (sel.account != null) return accountKaarten.filter(el => Number(el.dataset.account) === sel.account);
|
||
if (sel.kind) return accountKaarten.filter(el => el.dataset.kinds.split(' ').includes(sel.kind));
|
||
const ids = new Set((sel.assetIds || []).map(String));
|
||
return accountKaarten.filter(el => el.dataset.assets.split(' ').some(id => ids.has(id)));
|
||
}
|
||
const kies = sel.assetIds?.length
|
||
? sel.assetIds.map(id => `[data-asset="${CSS.escape(String(id))}"]`).join(',')
|
||
: (sel.kind ? `[data-kind="${CSS.escape(sel.kind)}"]` : null);
|
||
return kies ? [...host.querySelectorAll(kies)] : [];
|
||
}
|
||
|
||
function markeerKaarten(host, sel) {
|
||
for (const el of host.querySelectorAll('.wealth-card.is-linked')) el.classList.remove('is-linked');
|
||
for (const el of kaartenVoor(host, sel)) el.classList.add('is-linked');
|
||
}
|
||
|
||
function koppelKaartHover(host) {
|
||
const grid = host.querySelector('.wealth-grid');
|
||
if (!grid) return;
|
||
let actief = null;
|
||
grid.addEventListener('mouseover', e => {
|
||
const kaart = e.target.closest('[data-asset], [data-account]');
|
||
const id = kaart ? (kaart.dataset.asset ? `a${kaart.dataset.asset}` : `r${kaart.dataset.account}`) : null;
|
||
if (id === actief) return;
|
||
actief = id;
|
||
markeerKaarten(host, null);
|
||
const assetIds = !kaart ? null : kaart.dataset.asset ? [Number(kaart.dataset.asset)]
|
||
: kaart.dataset.assets.split(' ').filter(Boolean).map(Number);
|
||
verdeling?.markeer(assetIds?.length ? { assetIds } : null);
|
||
});
|
||
grid.addEventListener('mouseleave', () => {
|
||
actief = null;
|
||
markeerKaarten(host, null);
|
||
verdeling?.markeer(null);
|
||
});
|
||
}
|
||
|
||
async function openDetail(k, holdings) {
|
||
const [alleRijen, accounts, alleTrades, reeks] = await Promise.all([
|
||
assetPositionsByAccount(k.asset.id),
|
||
listAccounts(),
|
||
listAssetTrades(k.asset.id).catch(() => []),
|
||
(reeksBelofte || Promise.resolve(null)).catch(() => null),
|
||
]);
|
||
const buiten = new Set(ownOnly() ? excludedAccounts.map(a => a.id) : []);
|
||
const accountVan = tr => (tr.type === 'sell' ? tr.fromAccountId : tr.toAccountId);
|
||
const vanDerden = new Set(k.m.derden ? (k.m.beheerd || []).map(d => d.accountId).filter(id => scopeOf(id) === 'managed') : []);
|
||
const deel = derden => ({
|
||
rijen: alleRijen.filter(r => !buiten.has(r.accountId) && vanDerden.has(r.accountId) === derden),
|
||
trades: alleTrades.filter(tr => !buiten.has(accountVan(tr)) && vanDerden.has(accountVan(tr)) === derden),
|
||
});
|
||
const eigen = deel(false);
|
||
const derden = vanDerden.size ? deel(true) : null;
|
||
const naam = new Map(accounts.map(a => [a.id, a.name]));
|
||
dialog.detail({ title: assetLabel(k.asset), titleHtml: assetLabelHtml(k.asset),
|
||
asideHtml: `<span class="badge">${t('enums.asset_kind.' + k.asset.kind)}</span>`, html: detailHtml() });
|
||
const body = document.querySelector('.dialog-overlay .dialog-body--rich');
|
||
if (!body) return;
|
||
body.closest('.dialog')?.insertAdjacentHTML('afterbegin',
|
||
`<span class="wealth-year-chip wealth-detail-periode">${jaarInhoud(t('wealth.allYears'), null)}</span>`);
|
||
mountDetailTabs(body, k, { eigen, derden }, naam, holdings, reeks);
|
||
tekenDetailGrafiek(body, k, reeks, derden ? [...eigen.trades, ...derden.trades] : eigen.trades);
|
||
}
|
||
|
||
function tekenDetailGrafiek(body, k, reeks, trades) {
|
||
const el = body.querySelector('[data-detail-spark]');
|
||
if (!el) return;
|
||
const leeg = () => {
|
||
el.innerHTML = `<div class="wealth-detail-leeg t-muted-cell">${t('wealth.noChart')}</div>`;
|
||
};
|
||
if (!reeks?.dagen?.length) return leeg();
|
||
const dagenMs = reeks.dagen.map(d => Date.parse(`${d}T00:00:00Z`));
|
||
const heel = { van: 0, tot: reeks.dagen.length - 1 };
|
||
const gesneden = assetReeks(reeks, k.asset.id, heel, dagenMs);
|
||
if (!gesneden) return leeg();
|
||
const markers = trades
|
||
.map(tr => ({ x: dagMs(tr.occurredAt), variant: tr.type === 'sell' ? 'sell' : 'buy', key: `t${tr.id}`,
|
||
label: tr.label_names || undefined }))
|
||
.filter(m => m.x != null && m.x >= gesneden.vanMs && m.x <= gesneden.totMs);
|
||
mountSparkline(el, gesneden.punten, {
|
||
tone: 'accent', vergelijk: gesneden.inleg, formatValue: sparkLabel, markers,
|
||
});
|
||
|
||
const licht = (id, aan) => {
|
||
body.querySelector(`[data-trade="${CSS.escape(String(id))}"]`)?.classList.toggle('is-active', aan);
|
||
el.querySelector(`[data-mark="t${CSS.escape(String(id))}"]`)?.classList.toggle('is-active', aan);
|
||
};
|
||
let actief = null;
|
||
body.addEventListener('mouseover', e => {
|
||
const rij = e.target.closest('[data-trade]');
|
||
const id = rij ? rij.dataset.trade : null;
|
||
if (id === actief) return;
|
||
if (actief) licht(actief, false);
|
||
actief = id;
|
||
if (actief) licht(actief, true);
|
||
});
|
||
body.addEventListener('mouseleave', () => { if (actief) { licht(actief, false); actief = null; } });
|
||
}
|
||
|
||
function dagMs(iso) {
|
||
const d = String(iso || '').slice(0, 10);
|
||
const ms = Date.parse(`${d}T00:00:00Z`);
|
||
return Number.isFinite(ms) ? ms : null;
|
||
}
|
||
|
||
function detailHtml() {
|
||
return `
|
||
<div class="wealth-detail">
|
||
<div class="wealth-detail-tabs" data-detail-tabs></div>
|
||
<div class="wealth-detail-spark">
|
||
<div class="wealth-detail-plot" data-detail-spark></div>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
function detailCijfersHtml(asset, f) {
|
||
const cijfers = [
|
||
[t('wealth.avgSpot'), f.avgMain != null ? val(fmtBasePrice(priceFromBase(f.avgMain, asset))) : null],
|
||
[t('wealth.avgPremium'), f.avgPremium != null ? val(fmtBase(f.avgPremium)) : null],
|
||
[t('wealth.invested'), isBaseAsset(asset) ? null : val(fmtBase(f.invested))],
|
||
].filter(([, v]) => v != null);
|
||
if (!cijfers.length) return '';
|
||
return `<div class="wealth-detail-cijfers"><div class="wealth-detail-stats">${cijfers.map(([l, v]) => stat(l, v)).join('')}</div></div>`;
|
||
}
|
||
|
||
function derdenRegelsHtml({ asset, m }) {
|
||
const delen = (m.beheerd || []).filter(d => d.saldo && scopeOf(d.accountId) === 'managed');
|
||
if (!delen.length) return '';
|
||
const naam = id => alleAccounts.find(a => a.id === id)?.name ?? `#${id}`;
|
||
return `
|
||
<div class="wealth-detail-beheerd">
|
||
<table><thead><tr>
|
||
<th class="text">${t('wealth.account')}</th>
|
||
<th class="num">${t('wealth.quantity')}</th>
|
||
<th class="num">${t('wealth.costOnArrival')}</th>
|
||
<th class="num">${t('wealth.unrealized')}</th>
|
||
</tr></thead><tbody>${delen.map(d => `<tr>
|
||
<td class="text">${esc(naam(d.accountId))}</td>
|
||
<td class="num">${val(fmtUnit(d.saldo, asset))}</td>
|
||
<td class="num">${d.cost == null ? DASH : val(fmtBase(d.cost))}</td>
|
||
<td class="num">${d.unrealized == null ? DASH : kleurBedrag(d.unrealized)}</td>
|
||
</tr>`).join('')}</tbody></table>
|
||
</div>`;
|
||
}
|
||
|
||
function mountDetailTabs(body, k, delen, naam, holdings, reeks) {
|
||
const host = body.querySelector('[data-detail-tabs]');
|
||
if (!host) return;
|
||
const { eigen, derden } = delen;
|
||
createTabs(host, {
|
||
items: [
|
||
{ id: 'accounts', label: t('wealth.ownWealth') },
|
||
{ id: 'others', label: t('wealth.othersWealth'), when: () => !!derden },
|
||
{ id: 'products', label: t('wealth.perProduct'), when: () => isMetal(k.asset) },
|
||
{ id: 'return', label: t('wealth.returnTitle') },
|
||
{ id: 'notes', label: t('notes.tab') },
|
||
],
|
||
render: (id, panel) => {
|
||
body.querySelector('.wealth-detail')?.classList.toggle('is-return', id === 'return');
|
||
if (id === 'notes') { panel.innerHTML = notesHtml(); mountNotes(panel, k.asset.id); return; }
|
||
if (id === 'return') {
|
||
panel.innerHTML = `<div class="wealth-return-tab">
|
||
<div class="wealth-return-years">${perJaarHtml(k.asset, reeks)}</div>
|
||
<div class="return-view"></div>
|
||
</div>`;
|
||
mountReturnPanel(panel.querySelector('.return-view'), { reeks, asset: k.asset });
|
||
return;
|
||
}
|
||
if (id === 'products') { panel.innerHTML = metalBreakdown(k.asset, k.p, k.m.fiatPrice, holdings); return; }
|
||
panel.innerHTML = id === 'others'
|
||
? detailCijfersHtml(k.asset, k.m.derden) + derdenRegelsHtml(k) + perAccountHtml(k, derden.rijen, naam, derden.trades)
|
||
: detailCijfersHtml(k.asset, k.m) + perAccountHtml(k, eigen.rijen, naam, eigen.trades);
|
||
},
|
||
});
|
||
}
|
||
|
||
async function openJaaroverzicht() {
|
||
const reeks = await (reeksBelofte || Promise.resolve(null)).catch(() => null);
|
||
const startjaar = Number(await getPref('app', 'start_year').catch(() => null)) || CONFIG.START_YEAR.AUTO;
|
||
const rijen = jaaroverzichtRijen(reeks, startjaar);
|
||
const grafiek = rijen?.jaren.length ? `<div class="wealth-overview-plot"><canvas data-jaargrafiek></canvas></div>` : '';
|
||
const klaar = dialog.detail({
|
||
title: t('wealth.yearOverviewTitle'),
|
||
html: `<div class="wealth-overview">${grafiek}${jaaroverzichtHtml(rijen)}</div>`,
|
||
});
|
||
const canvas = document.querySelector('.dialog-overlay [data-jaargrafiek]');
|
||
if (!canvas) return;
|
||
const chart = await tekenJaarGrafiek(canvas, [...rijen.jaren].reverse()).catch(() => null);
|
||
klaar.then(() => chart?.destroy());
|
||
}
|
||
|
||
async function openRendement() {
|
||
const reeks = await (reeksBelofte || Promise.resolve(null)).catch(() => null);
|
||
const kaarten = (getekendeStanden || nuStanden)?.kaarten || [];
|
||
let page = null;
|
||
if (reeks?.dagen?.length && keuze !== ALLE_JAREN) {
|
||
const jaren = jarenIn(keuze);
|
||
page = { label: jaren.length === 1 ? String(jaren[0]) : `${jaren[0]}-${jaren[jaren.length - 1]}`, venster: vensterVan(reeks) };
|
||
}
|
||
openReturnDialog({ reeks, assets: kaarten.map(k => k.asset), page, selection: selectie });
|
||
}
|
||
|
||
function jaaroverzichtRijen(reeks, startjaar = CONFIG.START_YEAR.AUTO) {
|
||
if (!reeks?.dagen?.length) return null;
|
||
const lengte = reeks.dagen.length;
|
||
const ids = [...(reeks.perAsset || new Map()).keys()];
|
||
const totaal = seriesFor(reeks);
|
||
const rij = (label, venster) => {
|
||
const meet = meetVenster(venster, lengte);
|
||
let gerealiseerd = 0, verkocht = false, onbekend = false;
|
||
for (const id of ids) {
|
||
const g = gerealiseerdOver(reeks, id, meet);
|
||
if (g.onbekend) onbekend = true;
|
||
else if (g.bedrag != null) { gerealiseerd += g.bedrag; verkocht = true; }
|
||
}
|
||
return {
|
||
label,
|
||
waarde: reeks.waarde[meet.tot],
|
||
inleg: windowDelta(reeks.ingelegd, meet),
|
||
pct: rendementVanVenster(reeks, venster),
|
||
sinds: rendementVanVenster(reeks, { van: 0, tot: venster.tot }),
|
||
resultaat: windowResult(totaal, meet),
|
||
gerealiseerd: onbekend || !verkocht ? null : gerealiseerd,
|
||
};
|
||
};
|
||
const jaren = [...jaarVensters(reeks.dagen)]
|
||
.filter(([jaar]) => jaar >= startjaar)
|
||
.map(([jaar, v]) => rij(String(jaar), v))
|
||
.filter(r => (r.waarde || 0) >= 0.01 || Math.abs(r.inleg) >= 0.01 || r.gerealiseerd != null || Math.abs(r.resultaat) >= 0.01)
|
||
.reverse();
|
||
return { jaren, alles: rij(t('wealth.allYears'), { van: 0, tot: lengte - 1 }) };
|
||
}
|
||
|
||
function jaaroverzichtHtml(rijen) {
|
||
if (!rijen?.jaren.length) return `<div class="t-muted-cell">${t('wealth.noYears')}</div>`;
|
||
const { jaren, alles } = rijen;
|
||
const bedrag = v => (v == null || Math.abs(v) < 0.01 ? DASH : val(fmtBase(v)));
|
||
const cel = r => `
|
||
<td class="num">${bedrag(r.waarde)}</td>
|
||
<td class="num">${bedrag(r.inleg)}</td>
|
||
<td class="num">${pctCel(r.pct)}</td>
|
||
<td class="num">${pctCel(r.sinds)}</td>
|
||
<td class="num">${bedragCel(r.resultaat)}</td>
|
||
<td class="num">${r.gerealiseerd == null ? DASH : kleurBedrag(r.gerealiseerd)}</td>`;
|
||
return `<div class="table-wrap"><table>
|
||
<thead><tr>
|
||
<th class="text">${t('wealth.year')}</th>
|
||
<th class="num">${t('wealth.valueEnd')}</th>
|
||
<th class="num">${t('wealth.investedNet')}</th>
|
||
<th class="num">${t('wealth.twr')}</th>
|
||
<th class="num">${t('wealth.sinceStart')}</th>
|
||
<th class="num">${t('wealth.result')}</th>
|
||
<th class="num">${t('wealth.realized')}</th>
|
||
</tr></thead>
|
||
<tbody>
|
||
${jaren.map(r => `<tr><td class="text">${esc(r.label)}</td>${cel(r)}</tr>`).join('')}
|
||
<tr><td class="text"><strong>${esc(alles.label)}</strong></td>${cel(alles)}</tr>
|
||
</tbody>
|
||
</table></div>`;
|
||
}
|
||
|
||
function perJaarHtml(asset, reeks) {
|
||
if (!reeks?.dagen?.length) return `<div class="t-muted-cell">${t('wealth.noYears')}</div>`;
|
||
const lengte = reeks.dagen.length;
|
||
const rij = (label, venster) => {
|
||
const meet = meetVenster(venster, lengte);
|
||
const pctOver = v => (isBaseAsset(asset) ? null : assetRendement(reeks, asset.id, v));
|
||
return {
|
||
label,
|
||
waarde: reeks.perAsset?.get(asset.id)?.[meet.tot],
|
||
inleg: windowDelta(reeks.inlegPerAsset?.get(asset.id), meet),
|
||
pct: pctOver(venster),
|
||
sinds: pctOver({ van: 0, tot: venster.tot }),
|
||
g: gerealiseerdOver(reeks, asset.id, meet),
|
||
rente: overVenster(reeks.rentePerAsset?.get(asset.id), meet),
|
||
resultaat: windowResult(seriesFor(reeks, asset.id), meet),
|
||
};
|
||
};
|
||
const jaren = [...jaarVensters(reeks.dagen)].map(([jaar, v]) => rij(String(jaar), v))
|
||
.filter(r => r.pct != null || r.g.bedrag != null || r.g.onbekend || Math.abs(r.rente) >= 0.01 || Math.abs(r.resultaat) >= 0.01)
|
||
.reverse();
|
||
if (!jaren.length) return `<div class="t-muted-cell">${t('wealth.noYears')}</div>`;
|
||
const alles = rij(t('wealth.allYears'), { van: 0, tot: lengte - 1 });
|
||
|
||
const bedrag = v => (v == null || Math.abs(v) < 0.01 ? DASH : val(fmtBase(v)));
|
||
const cel = r => `
|
||
<td class="num">${bedrag(r.waarde)}</td>
|
||
<td class="num">${bedrag(r.inleg)}</td>
|
||
<td class="num">${pctCel(r.pct)}</td>
|
||
<td class="num">${pctCel(r.sinds)}</td>
|
||
<td class="num">${bedragCel(r.resultaat)}</td>
|
||
<td class="num">${r.g.bedrag == null ? DASH : kleurBedrag(r.g.bedrag)}</td>`;
|
||
return `<div class="table-wrap"><table>
|
||
<thead><tr>
|
||
<th class="text">${t('wealth.year')}</th>
|
||
<th class="num">${t('wealth.valueEnd')}</th>
|
||
<th class="num">${t('wealth.investedNet')}</th>
|
||
<th class="num">${t('wealth.twr')}</th>
|
||
<th class="num">${t('wealth.sinceStart')}</th>
|
||
<th class="num">${t('wealth.result')}</th>
|
||
<th class="num">${t('wealth.realized')}</th>
|
||
</tr></thead>
|
||
<tbody>
|
||
${jaren.map(r => `<tr><td class="text">${esc(r.label)}</td>${cel(r)}</tr>`).join('')}
|
||
<tr><td class="text"><strong>${esc(alles.label)}</strong></td>${cel(alles)}</tr>
|
||
</tbody>
|
||
</table></div>`;
|
||
}
|
||
|
||
function perAccountHtml(k, rijen, naam, trades) {
|
||
const { asset, m } = k;
|
||
const rekeningVan = tr => (tr.type === 'sell' ? tr.fromAccountId : tr.toAccountId) ?? null;
|
||
const perRekening = new Map();
|
||
for (const tr of trades) {
|
||
const id = rekeningVan(tr);
|
||
if (!perRekening.has(id)) perRekening.set(id, []);
|
||
perRekening.get(id).push(tr);
|
||
}
|
||
|
||
const standen = new Map(rijen.map(r => [r.accountId ?? null, r]));
|
||
const ids = [...standen.keys()];
|
||
for (const id of perRekening.keys()) if (!standen.has(id)) ids.push(id);
|
||
ids.sort((a, b) => (a === null ? 1 : 0) - (b === null ? 1 : 0));
|
||
if (!ids.length) return `<div class="t-muted-cell">${t('wealth.noAccountRows')}</div>`;
|
||
|
||
const groepen = ids.map(id => {
|
||
const r = standen.get(id);
|
||
const saldo = r ? r.saldo : null;
|
||
const waarde = (saldo != null && m.fiatPrice != null)
|
||
? fmtBase((saldo / Math.pow(10, asset.decimals)) * m.fiatPrice) : null;
|
||
const label = id == null ? t('wealth.noAccount') : (naam.get(id) ?? `#${id}`);
|
||
const samenvatting = [saldo != null ? fmtUnit(saldo, asset) : null, waarde]
|
||
.filter(Boolean).map(x => val(x)).join(' · ');
|
||
const boekingen = handelRijen(asset, perRekening.get(id) || []);
|
||
return `<tr class="group-row"><td colspan="5"><div class="group-header">
|
||
<span>${esc(label)}</span>
|
||
${samenvatting ? `<span class="group-summary">${samenvatting}${waarde ? originHtml(m.origin, asset) : ''}</span>` : ''}
|
||
</div></td></tr>${boekingen}`;
|
||
}).join('');
|
||
|
||
return `<div class="table-wrap"><table>
|
||
<thead><tr>
|
||
<th class="text">${t('wealth.tradeDate')}</th>
|
||
<th class="text">${t('wealth.tradeType')}</th>
|
||
<th class="num">${t('wealth.quantity')}</th>
|
||
<th class="num">${t('wealth.tradePrice')}</th>
|
||
<th class="num">${t('wealth.tradeAmount')}</th>
|
||
</tr></thead>
|
||
<tbody>${groepen}</tbody>
|
||
</table></div>`;
|
||
}
|
||
|
||
function handelRijen(asset, trades) {
|
||
if (!trades.length) {
|
||
return `<tr class="wealth-trade-leeg"><td colspan="5" class="text t-muted-cell">${t('wealth.noTrades')}</td></tr>`;
|
||
}
|
||
const deler = Math.pow(10, asset.decimals);
|
||
return trades.map(tr => {
|
||
const koop = tr.type !== 'sell';
|
||
const bedrag = ((Number(tr.amount) || 0) / deler) * (Number(tr.fiatPrice) || 0);
|
||
const kosten = Number(tr.fiatFee) || 0;
|
||
const soort = t(koop ? 'enums.event_type.buy' : 'enums.event_type.sell');
|
||
const labels = tr.label_names ? subline(`<span class="t-muted-cell">${esc(tr.label_names)}</span>`) : '';
|
||
return `<tr data-trade="${esc(String(tr.id))}">
|
||
<td class="text">${esc(sparkDatum(dagMs(tr.occurredAt) ?? Date.now()))}${labels}</td>
|
||
<td class="text"><span class="badge ${koop ? 'badge-accent' : 'badge-neutral'} badge-icon" title="${esc(soort)}" aria-label="${esc(soort)}">${koop ? ARROW_DOWN : ARROW_UP}</span></td>
|
||
<td class="num">${val(fmtUnit(tr.amount, asset))}</td>
|
||
<td class="num">${tr.fiatPrice == null ? DASH : val(fmtBasePrice(priceFromBase(tr.fiatPrice, asset)))}</td>
|
||
<td class="num">${val(fmtBase(bedrag))}${kosten ? ` <span class="t-muted-cell">${koop ? '+' : '−'} ${val(fmtBase(kosten))}</span>` : ''}</td>
|
||
</tr>`;
|
||
}).join('');
|
||
}
|
||
|
||
function aandeel(waarde, total) {
|
||
if (waarde == null || !(total > 0)) return '-';
|
||
return val(`${((waarde / total) * 100).toFixed(1).replace('.', ',')}%`);
|
||
}
|
||
|
||
function legendaAanmelden(host, buiten = []) {
|
||
setPageHint(host, {
|
||
title: t('wealth.legendTitle'),
|
||
rows: [
|
||
...buiten,
|
||
{ sample: SAMPLES.line, text: t('wealth.legendSparkValue') },
|
||
{ sample: SAMPLES.dashed, text: t('wealth.legendSparkInvested') },
|
||
{ sample: SAMPLES.dot, text: t('wealth.legendBuy') },
|
||
{ sample: SAMPLES.dotOpen, text: t('wealth.legendSell') },
|
||
{ sample: SAMPLES.ring, text: t('wealth.legendRings') },
|
||
t('wealth.legendInvested'),
|
||
t('wealth.legendTwr'),
|
||
t('wealth.legendUnexplained'),
|
||
t('wealth.legendRange'),
|
||
t('wealth.legendChain'),
|
||
t('wealth.legendDetail'),
|
||
t('wealth.legendFilter'),
|
||
t('wealth.legendAccounts'),
|
||
t('wealth.legendUnrealized'),
|
||
t('wealth.legendResult'),
|
||
t('wealth.legendNoPrice'),
|
||
...(excludedAccounts.length ? [t('wealth.legendShowAll')] : []),
|
||
],
|
||
});
|
||
}
|
||
|
||
async function buitenRegels() {
|
||
if (!excludedAccounts.length) return [];
|
||
if (showAll) return [t('wealth.legendShowAllOn')];
|
||
const soort = new Map(excludedAccounts.map(a => [a.id, a.wealthScope]));
|
||
const rijen = await accountHoldings(excludedAccounts.map(a => a.id));
|
||
const assets = (await listAssets()).filter(a => rijen.some(r => r.assetId === a.id));
|
||
const spot = assets.length ? await loadFiat(assets) : new Map();
|
||
const som = { managed: 0, none: 0 };
|
||
for (const r of rijen) {
|
||
const asset = assets.find(a => a.id === r.assetId);
|
||
const prijs = basePriceOf(spot.get(r.assetId));
|
||
if (!asset || prijs == null) continue;
|
||
som[soort.get(r.accountId)] += (r.saldo / Math.pow(10, asset.decimals)) * prijs;
|
||
}
|
||
const scopes = new Set(excludedAccounts.map(a => a.wealthScope));
|
||
return [
|
||
...(scopes.has('managed') ? [t('wealth.legendManaged', { bedrag: fmtBase(som.managed) })] : []),
|
||
...(scopes.has('none') ? [t('wealth.legendNotCounted', { bedrag: fmtBase(som.none) })] : []),
|
||
];
|
||
}
|
||
|
||
const tekenKleur = (getal, html) => `<span class="${getal >= 0 ? 't-pos' : 't-neg'}">${html}</span>`;
|
||
const kleurBedrag = v => tekenKleur(v, val(fmtBaseSigned(v, colouredSigns())));
|
||
|
||
function stat(label, value) {
|
||
return `<div class="wealth-stat${value == null ? ' is-leeg' : ''}"><div class="t-muted-cell">${label}</div><div class="t-value">${value ?? DASH}</div></div>`;
|
||
}
|
||
|
||
function statLeeg(label, sleutel) {
|
||
return `<div class="wealth-stat is-leeg" data-nietverklaard-rij>
|
||
<div class="t-muted-cell">${label}</div><div class="t-muted" data-nietverklaard="${sleutel}"></div>
|
||
</div>`;
|
||
}
|
||
|
||
function cardHtml(asset, p, m, total) {
|
||
const valueStr = m.value != null
|
||
? `<span class="po-host">${val(fmtBase(m.value))}${originHtml(m.origin, asset)}</span>`
|
||
: null;
|
||
const unrealStr = m.unrealized != null ? kleurBedrag(m.unrealized) : null;
|
||
const aandeelStr = m.value != null && total > 0 ? aandeel(m.value, total) : null;
|
||
|
||
const geenKoers = m.fiatPrice == null
|
||
? `<div class="t-caption t-muted wealth-noprice">${t('wealth.noPrice')}</div>`
|
||
: '';
|
||
|
||
const stats = `
|
||
<div class="wealth-stats">
|
||
${stat(t('wealth.quantity'), `<span class="po-host">${val(fmtUnit(p.net, asset))}${p.net === 0 ? `<span data-nul="${asset.id}"></span>` : ''}</span>`)}
|
||
${stat(t('wealth.value'), valueStr)}
|
||
${stat(t('wealth.share'), aandeelStr)}
|
||
${stat(t('wealth.unrealized'), unrealStr)}
|
||
${stat(t('wealth.result'), `<span data-resultaat="${asset.id}" class="t-muted-cell">…</span>`)}
|
||
${stat(t('wealth.twr'), `<span data-twr="${asset.id}" class="t-muted-cell">…</span>`)}
|
||
${statLeeg(t('wealth.unexplained'), asset.id)}
|
||
</div>`;
|
||
|
||
return `<div class="card wealth-card" data-asset="${asset.id}" data-kind="${esc(asset.kind)}"${isBaseAsset(asset) ? ' data-rekenvaluta' : ''}${m.fiatPrice == null ? ' data-geenkoers' : ''}${m.unrealized != null ? ` data-ongerealiseerd="${Number(m.unrealized)}"` : ''}>
|
||
<div class="wealth-head">
|
||
<strong>${assetLabelHtml(asset)}</strong>
|
||
<span class="badge">${t('enums.asset_kind.' + asset.kind)}</span>
|
||
<button type="button" class="wealth-detail-btn" data-detail="${asset.id}" title="${esc(t('wealth.openDetail'))}"
|
||
aria-label="${esc(t('wealth.openDetail'))}: ${esc(asset.name)}">${CHEVRON_RIGHT}</button>
|
||
</div>
|
||
${stats}
|
||
${geenKoers}
|
||
<div class="wealth-spark-wrap" data-spark-wrap="${asset.id}">
|
||
<div class="wealth-spark" data-spark-asset="${asset.id}"></div>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
function accountCardHtml(c, total) {
|
||
const key = accountSleutel(c);
|
||
const herkomsten = c.lines.filter(l => l.value != null).map(l => ({ origin: l.origin, asset: l.asset }));
|
||
const valueStr = c.value != null ? `<span class="po-host">${val(fmtBase(c.value))}${originsHtml(herkomsten)}</span>` : null;
|
||
const unrealStr = c.unrealized != null ? kleurBedrag(c.unrealized) : null;
|
||
const aandeelStr = c.value != null && total > 0 ? aandeel(c.value, total) : null;
|
||
const rekenvaluta = c.lines.length > 0 && c.lines.every(l => isBaseAsset(l.asset));
|
||
const geenKoers = c.lines.some(l => l.value == null);
|
||
const naam = accountNaam(c);
|
||
return `<div class="card wealth-card" data-account="${key}" data-assets="${c.assetIds.join(' ')}"
|
||
data-kinds="${esc(c.kinds.join(' '))}"${rekenvaluta ? ' data-rekenvaluta' : ''}${geenKoers ? ' data-geenkoers' : ''}${c.unrealized != null ? ` data-ongerealiseerd="${Number(c.unrealized)}"` : ''}>
|
||
<div class="wealth-head">
|
||
<strong>${esc(naam)}</strong>
|
||
${c.account ? `<span class="badge">${t('enums.account_kind.' + c.account.kind)}</span>` : ''}
|
||
<button type="button" class="wealth-detail-btn" data-detail-account="${key}" title="${esc(t('wealth.openDetail'))}"
|
||
aria-label="${esc(t('wealth.openDetail'))}: ${esc(naam)}">${CHEVRON_RIGHT}</button>
|
||
</div>
|
||
<div class="wealth-stats">
|
||
${stat(t('wealth.share'), aandeelStr)}
|
||
${stat(t('wealth.value'), valueStr)}
|
||
${statLeeg(t('wealth.unexplained'), `r${key}`)}
|
||
${stat(t('wealth.unrealized'), unrealStr)}
|
||
${stat(t('wealth.result'), `<span data-resultaat="r${key}" class="t-muted-cell">…</span>`)}
|
||
${stat(t('wealth.twr'), `<span data-twr="r${key}" class="t-muted-cell">…</span>`)}
|
||
</div>
|
||
<div class="wealth-spark-wrap">
|
||
<div class="wealth-spark" data-spark-account="${key}"></div>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
function accountReeks(reeks, key, venster, dagenMs) {
|
||
const id = reeksSleutel(key);
|
||
const s = accountSeries(reeks, id);
|
||
const vanaf = Math.max(reeks.eersteDagPerAccount?.get(id) ?? 0, venster.van);
|
||
const tot = venster.tot + 1;
|
||
const dagen = dagenMs.slice(vanaf, tot);
|
||
const punten = puntenVan(s.waarden.slice(vanaf, tot), dagen);
|
||
if (punten.length < 2 || !punten.some(p => p[1] > 0)) return null;
|
||
const ingebracht = s.waarden.map((_, i) => (s.inleg[i] || 0) + (s.ankers[i] || 0) - (s.rente[i] || 0));
|
||
return { punten, inleg: puntenVan(ingebracht.slice(vanaf, tot), dagen), vanMs: dagenMs[vanaf], totMs: dagenMs[venster.tot] };
|
||
}
|
||
|
||
async function openAccountDetail(c) {
|
||
const reeks = await (reeksBelofte || Promise.resolve(null)).catch(() => null);
|
||
const naam = accountNaam(c);
|
||
dialog.detail({ title: naam,
|
||
asideHtml: c.account ? `<span class="badge">${t('enums.account_kind.' + c.account.kind)}</span>` : '', html: detailHtml() });
|
||
const body = document.querySelector('.dialog-overlay .dialog-body--rich');
|
||
if (!body) return;
|
||
body.closest('.dialog')?.insertAdjacentHTML('afterbegin',
|
||
`<span class="wealth-year-chip wealth-detail-periode">${jaarInhoud(t('wealth.allYears'), null)}</span>`);
|
||
createTabs(body.querySelector('[data-detail-tabs]'), {
|
||
items: [{ id: 'assets', label: t('wealth.perAsset') }, { id: 'return', label: t('wealth.returnTitle') }],
|
||
render: (id, panel) => {
|
||
panel.innerHTML = id === 'assets' ? accountAssetsHtml(c) : accountJarenHtml(reeks, accountSleutel(c));
|
||
},
|
||
});
|
||
const el = body.querySelector('[data-detail-spark]');
|
||
if (!el) return;
|
||
const dagenMs = reeks?.dagen?.map(d => Date.parse(`${d}T00:00:00Z`)) || [];
|
||
const gesneden = reeks?.dagen?.length ? accountReeks(reeks, accountSleutel(c), { van: 0, tot: reeks.dagen.length - 1 }, dagenMs) : null;
|
||
if (!gesneden) { el.innerHTML = `<div class="wealth-detail-leeg t-muted-cell">${t('wealth.noChart')}</div>`; return; }
|
||
mountSparkline(el, gesneden.punten, { tone: 'accent', vergelijk: gesneden.inleg, formatValue: sparkLabel });
|
||
}
|
||
|
||
function accountAssetsHtml(c) {
|
||
if (!c.lines.length) return `<div class="t-muted-cell">${t('wealth.noAccountAssets')}</div>`;
|
||
const rijen = c.lines.map(l => `<tr>
|
||
<td class="text">${assetLabelHtml(l.asset)}</td>
|
||
<td class="num">${val(fmtUnit(l.saldo, l.asset))}</td>
|
||
<td class="num">${l.value == null ? DASH : `<span class="po-host">${val(fmtBase(l.value))}${originHtml(l.origin, l.asset)}</span>`}</td>
|
||
<td class="num">${l.value == null || !(c.value > 0) ? DASH : aandeel(l.value, c.value)}</td>
|
||
</tr>`).join('');
|
||
return `<div class="table-wrap"><table>
|
||
<thead><tr>
|
||
<th class="text">${t('wealth.asset')}</th>
|
||
<th class="num">${t('wealth.quantity')}</th>
|
||
<th class="num">${t('wealth.value')}</th>
|
||
<th class="num">${t('wealth.shareOfAccount')}</th>
|
||
</tr></thead>
|
||
<tbody>${rijen}</tbody>
|
||
</table></div>`;
|
||
}
|
||
|
||
function accountJarenHtml(reeks, key) {
|
||
if (!reeks?.dagen?.length) return `<div class="t-muted-cell">${t('wealth.noYears')}</div>`;
|
||
const lengte = reeks.dagen.length;
|
||
const s = accountSeries(reeks, reeksSleutel(key));
|
||
const ingebracht = s.waarden.map((_, i) => (s.inleg[i] || 0) + (s.ankers[i] || 0) - (s.rente[i] || 0));
|
||
const rij = (label, venster) => {
|
||
const meet = meetVenster(venster, lengte);
|
||
return {
|
||
label,
|
||
waarde: s.waarden[meet.tot],
|
||
inleg: windowDelta(ingebracht, meet),
|
||
pct: windowTwr(s, meet),
|
||
sinds: windowTwr(s, meetVenster({ van: 0, tot: venster.tot }, lengte)),
|
||
resultaat: windowResult(s, meet),
|
||
};
|
||
};
|
||
const jaren = [...jaarVensters(reeks.dagen)].map(([jaar, v]) => rij(String(jaar), v))
|
||
.filter(r => r.pct != null || Math.abs(r.resultaat) >= 0.01 || Math.abs(r.inleg) >= 0.01)
|
||
.reverse();
|
||
if (!jaren.length) return `<div class="t-muted-cell">${t('wealth.noYears')}</div>`;
|
||
const alles = rij(t('wealth.allYears'), { van: 0, tot: lengte - 1 });
|
||
const bedrag = v => (v == null || Math.abs(v) < 0.01 ? DASH : val(fmtBase(v)));
|
||
const cel = r => `
|
||
<td class="num">${bedrag(r.waarde)}</td>
|
||
<td class="num">${bedrag(r.inleg)}</td>
|
||
<td class="num">${pctCel(r.pct)}</td>
|
||
<td class="num">${pctCel(r.sinds)}</td>
|
||
<td class="num">${bedragCel(r.resultaat)}</td>`;
|
||
return `<div class="table-wrap"><table>
|
||
<thead><tr>
|
||
<th class="text">${t('wealth.year')}</th>
|
||
<th class="num">${t('wealth.valueEnd')}</th>
|
||
<th class="num">${t('wealth.broughtInNet')}</th>
|
||
<th class="num">${t('wealth.twr')}</th>
|
||
<th class="num">${t('wealth.sinceStart')}</th>
|
||
<th class="num">${t('wealth.result')}</th>
|
||
</tr></thead>
|
||
<tbody>
|
||
${jaren.map(r => `<tr><td class="text">${esc(r.label)}</td>${cel(r)}</tr>`).join('')}
|
||
<tr><td class="text"><strong>${esc(alles.label)}</strong></td>${cel(alles)}</tr>
|
||
</tbody>
|
||
</table></div>`;
|
||
}
|
||
|
||
function assetReeks(reeks, id, venster, dagenMs) {
|
||
const vanaf = Math.max(reeks.eersteDagPerAsset?.get(id) ?? 0, venster.van);
|
||
const tot = venster.tot + 1;
|
||
const dagenVanAsset = dagenMs.slice(vanaf, tot);
|
||
const punten = puntenVan((reeks.perAsset.get(id) || []).slice(vanaf, tot), dagenVanAsset);
|
||
if (punten.length < 2 || !punten.some(p => p[1] > 0)) return null;
|
||
const inleg = puntenVan((reeks.inlegPerAsset?.get(id) || []).slice(vanaf, tot), dagenVanAsset);
|
||
return { punten, inleg, vanMs: dagenMs[vanaf], totMs: dagenMs[venster.tot] };
|
||
}
|
||
|
||
const sparkLabel = (v, ms, in_) => [fmtBase(v), in_ == null ? null : gatTekst(v - in_), sparkDatum(ms)]
|
||
.filter(Boolean).join(' · ');
|
||
|
||
async function vulSparklines(host, reeks, venster) {
|
||
const dagenMs = reeks.dagen.map(d => Date.parse(`${d}T00:00:00Z`));
|
||
for (const el of host.querySelectorAll('[data-spark-asset]')) {
|
||
const id = Number(el.dataset.sparkAsset);
|
||
const gesneden = assetReeks(reeks, id, venster, dagenMs);
|
||
if (!gesneden) { el.innerHTML = ''; continue; }
|
||
const { punten, inleg } = gesneden;
|
||
const stippen = [
|
||
...(reeks.aankopen?.get(id) || []).map(i => ({ x: dagenMs[i], variant: 'buy' })),
|
||
...(reeks.verkopen?.get(id) || []).map(i => ({ x: dagenMs[i], variant: 'sell' })),
|
||
].filter(s => s.x != null && s.x >= gesneden.vanMs && s.x <= gesneden.totMs);
|
||
mountSparkline(el, punten, {
|
||
tone: 'accent',
|
||
vergelijk: inleg,
|
||
formatValue: sparkLabel,
|
||
markers: stippen,
|
||
});
|
||
}
|
||
for (const el of host.querySelectorAll('[data-spark-account]')) {
|
||
const gesneden = accountReeks(reeks, Number(el.dataset.sparkAccount), venster, dagenMs);
|
||
if (!gesneden) { el.innerHTML = ''; continue; }
|
||
mountSparkline(el, gesneden.punten, { tone: 'accent', vergelijk: gesneden.inleg, formatValue: sparkLabel });
|
||
}
|
||
}
|
||
|
||
function vulTwr(host, reeks, venster) {
|
||
const zet = (sleutel, waarde) => {
|
||
const el = host.querySelector(`[data-twr="${CSS.escape(String(sleutel))}"]`);
|
||
if (!el) return;
|
||
el.textContent = waarde == null ? DASH : fmtPct(waarde, gekleurd());
|
||
el.classList.toggle('t-muted-cell', waarde == null);
|
||
el.closest('.wealth-card .wealth-stat')?.classList.toggle('is-leeg', waarde == null);
|
||
const toon = waarde == null ? '' : pctToon(waarde);
|
||
el.classList.toggle('t-pos', toon === 't-pos');
|
||
el.classList.toggle('t-neg', toon === 't-neg');
|
||
el.classList.toggle('delta', waarde != null);
|
||
};
|
||
zet('totaal', rendementVanVenster(reeks, venster));
|
||
const rekenvaluta = id => !!host.querySelector(`[data-asset="${CSS.escape(String(id))}"][data-rekenvaluta]`);
|
||
for (const id of reeks.perAsset.keys()) zet(id, rekenvaluta(id) ? null : assetRendement(reeks, id, venster));
|
||
for (const el of host.querySelectorAll('[data-account]')) {
|
||
const key = Number(el.dataset.account);
|
||
zet(`r${key}`, el.hasAttribute('data-rekenvaluta') ? null
|
||
: windowTwr(accountSeries(reeks, reeksSleutel(key)), meetVenster(venster, reeks.dagen.length)));
|
||
}
|
||
vulNietVerklaard(host, reeks, meetVenster(venster, reeks.dagen.length));
|
||
vulResultaat(host, reeks, meetVenster(venster, reeks.dagen.length));
|
||
vulNulDatum(host, reeks, venster);
|
||
}
|
||
|
||
function vulResultaat(host, reeks, venster) {
|
||
const zet = (sleutel, bedrag) => {
|
||
const el = host.querySelector(`[data-resultaat="${CSS.escape(String(sleutel))}"]`);
|
||
if (!el) return;
|
||
const kaart = el.closest('.wealth-card');
|
||
const ongerealiseerd = kaart?.dataset.ongerealiseerd;
|
||
if (bedrag != null && ongerealiseerd !== undefined && ongerealiseerd !== ''
|
||
&& Math.abs(bedrag - Number(ongerealiseerd)) < 0.005) bedrag = null;
|
||
const nul = bedrag != null && Math.abs(bedrag) < 0.005;
|
||
el.textContent = bedrag == null ? DASH : fmtBaseSigned(bedrag, colouredSigns());
|
||
el.classList.toggle('t-muted-cell', bedrag == null);
|
||
el.classList.toggle('val', bedrag != null);
|
||
el.classList.toggle('t-pos', !nul && bedrag > 0);
|
||
el.classList.toggle('t-neg', !nul && bedrag < 0);
|
||
el.closest('.wealth-card .wealth-stat')?.classList.toggle('is-leeg', bedrag == null);
|
||
};
|
||
const geenKoers = sel => !!host.querySelector(`${sel}[data-geenkoers]`);
|
||
zet('totaal', windowResult(seriesFor(reeks), venster));
|
||
for (const id of reeks.perAsset.keys()) {
|
||
zet(id, geenKoers(`[data-asset="${CSS.escape(String(id))}"]`) ? null : windowResult(seriesFor(reeks, id), venster));
|
||
}
|
||
for (const el of host.querySelectorAll('[data-account]')) {
|
||
const key = Number(el.dataset.account);
|
||
zet(`r${key}`, el.hasAttribute('data-geenkoers') ? null : windowResult(accountSeries(reeks, reeksSleutel(key)), venster));
|
||
}
|
||
}
|
||
|
||
function vulNulDatum(host, reeks, venster) {
|
||
for (const el of host.querySelectorAll('[data-nul]')) {
|
||
const eenheden = reeks.eenhedenPerAsset?.get(Number(el.dataset.nul)) || [];
|
||
let i = Math.min(venster.tot, eenheden.length - 1);
|
||
while (i >= 0 && !eenheden[i]) i--;
|
||
const dag = i >= 0 ? reeks.dagen[i + 1] : null;
|
||
el.innerHTML = dag
|
||
? infoLinesHtml([t('wealth.noLongerHeld'), t('wealth.noLongerHeldSince', { dag: sparkDatum(Date.parse(`${dag}T00:00:00Z`)) })])
|
||
: '';
|
||
}
|
||
}
|
||
|
||
function gerealiseerdOver(reeks, id, venster) {
|
||
const bedrag = overVenster(reeks.gerealiseerdPerAsset?.get(id), venster);
|
||
const onbekend = overVenster(reeks.onbekendPerAsset?.get(id), venster) > 0;
|
||
const verkocht = Math.abs(bedrag) >= 0.005 || onbekend || verkochtIn(reeks, id, venster);
|
||
return { bedrag: verkocht && !onbekend ? bedrag : null, onbekend };
|
||
}
|
||
|
||
const verkochtIn = (reeks, id, venster) =>
|
||
(reeks.verkopen?.get(id) || []).some(i => (venster.van > 0 ? i > venster.van : i >= 0) && i <= venster.tot);
|
||
|
||
const overVenster = windowDelta;
|
||
|
||
function vulNietVerklaard(host, reeks, venster) {
|
||
const zet = (sleutel, amount) => {
|
||
const el = host.querySelector(`[data-nietverklaard="${CSS.escape(String(sleutel))}"]`);
|
||
if (!el) return;
|
||
const rij = el.closest('[data-nietverklaard-rij]');
|
||
el.textContent = '';
|
||
rij?.classList.add('is-leeg');
|
||
if (amount == null || Math.abs(amount) < 0.01) return;
|
||
el.textContent = fmtBaseSigned(amount, 'both');
|
||
rij?.classList.remove('is-leeg');
|
||
};
|
||
let totaal = 0;
|
||
for (const [id, r] of (reeks.nietVerklaardPerAsset || new Map())) { totaal += overVenster(r, venster); zet(id, overVenster(r, venster)); }
|
||
zet('totaal', totaal);
|
||
for (const [id, r] of (reeks.nietVerklaardPerAccount || new Map())) zet(`r${id ?? 0}`, overVenster(r, venster));
|
||
}
|
||
|
||
const puntenVan = (reeks, dagenMs) => (reeks || [])
|
||
.map((v, i) => [dagenMs[i], v])
|
||
.filter(p => typeof p[1] === 'number');
|
||
|
||
const gatTekst = v => fmtBaseSigned(v, 'both');
|
||
|
||
const sparkDatum = ms => localDateNl(new Date(ms).toISOString());
|
||
|
||
function metalBreakdown(asset, p, fiatPrice, holdings) {
|
||
const prods = holdings.filter(h => h.assetId === p.id);
|
||
const valOfBase = base => fiatPrice != null ? (base / Math.pow(10, BASE)) * fiatPrice : null;
|
||
const weightCell = base => {
|
||
const { primary, secondary } = fmtAmount(base, asset);
|
||
return val(primary) + (secondary ? ` <span class="t-muted-cell">· ${val(secondary)}</span>` : '');
|
||
};
|
||
const valueCell = base => { const v = valOfBase(base); return v != null ? val(fmtBase(v)) : '-'; };
|
||
|
||
const perProduct = h => assetMetrics({
|
||
decimals: BASE, net: h.net_count * h.fineGrams,
|
||
buy_amount: h.buy_amount, buy_spot_raw: h.buy_spot_raw,
|
||
buy_fee_total: h.buy_premium, buy_events: h.buy_events,
|
||
gift_amount: h.gift_amount,
|
||
}, fiatPrice);
|
||
|
||
const rows = prods.map(h => {
|
||
const base = h.net_count * h.fineGrams;
|
||
const pm = perProduct(h);
|
||
const kostprijs = pm.avgCost != null ? (base / Math.pow(10, BASE)) * pm.avgCost : null;
|
||
const pct = (pm.unrealized != null && kostprijs) ? pm.unrealized / kostprijs : null;
|
||
return `<tr>
|
||
<td class="text">${esc(h.name)} <span class="t-muted-cell">${t('enums.metal_form.' + h.form)}</span></td>
|
||
<td class="num">${val(String(h.net_count))}</td>
|
||
<td class="num">${weightCell(base)}</td>
|
||
<td class="num">${valueCell(base)}</td>
|
||
<td class="num">${pm.unrealized == null ? '-' : kleurBedrag(pm.unrealized)}</td>
|
||
<td class="num">${pct == null ? '-' : `<span class="${pct >= 0 ? 't-pos' : 't-neg'}">${fmtPct(pct, gekleurd())}</span>`}</td>
|
||
</tr>`;
|
||
});
|
||
|
||
const allocBase = prods.reduce((s, h) => s + h.net_count * h.fineGrams, 0);
|
||
const unallocBase = p.net - allocBase;
|
||
if (unallocBase > 0) {
|
||
rows.push(`<tr>
|
||
<td class="text"><span class="t-muted-cell">${t('wealth.unallocated')}</span></td>
|
||
<td class="num">-</td>
|
||
<td class="num">${weightCell(unallocBase)}</td>
|
||
<td class="num">${valueCell(unallocBase)}</td>
|
||
<td class="num">-</td>
|
||
<td class="num">-</td>
|
||
</tr>`);
|
||
}
|
||
if (!rows.length) return '';
|
||
|
||
return `<div style="margin-top:.8rem">
|
||
<div class="table-wrap"><table>
|
||
<thead><tr>
|
||
<th class="text">${t('wealth.product')}</th>
|
||
<th class="num">${t('wealth.count')}</th>
|
||
<th class="num">${t('wealth.weight')}</th>
|
||
<th class="num">${t('wealth.value')}</th>
|
||
<th class="num">${t('wealth.unrealized')}</th>
|
||
<th class="num">${t('wealth.result')}</th>
|
||
</tr></thead>
|
||
<tbody>${rows.join('')}</tbody>
|
||
</table></div>
|
||
</div>`;
|
||
}
|