Se añade una nueva sección "Dashboard" para proporcionar una visión general y analítica del inventario de IT. Esta vista transforma los datos brutos en gráficos interactivos, facilitando la toma de decisiones y la comprensión del estado del parque informático. La implementación se realizó de forma iterativa, refinando tanto la obtención de datos como la presentación visual para una mejor experiencia de usuario. **Principales Cambios:** **1. Backend:** - Se crea un nuevo `DashboardController` con el endpoint `GET /api/dashboard/stats`. - Se implementan consultas SQL agregadas para obtener estadísticas por: - Sistema Operativo. - Cantidad de equipos por Sector (mostrando todos los sectores). - Modelos de CPU (mostrando todos los modelos). - Cantidad de Memoria RAM instalada (GB). **2. Frontend:** - Se integran las librerías `chart.js` y `react-chartjs-2` para la visualización de datos. - Se añade una nueva vista "Dashboard" accesible desde la barra de navegación principal. - Se crean componentes reutilizables para cada tipo de gráfico: `OsChart`, `RamChart`, `CpuChart` y `SectorChart`. - Se diseña un layout responsivo en formato de grilla 2x2 para una visualización equilibrada de los cuatro gráficos. **3. Mejoras de Experiencia de Usuario (UX):** - Se utilizan gráficos de barras horizontales (`indexAxis: 'y'`) para mejorar la legibilidad de etiquetas largas, como los modelos de CPU y nombres de sectores. - Se implementan contenedores con scroll vertical (`overflow-y: auto`) para los gráficos de CPU y Sectores. Esto permite mostrar la totalidad de los datos sin comprometer el diseño ni crear gráficos excesivamente grandes. - Se calcula una altura dinámica para los gráficos de barras para que se adapten a la cantidad de datos que contienen, mejorando la presentación.
		
			
				
	
	
		
			84 lines
		
	
	
		
			3.0 KiB
		
	
	
	
		
			C#
		
	
	
	
	
	
			
		
		
	
	
			84 lines
		
	
	
		
			3.0 KiB
		
	
	
	
		
			C#
		
	
	
	
	
	
| using Dapper;
 | |
| using Inventario.API.Data;
 | |
| using Microsoft.AspNetCore.Mvc;
 | |
| 
 | |
| namespace Inventario.API.Controllers
 | |
| {
 | |
|     [ApiController]
 | |
|     [Route("api/[controller]")]
 | |
|     public class DashboardController : ControllerBase
 | |
|     {
 | |
|         private readonly DapperContext _context;
 | |
| 
 | |
|         public DashboardController(DapperContext context)
 | |
|         {
 | |
|             _context = context;
 | |
|         }
 | |
| 
 | |
|         public class StatItemDto
 | |
|         {
 | |
|             // Cambiamos el tipo de Label a string para que Dapper no tenga problemas
 | |
|             // al leer el ram_installed (que es un int). Lo formatearemos en el frontend.
 | |
|             public string Label { get; set; } = "";
 | |
|             public int Count { get; set; }
 | |
|         }
 | |
| 
 | |
|         public class DashboardStatsDto
 | |
|         {
 | |
|             public IEnumerable<StatItemDto> OsStats { get; set; } = new List<StatItemDto>();
 | |
|             public IEnumerable<StatItemDto> SectorStats { get; set; } = new List<StatItemDto>();
 | |
|             public IEnumerable<StatItemDto> CpuStats { get; set; } = new List<StatItemDto>();
 | |
|             public IEnumerable<StatItemDto> RamStats { get; set; } = new List<StatItemDto>(); // <-- 1. Añadir propiedad para RAM
 | |
|         }
 | |
| 
 | |
|         [HttpGet("stats")]
 | |
|         public async Task<IActionResult> GetDashboardStats()
 | |
|         {
 | |
|             var osQuery = @"
 | |
|                 SELECT Os AS Label, COUNT(Id) AS Count
 | |
|                 FROM dbo.equipos
 | |
|                 WHERE Os IS NOT NULL AND Os != ''
 | |
|                 GROUP BY Os
 | |
|                 ORDER BY Count DESC;";
 | |
|             
 | |
|             var sectorQuery = @"
 | |
|                 SELECT s.Nombre AS Label, COUNT(e.Id) AS Count
 | |
|                 FROM dbo.equipos e
 | |
|                 JOIN dbo.sectores s ON e.sector_id = s.id
 | |
|                 GROUP BY s.Nombre
 | |
|                 ORDER BY Count DESC;";
 | |
|             
 | |
|             var cpuQuery = @"
 | |
|                 SELECT Cpu AS Label, COUNT(Id) AS Count
 | |
|                 FROM dbo.equipos
 | |
|                 WHERE Cpu IS NOT NULL AND Cpu != ''
 | |
|                 GROUP BY Cpu
 | |
|                 ORDER BY Count DESC;";
 | |
| 
 | |
|             var ramQuery = @"
 | |
|                 SELECT CAST(ram_installed AS VARCHAR) AS Label, COUNT(Id) AS Count
 | |
|                 FROM dbo.equipos
 | |
|                 WHERE ram_installed > 0
 | |
|                 GROUP BY ram_installed
 | |
|                 ORDER BY ram_installed ASC;";
 | |
| 
 | |
|             using (var connection = _context.CreateConnection())
 | |
|             {
 | |
|                 var osStats = await connection.QueryAsync<StatItemDto>(osQuery);
 | |
|                 var sectorStats = await connection.QueryAsync<StatItemDto>(sectorQuery);
 | |
|                 var cpuStats = await connection.QueryAsync<StatItemDto>(cpuQuery);
 | |
|                 var ramStats = await connection.QueryAsync<StatItemDto>(ramQuery);
 | |
| 
 | |
|                 var result = new DashboardStatsDto
 | |
|                 {
 | |
|                     OsStats = osStats,
 | |
|                     SectorStats = sectorStats,
 | |
|                     CpuStats = cpuStats,
 | |
|                     RamStats = ramStats
 | |
|                 };
 | |
| 
 | |
|                 return Ok(result);
 | |
|             }
 | |
|         }
 | |
|     }
 | |
| } |