Spaces:

JPLTedCas
/

MatrixMAP

Running

App Files Files Community

JPLTedCas commited on Feb 24

Commit

3cada53

verified ·

1 Parent(s): c7404c6

Update index.html

Browse files

Files changed (1) hide show

index.html +82 -32

index.html CHANGED Viewed

@@ -1,18 +1,41 @@
 <!DOCTYPE html>
-<!DOCTYPE html>
 <html lang="es">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mapa Interactivo con Gráfico</title>
     <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         #map { height: 500px; width: 100%; }
         #controls { margin: 10px; }
-        #chart-container { width: 80%; margin: 20px auto; }
-        canvas { width: 100%; height: 300px; }
     </style>
 </head>
 <body>
@@ -32,28 +55,27 @@
     <div id="map"></div>
-    <div id="chart-container">
         <canvas id="connectionsChart"></canvas>
     </div>
     <script>
         var locations = [
-            { name: "Ragusa", coords: [36.9257, 14.7244], category: "operative", connections: 24 }, // Ragusa, Italia
-            { name: "Seville", coords: [37.3886, -5.9823], category: "operative", connections: 9 }, // Sevilla, España
-            { name: "Groningen", coords: [53.2194, 6.5665], category: "operative", connections: 13 }, // Groningen, Países Bajos
-            { name: "Cape Town", coords: [-33.9249, 18.4241], category: "operative", connections: 1 }, // Ciudad del Cabo, Sudáfrica
-            { name: "Bern", coords: [46.9481, 7.4474], category: "operative", connections: 0 }, // Berna, Suiza
-            { name: "Kiel", coords: [54.3233, 10.1228], category: "removed", connections: 0 }, // Kiel, Alemania
-            { name: "Le Mans", coords: [17.0151, 54.0924], category: "assessment", connections: 0 }, // Salalah, Omán
-            { name: "Le Mans", coords: [48.0077, 0.1996], category: "assessment", connections: 0 }, // Le Mans, Francia
-            { name: "Gdansk", coords: [54.3520, 18.6466], category: "assessment", connections: 0 }, // Gdansk, Polonia
-            { name: "Prague", coords: [50.0755, 14.4378], category: "assessment", connections: 0 }, // Praga, República Checa
-            { name: "Kuwait", coords: [29.3759, 47.9774], category: "assessment", connections: 0 } // Kuwait, Kuwait
         ];
         var map = L.map('map').setView([50.0755, 14.4378], 3); // Mapa centrado en Europa
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -70,7 +92,8 @@
         };
         var markers = [];
-        var chart = null; // Variable para almacenar el gráfico
         function updateMarkers() {
             var selectedCategory = document.getElementById("category").value;
@@ -105,24 +128,24 @@
                 map.setView([45, 10], 3); // Vista inicial si no hay puntos
             }
-            // Actualizar el gráfico
-            updateChart(filteredLocations);
         }
-        function updateChart(filteredLocations) {
-            // Obtener los datos para el gráfico
             var cityNames = filteredLocations.map(location => location.name);
             var connectionsData = filteredLocations.map(location => location.connections);
             var categoryColorsData = filteredLocations.map(location => categoryColors[location.category]);
-            // Si el gráfico ya existe, destruirlo y crear uno nuevo
-            if (chart) {
-                chart.destroy();
-            }
-            // Crear el gráfico
-            var ctx = document.getElementById('connectionsChart').getContext('2d');
-            chart = new Chart(ctx, {
                 type: 'bar',
                 data: {
                     labels: cityNames,
@@ -146,11 +169,38 @@
                     }
                 }
             });
         }
-        // Mostrar todos los marcadores y gráfico al inicio
         updateMarkers();
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="es">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mapa Interactivo con Gráficos</title>
     <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         #map { height: 500px; width: 100%; }
         #controls { margin: 10px; }
+        /* Contenedor de los dos gráficos */
+    .chart-container {
+        width: 30%;           /* Ancho total del contenedor */
+        margin: 20px auto;    /* Centrado */
+        display: flex;        /* Flexbox para alinear los gráficos en fila */
+        justify-content: space-between; /* Espacio entre los gráficos */
+        flex-wrap: wrap;      /* Permite que los gráficos se acomoden si no caben */
+    }
+    /* Cada gráfico ocupa el 40% del ancho */
+    .chart-container canvas {
+        width: 48%;   /* Cada gráfico ocupa un 48% del contenedor */
+        height: 300px;
+    }
+    /* Media Query para pantallas pequeñas */
+    @media (max-width: 768px) {
+        .chart-container {
+            width: 90%;  /* Aumentar el ancho del contenedor a 90% en pantallas más pequeñas */
+        }
+        .chart-container canvas {
+            width: 100%;  /* Los gráficos ocuparán todo el ancho disponible */
+            height: 250px; /* Ajustar la altura si es necesario */
+        }
+    }
     </style>
 </head>
 <body>
     <div id="map"></div>
