Filament•2mo ago

Filtering a Table Widget from a Chart Widget on a Resource View page possible?

Hi guys! In my Filament app I have a BudgetResource. Budgets can have multiple Segments. Then Orders are assigned to a segment and its budget. On my Budget View page I have a Chart Widget that displays a Pie Charts of all Segments for the current budget as well as a Table Widget that displays all Orders that are assigned to the budget. Now what I would love to do is that when the user clicks on a segment in the pie chart widget to have that segment id applied as a filter to the table widget so the user then only sees the orders for that segment. Is this doable in Filament? I know that Widgets can access the page table but only on List pages, but I am on a View page. And nested resources are not yet a thing in Filament either...

4 Replies

Patrick Boivin•2mo ago

Each widget is a Livewire component. If you can find a way to emit an event when a segment of the pie chart is clicked, you could catch it in the table widget.

Samus_Aran•2mo ago

Seems like it! In my Chart Widget Component I was able to register a callback to a chart.js click event and then throw a Livewire event using the Livewire object:

protected function getOptions(): RawJs
{
  return RawJs::make(<<<JS
    {
      onClick: function(event, elements) {
        let segmentId = event.chart.data.datasets[0].meta[elements[0].index]
        Livewire.dispatchTo(
          'target.component.name', 
          'chart-segment-clicked', 
          { segmentId: segmentId }
        )
      }
    }
  JS);
}

protected function getOptions(): RawJs
{
  return RawJs::make(<<<JS
    {
      onClick: function(event, elements) {
        let segmentId = event.chart.data.datasets[0].meta[elements[0].index]
        Livewire.dispatchTo(
          'target.component.name', 
          'chart-segment-clicked', 
          { segmentId: segmentId }
        )
      }
    }
  JS);
}

Then in my Table Widget Component I could listen to the event:

#[On('chart-segment-clicked')] 
public function applySegmentFilter($segmentId)
{
  dd("Filter table by segment {$segmentId}");
}

#[On('chart-segment-clicked')] 
public function applySegmentFilter($segmentId)
{
  dd("Filter table by segment {$segmentId}");
}

Now I just need to modify the filter...

Patrick Boivin•2mo ago

Very cool!

Samus_Aran•2mo ago

Took some digging but instead of my dd above it's $this->tableFilters['segment_id']['value'] = $segmentId 😄

Gaming

Programming

Filtering a Table Widget from a Chart Widget on a Resource View page possible?