23 📊 Reportes Gráficos con Chart.js en Tiempo Real | Sistema de Parqueo Laravel 12 FullStack
Duración: 45 minDescripción
23 📊 Índice de Lección: Reportes Gráficos con Chart.js en Tiempo Real
La lección 23 se enfoca en la implementación de reportes gráficos en el Dashboard utilizando la librería Chart.js, permitiendo la visualización de datos en tiempo real sobre los ingresos y el estado de ocupación del parqueo.
1. Configuración de Chart.js e Interfaz
- Habilitación de la Librería: Se activa la librería Chart.js en la plantilla AdminLTE estableciendo el parámetro de configuración a true [01:51].
- Compatibilidad: Se confirma la necesidad de usar la versión compatible de Chart.js para evitar conflictos con la plantilla [02:28].
- Estructura del Gráfico: Se crea la estructura básica en la vista (index.blade.php) usando un elemento <canvas> que servirá como contenedor para el gráfico [03:08].
- Diseño del Dashboard: Se reestructura el dashboard para acomodar tres reportes gráficos, distribuyendo el espacio en columnas de 6x6 (dos grandes gráficos por fila) [06:45].
- Ajuste de Escala: Se configura el gráfico para que la escala comience desde cero, asegurando que los valores bajos se visualicen correctamente [12:11].
2. Reporte Gráfico 1: Ingresos Mensuales (Gráfico de Líneas)
El primer reporte muestra una tendencia de los ingresos totales del sistema por mes a lo largo del año.
- Consulta Avanzada (SQL/DB Raw): Se prepara una consulta en el controlador (AdminController) utilizando DB::raw para seleccionar y agrupar la fecha_salida por mes (MONTH(fecha_salida)) y calcular la suma del monto_total de los tickets completados [14:47].
- Agrupación y Ordenamiento: Se utiliza groupBy('mes') y orderBy('mes') para asegurar que los meses se muestren en orden cronológico (Enero a Diciembre) [16:55].
- Tratamiento de Datos: La información se transforma en un array [17:53]. Se comprueba la consulta imprimiendo el resultado en formato JSON [19:35].
- Relleno de Meses Vacíos: Se implementa un foreach para asegurar que, si un mes no tiene ingresos, se registre con el valor cero (0), permitiendo que el gráfico muestre 12 puntos de datos (meses) [22:53].
- Visualización: El reporte se define como un gráfico de tipo line (líneas) y se implementa con la data dinámica [26:43].
3. Reporte Gráfico 2: Estado de Ocupación (Gráfico de Torta o Dona)
El segundo reporte muestra la distribución actual de los espacios del parqueo, diferenciando entre disponibles, ocupados y en mantenimiento.
- Consulta de Datos: Se obtienen todos los espacios y todos los tickets_activos para realizar la comparación en la vista [35:49].
- Lógica en la Vista (Contabilización): Se utiliza un bucle @foreach para iterar sobre los espacios y, mediante condiciones @if / @elseif, se contabiliza en tiempo real:
- Visualización: El reporte se implementa como un gráfico de tipo pie (torta) o doughnut (dona), mostrando los estados de ocupación con sus respectivos colores [44:45].
