index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NetTrace | ISP Performance Dashboard</title>
    <!-- Include Chart.js library for creating charts -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Include PapaParse library for parsing CSV files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f7f6;
            color: #333;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        .control-panel {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            width: 80%;
            max-width: 600px;
            text-align: center;
        }
        .chart-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            width: 90%;
            max-width: 1000px;
            height: 500px;
        }
        input[type="file"] {
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="header">
        <!-- Header section with title and description -->
        <h1>🚀 NetTrace Dashboard</h1>
        <p>Upload your local CSV logs to visualize ISP performance.</p>
    </div>

    <div class="control-panel">
        <!-- Label for file input -->
        <label for="csvFileInput" style="font-size: 1.1em;"><b>Select NetTrace CSV Files:</b></label><br>
        
        <!-- Information block for Android users -->
        <div style="background-color: #eef2ff; border-left: 4px solid #4f46e5; padding: 10px; margin: 15px 0; text-align: left; font-size: 0.9em; color: #4338ca;">
            <b>📱 Android Users:</b> Your log file is securely stored on your device. To find it, navigate to:<br>
            <code style="background: #fff; padding: 2px 5px; border-radius: 4px; display: inline-block; margin-top: 5px; border: 1px solid #c7d2fe;">Internal Storage > Android > data > com.lamecoders.nettrace > files > Documents</code>
        </div>

        <!-- File input to upload CSV files -->
        <input type="file" id="csvFileInput" accept=".csv" multiple>
    </div>

    <div class="chart-container">
        <!-- Canvas element where the chart will be rendered -->
        <canvas id="speedChart"></canvas>
    </div>

    <script>
        let speedChart = null;

        // Event listener for file input change
        document.getElementById('csvFileInput').addEventListener('change', function(event) {
            const files = event.target.files;
            if (files.length === 0) return;

            let allData = [];
            let filesProcessed = 0;

            // Loop through all selected files and parse them using PapaParse
            for (let i = 0; i < files.length; i++) {
                Papa.parse(files[i], {
                    header: true,
                    skipEmptyLines: true,
                    complete: function(results) {
                        allData = allData.concat(results.data);
                        filesProcessed++;

                        // Once all files are read, draw the chart
                        if (filesProcessed === files.length) {
                            processDataAndDrawChart(allData);
                        }
                    }
                });
            }
        });

        // Function to process data and draw the chart
        function processDataAndDrawChart(data) {
            // Sort data chronologically based on Date and Time
            data.sort((a, b) => new Date(a.Date + ' ' + a.Time) - new Date(b.Date + ' ' + b.Time));

            const labels = [];
            const downloadData = [];
            const uploadData = [];
            const pingData = [];

            // Extract relevant data from each row and prepare it for the chart
            data.forEach(row => {
                // Combine Date and Time for the X-axis
                labels.push(`${row.Date} ${row.Time} (${row.Device})`);
                downloadData.push(parseFloat(row.Download_Mbps));
                uploadData.push(parseFloat(row.Upload_Mbps));
                pingData.push(parseFloat(row.Ping_ms));
            });

            // Draw the chart using the prepared data
            drawChart(labels, downloadData, uploadData, pingData);
        }

        // Function to draw the chart using Chart.js
        function drawChart(labels, downloadData, uploadData, pingData) {
            const ctx = document.getElementById('speedChart').getContext('2d');

            // Destroy previous chart if a new file is uploaded to prevent duplication
            if (speedChart) {
                speedChart.destroy();
            }

            // Create a new Chart instance with the specified configuration
            speedChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Download (Mbps)',
                            data: downloadData,
                            borderColor: '#2563eb', // Blue
                            backgroundColor: 'rgba(37, 99, 235, 0.1)',
                            borderWidth: 2,
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: 'Upload (Mbps)',
                            data: uploadData,
                            borderColor: '#16a34a', // Green
                            backgroundColor: 'rgba(22, 163, 74, 0.1)',
                            borderWidth: 2,
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: 'Ping (ms)',
                            data: pingData,
                            borderColor: '#dc2626', // Red
                            borderWidth: 2,
                            borderDash: [5, 5], // Dashed line for ping to distinguish it
                            tension: 0.3,
                            fill: false,
                            hidden: true // Hidden by default to keep the chart clean
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Speed / Latency'
                            }
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>