Global Financial Market Heatmap Generator

Global Financial Market Heatmap

Visualize today's simulated performance across major world indices.

Filter by Region:

Click "Generate/Refresh Data" to build the heatmap.

No data available for the selected region.

'; return; } filteredData.forEach(data => { const color = getPerformanceColor(data.change); const sign = data.change >= 0 ? '+' : ''; const cell = `

${data.name}

${data.country}

${sign}${data.change}%

`; heatmapContainer.innerHTML += cell; }); }; const preparePdfReport = async () => { let heatmapImage = ''; try { // Temporarily make all cells visible for canvas capture if filtered const originalHtml = heatmapContainer.innerHTML; const wasFiltered = regionFilter.value !== 'all'; if(wasFiltered) { regionFilter.value = 'all'; renderHeatmap(); } const canvas = await html2canvas(heatmapContainer, { scale: 2.5, backgroundColor: null }); heatmapImage = canvas.toDataURL('image/png'); // Restore original view if(wasFiltered) { regionFilter.value = document.getElementById('regionFilter').value; // Get the actual current selection renderHeatmap(); } } catch (e) { console.error("Could not generate heatmap image:", e); } const tableRows = currentMarketData .sort((a,b) => b.change - a.change) // Sort by performance .map(d => ` ${d.name} (${d.country}) ${d.region} ${d.change >= 0 ? '+' : ''}${d.change}% `).join(''); pdfReportContainer.innerHTML = `

Global Market Performance Snapshot

Report Generated on: ${new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

Market Heatmap Overview

${heatmapImage ? `

` : '

Heatmap image could not be generated.

Detailed Performance Data

${tableRows}

Index	Region	Change

`; }; const downloadPdf = async () => { loader.classList.remove('hidden'); downloadPdfBtn.disabled = true; pdfMessage.textContent = 'Preparing report data...'; await preparePdfReport(); // This generates the content and captures the image pdfMessage.textContent = 'Generating PDF, please wait...'; try { const { jsPDF } = window.jspdf; const canvas = await html2canvas(pdfReportContainer, { scale: 2.5 }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgProps = pdf.getImageProperties(imgData); const imgRatio = imgProps.height / imgProps.width; const imgHeight = pdfWidth * imgRatio; let heightLeft = imgHeight; let position = 0; pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, imgHeight); heightLeft -= pdf.internal.pageSize.getHeight(); while (heightLeft > 0) { position -= pdf.internal.pageSize.getHeight(); pdf.addPage(); pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, imgHeight); heightLeft -= pdf.internal.pageSize.getHeight(); } pdf.save('Global-Market-Heatmap.pdf'); pdfMessage.textContent = 'PDF downloaded successfully!'; } catch(error) { console.error("PDF generation failed:", error); pdfMessage.textContent = 'An error occurred during PDF generation.'; } finally { loader.classList.add('hidden'); downloadPdfBtn.disabled = false; setTimeout(() => { pdfMessage.textContent = ''; }, 5000); } }; generateBtn.addEventListener('click', generateMarketData); regionFilter.addEventListener('change', renderHeatmap); downloadPdfBtn.addEventListener('click', downloadPdf); });