// portfolio.jsx — Portfolio screen, TR-influenced visual language. // Exposes: window.PortfolioScreen (() => { const { useState: PU, useMemo: PM } = React; // ─── Sparkline / area chart for the portfolio header ──────────── // Seeded stochastic walk — looks like real intraday price data. // Memoized so it doesn't re-roll when prices tick. function HeaderChart({ delta, height = 130 }) { const path = PM(() => { // Mulberry32 PRNG, seeded so the curve is stable across renders. const seedBase = (delta >= 0 ? 0x9E3779B9 : 0x6C8E9CF5) ^ 0xA1B2C3D4; let s = seedBase >>> 0; const rand = () => { s = (s + 0x6D2B79F5) >>> 0; let t = s; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; const gauss = () => { // Box–Muller, but truncated to avoid wild outliers let u = 0, v = 0; while (u === 0) u = rand(); while (v === 0) v = rand(); const g = Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v); return Math.max(-3, Math.min(3, g)); }; const W = 80, H = 100; const N = 260; const driftPerStep = (delta >= 0 ? 0.018 : -0.016); const vol = 1.65; const ys = []; let y = 52; // Many small jumps — feels like noisy intraday flow const jumpAt = new Set(); for (let k = 0; k < 14; k++) jumpAt.add(Math.floor(rand() * N)); // Very weak mean reversion so it can wander for (let i = 0; i <= N; i++) { const target = 50 + (i / N - 0.4) * (delta >= 0 ? 12 : -10); const mr = (target - y) * 0.006; let step = gauss() * vol + driftPerStep + mr; if (jumpAt.has(i)) step += (gauss()) * 4.5; y = Math.max(8, Math.min(92, y + step)); ys.push(y); } // Catmull-Rom → cubic Bézier for organic curvature const xs = ys.map((_, i) => (i / N) * W); const cmd = []; cmd.push(`M ${xs[0].toFixed(2)} ${ys[0].toFixed(2)}`); for (let i = 0; i < ys.length - 1; i++) { const p0 = i === 0 ? [xs[0], ys[0]] : [xs[i - 1], ys[i - 1]]; const p1 = [xs[i], ys[i]]; const p2 = [xs[i + 1], ys[i + 1]]; const p3 = i + 2 < ys.length ? [xs[i + 2], ys[i + 2]] : p2; // tension 0 = Catmull-Rom; lower so chaotic motion stays visible const t = 0.10; const cp1x = p1[0] + (p2[0] - p0[0]) * t; const cp1y = p1[1] + (p2[1] - p0[1]) * t; const cp2x = p2[0] - (p3[0] - p1[0]) * t; const cp2y = p2[1] - (p3[1] - p1[1]) * t; cmd.push(`C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${p2[0].toFixed(2)} ${p2[1].toFixed(2)}`); } const linePath = cmd.join(' '); const lastX = xs[xs.length - 1]; const fillPath = `${linePath} L ${lastX.toFixed(2)} 100 L 0 100 Z`; const lastY = ys[ys.length - 1]; return { linePath, fillPath, lastX, lastY }; }, [delta >= 0]); const stroke = 'var(--accent)'; const fillId = 'hc_' + (delta >= 0 ? 'up' : 'dn'); return ( {/* End dot — current price marker */} ); } // Mini stack — colored segments showing weights, brand-colored function WeightStack({ composition, instById, mode = 'target' }) { const total = composition.reduce((s, c) => s + (c.weight_pct || 0), 0) || 1; return (
{composition.map((c, i) => { const inst = instById[c.instrument_id]; if (!inst) return null; const brand = brandFor(inst.ticker, inst.type); const pct = (c.weight_pct || 0) / total * 100; return (
); })}
); } // ─── Active basket card ───────────────────────────────────────── function ActiveBasketCard({ basket, store, onTap }) { const value = store.valueOfBasket(basket.id); const delta = store.dailyDeltaOfBasket(basket.id); const invested = store.investedOfBasket(basket.id); const totalReturn = value - invested; const trPct = invested > 0 ? (totalReturn / invested) * 100 : 0; const plan = store.planByBasket[basket.id]; return (
{basket.name}
{basket.composition.length} Werte {plan && ( <> {plan.amount_eur} € {plan.frequency === 'monthly' ? 'monatl.' : plan.frequency} )}
= 0 ? 1 : -1} width={92} height={32}/>
{trPct >= 0 ? '+' : '−'}{Math.abs(trPct).toFixed(2).replace('.', ',')} % ges.
); } // ─── Weighted basket card ─────────────────────────────────────── function WeightedBasketCard({ basket, store, onTap, onStartSaving }) { return (
{basket.name}
Gewichtet · 0,00 € investiert
); } // ─── Passive basket card ──────────────────────────────────────── function PassiveBasketCard({ basket, store, onTap, onSetWeights }) { const isFav = basket.is_default_favourites; return (
{basket.name}
{basket.composition.length} Werte · keine Gewichtung
{/* Striped empty bar */}
); } // ─── Ghost basket card ────────────────────────────────────────── function GhostBasketCard({ ghost, onClaim }) { return (
{ghost.name}
{ghost.desc}
); } // ─── Standalone position list row — TR-style ──────────────────── function StandalonePositionRow({ position, store }) { const inst = store.instById[position.instrument_id]; if (!inst) return null; const value = position.quantity * inst.price; return (
{inst.name}
{position.quantity.toFixed(4).replace('.', ',')} · {inst.ticker}
{fmtEur(value)}
); } // ─── Portfolio screen ─────────────────────────────────────────── function PortfolioScreen({ navigate }) { const store = useStore(); const [createOpen, setCreateOpen] = PU(false); const [range, setRange] = PU('1T'); const grouped = PM(() => { const out = { active: [], weighted: [], passive: [] }; store.baskets.forEach(b => { const s = store.stateOf(b); if (s === 'active') out.active.push(b); else if (s === 'weighted') out.weighted.push(b); else if (s === 'passive') out.passive.push(b); }); out.passive.sort((a, b) => (a.is_default_favourites ? 1 : 0) - (b.is_default_favourites ? 1 : 0)); return out; }, [store.baskets, store.positions]); const remainingGhosts = store.ghosts.filter(g => !store.claimedGhostIds.includes(g.id)); const standalonePositions = store.positions.filter(p => p.basket_id === null); const totalDelta = store.totalDailyDelta; const totalDeltaPct = store.totalInvestedAssets > 0 ? (totalDelta / store.totalInvestedAssets) * 100 : 0; return (
{/* Top utility row — small, TR-like (no big logo) */}
b Open Index Broker
{/* ── Hero: large title + total value ── */}
Portfolio
Cash
Insgesamt
{/* Chart */}
{/* Time-range scrubber */}
{/* ── Active baskets ── */} {grouped.active.length > 0 && ( <> Investments
{grouped.active.map(b => ( navigate('basket', { basketId: b.id })}/> ))}
)} {/* ── Weighted (inactive) ── */} {grouped.weighted.length > 0 && ( <> Gewichtet
{grouped.weighted.map(b => ( navigate('basket', { basketId: b.id })} onStartSaving={() => navigate('savings', { basketId: b.id })}/> ))}
)} {/* ── Passive ── */} {grouped.passive.length > 0 && ( <> Passiv
{grouped.passive.map(b => ( navigate('basket', { basketId: b.id })} onSetWeights={() => navigate('weights', { basketId: b.id })}/> ))}
)} {/* ── Ghost ideas ── */} {remainingGhosts.length > 0 && ( <> Mehr Index-Ideen
{remainingGhosts.map(g => ( navigate('claimGhost', { ghostId: g.id })}/> ))}
)} {/* ── Create custom basket ── */}
{/* ── Ungrouped positions ── */} {standalonePositions.length > 0 && ( <> Ungruppiert
{standalonePositions.map((p, i) => (
))}
)} setCreateOpen(false)} onCreate={(name) => { const b = store.createBasket(name); setCreateOpen(false); navigate('basket', { basketId: b.id }); }}/>
); } function CreateBasketSheet({ open, onClose, onCreate }) { const [name, setName] = PU(''); PU(() => { if (!open) setName(''); }, [open]); return (
Name
setName(e.target.value)} placeholder="z. B. Langfristiger Kern" style={{ width: '100%', height: 48, background: 'var(--surface-2)', border: 'none', borderRadius: 12, color: 'var(--fg)', padding: '0 14px', fontSize: 16, outline: 'none', }}/>
Du startest passiv — Werte hinzufügen, dann Gewichtung festlegen.
); } Object.assign(window, { PortfolioScreen }); })(); // ─── Theme toggle button — sun/moon icon, animated swap ────────── function ThemeToggle() { const { theme, toggle } = useThemeCtx ? useThemeCtx() : { theme: 'dark', toggle: () => {} }; const isDark = theme === 'dark'; return ( ); } window.ThemeToggle = ThemeToggle;