Plugin propio de Chart.js en Filament: valores sobre las barras y fondo blanco

Hola, bienvenido. Un plugin de Chart.js es un objeto de JavaScript con un id y una o varias funciones con nombre de hook, como beforeDraw o afterDatasetsDraw, que Chart.js llama en cada fase del dibujo; en Filament, cualquier plugin que añadas al array window.filamentChartJsPlugins se pasa a todos los gráficos del panel. En esta lección vamos a crear el tercer gráfico del dashboard, las ventas por canal en barras, y a escribir 2 plugins propios en un solo archivo: uno que escribe el importe encima de cada barra y otro que pinta un fondo blanco detrás del gráfico.

Son unas 50 líneas de JavaScript sin dependencias, y las vamos a cargar en el panel sin pasar por npm ni por Vite.

Chart.js dibuja las barras, los ejes y el tooltip, pero no escribe el valor de cada barra. Para saber cuánto ha vendido el canal web tienes que pasar el ratón por encima, o calcularlo a ojo contra las marcas del eje. En un gráfico de 4 barras eso es poco práctico, y en el PDF de la tercera sección, donde el gráfico es una imagen y no hay ratón, directamente no hay forma de saberlo.

La solución que se suele recomendar es chartjs-plugin-datalabels, que es justo el ejemplo que usa la documentación de Filament para explicar los plugins. Para lo que necesitamos aquí no compensa. Su última versión en npm es la 2.2.0, de diciembre de 2022, y desde entonces Chart.js ha pasado de la 4.1 a la 4.5 sin que el plugin publique una versión nueva; hay que instalarlo con npm y compilarlo con Vite; y de todo lo que hace solo queremos una cosa, escribir un número encima de cada barra, que son unas 30 líneas.

En el mismo archivo va a ir un segundo plugin que de momento no se va a notar. Un gráfico de Chart.js se pinta en un canvas con el fondo transparente: en el dashboard ves el blanco de la tarjeta, o el gris oscuro en modo oscuro. En la lección 13 vamos a exportar cada gráfico a PNG para el PDF, y un PNG exportado de ese canvas también tiene el fondo transparente. El plugin background pinta un color de fondo en el canvas, pero solo cuando el gráfico se lo pide en sus opciones. En pantalla nadie se lo pide, así que los gráficos siguen transparentes y respetan el modo oscuro, y en la lección 13 lo activaremos solo mientras se genera la imagen.

Vamos a crear 4 piezas, por este orden:

• SalesByChannel, la serie de ingresos por canal, con su test.
• resources/js/filament/chart-plugins.js, con los 2 plugins.
• El registro del archivo en el proveedor del panel con Js::make(), y el comando que lo publica, filament:assets.
• SalesByChannelChart, el gráfico de barras, que activa el plugin de los valores desde sus opciones.