Dashboard en Filament 5 sin plugins: qué vamos a construir y por qué no usar ApexCharts

Hola, bienvenido. Un dashboard en Filament 5 se puede hacer sin un solo plugin: el ChartWidget que trae Filament es Chart.js 4, con sus 8 tipos de gráfico, sus opciones y sus plugins, y los KPIs se hacen con Stat o con un componente Blade propio. En esta primera lección no vamos a escribir código. Vamos a ver qué dashboard construimos durante el curso, cómo repartimos el código para que ningún widget lo haga todo y por qué no instalamos filament-apex-charts, que en octubre de 2026 trae una licencia que conviene leer antes de ejecutar el composer require.

Empecemos por el problema. El dashboard es lo primero que ve el cliente al entrar en el panel, y con lo que Filament trae de serie se queda corto enseguida. El widget de estadísticas te da un valor, una descripción con su icono y una línea de tendencia, y en cuanto quieres una segunda línea con el valor del periodo anterior o colocar cada cosa a tu manera, se acaban las opciones. Los gráficos funcionan, pero salen con el aspecto por defecto de Chart.js: ejes sin formato de moneda, los colores de serie y ningún valor sobre las barras. Y luego está el PDF. Cuando el cliente dice "esto mismo me lo mandas en PDF", lo normal es probar con DomPDF, que funciona en cualquier hosting con PHP, y el resultado es un desastre: DomPDF no ejecuta JavaScript, así que los gráficos no existen, y no entiende flexbox ni grid, así que el layout del panel se deshace.

¿Y qué hace la mayoría? Instalar plugins. Para los gráficos, filament-apex-charts; para los KPIs, una colección de widgets ya hechos. Y con cada plugin entra una dependencia más, con su calendario de versiones ajeno al de Filament y, en el caso de ApexCharts, con una licencia que dejó de ser MIT. En este curso vamos por el otro camino: Filament y Laravel ya traen todo lo que hace falta, y lo que no traen se escribe en unas pocas líneas que entiendes y controlas.

Vamos a trabajar sobre dashboard-pdf, una aplicación Laravel 13 con Sail, Filament 5 y Pest, con un panel admin cuyo dashboard muestra las ventas de una tienda: pedidos con cliente, producto, estado, canal e importe, generados con factories para 13 meses, para que los gráficos tengan forma y los periodos se puedan comparar. Así queda al terminar el curso:

Fíjate en lo que hay en pantalla, porque son las piezas que vamos a construir durante el curso:

• Un filtro de periodo en la propia página: hoy, 7 días, 30 días, este mes, este trimestre o un rango personalizado. Se aplica a todos los widgets a través de los page filters de Filament, y el periodo sobrevive a recargar la página.
• 4 KPIs, ingresos, pedidos, ticket medio y clientes nuevos, con la variación respecto al periodo anterior, icono, color según el signo y una sparkline. Primero con el Stat nativo llevado al límite, y después con un widget propio en Blade, cuando el nativo se queda corto.
• 3 gráficos con el ChartWidget nativo: ingresos por día con el periodo anterior superpuesto, pedidos por estado en un donut y ventas por canal en barras con el importe escrito encima, con callbacks en RawJs para formatear importes, los colores del tema y un plugin propio de Chart.js de pocas líneas.
• Una tabla con los productos más vendidos del periodo, y la maquetación con columnSpan, getColumns(), el orden de los widgets y el color y la tipografía del panel.
• Un botón "Descargar PDF" en la cabecera. El navegador exporta cada gráfico a PNG, se lo envía al servidor junto con el periodo, y un servicio de PDF convierte una plantilla Blade diseñada para el PDF en un PDF A4 de 2 páginas con spatie/laravel-pdf y el driver DomPDF: KPIs, los 3 gráficos como imágenes y la tabla.

Las cifras que ves en la captura salen de un seeder con datos aleatorios, así que las tuyas van a ser otras. Lo que tiene que coincidir es la forma.