|
|
<!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: [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 © <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> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
