Spaces:

JPLTedCas
/

MatrixMAP

Running

App Files Files Community

JPLTedCas commited on Feb 24, 2025

Commit

8192462

verified ·

1 Parent(s): 1014fd4

Update index.html

Browse files

Files changed (1) hide show

index.html +135 -133

index.html CHANGED Viewed

@@ -3,215 +3,217 @@
 <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="controls">
-        <label for="category">Selecciona una categoría:</label>
-        <select id="category" onchange="updateMarkers()">
-            <option value="all">All</option>
-            <option value="assessment">Assessment</option>
-            <option value="deployment">In Deployment</option>
-            <option value="operative">Operative</option>
-            <option value="paused">Paused</option>
-            <option value="maintenance">Maintenance</option>
-            <option value="removed">Removed</option>
-        </select>
-    </div>
-    <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', {
             attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);
         var categoryColors = {
-            "assessment": "blue",
-            "deployment": "green",
-            "operative": "green",
-            "paused": "yellow",
-            "maintenance": "orange",
-            "removed": "red"
         };
         var markers = [];
-        var chart1 = null; // Gráfico de conexiones
-        var chart2 = null; // Gráfico de soporte
         function updateMarkers() {
             var selectedCategory = document.getElementById("category").value;
-            // Eliminar marcadores existentes
             markers.forEach(marker => map.removeLayer(marker));
             markers = [];
-            // Filtrar y agregar los marcadores
             var filteredLocations = locations.filter(location => selectedCategory === "all" || location.category === selectedCategory);
             filteredLocations.forEach(location => {
                 var marker = L.circleMarker(location.coords, {
                     color: categoryColors[location.category],
                     fillColor: categoryColors[location.category],
                     fillOpacity: 0.8,
                     radius: 8
-                }).bindPopup(`
-                    <b>${location.name}</b><br>
-                    Categoría: ${location.category}<br>
-                    Conexiones remotas: ${location.connections}<br>
-                    Tiempo medio de soporte: ${location.avgSupportTime} hrs
-                `); // Popup con detalles adicionales
-                marker.on('mouseover', function() {
-                    marker.openPopup(); // Mostrar el popup cuando se pasa el mouse
-                });
-                marker.on('mouseout', function() {
-                    marker.closePopup(); // Cerrar el popup cuando se deja de pasar el mouse
-                });
                 marker.addTo(map);
                 markers.push(marker);
             });
-            // Ajustar el zoom
             if (markers.length > 1) {
                 var group = new L.featureGroup(markers);
                 map.fitBounds(group.getBounds());
             } else if (markers.length === 1) {
-                let zoom_nivel_pais = 6;
-                map.setView(markers[0].getLatLng(), zoom_nivel_pais);
             } else {
-                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,
-                    datasets: [{
-                        label: 'Remote Connections',
-                        data: connectionsData,
-                        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
-                            }
-                        }
-                    }
-                }
             });
-            // 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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Boston Scientific Dashboard</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>
+        /* Paleta de colores corporativa */
+        :root {
+            --primary-blue: #0057b8;
+            --secondary-blue: #003f7f;
+            --light-gray: #f4f4f4;
+            --dark-gray: #333;
+            --highlight-yellow: #FFD700;
+            --danger-red: #FF0000;
+            --success-green: #008000;
+        }
+        /* Estilos generales */
+        body {
+            font-family: Arial, sans-serif;
+            background-color: var(--light-gray);
+            color: var(--dark-gray);
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            text-align: center;
+            color: var(--primary-blue);
+            margin: 20px 0;
+        }
+        /* Contenedor principal con grid */
+        .dashboard {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto auto;
+            gap: 20px;
+            padding: 20px;
+        }
+        /* Controles */
+        #controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: white;
+            padding: 10px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        select {
+            padding: 8px;
+            font-size: 16px;
+            border: 2px solid var(--primary-blue);
+            border-radius: 5px;
+            background: white;
+            color: var(--dark-gray);
+            cursor: pointer;
+        }
+        /* Estilos del mapa */
+        #map {
+            height: 500px;
+            width: 100%;
+            border-radius: 10px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        /* Contenedor de gráficos */
         .chart-container {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+        }
