let patComparisonChart, ratiosRadarChart, earningsDoughnutChart;

document.addEventListener('DOMContentLoaded', () => { const selector = document.getElementById('bankSelector'); selector.addEventListener('change', (e) => { updateDashboard(e.target.value); });

const navButtons = document.querySelectorAll('.nav-button'); navButtons.forEach(button => { button.addEventListener('click', () => { const tabId = button.dataset.tab;

navButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active');

document.querySelectorAll('.tab-pane').forEach(pane => { pane.classList.add('hidden'); }); document.getElementById(tabId).classList.remove('hidden'); document.getElementById('tabContent').classList.remove('fade-in'); void document.getElementById('tabContent').offsetWidth; document.getElementById('tabContent').classList.add('fade-in'); }); });

createPatComparisonChart(); updateDashboard('Zenith'); });

function createPatComparisonChart() { const ctx = document.getElementById('patComparisonChart').getContext('2d'); const chartData = Object.values(bankData).map(b => b.pat); const chartLabels = Object.values(bankData).map(b => b.name.replace(' Plc', '').replace(' Holding Co.', ''));

patComparisonChart = new Chart(ctx, { type: 'bar', data: { labels: chartLabels, datasets: [{ label: 'Profit After Tax (₦ Trillion)', data: chartData, backgroundColor: '#BFAE99', borderColor: '#8A7F70', borderWidth: 1, borderRadius: 5, }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { return ` PAT: ₦${context.raw.toFixed(2)} Trillion`; } } } }, scales: { y: { beginAtZero: true, title: { display: true, text: '₦ Trillion' } }, x: { ticks: { maxRotation: 0, minRotation: 0, autoSkip: false, callback: function(value, index, values) { const label = this.getLabelForValue(value); return label.length > 15 ? label.substring(0, 15) + '...' : label; } } } } } }); }

function updateDashboard(bankKey) { const data = bankData[bankKey];

document.getElementById('bankNameTitle').innerText = data.name;

const introText = document.getElementById('bankIntro'); introText.innerText = `This section provides a deeper dive into ${data.name}'s performance. Explore the tabs below to understand its financial health, the primary drivers of its profitability, and its strategic pillars for future growth.`; introText.classList.remove('fade-in'); void introText.offsetWidth; introText.classList.add('fade-in');

document.getElementById('interestIncomeText').innerText = data.text.interest; document.getElementById('nonInterestIncomeText').innerText = data.text.nonInterest; document.getElementById('digitalText').innerText = data.text.digital; document.getElementById('diversificationText').innerText = data.text.diversification; document.getElementById('capitalText').innerText = data.text.capital;

updateRatiosChart(data.ratios); updateEarningsChart(data.earnings); }

function updateRatiosChart(ratios) { const ctx = document.getElementById('ratiosRadarChart').getContext('2d'); const labels = ['ROAE %', 'ROAA %', 'NIM %', 'CIR %', 'NPL %', 'CAR %']; const bankValues = [ratios.roae, ratios.roaa, ratios.nim, ratios.cir, ratios.npl, ratios.car]; const avgValues = [averageRatios.roae, averageRatios.roaa, averageRatios.nim, averageRatios.cir, averageRatios.npl, averageRatios.car];

if (ratiosRadarChart) { ratiosRadarChart.destroy(); }

ratiosRadarChart = new Chart(ctx, { type: 'radar', data: { labels: labels, datasets: [ { label: bankData[document.getElementById('bankSelector').value].name, data: bankValues, backgroundColor: 'rgba(74, 92, 90, 0.2)', borderColor: '#4A5C5A', pointBackgroundColor: '#4A5C5A', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: '#4A5C5A' }, { label: 'Industry Average', data: avgValues, backgroundColor: 'rgba(191, 174, 153, 0.2)', borderColor: '#BFAE99', pointBackgroundColor: '#BFAE99', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: '#BFAE99' } ] }, options: { responsive: true, maintainAspectRatio: false, scales: { r: { angleLines: { display: true }, suggestedMin: 0, pointLabels: { font: { size: 11 } } } }, plugins: { legend: { position: 'top', } } } }); }

function updateEarningsChart(earnings) { const ctx = document.getElementById('earningsDoughnutChart').getContext('2d'); const total = earnings.interest + earnings.nonInterest; const interestPercentage = (earnings.interest / total * 100).toFixed(1); const nonInterestPercentage = (earnings.nonInterest / total * 100).toFixed(1);

if (earningsDoughnutChart) { earningsDoughnutChart.destroy(); }

earningsDoughnutChart = new Chart(ctx, { type: 'doughnut', data: { labels: [`Interest Income (${interestPercentage}%)`, `Non-Interest Income (${nonInterestPercentage}%)`], datasets: [{ data: [earnings.interest, earnings.nonInterest], backgroundColor: ['#4A5C5A', '#BFAE99'], hoverOffset: 4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', }, tooltip: { callbacks: { label: function(context) { let label = context.label || ''; if (label) { label += ': '; } if (context.parsed !== null) { label += `₦${(context.parsed / 1000000).toFixed(2)}T`; } return label; } } } } } }); }