`;
// Update performance table
const tableBody = document.getElementById('performance-table-body');
tableBody.innerHTML = '';
data.sort((a,b) => b.sales - a.sales).forEach(aff => {
tableBody.innerHTML += `
| ${aff.name} |
$${aff.sales.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})} |
${aff.conversionRate.toFixed(2)}% |
$${aff.aov.toFixed(2)} |
$${aff.epc.toFixed(2)} |
`;
});
// Update charts
updateCharts(data);
};
const updateCharts = (data) => {
const labels = data.map(d => d.name);
const salesData = data.map(d => d.sales);
const conversionData = data.map(d => d.conversionRate);
if (salesChart) salesChart.destroy();
salesChart = new Chart(document.getElementById('sales-chart').getContext('2d'), {
type: 'bar',
data: { labels, datasets: [{ label: 'Total Sales ($)', data: salesData, backgroundColor: 'rgba(59, 130, 246, 0.7)' }] },
options: { plugins: { title: { display: true, text: 'Sales by Affiliate' }, legend: {display: false} } }
});
if (conversionChart) conversionChart.destroy();
conversionChart = new Chart(document.getElementById('conversion-chart').getContext('2d'), {
type: 'bar',
data: { labels, datasets: [{ label: 'Conversion Rate (%)', data: conversionData, backgroundColor: 'rgba(34, 197, 94, 0.7)' }] },
options: { plugins: { title: { display: true, text: 'Conversion Rate by Affiliate' }, 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: 'l', 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('Affiliate Performance Report', pdfWidth / 2, 15, { align: 'center' });
pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight);
pdf.save('affiliate-performance-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'));
addAffiliateBtn.addEventListener('click', () => addAffiliateRow());
downloadPdfBtn.addEventListener('click', generatePDF);
// --- Initial Setup ---
initialData.forEach(addAffiliateRow);
showTab('config');
});
