`;
});
}
updateChart(results.scores);
};
const updateChart = (scores) => {
const ctx = document.getElementById('score-breakdown-chart')?.getContext('2d');
if (!ctx) return;
if (scoreChart) scoreChart.destroy();
scoreChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Niche Cohesion', 'CTA Effectiveness', 'Trust Signals'],
datasets: [{
label: 'Score (out of 100)',
data: [scores.niche, scores.cta, scores.trust],
backgroundColor: 'rgba(59, 130, 246, 0.2)',
borderColor: 'rgba(59, 130, 246, 1)',
pointBackgroundColor: '#fff',
pointBorderColor: 'rgba(59, 130, 246, 1)'
}]
},
options: { scales: { r: { beginAtZero: true, max: 100 } }, plugins: { legend: { display: false } } }
});
};
const generatePDF = () => {
const { jsPDF } = window.jspdf;
const pdfContent = document.getElementById('pdf-content');
const pdfBtnContainer = document.getElementById('pdf-button-container');
if (!pdfContent || !pdfBtnContainer) return;
pdfBtnContainer.style.display = 'none';
html2canvas(pdfContent, { scale: 2, useCORS: true }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth - 20;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.setFontSize(22);
pdf.setFont('helvetica', 'bold');
pdf.text('Storefront Design Optimization Report', pdfWidth / 2, 15, { align: 'center' });
pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight);
pdf.save('storefront-optimization-report.pdf');
pdfBtnContainer.style.display = 'block';
}).catch(err => {
console.error("Error generating PDF:", err);
pdfBtnContainer.style.display = 'block';
});
};
// --- Event Listeners ---
tabBtnConfig.addEventListener('click', () => showTab('config'));
tabBtnDashboard.addEventListener('click', () => showTab('dashboard'));
prevBtn.addEventListener('click', () => showTab('config'));
nextBtn.addEventListener('click', () => showTab('dashboard'));
downloadPdfBtn.addEventListener('click', generatePDF);
allInputs.forEach(input => input.addEventListener('input', updatePreview));
// --- Initial Setup ---
updatePreview();
showTab('config');
});
