Mutual Fund Performance Comparison Tool Mutual Fund Performance Comparison Tool Analyze and compare ETFs and Mutual Funds side-by-side. 1. Select Funds 2. Compare & Export Add Funds to Compare Fund Ticker (e.g., VTSAX) Add Performance Comparison Growth of $10,000 Download Comparison Report Previous Next Generated on ${new Date().toLocaleDateString()} Fund Overview ${comparisonList.map(renderFundCard).join('')} Growth of $10,000 Over 5 Years `; const pdfTemplate = document.getElementById('pdf-template'); pdfTemplate.innerHTML = reportHtml; pdfTemplate.classList.remove('invisible'); // Render charts on hidden canvases comparisonList.forEach(ticker => { const data = MOCK_FUND_DATA[ticker].allocation; new Chart(document.getElementById(`pdf-chart-${ticker}`), { type: 'doughnut', data: { labels: Object.keys(data), datasets: [{ data: Object.values(data), backgroundColor: ['#3b82f6', '#14b8a6', '#64748b'] }] }, options: { animation: { duration: 0 }, plugins: { legend: { display: false } } } }); }); new Chart(document.getElementById('pdf-growth-chart'), { type: 'line', data: growthChart.data, options: { animation: { duration: 0 }, maintainAspectRatio: false, scales: { y: { ticks: { callback: v => `$${v.toLocaleString()}` } } } } }); setTimeout(async () => { try { const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const pages = pdfTemplate.querySelectorAll('.pdf-page'); for (let i = 0; i < pages.length; i++) { const canvas = await html2canvas(pages[i], { scale: 2 }); const imgData = canvas.toDataURL('image/png'); const pdfWidth = pdf.internal.pageSize.getWidth(), pdfHeight = (canvas.height * pdfWidth) / canvas.width; if (i > 0) pdf.addPage(); pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); } pdf.save('Mutual_Fund_Comparison.pdf'); } catch (e) { console.error('PDF Generation Error:', e); } finally { downloadPdfBtn.disabled = false; downloadPdfBtn.textContent = 'Download Comparison Report'; pdfTemplate.classList.add('invisible'); pdfTemplate.innerHTML = ''; } }, 500); } // --- EVENT LISTENERS --- addBtn.addEventListener('click', addFund); document.getElementById('selected-funds-list').addEventListener('click', e => { if (e.target.classList.contains('remove-fund-btn')) removeFund(e.target.dataset.ticker); }); downloadPdfBtn.addEventListener('click', generatePdfReport); // --- INITIALIZATION --- switchTab(0); renderSelectedFunds(); });