diff --git a/frontend/index.html b/frontend/index.html index 92b6a5c..a353488 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -100,6 +100,7 @@
  • Mínima absoluta --
  • Lluvia --
  • Humedad --
  • +
  • Viento --
  • diff --git a/frontend/js/estadisticas.js b/frontend/js/estadisticas.js index 31211f0..2533135 100644 --- a/frontend/js/estadisticas.js +++ b/frontend/js/estadisticas.js @@ -167,12 +167,13 @@ function renderMonthStats(data) { // Agrupar por día (el cron guarda varios registros por día) const byDay = {}; monthData.forEach(d => { - const key = d.dia; // YYYY-MM-DD - if (!byDay[key]) byDay[key] = { maxTemps: [], minTemps: [], lluvia: [], humedad: [] }; + const key = d.dia; + if (!byDay[key]) byDay[key] = { maxTemps: [], minTemps: [], lluvia: [], humedad: [], viento: [] }; byDay[key].maxTemps.push(d.temp_max); byDay[key].minTemps.push(d.temp_min); byDay[key].lluvia.push(parseFloat(d.lluvia)); byDay[key].humedad.push(parseFloat(d.humedad)); + byDay[key].viento.push(parseFloat(d.viento_velocidad ?? 0)); }); const days = Object.values(byDay); @@ -183,12 +184,18 @@ function renderMonthStats(data) { const lluviaTotal = lluviaPorDia.reduce((sum, v) => sum + v, 0); const lluviaMedia = lluviaTotal / days.length; const humedad = (days.reduce((sum, d) => sum + d.humedad.reduce((a, b) => a + b, 0) / d.humedad.length, 0) / days.length).toFixed(1); + const vientoMaxPorDia = days.map(d => Math.max(...d.viento)); + const vientoMediaPorDia = days.map(d => d.viento.reduce((a, b) => a + b, 0) / d.viento.length); + const vientoMax = Math.max(...vientoMaxPorDia).toFixed(0); + const vientoMin = Math.min(...vientoMaxPorDia).toFixed(0); + const vientoMedia = (vientoMediaPorDia.reduce((a, b) => a + b, 0) / days.length).toFixed(1); $("month-days").textContent = days.length; $("month-max").textContent = Math.max(...maxTemps) + "°C"; $("month-min").textContent = Math.min(...minTemps) + "°C"; $("month-rain").textContent = lluviaTotal.toFixed(1) + " mm (total) / " + lluviaMedia.toFixed(1) + " mm (media diaria)"; $("month-humidity").textContent = humedad + " % (media diaria)"; + $("month-wind").textContent = `${vientoMax} km/h (máx) / ${vientoMedia} km/h (media) / ${vientoMin} km/h (mín)`; } // ==================== @@ -332,14 +339,16 @@ function renderWindRose(data) { if (windRoseChart) windRoseChart.destroy(); windRoseChart = new Chart(canvas, { - type: "polarArea", + type: "radar", data: { labels, datasets: [{ data: values, - backgroundColor: "rgba(164, 215, 244, 0.65)", - borderColor: "rgba(164, 215, 244, 1)", - borderWidth: 1 + backgroundColor: "rgba(164, 215, 244, 0.2)", + borderColor: "rgba(164, 215, 244, 0.9)", + borderWidth: 2, + pointBackgroundColor: "rgba(164, 215, 244, 1)", + pointRadius: 3 }] }, options: { @@ -348,17 +357,16 @@ function renderWindRose(data) { legend: { display: false }, tooltip: { callbacks: { - label: ctx => { - const l = ctx.label; - return ` ${l}: ${ctx.raw} días · vel. media ${avgSpeed[ctx.dataIndex]} km/h`; - } + label: ctx => ` ${ctx.label}: ${ctx.raw} días · vel. media ${avgSpeed[ctx.dataIndex]} km/h` } } }, scales: { r: { - ticks: { color: "#666", font: { size: 10 }, backdropColor: "transparent" }, + beginAtZero: true, + ticks: { color: "#666", font: { size: 9 }, backdropColor: "transparent", stepSize: 1 }, grid: { color: "rgba(255,255,255,0.08)" }, + angleLines: { color: "rgba(255,255,255,0.1)" }, pointLabels: { color: "#a4d7f4", font: { size: 13, weight: "bold" } } } }