`;
}
function addTableRow(tableId) {
const table = document.getElementById(tableId);
const newRow = table.tBodies[0].insertRow();
for (let i = 0; i < table.tHead.rows[0].cells.length - 1; i++) {
newRow.insertCell(i).innerHTML = '
';
}
newRow.insertCell(table.tHead.rows[0].cells.length - 1).innerHTML = '
';
newRow.querySelector('.delete-row-btn').addEventListener('click', (e) => e.target.closest('tr').remove());
}
function renderChartsForTab(tabId) {
const chartOptions = (type = 'x', ticksCallback = (v) => v) => ({
scales: type === 'x' ? { y: { beginAtZero: true, ticks: { color: '#4b5563', callback: ticksCallback }, grid: { color: '#e5e7eb' } }, x: { ticks: { color: '#4b5563' }, grid: { display: false } } } : {},
plugins: { legend: { labels: { color: '#1f2937' } } }
});
if (tabId === 'main-dashboard') {
if (window.trafficChartInstance) window.trafficChartInstance.destroy();
const trafficCtx = document.getElementById('trafficChart')?.getContext('2d');
if(trafficCtx) window.trafficChartInstance = new Chart(trafficCtx, { type: 'line', data: { labels: dashboardData.traffic.map(d => d.label), datasets: [{ label: 'Visitors', data: dashboardData.traffic.map(d => d.visitors), backgroundColor: 'rgba(59, 130, 246, 0.1)', borderColor: '#2563eb', borderWidth: 2, tension: 0.3, fill: true }] }, options: chartOptions('x', v => (v/1000)+'k') });
}
if (tabId === 'traffic-analysis') {
if (window.sourcesChartInstance) window.sourcesChartInstance.destroy();
const sourcesCtx = document.getElementById('sourcesChart')?.getContext('2d');
if(sourcesCtx) window.sourcesChartInstance = new Chart(sourcesCtx, { type: 'doughnut', data: { labels: dashboardData.sources.map(s => s.label), datasets: [{ data: dashboardData.sources.map(s => s.value), backgroundColor: ['#2563eb', '#16a34a', '#f97316', '#c026d3', '#db2777'], borderColor: '#ffffff', borderWidth: 3 }] }, options: { ...chartOptions('none'), plugins: { legend: { position: 'bottom', labels: { color: '#1f2937' } } } } });
}
}
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;
}
function generatePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const activeTab = tabs[currentTabIndex];
doc.setFontSize(18); doc.text('Analytics and Reporting Report', 14, 22);
doc.setFontSize(12); doc.text(activeTab.name, 14, 30);
const canvas = tabContentArea.querySelector(`#${activeTab.id} canvas`);
const table = tabContentArea.querySelector(`#${activeTab.id} table`);
if (table) {
doc.autoTable({ html: table, startY: 40, theme: 'grid' });
} else if(canvas) {
const chartImg = canvas.toDataURL('image/png', 1.0);
doc.addImage(chartImg, 'PNG', 15, 40, 180, 90);
} else if (activeTab.id === 'main-dashboard') {
const kpis = dashboardData.kpis;
doc.autoTable({
startY: 40, head: [['Metric', 'Value']],
body: [['Total Visitors', kpis.totalVisitors.toLocaleString()], ['Bounce Rate', `${kpis.bounceRate}%`], ['Total Revenue', `$${kpis.totalRevenue.toLocaleString()}`], ['New Users', kpis.newUsers.toLocaleString()]],
theme: 'grid'
});
}
doc.save(`Analytics_Report_${activeTab.name.replace(/\s/g, '_')}.pdf`);
}
init();
});
