dmolinari
5f72f30931
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.
36 lines
873 B
JSON
36 lines
873 B
JSON
{
|
|
"name": "frontend",
|
|
"private": true,
|
|
"version": "0.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc -b && vite build",
|
|
"lint": "eslint .",
|
|
"preview": "vite preview"
|
|
},
|
|
"dependencies": {
|
|
"@tanstack/react-table": "^8.21.3",
|
|
"chart.js": "^4.5.0",
|
|
"react": "^19.1.1",
|
|
"react-chartjs-2": "^5.3.0",
|
|
"react-dom": "^19.1.1",
|
|
"react-hot-toast": "^2.6.0",
|
|
"react-tooltip": "^5.29.1"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.36.0",
|
|
"@types/node": "^24.6.0",
|
|
"@types/react": "^19.1.16",
|
|
"@types/react-dom": "^19.1.9",
|
|
"@vitejs/plugin-react": "^5.0.4",
|
|
"eslint": "^9.36.0",
|
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
"eslint-plugin-react-refresh": "^0.4.22",
|
|
"globals": "^16.4.0",
|
|
"typescript": "~5.9.3",
|
|
"typescript-eslint": "^8.45.0",
|
|
"vite": "^7.1.7"
|
|
}
|
|
}
|