Error: A required library is missing.

'; return; } // --- DATA MANAGEMENT --- let trafficData = JSON.parse(localStorage.getItem('itd_traffic')) || []; const getSampleData = () => [ { country: 'United Kingdom', code: 'GBR', sessions: 85200, bounce: 35.2, conv: 3.8, revenue: 120500 }, { country: 'Canada', code: 'CAN', sessions: 78900, bounce: 40.1, conv: 3.5, revenue: 110200 }, { country: 'Australia', code: 'AUS', sessions: 65100, bounce: 33.5, conv: 4.1, revenue: 98500 }, { country: 'Germany', code: 'DEU', sessions: 52300, bounce: 45.8, conv: 2.5, revenue: 65400 }, { country: 'India', code: 'IND', sessions: 45800, bounce: 55.2, conv: 1.8, revenue: 32100 }, { country: 'France', code: 'FRA', sessions: 38200, bounce: 42.1, conv: 2.9, revenue: 48900 }, { country: 'Japan', code: 'JPN', sessions: 31500, bounce: 38.9, conv: 3.2, revenue: 45200 }, { country: 'Brazil', code: 'BRA', sessions: 28900, bounce: 60.3, conv: 1.5, revenue: 21300 }, { country: 'Mexico', code: 'MEX', sessions: 25400, bounce: 58.1, conv: 1.9, revenue: 24500 }, { country: 'Netherlands', code: 'NLD', sessions: 21800, bounce: 36.4, conv: 4.5, revenue: 38900 }, ]; if (trafficData.length === 0) trafficData = getSampleData(); const saveState = () => localStorage.setItem('itd_traffic', JSON.stringify(trafficData)); // --- CHART INSTANCES & UTILITIES --- let mapChart, sessionsChart, revenueChart; const tabButtons = document.querySelectorAll('.itd-tab-button'); const tabContents = document.querySelectorAll('.itd-tab-content'); const nextBtn = document.getElementById('itd-next-btn'); const prevBtn = document.getElementById('itd-prev-btn'); const formatCurrency = (val) => val.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); // --- RENDER FUNCTIONS --- const renderAll = () => { try { renderKPIs(); renderMapChart(); renderSessionsChart(); renderRevenueChart(); renderCountryTable(); renderManageTable(); updateNavButtons(); } catch(error) { console.error("Dashboard rendering failed:", error); } }; const renderKPIs = () => { const totalSessions = trafficData.reduce((sum, d) => sum + d.sessions, 0); const totalRevenue = trafficData.reduce((sum, d) => sum + d.revenue, 0); const totalConversions = trafficData.reduce((sum, d) => sum + (d.sessions * (d.conv / 100)), 0); const avgConvRate = totalSessions > 0 ? (totalConversions / totalSessions) * 100 : 0; const topCountry = trafficData.length > 0 ? [...trafficData].sort((a,b) => b.sessions - a.sessions)[0].country : 'N/A'; document.getElementById('itd-sessions-kpi').textContent = totalSessions.toLocaleString(); document.getElementById('itd-conv-rate-kpi').textContent = `${avgConvRate.toFixed(1)}%`; document.getElementById('itd-revenue-kpi').textContent = formatCurrency(totalRevenue); document.getElementById('itd-top-country-kpi').textContent = topCountry; }; const renderMapChart = () => { const seriesData = trafficData.map(d => ({ x: d.code, y: d.sessions })); const options = { chart: { type: 'map', height: 400 }, series: [{ name: 'Sessions', data: seriesData }], map: { map: 'world' }, colorScale: { ranges: [ { from: 0, to: 10000, name: '0-10k', color: '#dbeafe' }, { from: 10001, to: 50000, name: '10k-50k', color: '#60a5fa' }, { from: 50001, to: 100000, name: '50k+', color: '#2563eb' } ] }, tooltip: { y: { formatter: val => `${val.toLocaleString()} Sessions` } } }; if(mapChart) mapChart.destroy(); document.querySelector("#itd-map-chart").innerHTML = ''; mapChart = new ApexCharts(document.querySelector("#itd-map-chart"), options); mapChart.render(); }; const renderSessionsChart = () => { const sortedData = [...trafficData].sort((a,b) => b.sessions - a.sessions).slice(0, 10); const options = { chart: { type: 'bar', height: 400, toolbar: { show: false } }, series: [{ name: 'Sessions', data: sortedData.map(d => d.sessions) }], xaxis: { categories: sortedData.map(d => d.country) }, plotOptions: { bar: { horizontal: true, distributed: true } }, legend: { show: false } }; if(sessionsChart) sessionsChart.destroy(); document.querySelector("#itd-sessions-chart").innerHTML = ''; sessionsChart = new ApexCharts(document.querySelector("#itd-sessions-chart"), options); sessionsChart.render(); }; const renderRevenueChart = () => { const sortedData = [...trafficData].sort((a,b) => b.revenue - a.revenue).slice(0, 10); const options = { chart: { type: 'bar', height: 400, toolbar: { show: false } }, series: [{ name: 'Revenue', data: sortedData.map(d => d.revenue) }], xaxis: { categories: sortedData.map(d => d.country) }, yaxis: { labels: { formatter: val => formatCurrency(val).replace('.00','') } }, plotOptions: { bar: { horizontal: false, distributed: true } }, legend: { show: false }, colors: [ 'var(--itd-success-color)'], tooltip: { y: { formatter: val => formatCurrency(val) } } }; if(revenueChart) revenueChart.destroy(); document.querySelector("#itd-revenue-chart").innerHTML = ''; revenueChart = new ApexCharts(document.querySelector("#itd-revenue-chart"), options); revenueChart.render(); }; const renderCountryTable = () => { const tbody = document.getElementById('itd-country-tbody'); tbody.innerHTML = ''; [...trafficData].sort((a,b) => b.sessions - a.sessions).forEach(d => { tbody.innerHTML += `${d.country}${d.sessions.toLocaleString()} ${d.bounce.toFixed(1)}%${d.conv.toFixed(1)}%${formatCurrency(d.revenue)}`; }); }; const renderManageTable = () => { const tbody = document.getElementById('itd-manage-tbody'); tbody.innerHTML = ''; trafficData.forEach(d => { tbody.innerHTML += `${d.country}${d.sessions.toLocaleString()} ${formatCurrency(d.revenue)}Delete`; }); }; // --- EVENT HANDLING --- const switchTab = (tabId) => { tabContents.forEach(c => c.style.display = 'none'); tabButtons.forEach(b => b.classList.remove('active')); const activeContent = document.getElementById(tabId); const activeButton = document.querySelector(`.itd-tab-button[data-tab="${tabId}"]`); if (activeContent && activeButton) { activeContent.style.display = 'block'; activeButton.classList.add('active'); } updateNavButtons(); }; const updateNavButtons = () => { const i = [...tabButtons].findIndex(b => b.classList.contains('active')); prevBtn.disabled = i === 0; nextBtn.disabled = i === tabButtons.length - 1; }; tabButtons.forEach(b => b.addEventListener('click', () => switchTab(b.dataset.tab))); nextBtn.addEventListener('click', () => { const i = [...tabButtons].findIndex(b=>b.classList.contains('active')); if (i < tabButtons.length - 1) switchTab(tabButtons[i+1].dataset.tab); }); prevBtn.addEventListener('click', () => { const i = [...tabButtons].findIndex(b=>b.classList.contains('active')); if (i > 0) switchTab(tabButtons[i-1].dataset.tab); }); document.getElementById('itd-traffic-form').addEventListener('submit', e => { e.preventDefault(); const country = document.getElementById('itd-form-country').value; const newData = { country: country, code: document.getElementById('itd-form-code').value.toUpperCase(), sessions: parseInt(document.getElementById('itd-form-sessions').value), bounce: parseFloat(document.getElementById('itd-form-bounce').value), conv: parseFloat(document.getElementById('itd-form-conv').value), revenue: parseFloat(document.getElementById('itd-form-revenue').value), }; const existingIndex = trafficData.findIndex(d => d.country === country); if (existingIndex > -1) trafficData[existingIndex] = newData; else trafficData.push(newData); saveState(); renderAll(); e.target.reset(); }); document.getElementById('itd-manage-tbody').addEventListener('click', e => { if(e.target.tagName === 'BUTTON') { const country = e.target.dataset.country; if(confirm(`Are you sure you want to delete data for ${country}?`)) { trafficData = trafficData.filter(d => d.country !== country); saveState(); renderAll(); } } }); // --- PDF EXPORT --- document.getElementById('itd-download-pdf-btn').addEventListener('click', function() { const btn = this; btn.textContent = 'Generating...'; btn.disabled = true; const pdfCaptureArea = document.getElementById('itd-pdf-capture-area'); html2canvas(pdfCaptureArea, { scale: 2 }).then(canvas => { const doc = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' }); const imgData = canvas.toDataURL('image/png'); doc.setFontSize(18); doc.text('International Traffic Report', 14, 22); const imgWidth = doc.internal.pageSize.getWidth() - 28; const imgHeight = (canvas.height * imgWidth) / canvas.width; doc.addImage(imgData, 'PNG', 14, 30, imgWidth, imgHeight); doc.addPage(); doc.autoTable({ html: '.itd-table', startY: 15, theme: 'striped', headStyles: { fillColor: [44, 62, 80] } }); doc.save('International_Traffic_Report.pdf'); }).finally(() => { btn.textContent = 'Download Report'; btn.disabled = false; }); }); // --- INITIALIZATION --- renderAll(); });