Avg. Transaction
$${(totalValue / totalTransactions).toFixed(2)}
`;
}
function renderTransactionChart(data) {
const ctx = document.getElementById('transactionsChart').getContext('2d');
const labels = data.map(p => p.method);
const chartData = data.map(p => p.transactions);
if (transactionChart) transactionChart.destroy();
transactionChart = new Chart(ctx, {
type: 'bar',
data: { labels, datasets: [{
label: 'Total Transactions',
data: chartData,
backgroundColor: '#4f46e5',
}]},
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
});
}
function renderMarketShareChart(data) {
const ctx = document.getElementById('marketShareChart').getContext('2d');
const labels = data.map(p => p.method);
const chartData = data.map(p => p.transactions);
if (marketShareChart) marketShareChart.destroy();
marketShareChart = new Chart(ctx, {
type: 'doughnut',
data: { labels, datasets: [{
data: chartData,
backgroundColor: ['#4f46e5', '#6366f1', '#818cf8', '#a5b4fc', '#c7d2fe'],
}]},
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }
});
}
function renderTable(data) {
const tableBody = document.getElementById('table-body');
tableBody.innerHTML = data.map(p => `
| ${p.method} |
${p.transactions.toLocaleString()} |
$${p.totalValue.toLocaleString()} |
$${(p.totalValue / p.transactions).toFixed(2)} |
`).join('');
}
async function generatePdf() {
document.getElementById('pdf-date').textContent = new Date().toLocaleDateString();
document.getElementById('pdf-region').textContent = currentRegion;
document.getElementById('pdf-kpis').innerHTML = document.getElementById('kpi-cards').innerHTML;
document.getElementById('pdf-chart-image').src = transactionChart.toBase64Image();
const tableClone = document.querySelector('table').cloneNode(true);
tableClone.classList.add("w-full", "text-xs");
document.getElementById('pdf-table-container').innerHTML = '';
document.getElementById('pdf-table-container').appendChild(tableClone);
const reportEl = document.getElementById('pdf-report');
reportEl.classList.remove('hidden');
const canvas = await html2canvas(reportEl, { scale: 2 });
reportEl.classList.add('hidden');
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'p', unit: 'in', format: 'letter' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('Payment-Popularity-Report.pdf');
}
function initialize() {
const regionFilter = document.getElementById('regionFilter');
regionFilter.innerHTML = Object.keys(analyticsData).map(region => `
`).join('');
regionFilter.addEventListener('change', (e) => {
currentRegion = e.target.value;
updateDashboard();
});
document.getElementById('downloadPdfBtn').addEventListener('click', generatePdf);
updateDashboard();
}
initialize();
});
