Saltar al contenido
Curso Dashboard con Filament 5: widgets, gráficos y PDF
05/14 Base: proyecto, datos y métricas Métricas del dashboard en clases propias: KPIs con comparación y tests en Pest
Tu lectura Quedan 22 min
Lección 5 de 14 · Base: proyecto, datos y métricas

Métricas del dashboard en clases propias: KPIs con comparación y tests en Pest

22 min de lectura Laravel 13

Hola, bienvenido. Las métricas de un dashboard de Filament, como los ingresos, los pedidos, el ticket medio o los clientes nuevos, no tienen por qué vivir en los widgets: cada una puede ser una clase propia que recibe un Period y devuelve su valor, el del periodo anterior y una serie con un valor por día. En esta lección vamos a escribir esas 4 clases en app/Metrics/, sobre una clase base pequeña, con los 2 scopes de Order que comparten y una clase para formatear los importes en español, y las vamos a probar con Pest sobre factories, sin Filament de por medio.

Ni una consulta en un widget

Es la regla del curso que vimos en la primera lección, y para cumplirla los números tienen que salir de algún sitio que no sea el widget. En la segunda sección vamos a tener 2 widgets de KPIs, uno con el Stat nativo y otro propio en Blade, y en la tercera un informe en PDF, y los 3 enseñan los mismos 4 números con su comparación. Si cada widget hiciera sus consultas, tendríamos la misma suma de ingresos escrita 3 veces, y la primera vez que una cambiara (por ejemplo, para contar también los pedidos pendientes) el PDF y la pantalla dirían cosas distintas. Con las métricas en clases propias, los widgets y el PDF solo preguntan, y las métricas se prueban con factories sin levantar el panel.

Así se reparten las piezas:

Diagrama de las métricas del dashboard: la clase abstracta Kpi con sus 4 hijas, Revenue, Orders, AverageTicket y NewCustomers, y su método compare(), que recibe un Period y devuelve un KpiResult con el valor, el del periodo anterior y la sparkline

Kpi es una clase abstracta que dice qué tiene que saber hacer cada métrica: su etiqueta, su icono, su valor en un periodo, su valor día a día y cómo se formatea. Con eso, Kpi implementa una sola vez la comparación: compare() recibe un Period, pide el valor de ese periodo y el de su periodo anterior, pide la serie diaria para la sparkline y lo devuelve todo junto en un KpiResult. Ese resultado sabe calcular la variación en porcentaje y si la tendencia sube, baja o se queda igual, con un enum, Trend, que también decide el color y el icono de la tendencia, para que ningún widget lo decida por su cuenta. Y los importes salen de una clase de formato, Format, para que se escriban igual en las tarjetas, en las tablas y en el PDF.

Las 4 métricas son las hijas de Kpi, una clase cada una, y son las únicas que consultan la base de datos.

Lo que queda de esta lección
  1. 02Los scopes billed e inPeriod
  2. 03Trend y KpiResult
  3. 04Format: importes en español
  4. 05La clase base Kpi
  5. 06Las 4 métricas
  6. 07Tests de las métricas con factories
  7. 08El circuito de calidad y el commit
Sigue leyendo con tu suscripción El curso completo, con su proyecto final, el certificado y el foro con los planes trimestral y anual, está incluido en la suscripción. Ver los planes