How to update charts widget above table with filter?

[NgYueHong]

I am following this tutorial (https://laraveldaily.com/post/filament-stats-widgets-above-table-auto-update-with-filters) to make put the chart above table. Right now, the chart is showing data with filter. But the problem is that the chart is not instantly update when I change the filter on the table. The chart is only updated by it's '$pollingInterval'. This bring the problem that you don't see the chart is directly updated once the filter is change. How can I send trigger to update the chart once the filter on the table is modified?

[hackersdad]

In your list page, where the table is displayed, you need to track the filter changes for the table, and then dispatch an event & that event you need to put a lister in the chart widget file

Here is the sample code for List Page:

` public function mount(): void
{
parent::mount();
$this->getFiltersAndCheckUpdates();
}

public function resetTableFiltersForm(): void
{
    $this->getFiltersAndCheckUpdates();
    parent::resetTableFiltersForm();
}
public function removeTableFilter(string $filterName, string|null $field = null, bool $isRemovingAllFilters = false): void
{
    $this->getFiltersAndCheckUpdates();
    parent::removeTableFilter($filterName, $field, $isRemovingAllFilters);
}
public function updated()
{
    $this->getFiltersAndCheckUpdates();
}

public function applyTableFilters(): void
{
    parent::applyTableFilters();
    $this->getFiltersAndCheckUpdates();
}

public bool $filtersChanged = false; // Flag to track if filters changed
public array $previousFilters = [];  // Store the last applied filters

public function getFiltersAndCheckUpdates(): void
{

    $date_filters = $this->getTableFilterState('date_range');

    // Store previous filter state for comparison
    $oldFilters = [
        'startDate' => $this->startDate,
        'endDate' => $this->endDate,
    ];

    // Update filter variables
    $this->startDate = $date_filters['from_date'] ?? null;
    $this->endDate = $date_filters['to_date'] ?? null;

    // New filter state
    $newFilters = [
        'startDate' => $this->startDate,
        'endDate' => $this->endDate,
    ];

    // Check if any filter has changed
    if ($oldFilters !== $newFilters) {
        $this->filtersChanged = true; // Set flag to true
        $this->dispatch('rawDataTableFiltersUpdated', $newFilters);
    } else {
        $this->filtersChanged = false; // No changes
    }

    // Update previous filters state
    $this->previousFilters = $newFilters;
}`

And now this event you need to listen in the chart widget and update the chart options

` protected $listeners = ['redrawRawDataTableFiltersChart' => 'updateFilter'];

 public function updateFilter($updated_chart_data)
 {
     $this->startDate = $updated_chart_data['startDate'];
     $this->endDate = $updated_chart_data['endDate'];

     $this->updateOptions();
 }

`