dashboardInteractivo = { const selectorInterno = Inputs.select( ['Sydney', 'Melbourne', 'Brisbane', 'Perth', 'Hobart'], {label: "Selecciona una ciudad:"} ); const contenedor = html`

${selectorInterno}

`; const zonaDashboard = contenedor.querySelector(".zona-dashboard"); function actualizarDashboard(ciudad) { zonaDashboard.innerHTML = ""; const filtrados = data.filter(d => d.Location === ciudad); if (!filtrados || filtrados.length === 0) return; // --- ESTADÍSTICAS --- const avgMaxTemp = d3.mean(filtrados, d => +d.MaxTemp); const avgMinTemp = d3.mean(filtrados, d => +d.MinTemp); const avgRainfall = d3.mean(filtrados, d => +d.Rainfall); const avgHumidity3pm = d3.mean(filtrados, d => +d.Humidity3pm); const tempPromedioGeneral = (avgMaxTemp + avgMinTemp) / 2; const conteoViento = d3.rollup(filtrados, v => v.length, d => d.WindGustDir); const modaViento = [...conteoViento.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] || "N/D"; const totalRegistros = filtrados.length; const diasLluviaManana = filtrados.filter(d => d.RainTomorrow === 'Yes').length; const probLluviaNumerica = totalRegistros > 0 ? (diasLluviaManana / totalRegistros) * 100 : 0; const probLluviaManana = probLluviaNumerica.toFixed(1) + "%"; const coords = coordenadas[ciudad]; const datosCiudad = { Location: ciudad, lat: coords.lat, lng: coords.lng, tempMedia: tempPromedioGeneral, maxTemp: avgMaxTemp, minTemp: avgMinTemp, rainfall: avgRainfall, viento: modaViento, probLluvia: probLluviaManana }; // --- LÓGICA RECALIBRADA PARA DATOS CRUDOS Y ASIGNACIÓN DE ÍCONOS --- let recomendacionTitulo = "Condiciones Estables"; let recomendacionTexto = "El clima regional se mantiene dentro de los rangos estándar para operaciones generales en campo. Monitoreo rutinario recomendado."; let colorAlerta = "#27ae60"; let iconoClima = "⛅"; let fondoWidget = "linear-gradient(135deg, #56CCF2 0%, #2F80ED 100%)"; if (tempPromedioGeneral < 14.0) { recomendacionTitulo = "❄️ Riesgo de Heladas e Inactividad Térmica"; recomendacionTexto = "Temperaturas promedio bajas acumuladas en el histórico. Alto riesgo de escarcha matutina. Proteja cultivos sensibles y planifique siembras de invierno."; colorAlerta = "#95a5a6"; iconoClima = "❄️"; fondoWidget = "linear-gradient(135deg, #eef2f3 0%, #8e9eab 100%)"; } else if (avgHumidity3pm < 45.0) { recomendacionTitulo = "💧 Planificación de Riego Crítico"; recomendacionTexto = "Ambiente con baja humedad relativa por la tarde y alta evaporación. Optimice los turnos de riego por goteo en la madrugada para proteger el suelo."; colorAlerta = "#3498db"; iconoClima = "☀️"; fondoWidget = "linear-gradient(135deg, #f1c40f 0%, #f39c12 100%)"; } else if (tempPromedioGeneral > 20.0 && avgHumidity3pm > 53.0) { recomendacionTitulo = "🚨 Riesgo de Proliferación de Fitopatógenos"; recomendacionTexto = "Calor acumulado continuo combinado con humedad costera. Condiciones óptimas para hongos. Aplique tratamientos preventivos."; colorAlerta = "#e74c3c"; iconoClima = "🌦️"; fondoWidget = "linear-gradient(135deg, #d35400 0%, #c0392b 100%)"; } else if (avgRainfall > 3.0) { recomendacionTitulo = "⚠️ Alerta de Lavado de Nutrientes"; recomendacionTexto = "Se registran lluvias muy intensas. Esto aumenta el peligro de que el suelo pierda su nitrógeno al ser lavado por el exceso de agua. Se recomienda no fertilizar justo antes de las lluvias."; colorAlerta = "#e67e22"; iconoClima = "🌧️"; fondoWidget = "linear-gradient(135deg, #606c88 0%, #3f4c6b 100%)"; } else { recomendacionTitulo = "✅ Condiciones Estables"; recomendacionTexto = "Los promedios anuales muestran un equilibrio templado. Buen momento para labores generales y mantenimiento estructural."; colorAlerta = "#27ae60"; iconoClima = "⛅"; fondoWidget = "linear-gradient(135deg, #11998e 0%, #38ef7d 100%)"; } // --- BARRA DE TEMPERATURA Y MAPA INTERACTIVO --- const rangoMin = 10; const rangoMax = 25; const porcentajePosicion = Math.min(100, Math.max(0, ((tempPromedioGeneral - rangoMin) / (rangoMax - rangoMin)) * 100)); const barraLeyendaInteractiva = html`

Escala Térmica General (Ciudad actual: ${tempPromedioGeneral.toFixed(1)}°C)

▼

10°C17.5°C25°C

`; const mapa = Plot.plot({ projection: {type: "mercator", domain: mapaAustralia}, width: 450, height: 400, color: { type: "linear", scheme: "BuRd", domain: [rangoMin, rangoMax], legend: false }, marks: [ Plot.geo(mapaAustralia, {stroke: "#A66D35", fill: "#D89F67"}), Plot.dot([datosCiudad], {x: "lng", y: "lat", r: 16, fill: "tempMedia", stroke: "#333", strokeWidth: 2}), Plot.text([datosCiudad], {x: "lng", y: "lat", text: "Location", dy: -25, fontWeight: "bold", fontSize: 14}) ] }); const filaSuperior = html`

${barraLeyendaInteractiva} ${mapa}

${datosCiudad.Location}

Clima Promedio

${iconoClima} ${datosCiudad.tempMedia.toFixed(0)}°C

Prom. Máxima: ${datosCiudad.maxTemp?.toFixed(1)} °C

Prom. Mínima: ${datosCiudad.minTemp?.toFixed(1)} °C

Viento Frecuente: ${datosCiudad.viento}

Prob. Lluvia: ${datosCiudad.probLluvia}

`; const panelRecomendacion = html`

${recomendacionTitulo}

${recomendacionTexto}

`; const graficosNuevos = html`

Evolución de la Temperatura

${Plot.plot({ width: 450, height: 220, x: {type: "time"}, marks: [ Plot.lineY(filtrados, Plot.windowY({k: 30, x: "Date", y: "MaxTemp", stroke: "#e74c3c"})), Plot.lineY(filtrados, Plot.windowY({k: 30, x: "Date", y: "MinTemp", stroke: "#3498db"})) ] })}

Humedad vs. Temperatura (3 PM)

${Plot.plot({ width: 450, height: 220, x: {label: "Temperatura a las 3pm (°C)"}, y: {label: "Humedad a las 3pm (%)"}, marks: [ Plot.dot(filtrados, {x: "Temp3pm", y: "Humidity3pm", r: 2, fill: "#9b59b6", fillOpacity: 0.3}) ] })}

`; zonaDashboard.append(filaSuperior, panelRecomendacion, graficosNuevos); } selectorInterno.addEventListener("input", () => actualizarDashboard(selectorInterno.value)); actualizarDashboard(selectorInterno.value); return contenedor; }