Floating Filters ​

Floating filters represent fields that you may want to filter by, but are not displayed in the visualization itself. They provide additional filter inputs alongside your visualization without adding extra columns or datasets.

For example, a Chart tracking tasks completed per day by type might need a floating filter to narrow results by the user who completed them — without the user being a visible axis or dataset in the chart.

Floating filters work across both DataGrids and Charts.

Using Floating Filters ​

To add floating filters to a DataGrid or Chart, override the getFloatingFilters method:

use Illuminate\Support\Collection;
use SettleUp\Visualizations\FloatingFilters\DateRange;

public function getFloatingFilters(): Collection
{
    return collect([
        DateRange::make('DATE(users.created_at)', 'Created Date'),
    ]);
}

Available Floating Filters ​

DateRange ​

The DateRange floating filter allows filtering by a date range. It communicates to the front end that a date range picker should be rendered.

use SettleUp\Visualizations\FloatingFilters\DateRange;

DateRange::make('DATE(orders.created_at)', 'Order Date');

Schema Output ​

Floating filters appear in the schema response so the front end knows what filter inputs to render:

{
    "floating_filters": [
        {
            "field": "Created Date",
            "header": "Created Date",
            "type": "date_range",
            "meta": []
        }
    ]
}

Custom Floating Filters ​

You can create custom floating filter types by extending the FloatingFilter abstract class:

use SettleUp\Visualizations\Abstracts\FloatingFilter;

class MultiSelect extends FloatingFilter
{
    protected FloatingFilterType|string $floatingFilterType = 'multi_select';
}

The floatingFilterType is communicated to the front end via the schema so it knows which input component to render.