diff --git a/sld-dashboard/app/home/templates/dashboard.html b/sld-dashboard/app/home/templates/dashboard.html index 88725fcc..03768f19 100644 --- a/sld-dashboard/app/home/templates/dashboard.html +++ b/sld-dashboard/app/home/templates/dashboard.html @@ -274,6 +274,15 @@

down

+ +
+
+
+ +
+
+
+ @@ -343,25 +352,32 @@

down

} }); - // Gráfico de Uso de Entorno (Line Chart) - var ctx = document.getElementById('environmentCountChart').getContext('2d'); - var environmentCountChart = new Chart(ctx, { - type: 'line', - data: { - labels: metrics.environment_count.map(function(a) { return a.environment; }), - datasets: [{ - label: 'Deployments by environment', - data: metrics.environment_count.map(function(a) { return a.count; }), - backgroundColor: 'rgba(0, 123, 255, 0.5)', - fill: false - }] - } - }); + // Gráfico de Uso de Entorno (Polar Area Chart) +var ctx = document.getElementById('environmentCountChart').getContext('2d'); +var environmentCountChart = new Chart(ctx, { + type: 'polarArea', + data: { + labels: metrics.environment_count.map(function(a) { return a.environment; }), + datasets: [{ + label: 'Deployments by environment', + data: metrics.environment_count.map(function(a) { return a.count; }), + // Asignar un color único a cada entorno + backgroundColor: [ + 'rgba(255, 99, 132, 0.5)', // Rojo + 'rgba(54, 162, 235, 0.5)', // Azul + 'rgba(255, 206, 86, 0.5)', // Amarillo + 'rgba(75, 192, 192, 0.5)', // Verde + 'rgba(153, 102, 255, 0.5)', // Púrpura + // ... añade más colores según el número de entornos + ], + fill: false + }] + } +}); // Gráfico de Uso de Stacks (Bar Chart) var ctx = document.getElementById('stackUsageChart').getContext('2d'); - // Ordenar los stacks por count y tomar los primeros 5 var topStacks = metrics.stack_usage.sort(function(a, b) { return b.count - a.count; }).slice(0, 5); @@ -404,7 +420,7 @@

down

// Gráfico "cloud_provider_usage" (Pie Chart) var ctx = document.getElementById('cloudProviderUsageChart').getContext('2d'); var cloudProviderUsageChart = new Chart(ctx, { - type: 'pie', + type: 'doughnut', data: { labels: metrics.cloud_provider_usage.map(function(a) { return a.provider; }), datasets: [{ @@ -437,6 +453,31 @@

down

} }); +var ctx = document.getElementById('squadEnvironmentUsageChart2').getContext('2d'); +var squadEnvironmentUsageChart = new Chart(ctx, { + type: 'radar', + data: { + labels: metrics.squad_environment_usage.map(function(a) { return a.squad + ' - ' + a.environment; }), + datasets: [{ + label: 'Deployments by squad and environment', + data: metrics.squad_environment_usage.map(function(a) { return a.count; }), + backgroundColor: metrics.squad_environment_usage.map(function() { return randomColor(); }), + pointRadius: 5 // Aumenta el tamaño de los puntos aquí + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + } + } +}); + + + {% endblock javascripts %}