Lección: 65 🥧 Gráfico de Pastel: Visualizando la Distribución de Pedidos (Nuevos vs. Enviados) con ApexCharts

65 🥧 Gráfico de Pastel: Visualizando la Distribución de Pedidos (Nuevos vs. Enviados) con ApexCharts

Duración: 9 min

Módulo: 📊 Análisis de Datos, Despliegue y Conclusión 62-68 Lección 4 de 7

Descripción

Lección 65: 🥧 Gráfico de Pastel | Visualizando la Distribución de Pedidos (Nuevos vs. Enviados) con ApexCharts

Esta lección finaliza la implementación de los reportes gráficos en el dashboard al incorporar un gráfico de pastel (Pie Chart), ideal para visualizar la distribución porcentual de categorías específicas, en este caso, el estado de las órdenes.

1. 🎨 Integración y Configuración del Gráfico de Pastel

Se integra el tercer tipo de gráfico ofrecido por ApexCharts:

Estructura de la Vista 🖼️: Se habilita un nuevo espacio en la vista principal (index.blade.php), ocupando cuatro columnas (col-md-4), para insertar el contenedor con el ID chart3 [02:13].
Tipo de Gráfico: Se selecciona el tipo Pie (Pastel) para la visualización de proporciones [01:49].
Etiquetas Personalizadas 🏷️: Las etiquetas se definen de forma estática para reflejar los estados de la orden:
- "Pedidos Nuevos" (en procesamiento)
- "Pedidos Enviados" (procesados) [03:45].

2. 📊 Conexión de Datos Dinámicos

El objetivo es hacer que las porciones del pastel reflejen la cantidad real de órdenes en cada estado:

Variables de Conteo 🔢: Se utilizan las variables ya existentes en el controlador, las cuales consultan la tabla ordenes para obtener:
- total_pedidos_nuevos: Conteo de órdenes cuyo estado es 'procesando' (Nuevo) [05:05].
- total_pedidos_enviados: Conteo de órdenes cuyo estado es 'enviado' (Procesado) [05:55].
Inyección en el Gráfico 💻: Se inyectan estas dos variables PHP directamente en la sección series del script de ApexCharts, sustituyendo los valores estáticos [05:20].

3. 🔄 Prueba en Tiempo Real

Se realiza una prueba de la funcionalidad para demostrar la naturaleza dinámica del reporte:

Simulación de Compra 🛍️: Se simula un nuevo registro de cliente y una compra para generar una orden con estado "Nuevo" [07:08].
Actualización Inmediata ✨: Al instante, el gráfico de pastel se actualiza:
- Muestra una porción para "Pedidos Nuevos" (el pedido recién ingresado).
- Muestra una porción para "Pedidos Enviados" (el pedido que ya se había procesado) [07:58].
Procesamiento y Cambio de Estado 📦: Se procesa el pedido recién ingresado desde el módulo administrativo. Al cambiar su estado a "Enviado", el gráfico se actualiza de nuevo, consolidando el porcentaje total en la categoría de "Pedidos Enviados" [08:29].

Hilari Web