// Portfolio chart (multi-line, toggleable series, time-range filter) + // Trades table — ported from // design/design_handoff_nifty_bull/prototype/chart-trades.jsx and // adapted for the real BacktestSummary shape: // // curve[].date (ISO yyyy-mm-dd, parsed to Date here) // curve[].deployedCash // curve[].equityValue // curve[].cashOnHold // curve[].total // // trades[].symbol // trades[].action ("BUY"|"SELL") // trades[].price // trades[].quantity // trades[].tradeTime (ISO datetime) // trades[].pnl (number|null — only on closing SELLs) function PortfolioChart({ curve, benchmarkCurve, benchmarkLabel }) { // Default to just the two headline series — Total Portfolio Value // and Benchmark. The other three (Equity Value, Cash Deployed, // Cash on Hold) are useful for digging into the portfolio // composition but visually noisy by default; user opts in via the // legend pills. const [series, setSeries] = React.useState({ total: true, equityValue: false, deployedCash: false, cashOnHold: false, benchmark: true, }); const [range, setRange] = React.useState('ALL'); const [hover, setHover] = React.useState(null); const svgRef = React.useRef(null); const [width, setWidth] = React.useState(900); const height = 340; // Normalise curve entries so `date` is always a Date instance. // Also splice the benchmark's total at each date in by ISO date // string so a single hover shows both the strategy AND the // benchmark on the same vertical rule. const benchmarkByDate = React.useMemo(() => { const m = new Map(); for (const p of (benchmarkCurve || [])) { const k = (p.date instanceof Date ? p.date.toISOString() : p.date).slice(0, 10); m.set(k, p.total); } return m; }, [benchmarkCurve]); const normalised = React.useMemo(() => (curve || []).map((p) => { const dateObj = p.date instanceof Date ? p.date : new Date(p.date); const key = dateObj.toISOString().slice(0, 10); return { ...p, date: dateObj, benchmark: benchmarkByDate.get(key), }; }), [curve, benchmarkByDate]); React.useEffect(() => { const ro = new ResizeObserver((entries) => { for (const e of entries) setWidth(Math.max(400, e.contentRect.width)); }); if (svgRef.current?.parentElement) ro.observe(svgRef.current.parentElement); return () => ro.disconnect(); }, []); const ranges = ['1M', '3M', '6M', 'YTD', '1Y', 'ALL']; const filteredCurve = React.useMemo(() => { if (normalised.length === 0) return []; if (range === 'ALL') return normalised; const end = normalised[normalised.length - 1].date; let start; if (range === '1M') start = new Date(end - 30 * 864e5); else if (range === '3M') start = new Date(end - 90 * 864e5); else if (range === '6M') start = new Date(end - 180 * 864e5); else if (range === '1Y') start = new Date(end - 365 * 864e5); else if (range === 'YTD') start = new Date(end.getFullYear(), 0, 1); return normalised.filter((p) => p.date >= start); }, [normalised, range]); const padding = { top: 20, right: 24, bottom: 32, left: 64 }; const w = width - padding.left - padding.right; const h = height - padding.top - padding.bottom; // Include benchmark in the y-axis range when it's visible — // otherwise a 0-trade backtest where the strategy total stays // flat at initial cash causes the benchmark line to draw above // the top tick mark, outside the SVG plotting area. const visibleKeys = ['total', 'equityValue', 'deployedCash', 'cashOnHold'].filter((k) => series[k]); const allValues = filteredCurve.flatMap((p) => { const vs = visibleKeys.map((k) => p[k] || 0); if (series.benchmark && p.benchmark != null) vs.push(p.benchmark); return vs; }); const maxY = Math.max(1, ...allValues); const minY = 0; const xAt = (i) => padding.left + (i / Math.max(1, filteredCurve.length - 1)) * w; const yAt = (v) => padding.top + h - (v - minY) / Math.max(1, (maxY - minY)) * h; const pathFor = (key) => { if (!series[key] || filteredCurve.length === 0) return ''; return filteredCurve.map((p, i) => `${i === 0 ? 'M' : 'L'} ${xAt(i).toFixed(1)} ${yAt(p[key] || 0).toFixed(1)}`).join(' '); }; const benchmarkColor = 'oklch(0.66 0.16 50)'; // warm orange — distinct from chart-1..4 const seriesDefs = [ { key: 'total', label: 'Total portfolio value', color: 'var(--chart-4)', strokeWidth: 2, hint: (<>Total Portfolio Value — Cash on Hold + Equity Value. The headline number: what the account would be worth if you sold everything at the day's close.), }, { key: 'benchmark', label: `Benchmark: ${benchmarkLabel || 'index'}`, color: benchmarkColor, strokeWidth: 1.75, dash: '6 4', hint: (<>Benchmark — total value if the same lumpsum/SIP cash schedule had bought the {benchmarkLabel || 'chosen index'} instead of going through the strategy. Each tranche purchases fractional units of the index at that day's close and is held to the end. The line is the daily mark-to-market of those units. Lets you tell whether the strategy is actually beating the index it's drawing stocks from.), }, { key: 'equityValue', label: 'Equity value', color: 'var(--chart-2)', strokeWidth: 1.75, hint: (<>Equity Value — mark-to-market value of stocks you currently hold (sum of qty × current price for every open lot). Compare against Cash Deployed: if Equity Value > Cash Deployed, your holdings are in unrealised profit; reverse means unrealised loss.), }, { key: 'deployedCash', label: 'Cash deployed', color: 'var(--chart-1)', strokeWidth: 1.75, hint: (<>Cash Deployed — the cost basis of stocks you currently hold (sum of qty × purchase price for every open lot). Can rise above the initial capital if the strategy rolls profits forward — sells holdings at a gain and re-invests the larger proceeds in new positions. It's the cumulative cost of what you're holding right now, not how much fresh cash you've ever put in.), }, { key: 'cashOnHold', label: 'Cash on hold', color: 'var(--chart-3)', strokeWidth: 1.75, dash: '3 3', hint: (<>Cash on Hold — un-deployed cash sitting in your account. Lumpsum starts at the full capital and shrinks as the strategy buys; SIP starts at zero and refills with one tranche on the 1st of each month.), }, ]; const yTicks = 4; const ticks = Array.from({ length: yTicks + 1 }, (_, i) => minY + (maxY - minY) * (i / yTicks)); const xTickCount = Math.min(6, filteredCurve.length); const xTicks = filteredCurve.length > 0 ? Array.from({ length: xTickCount }, (_, i) => Math.floor(i * (filteredCurve.length - 1) / Math.max(1, (xTickCount - 1)))) : []; const handleMove = (e) => { if (!svgRef.current || filteredCurve.length === 0) return; const rect = svgRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const idx = Math.max(0, Math.min(filteredCurve.length - 1, Math.round((x - padding.left) / w * (filteredCurve.length - 1)))); setHover({ idx, point: filteredCurve[idx] }); }; const lastTotal = filteredCurve[filteredCurve.length - 1]?.total || 0; const firstTotal = filteredCurve[0]?.total || 0; const headlineDelta = firstTotal > 0 ? ((lastTotal / firstTotal - 1) * 100) : 0; return (
Portfolio timeline
{UI.fmtINR(lastTotal, { compact: true })}
= 0 ? 'up' : 'down'}`} style={{ fontSize: 11.5 }}> {headlineDelta >= 0 ? '+' : ''}{headlineDelta.toFixed(2)}%
{ranges.map((r) => ( ))}
setHover(null)} > {ticks.map((t, i) => ( {UI.fmtINR(t, { compact: true })} ))} {xTicks.map((i) => ( {UI.fmtDate(filteredCurve[i].date, true)} ))} {seriesDefs.map((def) => series[def.key] && ( ))} {hover && ( {seriesDefs.map((def) => series[def.key] && ( ))} )} {hover && (
{UI.fmtDate(hover.point.date)}
{seriesDefs.filter((d) => series[d.key]).map((d) => (
{d.label}
{UI.fmtINR(hover.point[d.key], { compact: true })}
))}
)}
{seriesDefs.map((def) => { const on = series[def.key]; return ( ); })}
); } // ---------- Trades Table ---------- function TradesTable({ trades, windowStart, windowEnd }) { const [query, setQuery] = React.useState(''); const [side, setSide] = React.useState('ALL'); // Pre-populate the date filter with the backtest window so the // user immediately sees what range the trades span instead of // empty inputs that imply "no filter applied". const [startDate, setStartDate] = React.useState(windowStart || ''); const [endDate, setEndDate] = React.useState(windowEnd || ''); const [sortBy, setSortBy] = React.useState({ key: 'date', dir: 'desc' }); // Trades from the API arrive with `tradeTime` (ISO string), // `action` ("BUY"|"SELL"), and (when known) companyName + isin + // upstoxUrl. Coerce to a uniform shape once. const normalised = React.useMemo(() => (trades || []).map((t, i) => ({ id: t.id ?? `T${i}`, symbol: t.symbol, companyName: t.companyName, upstoxUrl: t.upstoxUrl, side: t.action, date: t.tradeTime instanceof Date ? t.tradeTime : new Date(t.tradeTime), qty: t.quantity, price: typeof t.price === 'number' ? t.price : Number(t.price), value: (typeof t.price === 'number' ? t.price : Number(t.price)) * t.quantity, pnl: t.pnl == null ? null : Number(t.pnl), note: t.strategyNote, })), [trades]); const filtered = React.useMemo(() => { return normalised.filter((t) => { if (side !== 'ALL' && t.side !== side) return false; if (query) { const q = query.toLowerCase(); const hay = `${t.symbol || ''} ${t.companyName || ''}`.toLowerCase(); if (!hay.includes(q)) return false; } if (startDate && t.date < new Date(startDate)) return false; if (endDate && t.date > new Date(endDate + 'T23:59:59')) return false; return true; }).sort((a, b) => { const k = sortBy.key; const dir = sortBy.dir === 'asc' ? 1 : -1; if (k === 'date') return (a.date - b.date) * dir; if (k === 'stock') return a.symbol.localeCompare(b.symbol) * dir; if (k === 'side') return a.side.localeCompare(b.side) * dir; if (k === 'value') return (a.value - b.value) * dir; if (k === 'pnl') return ((a.pnl ?? 0) - (b.pnl ?? 0)) * dir; return 0; }); }, [normalised, query, side, startDate, endDate, sortBy]); const toggleSort = (key) => { setSortBy((prev) => prev.key === key ? { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: 'desc' }); }; const Th = ({ col, label, align = 'left', hint }) => ( toggleSort(col)}> {label} {sortBy.key === col && ( {sortBy.dir === 'asc' ? '▲' : '▼'} )} {hint && ( e.stopPropagation()}> {hint} )} ); return (
Trades executed
{filtered.length} of {normalised.length} trades
{['ALL', 'BUY', 'SELL'].map((s) => ( ))}
setQuery(e.target.value)} />
setStartDate(e.target.value)} style={{ width: 140, padding: '8px 10px', fontSize: 13 }} /> to setEndDate(e.target.value)} style={{ width: 140, padding: '8px 10px', fontSize: 13 }} /> {(query || side !== 'ALL' || startDate || endDate) && ( )}
{filtered.length === 0 ? ( ) : filtered.slice(0, 200).map((t) => ( ))}
Value Realised P&L — sells only. Each sell is FIFO-matched against the earliest open buys for the same symbol; matched lots contribute{' '} (sellPrice − buyPrice) × qty. A single sell can span multiple earlier buys at different prices, in which case the row's P&L is the sum across those matched lots. Buys show {' '}— because they're opening trades only. Excludes brokerage / STT / GST — those costs are already debited from cash on hold by the paper adapter. } />
No trades match your filters.
{UI.fmtDate(t.date)}
{t.date.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', hour12: false })} IST
{t.side} {t.qty} × ₹{Number(t.price).toLocaleString('en-IN', { minimumFractionDigits: 2 })} {UI.fmtINR(t.value)} = 0 ? 'var(--up)' : 'var(--down)' }}> {t.pnl == null ? '—' : `${t.pnl >= 0 ? '+' : ''}${UI.fmtINR(t.pnl)}`}
); } window.PortfolioChart = PortfolioChart; window.TradesTable = TradesTable;