Dashboard con Filament 5: widgets, gráficos y PDF

Hola, bienvenido. Empezamos un nuevo curso en CursosDesarrolloWeb.es, y en este curso vamos a construir un dashboard con Filament 5 que no se parezca al de la documentación, y a exportarlo a un PDF que se pueda enviar a un cliente, con los gráficos dentro y usando solo PHP en el servidor.

Imagina que tienes un panel de administración hecho con Filament para una tienda y el cliente te pide 2 cosas. La primera, ver cómo va el negocio nada más entrar: ingresos, pedidos, ticket medio y clientes nuevos, cómo ha ido todo respecto al periodo anterior y qué productos se venden más. La segunda, que todo eso se lo puedas mandar en un PDF a final de mes. La primera la resuelves a medias con los widgets que trae Filament, porque los de estadísticas dan poco juego y los gráficos salen con el aspecto por defecto de Chart.js. La segunda es más complicada: DomPDF no ejecuta JavaScript, así que los gráficos no aparecen, y no entiende flexbox ni grid, así que el layout del panel se deshace. La salida habitual es instalar plugins, y con ellos entran dependencias que no controlas y, en el caso de ApexCharts, una licencia que ya no es MIT.

En este curso lo resolvemos con lo que Filament y Laravel ya traen, y de paso hacemos algo que casi nadie hace en Filament: repartir el código del dashboard en piezas pequeñas con sus tests, en lugar de un widget gigante que consulta, calcula y pinta.

dashboard-pdf, una aplicación Laravel 13 con Sail, Filament 5 y Pest, con un panel cuyo dashboard muestra las ventas de una tienda. El curso tiene 3 secciones.

En la primera preparamos la base: el proyecto, los datos con 13 meses de pedidos para que los gráficos tengan forma, un objeto Period que comparten el filtro, los widgets y el PDF, y una clase de métrica por cada KPI, con sus tests.

En la segunda construimos el dashboard: un filtro de periodo que se aplica a todos los widgets, KPIs con variación respecto al periodo anterior, icono, color y sparkline, 3 gráficos de Chart.js con el periodo anterior superpuesto, callbacks en RawJs y un plugin propio de pocas líneas, una tabla con los productos más vendidos y la maquetación, con el color y la tipografía del panel.

Así queda el dashboard al terminar:

Y en la tercera, el PDF: el navegador exporta cada gráfico a PNG y lo envía al servidor junto con el periodo, y un servicio que no sabe nada de Filament convierte una plantilla Blade diseñada para el PDF en un PDF A4 con spatie/laravel-pdf y DomPDF. Sin Node, sin Chrome y sin servicios externos, así que funciona en cualquier hosting con PHP.

Esta es la primera página del informe que descarga el botón:

El truco del botón que lo descarga está en una sola línea: exporta los gráficos en el navegador y se los manda al servidor en la misma llamada, con un método de Filament que no aparece en su documentación:

En la lección 13 veremos qué hace cada parte y por qué no sirve actionJs(), que es el método que cita la documentación.

Cada comando lo tienes en su lección con el botón de copiar, cada archivo aparece completo con lo que cambia resaltado, y al terminar puedes descargar el proyecto. No vamos a complicarnos la vida, pero sí vamos a hacer las cosas bien, para que lo apliques en tu día a día desde el minuto cero.

Si ya has creado paneles con Filament 4 o 5 y ahora te piden un dashboard que luzca y un informe en PDF, o quieres dejar de hacer dashboards con un widget que lo hace todo, este curso es para ti. Necesitas Filament a nivel de haber creado un panel con recursos, Laravel en tu día a día (Eloquent, factories, Blade y tests con Pest), Sail y Docker, y un poco de JavaScript para la parte de exportar los gráficos. Si todavía no has hecho tu primer panel, empieza por Gestión de cursos con Filament 4↗ (se abre en una pestaña nueva), que es donde se construye el primer dashboard.

Así que, si te interesa, te espero dentro del curso. Espero que te haya gustado esta introducción y nos vemos dentro. Un saludo.