Home Projects Portfolio Dashboard Export PDF Log in

Optimización de Widgets de Gráficos y Filtros en Filament para la Plataforma Reimpact

En la plataforma Reimpact, nos enfocamos constantemente en mejorar la experiencia del usuario y la eficiencia de la gestión de datos. Recientemente, hemos implementado mejoras significativas en los widgets de gráficos y en la tabla de homologación de Filament para hacer la plataforma más robusta y fácil de usar.

Corrección en Widgets de Gráficos

Uno de los desafíos que enfrentamos con los widgets de gráficos era la aparición de un error de propiedad nula y conflictos con las cláusulas GROUP BY en PostgreSQL. Esto ocurría debido a que los widgets dependían del trait InteractsWithPageTable para acceder a los datos, lo que en ciertos escenarios complejos generaba inconsistencias.

Para resolver este problema, hemos refactorizado la forma en que estos widgets acceden a la información. Ahora, en lugar de utilizar el trait, los widgets realizan consultas directas al modelo Product a través de Product::query(). Esta aproximación nos permite un control más granular sobre las consultas de datos, eliminando los errores y optimizando el rendimiento.

use App\Models\Product;
use Illuminate\Support\Facades\DB;

// Ejemplo de cómo un widget ahora podría obtener sus datos
class MyChartWidget
{
    public function fetchData(): array
    {
        return Product::query()
            ->select('category', DB::raw('count(*) as total'))
            ->groupBy('category')
            ->get()
            ->toArray();
    }
}

Esta estrategia de consulta directa asegura que los datos se recuperen de manera eficiente y precisa, evitando los conflictos previos y mejorando la fiabilidad de los gráficos presentados a los usuarios.

Implementación de Filtros de Categoría en Tablas Filament

Además de las mejoras en los widgets, hemos potenciado la usabilidad de la tabla de homologación de Filament al integrar cuatro nuevos filtros de texto por categoría. Estos filtros permiten a los usuarios refinar rápidamente la visualización de los datos, facilitando la búsqueda y gestión de productos específicos.

La adición de estos filtros mejora significativamente la experiencia de usuario al navegar por grandes conjuntos de datos, permitiéndoles encontrar la información relevante con mayor rapidez y precisión.

use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Filters\TextFilter;
use Filament\Tables\Table;

class MyHomologationResource extends Resource
{
    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('product_name')->searchable(),
                TextColumn::make('category_1')->searchable(),
                TextColumn::make('category_2')->searchable(),
                // ... otras columnas
            ])
            ->filters([
                TextFilter::make('category_1_filter')
                    ->label('Filtrar Categoría 1')
                    ->placeholder('Escribe para buscar'),
                TextFilter::make('category_2_filter')
                    ->label('Filtrar Categoría 2')
                    ->placeholder('Escribe para buscar'),
                // ... hasta 4 filtros de categoría
            ]);
    }
}

Estas actualizaciones son parte de nuestro compromiso continuo con la mejora de la plataforma Reimpact, garantizando que tanto los datos como las herramientas de gestión sean intuitivos y eficientes para todos nuestros usuarios.

Optimización de Widgets de Gráficos y Filtros en Filament para la Plataforma Reimpact
Gerardo Ruiz

Gerardo Ruiz

Author

Share: