Layout del dashboard de Filament: columnSpan, getColumns, orden de widgets y tabla

Hola, bienvenido. El layout del dashboard de Filament se decide en 2 sitios: la página dice cuántas columnas tiene el grid, con getColumns(), y en qué orden salen los widgets, con getWidgets(), y cada widget dice cuántas de esas columnas ocupa, con $columnSpan. En esta lección vamos a añadir la última pieza del dashboard, una tabla con los productos más vendidos del periodo, y a colocarlo todo en su sitio: las tarjetas arriba, la línea de ingresos a doble ancho con el donut y las barras a su lado, la tabla a ancho completo, el dashboard ocupando toda la pantalla y el panel con su propio color y su fuente.

Al terminar, el dashboard queda como en la captura de la primera lección, a falta del botón de PDF, que llegará en la tercera sección.

Si abres ahora el dashboard en una pantalla grande, salta a la vista que los widgets están puestos uno detrás de otro. La página reparte los widgets en un grid de 2 columnas, que es lo que devuelve getColumns() por defecto, así que la línea de ingresos y el donut ocupan media fila cada uno y el gráfico de barras se queda solo en la fila siguiente, con un hueco a su lado. Los 3 gráficos tienen además alturas distintas: el donut es más alto que la línea y las barras son más bajas. Y en un monitor ancho el contenido no pasa de un ancho máximo, con mucho espacio vacío a los lados, que es lo que hace Filament en todas sus páginas.

Hay 2 detalles más que no tienen que ver con la maquetación. El color principal del panel sigue siendo el ámbar que puso el instalador, que es el mismo ámbar del estado "Pendiente" en el donut. Y los ejes de los gráficos escriben 1200 € donde las tarjetas escriben 1.200,00 €.

Esto es lo que vamos a hacer, en este orden:

• La tabla de productos más vendidos: una serie, TopProducts, que devuelve la consulta, y un widget de tabla, TopProductsTable, con sus tests.
• El grid: 4 columnas en pantallas grandes con getColumns(), el ancho de cada widget con $columnSpan, el orden en getWidgets() y el dashboard a ancho completo.
• Un solo formato de importes: una función propia de JavaScript para que los gráficos escriban los importes igual que Format::money().
• Los gráficos en el grid: la línea a doble ancho y los 3 gráficos a la misma altura.
• El color y la fuente del panel, desde el proveedor.

Nada de esto toca las métricas ni las series que ya tenemos: la maquetación es cosa de la página y de los widgets, y los datos siguen saliendo de donde salían.