Stats overview widget de Filament al límite: variación, icono, color y sparkline

Hola, bienvenido. El stats overview widget de Filament 5 pinta cada KPI como un Stat, y un Stat admite bastante más que un número: una descripción con su icono, un color, un icono junto a la etiqueta y una sparkline con chart(). En esta lección vamos a usar todo eso con los 4 KPIs del curso, ingresos, pedidos, ticket medio y clientes nuevos, cada uno con su variación respecto al periodo anterior y leyendo el filtro de la lección 6.

Y lo vamos a hacer sin una sola consulta en el widget: las métricas de la lección 5 ya calculan el valor, el anterior y la serie diaria, y el widget solo coloca cada dato en su sitio. Al final veremos hasta dónde llega el Stat, y lo que se queda fuera es lo que resolveremos en la lección 8.

Un Stat se crea con Stat::make(), que recibe la etiqueta y el valor, y se completa con métodos encadenados. Cada uno de ellos tiene ya su dato en lo que construimos en la lección 5, en Kpi, en KpiResult o en Trend:

Fíjate en la última columna: no hay nada que calcular. El color de la tendencia lo decide Trend, sin que el widget compare números, y el formato del valor lo decide cada Kpi, que sabe si es dinero o un recuento. Por eso el widget va a quedar en menos de 50 líneas y por eso, en la lección 8, otro widget completamente distinto va a poder pintar los mismos KPIs sin repetir ni una regla.

Lo único nuevo que necesitamos son 2 piezas pequeñas. La primera, una forma de que cada widget obtenga su Period del filtro de la página sin tocar el array de pageFilters; la segunda, el formato de la variación en porcentaje, que todavía no existe en Format. Las creamos en ese orden y después el widget, que las usa.