`).join('');
// Render Table
dashboardTableBody.innerHTML = '';
analysisResults.forEach(item => {
const tr = document.createElement('tr');
tr.className = 'bg-white border-b hover:bg-gray-50';
const intentClass = `intent-${item.intent.toLowerCase()}`;
tr.innerHTML = `
"${item.text}" |
${item.intent} |
`;
dashboardTableBody.appendChild(tr);
});
// Render Chart
renderChart(summary);
};
const renderChart = (summary) => {
const chartData = {
labels: INTENT_TYPES.map(t => t === 'Purchase' ? 'Purchase Intent' : t),
datasets: [{
data: INTENT_TYPES.map(t => summary[t]),
backgroundColor: ['#dcfce7', '#cffafe', '#fee2e2', '#f0abfc', '#e5e7eb'],
borderColor: ['#166534', '#0891b2', '#991b1b', '#86198f', '#4b5563'],
borderWidth: 1
}]
};
if (intentChartInstance) intentChartInstance.destroy();
intentChartInstance = new Chart(intentChartCanvas, {
type: 'doughnut',
data: chartData,
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
position: 'top',
}
}
}
});
};
const calculateAndRenderAll = () => {
const results = runAnalysis();
renderConfig();
renderDashboard(results);
updateNavButtons();
};
// --- Tab & Navigation Logic ---
function switchTab(targetTabId) {
if (currentTab === 'config') {
saveConfig();
}
currentTab = targetTabId;
tabs.forEach(tab => tab.classList.toggle('active', tab.dataset.tab === currentTab));
tabContents.forEach(content => content.classList.toggle('active', content.id === currentTab));
if (currentTab === 'dashboard') {
const results = runAnalysis();
renderDashboard(results);
} else {
renderConfig();
}
updateNavButtons();
}
// --- Event Handlers ---
addFeedbackBtn.addEventListener('click', () => createFeedbackRow());
tabs.forEach(tab => tab.addEventListener('click', () => switchTab(tab.dataset.tab)));
nextBtn.addEventListener('click', () => currentTab === 'dashboard' ? switchTab('config') : switchTab('dashboard'));
prevBtn.addEventListener('click', () => currentTab === 'config' ? switchTab('dashboard') : switchTab('config'));
function updateNavButtons() {
if (currentTab === 'dashboard') {
nextBtn.textContent = 'Configure Data';
prevBtn.style.display = 'none';
pdfButtonContainer.style.display = 'block';
} else {
nextBtn.textContent = 'Update Analysis';
prevBtn.style.display = 'inline-flex';
pdfButtonContainer.style.display = 'none';
}
}
// --- PDF Download ---
downloadPdfBtn.addEventListener('click', async () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
const content = document.getElementById('pdf-content');
document.getElementById('pdf-date').textContent = `Report Generated: ${new Date().toLocaleString()}`;
await new Promise(r => setTimeout(r, 100)); // Allow chart to render fully
const canvas = await html2canvas(content, { scale: 2 });
const imgData = canvas.toDataURL('image/jpeg', 1.0);
const imgProps = doc.getImageProperties(imgData);
const pdfWidth = doc.internal.pageSize.getWidth() - 28;
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(imgData, 'JPEG', 14, 15, pdfWidth, pdfHeight);
document.getElementById('pdf-date').textContent = '';
doc.save(`Customer-Intent-Analysis-${new Date().toISOString().slice(0,10)}.pdf`);
});
// --- Initial Load ---
calculateAndRenderAll();
});
