<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datos Meteorológicos en Villanueva de las Cruces</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .container {
            padding: 10px;
            background-color: #fff;
            border-radius: 10px; /* Aumentamos el radio para dar más relieve */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Aumentamos la sombra */
            margin: 10px; /* Añadimos margen para separar del borde del navegador */
        }
        h1, h2, h3 {
            text-align: center;
            color: #337ab7; /* Azul más vivo */
        }
        .filter {
            text-align: center;
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .summary {
            margin-top: 30px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .summary-box {
            flex-basis: 100%;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 10px; /* Añadimos más relieve al resumen */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .chart-container {
            margin-bottom: 20px;
        }
        .table-container {
            overflow-x: auto;
font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Datos Meteorológicos en Villanueva de las Cruces</h1>
        <div class="filter">
            <label for="month">Mes:</label>
            <select id="month">
                <option value="01">Enero</option>
                <option value="02">Febrero</option>
                <option value="03">Marzo</option>
                <option value="04">Abril</option>
                <option value="05">Mayo</option>
                <option value="06">Junio</option>
                <option value="07">Julio</option>
                <option value="08">Agosto</option>
                <option value="09">Septiembre</option>
                <option value="10">Octubre</option>
                <option value="11">Noviembre</option>
                <option value="12">Diciembre</option>
            </select>
            <label for="year">Año:</label>
            <input type="number" id="year" min="2000" max="2100" value="2024">
            <button onclick="filterData()">Filtrar</button>
        <div class="tabs">
            <button style="margin-top: 5px; padding: 5px 20px; background-color: #83ab7; color: white; border: none; border-radius: 2px; cursor: pointer;" class="tab-button" onclick="showTab('annualSummary')">Resumen Mensual</button>
<a href="home10.html" style="text-decoration: none;">
        <button style="margin-top: 5px; padding: 10px 20px; background-color: #123ab7; color: white; border: none; border-radius: 2px; cursor: pointer;">
            Resumen Anual
        </button>
    </a>
<a href="home20.html" style="text-decoration: none;">
        <button style="margin-top: 5px; padding: 10px 20px; background-color: #123ab7; color: white; border: none; border-radius: 2px; cursor: pointer;">
            Resumen Climatológico
        </button>
    </a>
        </div>
        </div>

        <div class="table-container">
            <table id="weatherTable">
                <thead>
                    <tr>
                        <th>Fecha</th>
                        <th>Temperatura Máxima (°C)</th>
                        <th>Temperatura Mínima (°C)</th>
                        <th>Humedad Máxima (%)</th>
                        <th>Humedad Mínima (%)</th>
                        <th>Presión Máxima (hPa)</th>
                        <th>Presión Mínima (hPa)</th>
                        <th>Velocidad Viento Máxima (km/h)</th>
                        <th>Velocidad Viento Mínima (km/h)</th>
                        <th>Ráfaga Máxima de Viento (km/h)</th>
                        <th>Precipitación (mm)</th>
                    </tr>
                </thead>
                <tbody id="dataBody">
                </tbody>
            </table>
        </div>

        <div class="summary">
            <div class="summary-box" id="monthlySummary">
                <h3>Resumen del Mes</h3>
            </div>
        </div>

        <div class="chart-container">
            <canvas id="temperatureMaxChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="temperatureMinChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="pressureMaxChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="pressureMinChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="humidityMaxChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="humidityMinChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="windSpeedMaxChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="windSpeedMinChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="windGustMaxChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="precipitationChart"></canvas>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // JavaScript aquí
        // Obtener el elemento tbody de la tabla
        const tableBody = document.getElementById('dataBody');
        const monthlySummaryDiv = document.getElementById('monthlySummary');

        // Obtener los selectores de mes y año
        const monthSelector = document.getElementById('month');
        const yearInput = document.getElementById('year');

        // Cargar los datos del archivo JSON
        let allWeatherData = {}; // Almacenar todos los datos meteorológicos cargados del archivo JSON
        let allRainData = {}; // Almacenar todos los datos de precipitación cargados del archivo JSON

        fetch('diario.json')
            .then(response => response.json())
            .then(data => {
                allWeatherData = data;
                const currentDate = new Date();
                const currentMonth = currentDate.getMonth() + 1; // Los meses en JavaScript son de 0 a 11
                const currentYear = currentDate.getFullYear();
                monthSelector.value = currentMonth.toString().padStart(2, '0');
                yearInput.value = currentYear.toString();
                filterData();
            })
            .catch(error => console.error('Error al cargar los datos meteorológicos:', error));

        fetch('lluvia.json')
            .then(response => response.json())
            .then(data => {
                allRainData = data;
            })
            .catch(error => console.error('Error al cargar los datos de precipitación:', error));

        // Función para filtrar y mostrar los datos según el mes y el año seleccionados
        function filterData() {
            const selectedMonth = monthSelector.value;
            const selectedYear = yearInput.value;
            const filteredWeatherData = {};
            const filteredRainData = {};

            for (const date in allWeatherData) {
                if (date.startsWith(selectedYear + '-' + selectedMonth)) {
                    filteredWeatherData[date] = allWeatherData[date];
                }
            }

            for (const year in allRainData) {
                for (const month in allRainData[year]) {
                    if (month.startsWith(selectedYear + '-' + selectedMonth)) {
                        for (const day in allRainData[year][month]) {
                            filteredRainData[day] = allRainData[year][month][day];
                        }
                    }
                }
            }

            updateTable(filteredWeatherData, filteredRainData);
            calculateMonthlySummary(filteredWeatherData, filteredRainData);
            drawCharts(filteredWeatherData, filteredRainData);
        }

        // Función para actualizar la tabla con los datos proporcionados
        function updateTable(weatherData, rainData) {
            // Limpiar la tabla antes de agregar nuevos datos
            tableBody.innerHTML = '';
const keyOrder = [
        "temperatura_maxima",
        "temperatura_minima",
        "humedad_maxima",
        "humedad_minima",
        "presion_maxima",
        "presion_minima",
        "velocidad_viento_maxima",
        "velocidad_viento_minima",
        "rafaga_maxima_viento"
    ];

            // Iterar sobre los datos meteorológicos y crear filas de tabla
            for (const date in weatherData) {
                const rowData = weatherData[date];
                const rainRowData = rainData[date] || { "precipitacion": "0.0" }; // Si no hay datos de lluvia para esta fecha, asumimos 0.0 de precipitación
                const row = document.createElement('tr');

                let html = `<td>${date}</td>`;
                keyOrder.forEach(key => {
            html += `<td>${rowData[key] || ''}</td>`; // Agregar valor o vacío si falta
        });

                html += `<td>${rainRowData['precipitacion']}</td>`; // Agregar datos de lluvia a la fila
                row.innerHTML = html;
                tableBody.appendChild(row);
            }
        }

        // Función para calcular el resumen mensual (máximas, mínimas, medias y precipitación total)
        function calculateMonthlySummary(weatherData, rainData) {
            const monthlySummary = {};

            for (const date in weatherData) {
                const month = date.substr(0, 7); // Obtener el año y mes (formato: YYYY-MM)
                const temperatureMax = parseFloat(weatherData[date]['temperatura_maxima']);
                const temperatureMin = parseFloat(weatherData[date]['temperatura_minima']);
                const windSpeedMax = parseFloat(weatherData[date]['velocidad_viento_maxima']);
                const windGustMax = parseFloat(weatherData[date]['rafaga_maxima_viento']);
                const precipitation = parseFloat(rainData[date]['precipitacion']);

                if (!monthlySummary[month]) {
                    monthlySummary[month] = {
                        'temperatura_maxima': temperatureMax,
                        'temperatura_minima': temperatureMin,
                        'velocidad_viento_maxima': windSpeedMax,
                        'rafaga_maxima_viento': windGustMax,
                        'precipitacion_total': precipitation,
                        'total_days': 1,
                        'sum_temperature_maxima': temperatureMax,
                        'sum_temperature_minima': temperatureMin
                    };
                } else {
                    // Actualizar máximas, mínimas, medias y precipitación total
                    monthlySummary[month]['temperatura_maxima'] = Math.max(monthlySummary[month]['temperatura_maxima'], temperatureMax);
                    monthlySummary[month]['temperatura_minima'] = Math.min(monthlySummary[month]['temperatura_minima'], temperatureMin);
                    monthlySummary[month]['velocidad_viento_maxima'] = Math.max(monthlySummary[month]['velocidad_viento_maxima'], windSpeedMax);
                    monthlySummary[month]['rafaga_maxima_viento'] = Math.max(monthlySummary[month]['rafaga_maxima_viento'], windGustMax);
                    monthlySummary[month]['precipitacion_total'] += precipitation;
                    monthlySummary[month]['total_days']++;
                    monthlySummary[month]['sum_temperature_maxima'] += temperatureMax;
                    monthlySummary[month]['sum_temperature_minima'] += temperatureMin;
                }
            }

            // Calcular promedios mensuales de temperatura y racha máxima de viento
            for (const month in monthlySummary) {
                monthlySummary[month]['temperatura_media_maxima'] = (monthlySummary[month]['sum_temperature_maxima'] / monthlySummary[month]['total_days']).toFixed(1);
                monthlySummary[month]['temperatura_media_minima'] = (monthlySummary[month]['sum_temperature_minima'] / monthlySummary[month]['total_days']).toFixed(1);
            }

            // Mostrar el resumen mensual en el HTML
            let summaryHTML = '';
            for (const month in monthlySummary) {
                const summaryData = monthlySummary[month];
                summaryHTML += `<p><strong>${month}</strong>: 
                Temp. Máx: ${summaryData['temperatura_maxima']}°C, 
                Temp. Mín: ${summaryData['temperatura_minima']}°C, 
                Temp. Media Máx: ${summaryData['temperatura_media_maxima']}°C, 
                Temp. Media Mín: ${summaryData['temperatura_media_minima']}°C, 
                Ráfaga Máx. Viento: ${summaryData['rafaga_maxima_viento']} km/h, 
                Precipitación Total: ${summaryData['precipitacion_total']} mm</p>`;
            }

            monthlySummaryDiv.innerHTML = summaryHTML;
        }

        // Función para dibujar los gráficos
        function drawCharts(weatherData, rainData) {
            const dates = Object.keys(weatherData);
            const dayLabels = dates.map(date => date.substr(8, 2)); // Obtener solo el día de la fecha

            const temperatureMaxData = dates.map(date => parseFloat(weatherData[date]['temperatura_maxima']));
            const temperatureMinData = dates.map(date => parseFloat(weatherData[date]['temperatura_minima']));
            const pressureMaxData = dates.map(date => parseFloat(weatherData[date]['presion_maxima']));
            const pressureMinData = dates.map(date => parseFloat(weatherData[date]['presion_minima']));
            const humidityMaxData = dates.map(date => parseFloat(weatherData[date]['humedad_maxima']));
            const humidityMinData = dates.map(date => parseFloat(weatherData[date]['humedad_minima']));
            const windSpeedMaxData = dates.map(date => parseFloat(weatherData[date]['velocidad_viento_maxima']));
            const windSpeedMinData = dates.map(date => parseFloat(weatherData[date]['velocidad_viento_minima']));
            const windGustMaxData = dates.map(date => parseFloat(weatherData[date]['rafaga_maxima_viento']));
            const precipitationData = dates.map(date => parseFloat(rainData[date]['precipitacion']));

            const ctx1 = document.getElementById('temperatureMaxChart').getContext('2d');
            const temperatureMaxChart = new Chart(ctx1, {
                type: 'line',
                data: {
                    labels: dayLabels,
                    datasets: [{
                        label: 'Temperatura Máxima (°C)',
                        data: temperatureMaxData,
                        borderColor: 'red',
                        fill: false
                    }]
                }
            });

            const ctx2 = document.getElementById('temperatureMinChart').getContext('2d');
            const temperatureMinChart = new Chart(ctx2, {
                type: 'line',
                data: {
                    labels: dayLabels,
                    datasets: [{
                        label: 'Temperatura Mínima (°C)',
                        data: temperatureMinData,
                        borderColor: 'blue',
                        fill: false
                    }]
                }
            });

            const ctx3 = document.getElementById('pressureMaxChart').getContext('2d');
            const pressureMaxChart = new Chart(ctx3, {
                type: 'line',
                data: {
                    labels: dayLabels,
                    datasets: [{
                        label: 'Presión Máxima (hPa)',
                        data: pressureMaxData,
                        borderColor: 'green',
                        fill: false
                    }]
                }
            });

            const ctx4 = document.getElementById('pressureMinChart').getContext('2d');
            const pressureMinChart = new Chart(ctx4, {
                type: 'line',
                data: {
                    labels: dayLabels,
                    datasets: [{
                        label: 'Presión Mínima (hPa)',
                        data: pressureMinData,
                        borderColor: 'purple',
                        fill: false
                    }]
                }
            });

            const ctx5 = document.getElementById('humidityMaxChart').getContext('2d');
            const humidityMaxChart = new Chart(ctx5, {
                type: 'line',
                data: {
                    labels: dayLabels,
                    datasets: [{
                        label: 'Humedad Máxima (%)',
                        data: humidityMaxData,
                        borderColor: 'orange',
                        fill: false
                    }]
                }
            });

            const ctx6 = document.getElementById('humidityMinChart').getContext('2d');
            const humidityMinChart = new Chart(ctx6, {
                type: 'line',
                data: {
                    labels: dayLabels,
                    datasets: [{
                        label: 'Humedad Mínima (%)',
                        data: humidityMinData,
                        borderColor: 'brown',
                        fill: false
                    }]
                }
            });

            const ctx7 = document.getElementById('windSpeedMaxChart').getContext('2d');
            const windSpeedMaxChart = new Chart(ctx7, {
                type: 'line',
                data: {
                    labels: dayLabels,
                    datasets: [{
                        label: 'Velocidad Viento Máxima (km/h)',
                        data: windSpeedMaxData,
                        borderColor: 'black',
                        fill: false
                    }]
                }
            });

            const ctx8 = document.getElementById('windSpeedMinChart').getContext('2d');
            const windSpeedMinChart = new Chart(ctx8, {
                type: 'line',
                data: {
                    labels: dayLabels,
                    datasets: [{
                        label: 'Velocidad Viento Mínima (km/h)',
                        data: windSpeedMinData,
                        borderColor: 'gray',
                        fill: false
                    }]
                }
            });

            const ctx9 = document.getElementById('windGustMaxChart').getContext('2d');
            const windGustMaxChart = new Chart(ctx9, {
                type: 'line',
                data: {
                    labels: dayLabels,
                    datasets: [{
                        label: 'Ráfaga Máxima de Viento (km/h)',
                        data: windGustMaxData,
                        borderColor: 'pink',
                        fill: false
                    }]
                }
            });

            const ctx10 = document.getElementById('precipitationChart').getContext('2d');
            const precipitationChart = new Chart(ctx10, {
                type: 'bar',
                data: {
                    labels: dayLabels,
                    datasets: [{
                        label: 'Precipitación (mm)',
                        data: precipitationData,
                        backgroundColor: 'lightblue'
                    }]
                }
            });
        }
    </script>
</body>
</html>