No KPI data available.

'; } else { let kpiTableHtml = ` `; footTrafficMetrics.forEach(metric => { const progress = calculateProgress(metric.actual, metric.target); kpiTableHtml += ` `; }); kpiTableHtml += `

Metric Name	Target Value	Actual Value	Unit	Progress (%)
${metric.name || 'N/A'}	${formatValue(metric.target, metric.unit)}	${formatValue(metric.actual, metric.unit)}	${metric.unit || 'N/A'}	${progress.toFixed(2)}%

`; pdfKpiMetrics.innerHTML += kpiTableHtml; } // Populate foot traffic insights for PDF let insightsForPdf = ''; if (footTrafficMetrics.length === 0) { insightsForPdf = '

No insights generated. Please configure your data.

'; } else { let overallProgress = 0; let metricsBelowTarget = []; let metricsAboveTarget = []; footTrafficMetrics.forEach(metric => { const progress = calculateProgress(metric.actual, metric.target); overallProgress += progress; if (progress < 100 && metric.actual < metric.target) { metricsBelowTarget.push({ name: metric.name, progress: progress.toFixed(2) }); } else if (progress >= 100 && metric.actual >= metric.target) { metricsAboveTarget.push({ name: metric.name, progress: progress.toFixed(2) }); } }); const avgProgress = footTrafficMetrics.length > 0 ? (overallProgress / footTrafficMetrics.length).toFixed(2) : 0; insightsForPdf += ``; } pdfTrafficInsights.innerHTML = `

Foot Traffic Insights

${insightsForPdf}`; // Show the hidden content temporarily for html2canvas to render it pdfContent.style.display = 'block'; showMessage('Generating PDF...', 'info'); try { const canvas = await html2canvas(pdfContent, { scale: 2, // Increase scale for better quality useCORS: true, // If you have external images, enable CORS logging: false // Disable console logging from html2canvas }); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF('p', 'mm', 'a4'); // 'p' for portrait, 'mm' for millimeters, 'a4' size const imgWidth = 210; // A4 width in mm const pageHeight = 297; // A4 height in mm const imgHeight = canvas.height * imgWidth / canvas.width; let heightLeft = imgHeight; let position = 0; pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; while (heightLeft >= 0) { position = heightLeft - imgHeight; pdf.addPage(); pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; } pdf.save('Customer_Foot_Traffic_Dashboard.pdf'); showMessage('PDF downloaded successfully!', 'success'); } catch (error) { console.error("Error generating PDF:", error); showMessage('Error generating PDF. Please try again.', 'error'); } finally { // Hide the content again after PDF generation pdfContent.style.display = 'none'; } }; } // --- Initial Load --- switchTab('dashboard'); // Start on the dashboard tab renderAllMetricInputRows(); // Render initial data in config tab renderAllKpiCards(); // Render initial data in dashboard tab generateTrafficInsights(); // Generate initial insights });