Lección: 66 🎯 Gráfico de Barra Radial: Visualizando el Progreso de Metas (KPIs) con ApexCharts

66 🎯 Gráfico de Barra Radial: Visualizando el Progreso de Metas (KPIs) con ApexCharts

Duración: 15 min

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

Descripción

Lección 66: 🎯 Gráfico de Barra Radial | Visualizando el Progreso de Metas (KPIs) con ApexCharts

Esta lección finaliza el desarrollo del dashboard administrativo al integrar el gráfico de barra radial (Radial Bar Chart), una herramienta visual perfecta para medir el progreso y el cumplimiento de metas o Indicadores Clave de Rendimiento (KPIs), en este caso, el estado del inventario.

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

Se selecciona el gráfico de barra radial por su elegancia, que es ideal para representar porcentajes de avance o estado:

Estructura y IDs 🖼️: Se habilita un nuevo espacio en el dashboard, utilizando dos gráficos radiales contiguos (cada uno de col-md-4) con los IDs chart4 y chart5 [01:38].
Ajuste Visual: Se ajusta el alto (height) del gráfico a 210px para que encaje de manera óptima en el diseño de las columnas [02:49].
Reportes Definidos 🎯:
- "Productos con stock bajo" (mide el riesgo de agotamiento) [01:51].
- "Productos en exceso" (mide el inventario inactivo o sobrestock) [04:11].

2. ⚙️ Definición de Umbrales y Lógica de Conteo

Para convertir los conteos de inventario en porcentajes significativos, se definen umbrales y se aplica la regla de tres simple:

Definición de Límites 🔢:
- LIMITE_STOCK_BAJO: Se establece en 10. Cualquier producto con un stock menor o igual a 10 se considera bajo [06:27].
- LIMITE_STOCK_ALTO: Se establece en 50. Cualquier producto con un stock mayor o igual a 50 se considera alto [06:43].
Conteo de Productos (DB Count) 📦:
- stock_bajo: Cuenta los productos donde stock <= 10 [07:37].
- stock_alto: Cuenta los productos donde stock >= 50 [12:36].

3. 📈 Cálculo y Renderizado de Porcentajes

La clave de la barra radial es mostrar un porcentaje, no un conteo absoluto:

Cálculo Porcentual ⚖️: Se utiliza una regla de tres simple para calcular el porcentaje de productos con stock bajo o alto respecto al total de productos existentes (total_productos):
$$\text{Porcentaje} = \left( \frac{\text{Conteo}}{\text{Total de Productos}} \right) \times 100$$
Inyección Dinámica 💻: El valor porcentual resultante (porcentaje_stock_bajo y porcentaje_stock_alto) se inyecta en la propiedad series de cada gráfico radial [11:37].
Resultado Final ⭐: Los gráficos se renderizan mostrando el porcentaje exacto de productos clasificados en cada categoría de inventario (por ejemplo, 14% de stock bajo y 34% de exceso), proporcionando una visión clara del estado del inventario [12:14].

Hilari Web