Ergebnis

${r.err}

`; return; } const neg = r.gain < 0; o.innerHTML = `

Depotwert am ${dDE(r.end)}

${eur0(r.endVal)}

Eingezahlt ${eur0(r.totalIn)} · Ergebnis ${(r.gain >= 0 ? '+' : '−') + eur0(Math.abs(r.gain))}

Gesamtrendite

${pct(r.gainPct)}

auf das eingezahlte Kapital

Rendite p. a.

${r.irr === null ? '—' : pct(r.irr)}

geldgewichtet (IRR)

Verlauf

Depotwert

Eingezahlt

${chart(r.series)}

${r.rows.map(x => ``).join('')}

Fonds	Eingezahlt	Wert	Ergebnis	Rendite
${x.n} ${x.isin}	${eur0(x.inv)}	${eur0(x.val)}	${(x.gain >= 0 ? '+' : '−') + eur0(Math.abs(x.gain))}	${pct(x.pct)}

`; wireChart(); } function wireChart() { const svg = MRR('svg'); if (!svg || !CS) return; const hit = MRR('hit'), cross = MRR('cross'), dot = MRR('dot'), tip = MRR('tip'); const s = CS; const xs = i => PL + (i / (s.length - 1)) * (CW - PL - PR); const ys = v => PT + (1 - (v - CLO) / (CHI - CLO)) * (CH - PT - PB); function move(e) { const b = svg.getBoundingClientRect(); const x = ((e.clientX - b.left) / b.width) * CW; let i = Math.round(((x - PL) / (CW - PL - PR)) * (s.length - 1)); i = Math.max(0, Math.min(s.length - 1, i)); const p = s[i], g = p.v - p.inv; cross.setAttribute('x1', xs(i)); cross.setAttribute('x2', xs(i)); cross.setAttribute('opacity', '.3'); dot.setAttribute('cx', xs(i)); dot.setAttribute('cy', ys(p.v)); dot.setAttribute('opacity', '1'); tip.innerHTML = `

${dDE(p.iso)}

Wert ${eur0(p.v)}
Eingezahlt ${eur0(p.inv)}
Ergebnis ${(g >= 0 ? '+' : '−') + eur0(Math.abs(g))}`; tip.style.opacity = '1'; const bb = svg.getBoundingClientRect(); let tx = e.clientX - tip.offsetWidth / 2; if (tx < 8) tx = 8; if (tx + tip.offsetWidth > window.innerWidth - 8) tx = window.innerWidth - tip.offsetWidth - 8; let ty = bb.top - tip.offsetHeight - 10; if (ty < 8) ty = bb.bottom + 10; tip.style.left = tx + 'px'; tip.style.top = ty + 'px'; } hit.addEventListener('mousemove', move); hit.addEventListener('mouseleave', () => { tip.style.opacity = '0'; cross.setAttribute('opacity', '0'); dot.setAttribute('opacity', '0'); }); hit.addEventListener('touchstart', e => { if (e.touches[0]) move(e.touches[0]) }, { passive: true }); hit.addEventListener('touchmove', e => { if (e.touches[0]) move(e.touches[0]) }, { passive: true }); hit.addEventListener('touchend', () => { tip.style.opacity = '0'; cross.setAttribute('opacity', '0'); dot.setAttribute('opacity', '0') }); } function drawFunds() { MRR('funds').innerHTML = FUNDS.map(f => `

${f.n}

${f.isin} · WKN ${f.wkn}

${W[f.k]} %

`).join(''); FUNDS.forEach(f => { MRR('s-' + f.k).addEventListener('input', e => { W[f.k] = +e.target.value; syncW(); render(); }); }); } function syncW() { const sum = Object.values(W).reduce((a, b) => a + b, 0); const el = MRR('wsum'); el.textContent = sum + ' %'; el.className = 'wsum' + (Math.abs(sum - 100) > 0.5 ? ' bad' : ''); const rate = Math.max(0, parseFloat(MRR('rate').value) || 0); FUNDS.forEach(f => { MRR('p-' + f.k).textContent = W[f.k] + ' %'; MRR('e-' + f.k).textContent = rate > 0 ? eur0(rate * W[f.k] / 100) + '/M.' : ''; }); } ['start', 'end'].forEach(id => { const el = MRR(id); el.min = MIN; el.max = MAX }); MRR('start').value = MIN; MRR('end').value = MAX; drawFunds(); syncW(); ['start', 'end', 'einmal', 'rate'].forEach(id => { MRR(id).addEventListener('input', () => { syncW(); render() }); }); MRR('reset').addEventListener('click', () => { W = { bgf: 25, fid: 25, xtr: 25, amu: 25 }; FUNDS.forEach(f => MRR('s-' + f.k).value = 25); syncW(); render(); }); render(); })();

Was dein Geld wirklich gemacht hat.