Failed to generate heatmap. Please check your data format.

`; } }; const downloadPDF = async () => { const { jsPDF } = window.jspdf; const canvas = await html2canvas(elements.pdfContentArea, { scale: 2, // Improve resolution backgroundColor: '#ffffff' // Ensure background is white }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [canvas.width, canvas.height] }); pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height); pdf.save('heatmap-dashboard.pdf'); }; // Event Listeners elements.tabs.dashboard.addEventListener('click', () => switchTab('dashboard')); elements.tabs.config.addEventListener('click', () => switchTab('config')); elements.navButtons.next.addEventListener('click', () => { const currentIndex = tabs.indexOf(currentTab); if (currentIndex < tabs.length - 1) { switchTab(tabs[currentIndex + 1]); } }); elements.navButtons.prev.addEventListener('click', () => { const currentIndex = tabs.indexOf(currentTab); if (currentIndex > 0) { switchTab(tabs[currentIndex - 1]); } }); elements.generateBtn.addEventListener('click', () => { generateHeatmap(); switchTab('dashboard'); // Switch to dashboard after generating }); elements.downloadPdfBtn.addEventListener('click', downloadPDF); // Initial setup const initialize = () => { elements.configInputs.csvData.value = sampleData; elements.configInputs.chartTitle.value = sampleTitle; generateHeatmap(); updateNavButtons(); }; initialize(); });