Add an ETF to begin your analysis.

'; return; } const rows = analysisData.tickers.map(ticker => { const data = MOCK_ETF_DATA[ticker]; if (!data) return ''; return ` ${data.issuer} ${data.expenseRatio.toFixed(2)}% $${data.aum} ${data.holdingsCount} Remove `; }).join(''); container.innerHTML = ` ${rows}

Ticker	Issuer	Expense Ratio	AUM	Holdings

`; document.querySelectorAll('.remove-etf-btn').forEach(btn => { btn.addEventListener('click', (e) => removeEtf(e.target.dataset.ticker)); }); } function renderComparisonView() { const grid = document.getElementById('compare-grid'); grid.innerHTML = ''; if (analysisData.tickers.length === 0) { grid.innerHTML = '

No ETFs to compare.

'; return; } analysisData.tickers.forEach(ticker => { const data = MOCK_ETF_DATA[ticker]; if (!data) return; const card = document.createElement('div'); card.className = 'bg-slate-50 p-4 rounded-lg border'; card.innerHTML = `

${ticker}

${data.name}

Top 5 Holdings

${data.topHoldings.map(h => `
• ${h.n}${h.w.toFixed(1)}%
`).join('')}

`; grid.appendChild(card); // Render chart const ctx = document.getElementById(`chart-${ticker}`).getContext('2d'); new Chart(ctx, { type: 'doughnut', data: { labels: data.sectorBreakdown.map(s => s.s), datasets: [{ data: data.sectorBreakdown.map(s => s.w), backgroundColor: CHART_COLORS }] }, options: { responsive: true, plugins: { legend: { display: false } } } }); }); } function addEtf() { const input = document.getElementById('ticker-input'); const ticker = input.value.trim().toUpperCase(); if (!ticker) return; if (!MOCK_ETF_DATA[ticker]) { alert(`Sorry, data for "${ticker}" is not available in this demo.`); return; } if (analysisData.tickers.includes(ticker)) { alert(`"${ticker}" is already in your analysis list.`); return; } analysisData.tickers.push(ticker); input.value = ''; renderDashboardTable(); } function removeEtf(ticker) { analysisData.tickers = analysisData.tickers.filter(t => t !== ticker); renderDashboardTable(); } addEtfBtn.addEventListener('click', addEtf); // --- PDF GENERATION --- async function generatePdfReport() { downloadPdfBtn.disabled = true; downloadPdfBtn.textContent = 'Generating...'; const pdfTemplate = document.getElementById('pdf-template'); const etfSectionsHtml = analysisData.tickers.map(ticker => { const data = MOCK_ETF_DATA[ticker]; if (!data) return ''; return ` `; }).join('

---

'); pdfTemplate.innerHTML = ` `; pdfTemplate.classList.remove('invisible'); // Render charts for the PDF analysisData.tickers.forEach(ticker => { const data = MOCK_ETF_DATA[ticker]; if (data) { const ctx = document.getElementById(`pdf-chart-${ticker}`).getContext('2d'); new Chart(ctx, { type: 'doughnut', data: { labels: data.sectorBreakdown.map(s => s.s), datasets: [{ data: data.sectorBreakdown.map(s => s.w), backgroundColor: CHART_COLORS }] }, options: { animation: { duration: 0 }, plugins: { legend: { display: true, position: 'right', labels: { boxWidth: 10, font: { size: 10 } } } } } }); } }); setTimeout(async () => { try { const { jsPDF } = window.jspdf; const canvas = await html2canvas(pdfTemplate.querySelector('.pdf-report-container .pdf-page'), { scale: 2 }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save('ETF_Analysis_Report.pdf'); } catch (e) { console.error('PDF Generation Error:', e); } finally { downloadPdfBtn.disabled = false; downloadPdfBtn.textContent = 'Download Report PDF'; pdfTemplate.classList.add('invisible'); pdfTemplate.innerHTML = ''; } }, 500); } downloadPdfBtn.addEventListener('click', generatePdfReport); // --- INITIALIZATION --- switchTab(0); renderDashboardTable(); });