`;
}
function addTableRow(tableId) {
const table = document.getElementById(tableId);
const newRow = table.tBodies[0].insertRow();
let cellsHtml = '';
table.tHead.rows[0].querySelectorAll('th:not(:last-child)').forEach(th => {
const key = th.textContent.toLowerCase().replace(' (%)','').replace(/\s+/g, '');
cellsHtml += `
| `;
});
newRow.innerHTML = `${cellsHtml}
| `;
newRow.querySelector('.delete-row-btn').addEventListener('click', (e) => e.target.closest('tr').remove());
}
function renderChartsForTab(tabId) {
Object.values(charts).forEach(chart => { if (chart) chart.destroy(); });
if (tabId === 'dashboard-overview') {
const categoryColors = { 'Technology': 'rgba(59, 130, 246, 0.7)', 'Lifestyle': 'rgba(22, 163, 74, 0.7)', 'Entertainment': 'rgba(219, 39, 119, 0.7)', 'Business': 'rgba(245, 158, 11, 0.7)' };
const bubbleData = { datasets: Object.keys(categoryColors).map(cat => ({
label: cat,
data: dashboardData.interests.filter(i => i.category === cat).map(i => ({
x: i.audienceSize, y: i.engagementRate, r: i.audienceSize / 10000, label: i.name
})),
backgroundColor: categoryColors[cat]
}))};
const bubbleCtx = document.getElementById('interestsBubbleChart')?.getContext('2d');
if(bubbleCtx) charts.bubble = new Chart(bubbleCtx, { type: 'bubble', data: bubbleData, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'top' }, tooltip: { callbacks: { label: ctx => `${ctx.raw.label}: Audience ${formatNumber(ctx.raw.x)}, Engagement ${ctx.raw.y}%` }}}, scales: { y: { title: { display: true, text: 'Engagement Rate (%)' } }, x: { title: { display: true, text: 'Audience Size' }, ticks: { callback: v => formatNumber(v) } } } } });
const genderCtx = document.getElementById('genderDoughnutChart')?.getContext('2d');
if(genderCtx) charts.gender = new Chart(genderCtx, { type: 'doughnut', data: { labels: dashboardData.demographics.gender.labels, datasets: [{ data: dashboardData.demographics.gender.data, backgroundColor: ['#60a5fa', '#34d399', '#f87171'], borderWidth: 3, borderColor: '#f9fafb' }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' }, title: { display: true, text: 'Gender Distribution' } } } });
const ageCtx = document.getElementById('ageBarChart')?.getContext('2d');
if(ageCtx) charts.age = new Chart(ageCtx, { type: 'bar', data: { labels: dashboardData.demographics.age.labels, datasets: [{ data: dashboardData.demographics.age.data, backgroundColor: '#3b82f6' }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, title: { display: true, text: 'Age Distribution' } }, scales: { y: { ticks: { callback: v => `${v}%` } } } } });
}
}
function navigateTabs(direction) {
const newIndex = currentTabIndex + direction;
if (newIndex >= 0 && newIndex < tabs.length) showTab(newIndex);
}
function updateNavButtons() {
prevTabBtn.disabled = currentTabIndex === 0;
nextTabBtn.disabled = currentTabIndex === tabs.length - 1;
}
async function generatePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'pt', 'a4');
const activeTab = tabs[currentTabIndex];
const addHeader = (title) => {
doc.setFontSize(18); doc.text('Audience Interests Report', 40, 60);
doc.setFontSize(12); doc.setTextColor(100); doc.text(`Section: ${title}`, 40, 80);
doc.setLineWidth(0.5); doc.line(40, 90, 555, 90);
};
addHeader(activeTab.name);
const tabElement = document.getElementById(activeTab.id);
if (activeTab.id === 'dashboard-overview') {
const canvas = await html2canvas(tabElement, { backgroundColor: '#ffffff', scale: 2 });
const imgData = canvas.toDataURL('image/png');
const pdfWidth = doc.internal.pageSize.getWidth() - 80;
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
doc.addImage(imgData, 'PNG', 40, 110, pdfWidth, pdfHeight);
} else {
const table = tabElement.querySelector('table');
if (table) doc.autoTable({ html: table, startY: 110 });
}
doc.save(`Audience_Interests_Report_${activeTab.name.replace(/\s/g, '_')}.pdf`);
}
init();
});
