Custom widget en Filament con Blade: tarjetas KPI con el componente x-kpi-card

Hola, bienvenido. Un custom widget en Filament es una clase de Livewire con su propia vista Blade: make:filament-widget sin tipo crea las 2, y dentro de la vista puedes poner el Blade que quieras, componentes propios incluidos. En esta lección vamos a crear el widget KpiCards, que pinta los mismos 4 KPIs que el Stat de la lección 7 pero con tarjetas hechas a medida, con un componente x-kpi-card y una sparkline en SVG con x-sparkline.

Las métricas ya lo calculan todo, así que el widget nuevo no repite ni una consulta: lo que cambia es solo cómo se pinta.

Vamos a resolver lo que el Stat no permitía: la variación en su color y con su flecha, y debajo, en una línea aparte, más pequeña y en gris, el valor del periodo anterior, con la sparkline al pie y con la maquetación que nosotros decidamos. Para eso vamos a necesitar 4 piezas, y cada una hace una sola cosa:

• KpiCards, el widget. Lee el periodo con el trait InteractsWithPeriod de la lección 7, pide a cada métrica su KpiResult y le pasa a su vista una lista de tarjetas. No formatea ni decide colores.
• Su vista, kpi-cards.blade.php, que reparte las tarjetas en un grid y le da a cada una sus datos.
• x-kpi-card, un componente Blade anónimo que pinta una tarjeta. Recibe la etiqueta, el valor y el valor anterior ya formateados, la variación como número, la tendencia, el icono y la serie de la sparkline. No sabe nada de métricas ni de periodos, así que sirve para cualquier KPI de cualquier widget.
• x-sparkline, otro componente anónimo, que convierte una lista de números en un SVG con una línea. Sin JavaScript y sin Chart.js.

Y una pieza más que no es código: el tema del panel. Las tarjetas se maquetan con clases de Tailwind, y Filament solo genera las clases que encuentra en las carpetas que su tema declara con @source. Es justo para lo que creamos el tema en la lección 2, y aquí le añadimos una línea.

Vamos en el orden en que unas piezas dependen de otras: primero el widget con su vista vacía, que ya funciona tal como lo genera el comando; después los 2 componentes, la sparkline antes que la tarjeta porque la tarjeta la usa; después la vista del widget, que usa la tarjeta; y al final lo ponemos en el dashboard y compilamos el tema.