${color}

`; colorPaletteDisplay.appendChild(swatchContainer); }); }; // --- CHARTING --- const updateChart = (chartId, labels, data, label, type) => { const ctx = document.getElementById(chartId + 'Chart'); if (!ctx) return; const chartOptions = { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: type === 'pie' ? 'right' : 'top', display: type !== 'bar' } } }; if (type === 'bar') { chartOptions.scales = { y: { beginAtZero: true, title: { display: true, text: 'Count' } } }; } if (charts[chartId]) { charts[chartId].data.labels = labels; charts[chartId].data.datasets[0].data = data; charts[chartId].update(); } else { charts[chartId] = new Chart(ctx, { type: type, data: { labels: labels, datasets: [{ label: label, data: data, backgroundColor: type === 'bar' ? 'rgba(59, 130, 246, 0.6)' : ['#818cf8', '#a78bfa', '#c084fc', '#e879f9', '#f472b6'], borderColor: type === 'bar' ? 'rgba(59, 130, 246, 1)' : '#ffffff', borderWidth: 1 }] }, options: chartOptions }); } }; // --- PDF GENERATION --- const generatePdf = async () => { const dashboardEl = document.getElementById('dashboard-printable-area'); if (!dashboardEl) { showNotification("Dashboard element not found.", true); return; } downloadPdfBtn.textContent = 'Generating...'; downloadPdfBtn.disabled = true; try { Chart.defaults.animation = false; Object.values(charts).forEach(chart => chart.update()); const canvas = await html2canvas(dashboardEl, { scale: 2, useCORS: true, logging: false }); Chart.defaults.animation = true; Object.values(charts).forEach(chart => chart.update()); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const margin = 40; const imgProps = pdf.getImageProperties(imgData); const imgRatio = imgProps.width / imgProps.height; const pdfRatio = (pdfWidth - margin * 2) / (pdfHeight - margin * 2); let finalImgWidth, finalImgHeight; if (imgRatio > pdfRatio) { finalImgWidth = pdfWidth - margin * 2; finalImgHeight = finalImgWidth / imgRatio; } else { finalImgHeight = pdfHeight - margin * 2; finalImgWidth = finalImgHeight * imgRatio; } const x = (pdfWidth - finalImgWidth) / 2; const y = (pdfHeight - finalImgHeight) / 2; pdf.addImage(imgData, 'PNG', x, y, finalImgWidth, finalImgHeight); pdf.save('Typography-Usage-Dashboard.pdf'); } catch (error) { console.error("Error generating PDF:", error); showNotification("Sorry, there was an error creating the PDF.", true); } finally { downloadPdfBtn.textContent = 'Download Dashboard as PDF'; downloadPdfBtn.disabled = false; } }; // --- EVENT LISTENERS --- tabs.forEach(tab => tab.addEventListener('click', () => updateTabUI(tab.dataset.tab))); if (prevBtn) prevBtn.addEventListener('click', () => switchTab('prev')); if (nextBtn) nextBtn.addEventListener('click', () => switchTab('next')); if (addRowBtn) addRowBtn.addEventListener('click', addNewDataRow); if (dataTableBody) dataTableBody.addEventListener('click', removeDataRow); if (downloadPdfBtn) downloadPdfBtn.addEventListener('click', generatePdf); if (updateDashboardBtn) { updateDashboardBtn.addEventListener('click', () => { readDataFromTable(); calculateAndDisplayMetrics(); showNotification('Dashboard has been updated with the new data.'); }); } // --- INITIAL RENDER --- renderDataTable(); calculateAndDisplayMetrics(); });