SpeedTestMonitor/dashboard copy.js at main · mbrenes26/SpeedTestMonitor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
let datos = [];
let chart = null;
let modoOscuro = false;

// Función para cargar data.json
async function cargarDatos() {
    const response = await fetch('data.json');
    datos = await response.json();

    if (datos.length > 0) {
        mostrarUltimoResultado();
        construirGrafico(datos);
    } else {
        document.getElementById('ultimoDetalle').textContent = "Sin datos disponibles.";
    }
}

// Mostrar el último resultado
function mostrarUltimoResultado() {
    const ultimo = datos[datos.length - 1];
    document.getElementById('ultimoDetalle').innerHTML = `
        📅 ${ultimo.FechaHora}<br>
        📥 Descarga: ${ultimo.Download} Mbps<br>
        📤 Subida: ${ultimo.Upload} Mbps<br>
        🕒 Latencia: ${ultimo.Latency} ms
    `;
}

// Construir el gráfico
function construirGrafico(filtrado) {
    const fechas = filtrado.map(x => x.FechaHora);
    const descarga = filtrado.map(x => x.Download);
    const subida = filtrado.map(x => x.Upload);
    const latencia = filtrado.map(x => x.Latency);

    const ctx = document.getElementById('speedChart').getContext('2d');

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

    chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: fechas,
            datasets: [
                {
                    label: 'Descarga (Mbps)',
                    data: descarga,
                    borderColor: 'blue',
                    fill: false,
                    tension: 0.3
                },
                {
                    label: 'Subida (Mbps)',
                    data: subida,
                    borderColor: 'green',
                    fill: false,
                    tension: 0.3
                },
                {
                    label: 'Latencia (ms)',
                    data: latencia,
                    borderColor: 'red',
                    fill: false,
                    tension: 0.3
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Fecha y Hora'
                    }
                },
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Mbps / ms'
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'top'
                }
            }
        }
    });
}

// Filtrar por fechas seleccionadas
function filtrarDatos() {
    const start = document.getElementById('startDate').value;
    const end = document.getElementById('endDate').value;

    if (!start || !end) {
        alert('Por favor selecciona ambas fechas.');
        return;
    }

    const filtrado = datos.filter(item => {
        const fecha = item.FechaHora.split(' ')[0];
        return fecha >= start && fecha <= end;
    });

    construirGrafico(filtrado);

    if (filtrado.length > 0) {
        const ultimoFiltrado = filtrado[filtrado.length - 1];
        document.getElementById('ultimoDetalle').innerHTML = `
            📅 ${ultimoFiltrado.FechaHora}<br>
            📥 Descarga: ${ultimoFiltrado.Download} Mbps<br>
            📤 Subida: ${ultimoFiltrado.Upload} Mbps<br>
            🕒 Latencia: ${ultimoFiltrado.Latency} ms
        `;
    } else {
        document.getElementById('ultimoDetalle').textContent = "Sin datos en este rango.";
    }
}

// Resetear filtro
function resetearFiltro() {
    construirGrafico(datos);
    mostrarUltimoResultado();
    document.getElementById('startDate').value = '';
    document.getElementById('endDate').value = '';
}

// Modo Oscuro
function toggleModoOscuro() {
    modoOscuro = !modoOscuro;
    document.body.classList.toggle('dark-mode', modoOscuro);
}

// Cargar al inicio
cargarDatos();