/* ── TRADINGVIEW-STYLE CHART ─────────────────────────────────────────────
Lines: Carteira (gold area) · CDI (blue dashed) · IPCA (red dashed) · IBOV (gray dashed)
Data from: market-data.js (Brapi API)
──────────────────────────────────────────────────────────────────────── */
function buildIndexedSeries(dataPoints, benchmarks) {
if (!dataPoints.length) return { carteira: [], cdi: [], ipca: [], ibov: [] };
const sorted = dataPoints.slice().sort((a, b) => a.key.localeCompare(b.key));
// Use cumulative RENT (not PL ratio) so aportes/resgates don't inflate the return
let cartCum = 1, cdiCum = 1, ipcaCum = 1, ibovCum = 1;
const carteira = [], cdi = [], ipca = [], ibov = [];
for (const d of sorted) {
cartCum *= 1 + (d.rent || 0); // d.rent = rentMes from PDF (pure investment return)
cdiCum *= 1 + (benchmarks.monthly_cdi?.[d.key] || 0);
ipcaCum *= 1 + (benchmarks.monthly_ipca?.[d.key] || 0);
ibovCum *= 1 + (benchmarks.monthly_ibov?.[d.key] || 0);
carteira.push({ key: d.key, label: d.label, ret: cartCum - 1 });
cdi.push({ key: d.key, label: d.label, ret: cdiCum - 1 });
ipca.push({ key: d.key, label: d.label, ret: ipcaCum - 1 });
ibov.push({ key: d.key, label: d.label, ret: ibovCum - 1 });
}
return { carteira, cdi, ipca, ibov };
}
function TVChart({ data, height = 280, nome }) {
const [hoverIdx, setHoverIdx] = React.useState(null);
const [bench, setBench] = React.useState(() => window.BENCHMARKS || {});
const svgRef = React.useRef(null);
React.useEffect(() => {
// Fetch all benchmark data in parallel
Promise.all([
window.fetchBenchmarks?.(),
window.fetchIBOV?.(),
]).then(() => setBench({ ...window.BENCHMARKS }));
}, []);
if (!data || data.length < 2) return (
Histórico insuficiente
);
const { carteira, cdi, ipca, ibov } = buildIndexedSeries(data, bench);
const allRets = [...carteira, ...cdi, ...ipca, ...ibov].map(d => d.ret);
const minY = Math.min(...allRets) - 0.003;
const maxY = Math.max(...allRets) + 0.005;
const rangeY = maxY - minY || 0.01;
const W = 800, H = height;
const pad = { t: 28, r: 24, b: 48, l: 76 };
const iW = W - pad.l - pad.r, iH = H - pad.t - pad.b;
const n = carteira.length;
const xi = i => pad.l + (i / (n - 1)) * iW;
const yi = v => pad.t + iH - ((v - minY) / rangeY) * iH;
const pathOf = pts => pts.map((d,i) => `${i===0?'M':'L'} ${xi(i)},${yi(d.ret)}`).join(' ');
const areaOf = pts => pathOf(pts) + ` L ${xi(n-1)},${yi(Math.max(0,minY))} L ${xi(0)},${yi(Math.max(0,minY))} Z`;
const gridLines = Array.from({length:6},(_,i) => { const v=minY+(rangeY*i/5); return {y:yi(v),v}; });
const fmtPct = v => (v>=0?'+':'')+(v*100).toFixed(2)+'%';
function handleMouseMove(e) {
const rect = svgRef.current?.getBoundingClientRect();
if (!rect) return;
const mx = (e.clientX - rect.left) / rect.width * W;
setHoverIdx(Math.max(0, Math.min(n-1, Math.round((mx - pad.l) / iW * (n-1)))));
}
const hov = hoverIdx !== null && carteira[hoverIdx] ? {
cart: carteira[hoverIdx], cdi: cdi[hoverIdx],
ipca: ipca[hoverIdx], ibov: ibov[hoverIdx], x: xi(hoverIdx),
} : null;
// % CDI for last point
const lastCart = carteira[n-1];
const lastCdi = cdi[n-1];
const pctCDI = lastCdi?.ret ? Math.round((lastCart?.ret / lastCdi?.ret) * 100) : null;
const LEGENDS = [
{ color:'#C4A228', label: nome||'Carteira', dash:false },
{ color:'#5B8DEF', label:'CDI', dash:true },
{ color:'#E85D75', label:'IPCA', dash:true },
{ color:'#6B7E6B', label:'IBOV', dash:true },
];
return (
{/* Header row */}
Retorno acumulado
{pctCDI !== null && (
= 100 ? '#6FCF97' : '#E85D75',
background:'rgba(255,255,255,0.07)', padding:'2px 8px', borderRadius:3 }}>
{pctCDI}% do CDI
)}
{LEGENDS.map(l => (
{l.label}
))}
{/* SVG chart */}