Conectando Widgets de Gráficos con Filtros de Tabla en Filament

En el proyecto Reimpact/platform, hemos estado mejorando la experiencia de usuario al asegurar que los componentes de la interfaz respondan de manera coherente a las interacciones del usuario. Un desafío común en paneles de administración ricos en datos es la sincronización entre los gráficos y los filtros aplicados a las tablas de datos.

Anteriormente, los gráficos en la página de listado de productos realizaban sus propias consultas directamente sobre el modelo Product, lo que significaba que no reaccionaban a los cambios en los filtros de la tabla adyacente. Esto llevaba a una visualización estática que no reflejaba los datos filtrados en la tabla, creando una experiencia de usuario inconsistente.

Para solucionar esto, hemos implementado el trait InteractsWithPageTable de Filament. Este trait es una herramienta poderosa que permite a los widgets de gráficos interactuar directamente con los filtros aplicados a una tabla en la misma página. En lugar de realizar una consulta directa, el widget ahora utiliza la consulta de la tabla subyacente, que ya ha sido modificada por los filtros del usuario.

Implementación con InteractsWithPageTable

Al aplicar el trait InteractsWithPageTable a un widget o una página de Filament, se obtiene acceso a la consulta (query) que la tabla de la página está utilizando en ese momento. Esto simplifica enormemente la creación de gráficos dinámicos que responden automáticamente a los filtros. Aquí un ejemplo genérico de cómo se podría usar:

namespace App\Filament\Widgets;

use App\Models\Product;
use Filament\Widgets\ChartWidget;
use Filament\Widgets\Concerns\InteractsWithPageTable;

class ProductSalesChart extends ChartWidget
{
    use InteractsWithPageTable;

    protected static ?string $heading = 'Ventas de Productos';

    protected function getData(): array
    {
        // Accede a la consulta filtrada de la tabla de la página
        $query = $this->getPageTableQuery();

        // Puedes aplicar filtros adicionales si es necesario o agregar agregaciones
        $data = $query
            ->selectRaw('DATE(created_at) as date, SUM(price) as total_sales')
            ->groupBy('date')
            ->orderBy('date')
            ->get();

        return [
            'datasets' => [
                [
                    'label' => 'Ventas', 
                    'data' => $data->pluck('total_sales')->toArray(),
                ],
            ],
            'labels' => $data->pluck('date')->toArray(),
        ];
    }

    protected function getType(): string
    {
        return 'bar';
    }
}

Este enfoque asegura que cualquier gráfico o widget que utilice este trait refleje con precisión el conjunto de datos que el usuario está viendo actualmente en la tabla, proporcionando una experiencia de usuario mucho más cohesiva e interactiva. Es un ejemplo claro de cómo las características de Filament facilitan la construcción de interfaces de administración complejas y dinámicas con poco esfuerzo.