Chart Data not updating when using Dashboard filters

[kmaphane]

Good day,

I am looking for any help I can get. When using Apex charts with Dashboard filters, my chart data does not update. I can receive $this->filters and dump the data as below:

array:3 [▼
  "company_id" => "1"
  "start_date" => "2025-03-25"
  "end_date" => "2025-04-01"
]

My code for the filters is as below:

<?php

namespace App\Filament\Admin\Pages;

use Carbon\Carbon;
use App\Models\Company;
use Livewire\Component;
use Filament\Actions\Action;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\DatePicker;
use Filament\Pages\Dashboard as BaseDashboard;
use Filament\Pages\Dashboard\Actions\FilterAction;
use Filament\Pages\Dashboard\Concerns\HasFiltersAction;
use Filament\Widgets\Concerns\InteractsWithPageFilters;

class CompanyOverviewDashboard extends BaseDashboard
{
    use HasFiltersAction;

    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static ?string $navigationLabel = 'Company Overview';

    protected static string $view = 'filament.admin.pages.company-overview-dashboard';

    public ?string $activeTab = 'occupancy';

    public function mount(): void
    {
        // Initialize the company_id filter if not set
        if (!isset($this->filters['company_id'])) {
            $this->filters['company_id'] = Company::isRoot()->first()?->id;
        }
    }

    // Use dynamic heading with a getter method instead of a property
    public function getHeading(): string
    {
        // Get company_id from the filters state
        $companyId = $this->filters['company_id'] ?? null;

        if ($companyId) {
            $company = Company::find($companyId);
            if ($company) {
                return "{$company->name} Overview";
            }
        }

        // If no company is selected, default to Chobe Holdings
        $defaultCompany = Company::isRoot()->first();
        if ($defaultCompany) {
            return "{$defaultCompany->name} Overview";
        }

        return 'Company Overview';
    }

    public function getSubheading(): ?string
    {
        $startDate = $this->filters['start_date'] ?? Carbon::now()->startOfWeek()->format('d M Y');
        $endDate = $this->filters['end_date'] ?? Carbon::now()->endOfWeek()->format('d M Y');

        return "Period: {$startDate} - {$endDate}";
    }

    protected function getHeaderActions(): array
    {
        return [
            FilterAction::make()
                ->form([
                    Select::make('company_id')
                        ->label('Company')
                        ->options(function () {
                            // Get parent companies (roots)
                            $parentCompanies = Company::query()
                                ->isRoot() // Using Adjacency List method for root nodes
                                ->orderBy('name')
                                ->get();

                            $options = [];

                            // For each parent, add it and its children to options
                            foreach ($parentCompanies as $parentCompany) {
                                // Add parent as main option
                                $options[$parentCompany->id] = $parentCompany->name;

                                // Get children and add them as indented options
                                $children = $parentCompany->children()
                                    ->orderBy('name')
                                    ->get();

                                foreach ($children as $child) {
                                    $options[$child->id] = "— {$child->name}";
                                }
                            }

                            return $options;
                        })
                        ->default(fn () => Company::isRoot()->first()?->id)
                        ->searchable(),
                    DatePicker::make('start_date')
                        ->default(fn () => Carbon::now()->startOfWeek()->format('d M Y  ')),
                    DatePicker::make('end_date')
                        ->default(fn () => Carbon::now()->endOfWeek()->format('d M Y')),
                ]),
            Action::make('generateReport')
                ->label('Generate Report')
                ->icon('heroicon-m-document-text')
                ->action(function () {
                    // Get company name for the report using the filters property
                    $companyId = $this->filters['company_id'] ?? null;

                    if ($companyId) {
                        $companyName = Company::find($companyId)?->name ?? 'Unknown Company';
                    } else {
                        // If no company filter is set, default to Chobe Holdings
                        $companyName = Company::isRoot()->first()?->name ?? 'All Companies';
                    }

                    $this->notify('success', "Report for {$companyName} is being generated.");
                }),
        ];
    }
}

My code for the Apex chart is as below:

<?php

namespace App\Filament\Admin\Widgets\CompanyOverview;

use Carbon\Carbon;
use App\Models\Company;
use App\Models\Occupancy;
use App\Enums\ChartColorsEnum;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class OccupationMixOverviewChart extends ApexChartWidget
{
    use InteractsWithPageFilters;

    // Remove polling as it's causing filter state issues
    protected static ?string $pollingInterval = null;

    // Defer loading until the component is visible on the page
    protected static bool $deferLoading = true;

    /**
     * Chart Id
     */
    protected static ?string $chartId = 'occupationMixOverviewChart';

    protected static ?int $contentHeight = 400; // px

    protected $listeners = [
        'filtersUpdated' => '$refresh'
    ];

    /**
     * Widget Title
     */
    public function getHeading(): string
    {
        $companyId = $this->filters['company_id'] ?? null;
        if ($companyId) {
            $company = Company::query()->find($companyId);
            if ($company) {
                return 'Occupation Mix Overview - '.$company->code;
            }
        }

        // Default heading if company not found
        return 'Occupation Mix Overview';
    }

    protected function getFooter(): string
    {
        // Get date filters with fallbacks
        $startDate = $this->filters['start_date'] ?? null;
        $endDate = $this->filters['end_date'] ?? null;

        // If still missing, use defaults
        if (! $startDate) {
            $startDate = Carbon::now()->startOfWeek()->format('d M Y');
        }

        if (! $endDate) {
            $endDate = Carbon::now()->endOfWeek()->format('d M Y');
        }

        return "Period: {$startDate} - {$endDate}";
    }


    /**
     * Chart options (series, labels, types, size, animations...)
     * https://apexcharts.com/docs/options
     */
    protected function getOptions(): array
    {
        ds($this->filters);
        // Get filter values with fallbacks
        $companyId = $this->filters['company_id'] ?? null;
        $startDate = $this->filters['start_date'] ?? null;
        $endDate = $this->filters['end_date'] ?? null;

        // If still missing, use defaults
        if (! $startDate) {
            $startDate = Carbon::now()->startOfWeek()->format('d M Y');
        }

        if (! $endDate) {
            $endDate = Carbon::now()->endOfWeek()->format('d M Y');
        }

        if (! $companyId) {
            return $this->getEmptyChartOptions();
        }

        $selectedCompany = Company::query()->find($companyId);
        if (! $selectedCompany) {
            return $this->getEmptyChartOptions();
        }

        // Check if the selected company has children
        if ($selectedCompany->children->isNotEmpty()) {
            $rootCompanies = $selectedCompany->children; // Use children if they exist
        } else {
            $rootCompanies = collect([$selectedCompany]); // Use the selected company itself
        }

        // Get Occupancy Data By type
        $occupancyData = $rootCompanies->map(fn ($company): array => [
            'guests' => Occupancy::forPeriod($startDate, $endDate, $company->id)->guestsSum()->value('guests_total'),
            'staff' => Occupancy::forPeriod($startDate, $endDate, $company->id)->staffSum()->value('staff_total'),
            'support_staff' => Occupancy::forPeriod($startDate, $endDate, $company->id)->supportStaffSum()->value('support_staff_total'),
        ]);

        // Calculate the sums across all companies
        $guestsTotal = $occupancyData->sum('guests');
        $staffTotal = $occupancyData->sum('staff');
        $supportStaffTotal = $occupancyData->sum('support_staff');

        return [
            'chart' => [
                'type' => 'donut',
                'height' => 300,
                'toolbar' => [
                    'show' => true,
                    'tools' => [
                        'download' => true,
                        'selection' => true,
                        'reset' => true,
                    ],
                ],
                'selection' => [
                    'enabled' => true,
                ],
            ],
            'series' => [
                $guestsTotal,
                $staffTotal,
                $supportStaffTotal,
            ],
            'labels' => ['Guests', 'Staff', 'Support Staff'],
            'legend' => [
                'position' => 'right',
                'labels' => [
                    'fontFamily' => 'inherit',
                ],
            ],
            'colors' => ChartColorsEnum::getPalette(palette: ChartColorsEnum::OCCUPANCY_PALETTE),
        ];
    }

    private function getEmptyChartOptions(): array
    {
        return [
            'chart' => [
                'type' => 'donut',
                'height' => 300,
            ],
            'series' => [],
            'labels' => [],
            'legend' => [
                'labels' => [
                    'fontFamily' => 'inherit',
                ],
            ],
        ];
    }
}

I have tried a ton of things, including dispatching and events, which never seem to work and lock out my filters. Is there any other approach I can try?

Any help will be appreciated.

[Osama-A-Abbas]

Have you found a solution for this problem?