`;
}
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(' ($)','').replace(' (30d)','').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(); });
const commonOptions = (type = 'x', title = '') => ({
responsive: true, maintainAspectRatio: false,
plugins: { legend: { display: false }, title: { display: !!title, text: title, font: {size: 16}, color: '#374151' } },
scales: type === 'x' ? { y: { ticks: { color: '#4b5563', callback: v => formatNumber(v) }, grid: { color: '#e5e7eb' } }, x: { ticks: { color: '#4b5563' }, grid: { display: false } } } : { r: { grid: {color: '#e5e7eb'}, angleLines: {color: '#e5e7eb'}, pointLabels: {font: {size: 14}}}},
});
if (tabId === 'dashboard-overview') {
const ctx = document.getElementById('streamsOverTimeChart')?.getContext('2d');
if(ctx) charts.streams = new Chart(ctx, { type: 'line', data: { labels: dashboardData.streamsOverTime.map(d => `Day ${d.day}`), datasets: [{ data: dashboardData.streamsOverTime.map(d => d.streams), backgroundColor: 'rgba(79, 70, 229, 0.1)', borderColor: '#4f46e5', tension: 0.3, fill: true }] }, options: commonOptions('x', 'Streams (Last 30 Days)') });
}
if (tabId === 'audience-analytics') {
const barCtx = document.getElementById('topLocationsChart')?.getContext('2d');
if(barCtx) charts.locations = new Chart(barCtx, { type: 'bar', data: { labels: dashboardData.topLocations.map(l => l.location), datasets: [{ data: dashboardData.topLocations.map(l => l.listeners), backgroundColor: ['#3b82f6', '#16a34a', '#f97316', '#c026d3'] }] }, options: commonOptions('x', 'Top Locations by Listeners') });
const doughnutCtx = document.getElementById('topPlatformsChart')?.getContext('2d');
if(doughnutCtx) charts.platforms = new Chart(doughnutCtx, { type: 'doughnut', data: { labels: dashboardData.topPlatforms.map(p => p.platform), datasets: [{ data: dashboardData.topPlatforms.map(p => p.streams), backgroundColor: ['#3b82f6', '#16a34a', '#f97316', '#c026d3'], borderWidth: 3, borderColor: '#f9fafb' }] }, options: {...commonOptions('none', 'Stream Share by Platform'), 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;
}
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('Artist Performance 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 (tabElement.querySelector('canvas')) {
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(`Artist_Report_${activeTab.name.replace(/\s/g, '_')}.pdf`);
}
init();
});