+        .chart-box {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
         }
+        canvas {
+            width: 100%;
+            height: 300px;
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .chart-container {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
 <body>
+    <h1>Matrix - Dashboard</h1>
+    <div class="dashboard">
+        <div id="controls">
+            <label for="category">Status:</label>
+            <select id="category" onchange="updateMarkers()">
+                <option value="all">All</option>
+                <option value="assessment">Assessment</option>
+                <option value="deployment">In Deployment</option>
+                <option value="operative">Operative</option>
+                <option value="paused">Paused</option>
+                <option value="maintenance">Maintenance</option>
+                <option value="removed">Removed</option>
+            </select>
+        </div>
+        <div id="map"></div>
+        <div class="chart-container">
+            <div class="chart-box">
+                <canvas id="connectionsChart"></canvas>
+            </div>
+            <div class="chart-box">
+                <canvas id="supportTimeChart"></canvas>
+            </div>
+        </div>
     </div>
     <script>
         var locations = [
+            { name: "Ragusa", coords: [36.9257, 14.7244], category: "operative", connections: 24, avgSupportTime: 12 },
+            { name: "Seville", coords: [37.3886, -5.9823], category: "operative", connections: 9, avgSupportTime: 1 },
+            { name: "Groningen", coords: [53.2194, 6.5665], category: "operative", connections: 13, avgSupportTime: 3 },
+            { name: "Cape Town", coords: [-33.9249, 18.4241], category: "operative", connections: 1, avgSupportTime: 0 },
+            { name: "Bern", coords: [46.9481, 7.4474], category: "operative", connections: 0, avgSupportTime: 0 },
+            { name: "Kiel", coords: [54.3233, 10.1228], category: "removed", connections: 0, avgSupportTime: 0 },
+            { name: "Le Mans", coords: [48.0077, 0.1996], category: "assessment", connections: 0, avgSupportTime: 0 },
+            { name: "Gdansk", coords: [54.3520, 18.6466], category: "assessment", connections: 0, avgSupportTime: 0 }
         ];
+        var map = L.map('map').setView([50.0755, 14.4378], 3);
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);
         var categoryColors = {
+            "assessment": "#0057b8",
+            "deployment": "#008000",
+            "operative": "#008000",
+            "paused": "#FFD700",
+            "maintenance": "#FFA500",
+            "removed": "#FF0000"
         };
         var markers = [];
+        var chart1 = null;
+        var chart2 = null;
         function updateMarkers() {
             var selectedCategory = document.getElementById("category").value;
             markers.forEach(marker => map.removeLayer(marker));
             markers = [];
             var filteredLocations = locations.filter(location => selectedCategory === "all" || location.category === selectedCategory);
             filteredLocations.forEach(location => {
                 var marker = L.circleMarker(location.coords, {
                     color: categoryColors[location.category],
                     fillColor: categoryColors[location.category],
                     fillOpacity: 0.8,
                     radius: 8
+                }).bindPopup(`<b>${location.name}</b><br>Categoría: ${location.category}<br>Conexiones: ${location.connections}<br>Soporte: ${location.avgSupportTime} hrs`);
                 marker.addTo(map);
                 markers.push(marker);
             });
             if (markers.length > 1) {
                 var group = new L.featureGroup(markers);
                 map.fitBounds(group.getBounds());
             } else if (markers.length === 1) {
+                map.setView(markers[0].getLatLng(), 6);
             } else {
+                map.setView([45, 10], 3);
             }
             updateCharts(filteredLocations);
         }
         function updateCharts(filteredLocations) {
             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]);
             if (chart1) chart1.destroy();
             if (chart2) chart2.destroy();
             var ctx1 = document.getElementById('connectionsChart').getContext('2d');
             chart1 = new Chart(ctx1, {
                 type: 'bar',
+                data: { labels: cityNames, datasets: [{ label: 'Remote Connections', data: connectionsData, backgroundColor: categoryColorsData }] }
             });
             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 }] }
             });
         }
         updateMarkers();
     </script>