Network Traffic Analysis Dashboard
Monitor and analyze real-time network traffic patterns and alerts.
Total Traffic
0 GB
Total Packets
0
Avg. Packet Size
0 KB
Active Alerts
0
Traffic Over Time (GB)
Traffic by Protocol
Geographical Traffic Source
Recent Alerts
Traffic Analysis Narrative
Add New Traffic Data
Current Traffic Logs
| Date | Country | Protocol | Volume (MB) | Alert | Actions |
|---|
The dashboard analyzed ${totalVolumeGB.toFixed(2)} GB of traffic. The top source of traffic was ${topCountry[0]}, accounting for ${(topCountry[1]/1024).toFixed(2)} GB.
`; if (alerts.length > 0) { narrative += `A total of ${alerts.length} alerts were triggered, with ${highAlerts} classified as high-severity. The most recent high-severity alert was for ${alerts.find(a => a.alert.includes('High'))?.alert || 'N/A'}.
`; } else { narrative += `The network appears stable with no security alerts triggered during this period.
`; } narrativeContentEl.innerHTML = narrative; }; // --- EVENT HANDLERS --- if (dataForm) { dataForm.addEventListener('submit', function (e) { e.preventDefault(); const newEntry = { id: Date.now(), date: dataForm.date.value, country: dataForm.country.value, protocol: dataForm.protocol.value, volume: parseInt(dataForm.volume.value), packets: parseInt(dataForm.packets.value), alert: dataForm.alertType.value, }; trafficData.push(newEntry); dataForm.reset(); showTab('dashboard'); renderAll(); }); } window.deleteData = (id) => { trafficData = trafficData.filter(item => item.id !== id); renderAll(); }; if (pdfDownloadBtn) { pdfDownloadBtn.addEventListener('click', function () { const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' }); const contentToPrint = document.getElementById('dashboard-content'); if (!contentToPrint) return; const elementsToHide = contentToPrint.querySelectorAll('button'); elementsToHide.forEach(el => el.classList.add('pdf-hide')); html2canvas(contentToPrint, { scale: 2, useCORS: true, onclone: (doc) => { Chart.defaults.animation = false; } }) .then(canvas => { elementsToHide.forEach(el => el.classList.remove('pdf-hide')); Chart.defaults.animation = true; const imgData = canvas.toDataURL('image/png'); const imgProps = doc.getImageProperties(imgData); const pdfWidth = doc.internal.pageSize.getWidth() - 40; const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; doc.text(`Network Traffic Analysis Report - ${new Date().toLocaleDateString()}`, 20, 20); doc.addImage(imgData, 'PNG', 20, 40, pdfWidth, pdfHeight); doc.save(`network-traffic-report.pdf`); }).catch(err => { elementsToHide.forEach(el => el.classList.remove('pdf-hide')); Chart.defaults.animation = true; console.error("PDF generation error:", err); }); }); } // --- INITIALIZATION --- renderAll(); showTab('dashboard'); });