Chart widget de Filament: gráfico de líneas con el periodo anterior y donut con RawJs

Hola, bienvenido. Un chart widget de Filament es una clase que extiende ChartWidget y responde 3 preguntas: qué datos pinta, con getData(), qué tipo de gráfico es, con getType(), y con qué opciones de Chart.js, con getOptions(), que puede devolver un array de PHP o JavaScript tal cual con RawJs. En esta lección vamos a crear los 2 primeros gráficos del dashboard: los ingresos por día en un gráfico de líneas, con el periodo anterior superpuesto en gris, y los pedidos por estado en un donut con un color por estado.

Ya tenemos los KPIs en tarjetas, y ahora el dashboard empieza a tener forma de dashboard. Los datos de cada gráfico van a salir de una serie en app/Metrics/Series/, con su test, igual que los KPIs salen de las métricas, y el widget se va a limitar a darles el formato que espera Chart.js.

Filament trae Chart.js 4 y pinta cada gráfico en un canvas en el navegador. Lo que devuelve getData() es exactamente la estructura de datos de Chart.js: un array labels con las etiquetas del eje X y un array datasets, donde cada dataset tiene su label, su data con un valor por etiqueta y, si quieres, sus colores y el resto de propiedades que admite Chart.js para ese tipo de gráfico. Filament convierte ese array a JSON y lo escribe en la página, dentro del componente de Alpine que crea el gráfico.

Con getOptions() pasa lo mismo: un array de PHP que acaba en JSON y que Chart.js recibe como sus options. El límite está en lo que JSON no puede llevar, que son las funciones. Formatear las marcas del eje como importes, o el texto del tooltip, se hace en Chart.js con callbacks, y un callback es una función de JavaScript. Para eso está RawJs: le das un trozo de JavaScript y Filament lo escribe en la página tal cual, sin pasarlo por JSON.

Así que cada gráfico necesita 2 listas alineadas, las etiquetas y los valores, y eso es lo que van a devolver nuestras series. Estas son las piezas de la lección, en el orden en que las vamos a crear:

• Series, un objeto de solo lectura con labels y values. Es la forma común de todos los gráficos del curso, y también la que usará el PDF.
• RevenueByDay y OrdersByStatus, 2 clases que reciben un Period y devuelven una Series. Son las que consultan, y tienen sus tests sobre factories.
• ChartPalette, que traduce los nombres de color de los enums (success, danger, primary…) a los colores reales del panel, que es lo que entiende Chart.js.
• RevenueChart y OrdersByStatusChart, los 2 widgets. Leen el periodo con el trait InteractsWithPeriod de la lección 7, piden su serie y la colocan en datasets y labels.

El tipo de gráfico, los colores y las opciones son cosa del widget, porque son de presentación. Qué pedidos cuentan y cómo se agrupan es cosa de la serie, y por eso el PDF de la tercera sección va a poder pintar los mismos gráficos sin repetir una sola consulta.