| <!DOCTYPE html> |
| <html lang="es"> |
| <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> |
| |
| :root { |
| --primary-blue: #0057b8; |
| --secondary-blue: #003f7f; |
| --light-gray: #f4f4f4; |
| --dark-gray: #333; |
| --highlight-yellow: #FFD700; |
| --danger-red: #FF0000; |
| --success-green: #008000; |
| } |
| |
| |
| 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; |
| } |
| |
| |
| .dashboard { |
| display: grid; |
| grid-template-columns: 1fr; |
| grid-template-rows: auto auto auto; |
| gap: 20px; |
| padding: 20px; |
| } |
| |
| |
| #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; |
| } |
| |
| |
| #map { |
| height: 500px; |
| width: 100%; |
| border-radius: 10px; |
| box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); |
| } |
| |
| |
| .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; |
| } |
| |
| |
| @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: [17.0151, 54.0924], category: "assessment", 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 }, |
| { name: "Prague", coords: [50.0755, 14.4378], category: "assessment", connections: 0, avgSupportTime: 0 }, |
| { name: "Kuwait", coords: [29.3759, 47.9774], 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 © <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, |
| borderColor: '#333', |
| borderWidth: 1, |
| borderRadius: 5, |
| hoverBackgroundColor: 'rgba(0, 0, 0, 0.2)' |
| }] |
| }, |
| options: { |
| plugins: { |
| legend: { display: false } |
| }, |
| scales: { |
| x: { |
| ticks: { color: '#333' }, |
| grid: { display: false } |
| }, |
| y: { |
| ticks: { color: '#333' }, |
| grid: { color: 'rgba(0,0,0,0.1)' } |
| } |
| }, |
| animation: { |
| duration: 1000, |
| easing: 'easeInOutBounce' |
| } |
| } |
| }); |
| |
| 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, |
| borderColor: '#333', |
| borderWidth: 1, |
| borderRadius: 5, |
| hoverBackgroundColor: 'rgba(0, 0, 0, 0.2)' |
| }] |
| }, |
| options: { |
| plugins: { |
| legend: { display: false } |
| }, |
| scales: { |
| x: { |
| ticks: { color: '#333' }, |
| grid: { display: false } |
| }, |
| y: { |
| ticks: { color: '#333' }, |
| grid: { color: 'rgba(0,0,0,0.1)' } |
| } |
| }, |
| animation: { |
| duration: 1000, |
| easing: 'easeInOutBounce' |
| } |
| } |
| }); |
| } |
| |
| updateMarkers(); |
| </script> |
|
|
| </body> |
| </html> |
|
|
|
|
