Total Value: $${data.revenue.toLocaleString()}

Target Value: $${data.target.toLocaleString()}

Target Achievement: ${data.achievement.toFixed(1)}%

Breakdown by Label:

${productList}

`; }, renderComparisonChart(aggregatedData) { const id = 'p-reg-comparison-chart'; const ctx = document.getElementById(id); if (!ctx) return; const labels = Object.keys(aggregatedData); const revenueData = labels.map(l => aggregatedData[l].revenue); const targetData = labels.map(l => aggregatedData[l].target); if (this.charts[id]) this.charts[id].destroy(); this.charts[id] = new Chart(ctx, { type: 'bar', data: { labels, datasets: [ { label: 'Value', data: revenueData, backgroundColor: '#007bff' }, { label: 'Target', data: targetData, backgroundColor: '#ced4da' } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' }, title: { display: true, text: 'Value vs. Target by Region' } }, scales: { y: { beginAtZero: true, ticks: { callback: v => '$' + v/1000 + 'k' } } } } }); }, renderConfigTable() { const tbody = document.getElementById('p-reg-data-list'); tbody.innerHTML = ''; this.salesData.forEach(d => { const achievement = d.target > 0 ? ((d.revenue/d.target)*100).toFixed(1) + '%' : 'N/A'; const row = tbody.insertRow(); row.dataset.id = d.id; row.innerHTML = `${d.region}${d.product}$${d.revenue.toLocaleString()}$${d.target.toLocaleString()}${achievement} ✏️🗑️`; }); }, openTab(tabName) { this.currentTab = tabName; document.querySelectorAll('.p-reg-tab-content').forEach(c => c.classList.remove('active')); document.querySelectorAll('.p-reg-tab-button').forEach(b => b.classList.remove('active')); document.getElementById(`p-reg-${tabName}`).classList.add('active'); document.querySelector(`.p-reg-tab-button[data-tab='${tabName}']`).classList.add('active'); this.updateNavButtons(); }, navigateTabs(direction) { const tabs = ['Dashboard', 'Config']; const nextIndex = tabs.indexOf(this.currentTab) + direction; if (nextIndex >= 0 && nextIndex < tabs.length) this.openTab(tabs[nextIndex]); }, updateNavButtons() { const prevBtn = document.getElementById('p-reg-prevBtn'); const nextBtn = document.getElementById('p-reg-nextBtn'); prevBtn.style.visibility = (this.currentTab === 'Dashboard') ? 'hidden' : 'visible'; nextBtn.style.visibility = (this.currentTab === 'Config') ? 'hidden' : 'visible'; }, generatePDF() { html2pdf().from(document.getElementById('p-reg-tool-content-for-pdf')).set({ margin: 0.5, filename: 'Sales_Cross-Region_Comparison.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2, useCORS: true }, jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' } }).save(); } }; pRegApp.init(); });