En nuestro artículo anterior sobre Filament, vimos el proceso de instalación del framework, la creación de recursos y una gestión básica de los mismos.
El siguiente paso será crear un dashboard personalizado que resuma la información de nuestros recursos.
Dashboard en Filament
El dashboard es la página por defecto de nuestro panel de administración en Filament. A través del mismo, podemos mostrar información estática o generada mediante los recursos que hemos creado previamente.
Asimismo, Filament, nos proporciona diferentes tipos de widgets para construir nuestro dashboard:
- Sats Overview: muestra, normalmente numéricos.
- Chart: visualiza datos numéricos en gráficos.
- Table: genera una tabla para mostrar información detallada.
Esto no termina aquí, ya que Filament nos permite crear nuestros propios widgets personalizados, los cuales veremos más adelante.
Creación de un Dashboard personalizado
Para personalizar nuestro dashboard por defecto, debemos crear un nuevo archivo en la siguiente ruta:
/app/Filament/Pages/Dashboard.phpE incorporamos lo siguiente en ese archivo:
<?php
namespace App\Filament\Pages;
class Dashboard extends \Filament\Pages\Dashboard
{
// ...
}Con esto ya hemos generado nuestro nuevo dashboard personalizado. El siguiente paso será crear los widgets.
Creación de diferentes widgets
Como mencionamos antes, Filament incorpora diferentes plantillas de widgets que podremos usar para visualizar diferentes datos sin necesidad de crear una vistas personalizadas.
Widget de estadísticas
Para crear un widget de estadísticas, ejecutamos el siguiente commando:
php artisan make:filament-widget StatsOverview --stats-overviewUna vez ejecutado, Filament generará un nuevo archivo llamado StatsOverview.php. Vamos a abrirlo y escribir el siguiente código para mostrar información:
<?php
namespace App\Filament\Widgets;
use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;
class StatsOverview extends BaseWidget
{
protected function getStats(): array
{
return [
Stat::make('Productos Vendidos', '57'),
Stat::make('Visitas', '3250'),
];
}
}A continuación, vamos a nuestro dashboard para verificar que se ha generado correctamente. Deberíamos ver algo parecido a lo siguiente:
Esto no acaba aquí, ya que podemos incluir a estos campos de datos muchas opciones. Vamos a añadir en este caso una descripción, un icono y a cambiar el color de la descripción. Para ello, añadimos lo siguiente al return de nuestra función getStats():
return [
Stat::make('Productos Vendidos', '57')
->description('Total de productos vendidos')
->icon('heroicon-m-arrow-trending-up')
->color('primary'),
Stat::make('Visitas', '3250')
->description('Total de visitas')
->icon('heroicon-m-arrow-trending-up')
->color('success'),
];Recargamos nuestra página y deberíamos ver el resultado con los siguientes estilos:
Aunque se trate de un widget de estadísticas, también podemos incorporar gráficas dentro de este widget para mostrar tendencias. Solo necesitamos añadir el método chart() dentro del make de cada campo. Este método acepta un array con los puntos de datos a dibujar.
Stat::make('Productos Vendidos', '57')
->description('Total de productos vendidos')
->icon('heroicon-m-arrow-trending-up')
->chart([12, 4, 22, 57])
->color('primary'),Si hemos introducido correctamente el método y sus datos, deberíamos de ver una gráfica integrada en el widget:
Widget de Gráficas
Filament nos proporciona un sistema de gráficos integrado usando Chart.js. Podemos crear gráficos de líneas, barras, etc., de forma sencilla.
Para crear una widget de gráficas, ejecutamos el siguiente comando:
php artisan make:filament-widget SalesChart --chartNota: Es posible que la consola nos pregunte qué tipo de gráfica queremos. Esto no nos condiciona, ya que podemos cambiar el tipo de gráfica desde la función getType del archivo generado.
Esto generará un archivo en app/Filament/Widgets/SalesChart.php. Dentro de esta clase podemos definir el tipo de gráfico y los datos que queremos mostrar.
En este caso, la variable protected static ?string $heading se usa para poner el título que describe la gráfica. En el caso de que necesitemos cambiar el heading de manera dinámica, podemos sobreescribir el método getHeading().
Gracias a Charts.js podemos estructurar los datos de una manera bastante reconocible para quien haya usado esta librería. Para poder dibujar nuestra gráfica, debemos añadir nuestro conjunto de datos en el return del método getData():
<?php
namespace App\Filament\Widgets;
use Filament\Widgets\ChartWidget;
class SalesChart extends ChartWidget
{
protected static ?string $heading = 'Ventas Generales';
protected function getData(): array
{
return [
'datasets' => [
[
'label' => 'Número de Ventas',
'data' => [0, 10, 5, 2, 21, 32, 45, 74, 65, 45, 77, 89],
],
],
'labels' => ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
];
}
protected function getType(): string
{
return 'bar';
}
}Esto nos mostrará lo siguiente en el dashboard:
También podremos cambiar el color de nuestra gráfica usando las opciones de color de Chart.js.
'datasets' => [
[
'label' => 'Número de Ventas',
'data' => [0, 10, 5, 2, 21, 32, 45, 74, 65, 45, 77, 89],
'backgroundColor' => '#36A2EB',
'borderColor' => '#9BD0F5',
],Tipos de gráficas
Las gráficas que podremos dibujar son las mismas que podemos usar con Chart.js. A continuación se muestran todos los tipos de gráficas que podemos crear junto con su respectivo enlace a la documentación:
- Gráfico de barras.
- Gráfica de burbujas.
- Gráfico de donut.
- Gráfico de líneas.
- Gráfico de sectores.
- Gráfico de sectores multinivel.
- Gráfico de radar.
- Gráfico de puntos.
Widget de Tablas
Para crear nuestro widget de tablas, debemos ejecutar el siguiente comando:
php artisan make:filament-widget LatestOrders --table
Esto generará un archivo en app/Filament/Widgets/LatestOrders.php. Dentro de este archivo podremos definir la estructura de nuestra tabla y rellenarla con los datos que queramos:
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
public function table(Table $table): Table
{
return $table
->columns([
TextColumn::make('producto'),
TextColumn::make('precio'),
IconColumn::make('pagado')
->boolean(),
])
->query(
Order::query()
->latest()
->limit(5)
);;
}
Recargamos nuestro dashboard y deberíamos de ver algo parecido a lo siguiente:
Estas tablas pueden ser ordenadas, filtradas y hasta se pueden hacer búsquedas como en los listados de nuestros recursos. Más adelante dedicaremos un artículo exclusivamente a esta gestión de tablas.
Descripciones y recarga de datos
Podemos añadir a nuestro widget un título y una descripción general para cada conjuntos de datos, implementando en nuestro widget los métodos getHeading() y getDescription().
protected function getHeading(): ?string
{
return 'Tendencias';
}
protected function getDescription(): ?string
{
return 'Conjunto de datos sobre las tendencias de la web';
}
Por defecto, Filament refresca los datos de los widgets cada 5 segundos. Para cambiar esto, sobreescribimos la propiedad $pollingInterval con los segundos que queremos o con valor null si no queremos que refresque automáticamente.
protected static ?string $pollingInterval = '10s';Conclusión
Como hemos visto en este artículo, Filament nos ofrece de forma simple construir dashboards personalizados con diferentes tipos de widgets. En próximos artículos desarrollaremos widgets personalizados, implementando la lógica de forma dinámica.
Fuentes:
Documentación oficial de Filament.