+    <div class="chart-container">
         <canvas id="connectionsChart"></canvas>
+        <canvas id="supportTimeChart"></canvas>
     </div>
     <script>
         var locations = [
+            { name: "Ragusa", coords: [36.9257, 14.7244], category: "operative", connections: 24, avgSupportTime: 12 }, // Ragusa, Italia
+            { name: "Seville", coords: [37.3886, -5.9823], category: "operative", connections: 9, avgSupportTime: 1 }, // Sevilla, España
+            { name: "Groningen", coords: [53.2194, 6.5665], category: "operative", connections: 13, avgSupportTime: 3 }, // Groningen, Países Bajos
+            { name: "Cape Town", coords: [-33.9249, 18.4241], category: "operative", connections: 1, avgSupportTime: 0 }, // Ciudad del Cabo, Sudáfrica
+            { name: "Bern", coords: [46.9481, 7.4474], category: "operative", connections: 0, avgSupportTime: 0 }, // Berna, Suiza
+            { name: "Kiel", coords: [54.3233, 10.1228], category: "removed", connections: 0, avgSupportTime: 0 }, // Kiel, Alemania
+            { name: "Le Mans", coords: [17.0151, 54.0924], category: "assessment", connections: 0, avgSupportTime: 0 }, // Salalah, Omán
+            { name: "Le Mans", coords: [48.0077, 0.1996], category: "assessment", connections: 0, avgSupportTime: 0 }, // Le Mans, Francia
+            { name: "Gdansk", coords: [54.3520, 18.6466], category: "assessment", connections: 0, avgSupportTime: 0 }, // Gdansk, Polonia
+            { name: "Prague", coords: [50.0755, 14.4378], category: "assessment", connections: 0, avgSupportTime: 0 }, // Praga, República Checa
+            { name: "Kuwait", coords: [29.3759, 47.9774], category: "assessment", connections: 0, avgSupportTime: 0 } // Kuwait, Kuwait
         ];
         var map = L.map('map').setView([50.0755, 14.4378], 3); // Mapa centrado en Europa
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         };
         var markers = [];
+        var chart1 = null; // Gráfico de conexiones
+        var chart2 = null; // Gráfico de soporte
         function updateMarkers() {
             var selectedCategory = document.getElementById("category").value;
                 map.setView([45, 10], 3); // Vista inicial si no hay puntos
             }
+            // Actualizar los gráficos
+            updateCharts(filteredLocations);
         }
+        function updateCharts(filteredLocations) {
+            // Obtener los datos para los gráficos
             var cityNames = filteredLocations.map(location => location.name);
             var connectionsData = filteredLocations.map(location => location.connections);
+            var avgSupportTimeData = filteredLocations.map(location => location.avgSupportTime);
             var categoryColorsData = filteredLocations.map(location => categoryColors[location.category]);
+            // Si los gráficos ya existen, destruirlos y crear nuevos
+            if (chart1) chart1.destroy();
+            if (chart2) chart2.destroy();
+            // Crear el gráfico de conexiones
+            var ctx1 = document.getElementById('connectionsChart').getContext('2d');
+            chart1 = new Chart(ctx1, {
                 type: 'bar',
                 data: {
                     labels: cityNames,
                     }
                 }
             });
+            // Crear el gráfico de tiempo de soporte
+            var ctx2 = document.getElementById('supportTimeChart').getContext('2d');
+            chart2 = new Chart(ctx2, {
+                type: 'bar',
+                data: {
+                    labels: cityNames,
+                    datasets: [{
+                        label: 'Average Monthly Support Time (hrs)',
+                        data: avgSupportTimeData,
+                        backgroundColor: categoryColorsData, // Asignar color según categoría
+                        borderColor: categoryColorsData,    // Asignar color según categoría
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                stepSize: 1
+                            }
+                        }
+                    }
+                }
+            });
         }
+        // Mostrar todos los marcadores y gráficos al inicio
         updateMarkers();
     </script>
 </body>
+</html>