How can I implement filtering for multiple widgets on a page?

[ruswan]

I am trying to create a filter for multiple widgets. When the button is submitted, the HorizontalAlignmentColumnChart is hidden, and the filter popup on the chart cannot be clicked.

There are some errors in the console:

Alpine Expression Error: dropdownOpen is not defined
Expression: "dropdownOpen"
<div x-show="dropdownOpen" @click="dropdownOpen = false" class="fixed inset-0 h-full w-full z-10" style="display: none;"></div>

And this is the code:

<?php

namespace App\Filament\Pages;

use App\Filament\Widgets\HorizontalAlignmentColumnChart;
use App\Filament\Widgets\HorizontalAlignmentPieChart;
use App\Models\Graduation;
use Filament\Forms\Components\Select;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Form;
use Filament\Pages\Page;

class HorizontalAlignment extends Page
{
    use InteractsWithForms;

    protected static ?string $navigationGroup = 'Reports';

    protected static ?string $navigationIcon = 'heroicon-o-chart-bar';

    protected static string $view = 'filament.pages.horizontal-alignment';

    protected ?string $subheading = 'Horizontal Alignment Report';

    public ?array $data = [];

    protected function getFooterWidgets(): array
    {
        return [
            HorizontalAlignmentPieChart::class,
            HorizontalAlignmentColumnChart::class,
        ];
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Select::make('graduation_id')
                ->label('Graduation')
                ->id('sample')
                ->options(
                    Graduation::all()
                    ->pluck('graduation_year', 'id')
                )->live()
                ->afterStateUpdated(fn (?string $state) => $this->dispatch('filterGraduation', graduation_id: $state)),
            ])
            ->statePath('data');
    }
}

horizontal-alignment.blade.php

<x-filament-panels::page>
    <div>
        {{ $this->form }}
    </div>
</x-filament-panels::page>

HorizontalAlignmentColumnChart.php

<?php

namespace App\Filament\Widgets;

use App\Models\Graduation;
use App\Models\Questionnaire;
use Filament\Forms\Components\Select;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
use Livewire\Attributes\On;

class HorizontalAlignmentColumnChart extends ApexChartWidget
{
    #[On('filterGraduation')]
    public function filter($graduation_id)
    {
        $this->filterFormData['graduation_id'] = $graduation_id;
        $this->updateOptions();
    }

    /**
     * Chart Id.
     *
     * @var string
     */
    protected static string $chartId = 'horizontalAlignmentColumnChart';

    /**
     * Widget Title.
     *
     * @var string|null
     */
    protected static ?string $heading = 'Horizontal Alignment Column Chart';

    /**
     * Get the form schema for filtering data.
     *
     * @return array The form schema, typically an array of filters and fields.
     */
    protected function getFormSchema(): array
    {
        return [
            Select::make('graduation_id')
                ->label('Graduation')
                ->id('samplse')
                ->options(
                    Graduation::all()
                ->pluck('graduation_year', 'id')
                ),
        ];
    }

    /**
     * Chart options (series, labels, types, size, animations...)
     * https://apexcharts.com/docs/options.
     *
     * @return array
     */
    protected function getOptions(): array
    {
        if (!$this->readyToLoad) {
            return [];
        }

        $questionnaires = Questionnaire::with('user')->selectRaw('SUM(CASE WHEN f14 <= 3 THEN 1 ELSE 0 END) as aligment, SUM(CASE WHEN f14 > 3 THEN 1 ELSE 0 END) as not_aligment');

        if ($this->filterFormData['graduation_id']) {
            $questionnaires->join('users', function ($join) {
                $join->on('users.id', '=', 'questionnaires.user_id');
                $join->where('users.graduation_id', $this->filterFormData['graduation_id']);
            });
        }

        $questionnaires = $questionnaires
        ->first();

        $output = collect([
           ['name' => 'In aligment', 'total' => $questionnaires->aligment],
           ['name' => 'Not in aligment', 'total' => $questionnaires->not_aligment],
        ])->sortByDesc('total');

        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
            ],
            'series' => [
                [
                    'name' => 'Total',
                    'data' => $output->pluck('total')->toArray(),
                ],
            ],
            'xaxis' => [
                'categories' => $output->pluck('name')->toArray(),
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'colors' => ['#f59e0b'],
        ];
    }
}

HorizontalAlignmentPieChart.php

<?php

namespace App\Filament\Widgets;

use App\Actions\Filter;
use App\Models\Questionnaire;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
use Livewire\Attributes\On;

class HorizontalAlignmentPieChart extends ApexChartWidget
{
    #[On('filterGraduation')]
    public function filter($graduation_id)
    {
        $this->filterFormData['graduation_id'] = $graduation_id;
        $this->updateOptions();
    }

    /**
     * Chart Id.
     *
     * @var string
     */
    protected static string $chartId = 'horizontalAlignmentPieChart';

    /**
     * Widget Title.
     *
     * @var string|null
     */
    protected static ?string $heading = 'Horizontal Alignment Pie Chart';

    /**
     * Get the form schema for filtering data.
     *
     * @return array The form schema, typically an array of filters and fields.
     */
    protected function getFormSchema(): array
    {
        return [
           Select::make('graduation_id')
                ->label('Graduation')
                ->id('samplse')
                ->options(
                    Graduation::all()
                ->pluck('graduation_year', 'id')
                ),
        ];
    }

    /**
     * Chart options (series, labels, types, size, animations...)
     * https://apexcharts.com/docs/options.
     *
     * @return array
     */
    protected function getOptions(): array
    {
        if (!$this->readyToLoad) {
            return [];
        }

        $questionnaires = Questionnaire::with('user')->selectRaw('SUM(CASE WHEN f14 <= 3 THEN 1 ELSE 0 END) as aligment, SUM(CASE WHEN f14 > 3 THEN 1 ELSE 0 END) as not_aligment');

        if ($this->filterFormData['graduation_id']) {
            $questionnaires->join('users', function ($join) {
                $join->on('users.id', '=', 'questionnaires.user_id');
                $join->where('users.graduation_id', $this->filterFormData['graduation_id']);
            });
        }

        $questionnaires = $questionnaires
        ->first();

        $output = collect([
           [
            'name' => 'In aligment',
            'total' => (int) $questionnaires->aligment,
            ],
           [
            'name' => 'Not in aligment',
           'total' => (int) $questionnaires->not_aligment,
            ],
        ]);

        return [
            'chart' => [
                'type' => 'pie',
                'height' => 300,
            ],
            'series' => $output->pluck('total')->toArray(),
            'labels' => $output->pluck('name')->toArray(),
            'legend' => [
                'labels' => [
                    'fontFamily' => 'inherit',
                ],
            ],
        ];
    }
}