### Blog Posts Chart Widget Example

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

This example demonstrates a basic line chart widget. The `getData()` method returns an array of datasets and labels compatible with Chart.js. Ensure the `getType()` method returns the desired chart type, such as 'line'.

```php
<?php

namespace App\Filament\Widgets;

use Filament\Widgets\ChartWidget;

class BlogPostsChart extends ChartWidget
{
    protected ?string $heading = 'Blog Posts';

    protected function getData(): array
    {
        return [
            'datasets' => [
                [
                    'label' => 'Blog posts created',
                    'data' => [0, 10, 5, 2, 21, 32, 45, 74, 65, 45, 77, 89],
                ],
            ],
            'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}
```

--------------------------------

### Install Chart.js Plugin via NPM

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Install a Chart.js plugin, such as `chartjs-plugin-datalabels`, using NPM. This is a prerequisite for using custom plugins.

```bash
npm install chartjs-plugin-datalabels --save-dev
```

--------------------------------

### Configure Widget Layout and Sorting in Filament

Source: https://context7.com/filamentphp/widgets/llms.txt

Control widget positioning and responsiveness using `$sort` for ordering and `$columnSpan` for grid layout. `$columnStart` can define the starting column.

```php
<?php

namespace App\Filament\Widgets;

use Filament\Widgets\ChartWidget;

class RevenueChart extends ChartWidget
{
    protected static ?int $sort = 2;

    // Column span: 1-12, 'full', or responsive array
    protected int | string | array $columnSpan = [
        'md' => 2,
        'xl' => 3,
    ];

    protected int | string | array $columnStart = [];

    // Conditional visibility
    public static function canView(): bool
    {
        return auth()->user()->isAdmin();
    }

    protected function getData(): array
    {
        return [
            'datasets' => [['label' => 'Revenue', 'data' => [100, 200, 300]]],
            'labels' => ['Jan', 'Feb', 'Mar'],
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}

```

--------------------------------

### Basic Doughnut Chart Widget

Source: https://context7.com/filamentphp/widgets/llms.txt

Example of a basic doughnut chart widget. Ensure the `getType()` method returns a supported chart type string.

```php
<?php

namespace App\Filament\Widgets;

use Filament\Widgets\ChartWidget;

class SalesDistributionChart extends ChartWidget
{
    protected ?string $heading = 'Sales Distribution';

    protected function getData(): array
    {
        return [
            'datasets' => [
                [
                    'data' => [30, 20, 25, 15, 10],
                    'backgroundColor' => ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'],
                ],
            ],
            'labels' => ['Electronics', 'Clothing', 'Food', 'Books', 'Other'],
        ];
    }

    protected function getType(): string
    {
        return 'doughnut'; // Options: 'line', 'bar', 'pie', 'doughnut', 'radar', 'polarArea', 'scatter', 'bubble'
    }
}
```

--------------------------------

### Configure Widgets with WidgetConfiguration

Source: https://context7.com/filamentphp/widgets/llms.txt

Use `WidgetConfiguration` to pass dynamic properties when registering widgets in panels or pages. This example demonstrates setting `columnSpan` for a `StatsOverview` widget.

```php
<?php

use App\Filament\Widgets\StatsOverview;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        ->widgets([
            StatsOverview::make(['columnSpan' => 'full']),
        ])
        ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets');
}
```

--------------------------------

### Dynamically Set Chart.js Options (Legend)

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Override the `getOptions()` method to return dynamic Chart.js options. This example disables the legend.

```php
protected function getOptions(): array
{
    return [
        'plugins' => [
            'legend' => [
                'display' => false,
            ],
        ],
    ];
}
```

--------------------------------

### Set Chart.js Options (Legend)

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Configure Chart.js options by setting the `$options` property. This example disables the legend.

```php
protected ?array $options = [
    'plugins' => [
        'legend' => [
            'display' => false,
        ],
    ],
];
```

--------------------------------

### Customize Chart Colors with Chart.js Options

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

For advanced color customization, including multiple colors per dataset, utilize Chart.js's color options within the `getData()` method. This example sets specific background and border colors for a dataset.

```php
protected function getData(): array
{
    return [
        'datasets' => [
            [
                'label' => 'Blog posts created',
                'data' => [0, 10, 5, 2, 21, 32, 45, 74, 65, 45, 77, 89],
                'backgroundColor' => '#36A2EB',
                'borderColor' => '#9BD0F5',
            ],
        ],
        'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    ];
}
```

--------------------------------

### Register Chart.js Plugin

Source: https://context7.com/filamentphp/widgets/llms.txt

Register custom Chart.js plugins by creating a JavaScript file, building it with Vite, and then registering it as a Filament asset. This example shows how to add `chartjs-plugin-datalabels`.

```javascript
// resources/js/filament-chart-js-plugins.js
import ChartDataLabels from 'chartjs-plugin-datalabels'

window.filamentChartJsPlugins ??= []
window.filamentChartJsPlugins.push(ChartDataLabels)

// For global plugins:
window.filamentChartJsGlobalPlugins ??= []
window.filamentChartJsGlobalPlugins.push(ChartDataLabels)
```

```php
// In AppServiceProvider boot() method:
use Filament\Support\Assets\Js;
use Filament\Support\Facades\FilamentAsset;
use Illuminate\Support\Facades\Vite;

FilamentAsset::register([
    Js::make('chart-js-plugins', Vite::asset('resources/js/filament-chart-js-plugins.js'))->module(),
]);
```

--------------------------------

### Create Stats Overview Widget

Source: https://context7.com/filamentphp/widgets/llms.txt

Implement a stats overview widget by extending `StatsOverviewWidget` and defining the `getStats()` method. This method should return an array of `Stat` instances, each representing a key metric.

```php
<?php

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class StatsOverview extends BaseWidget
{
    protected ?string $heading = 'Analytics';
    protected ?string $description = 'An overview of key metrics.';

    protected function getStats(): array
    {
        return [
            Stat::make('Unique views', '192.1k')
                ->description('32k increase')
                ->descriptionIcon('heroicon-m-arrow-trending-up')
                ->chart([7, 2, 10, 3, 15, 4, 17])
                ->color('success'),
            Stat::make('Bounce rate', '21%')
                ->description('7% decrease')
                ->descriptionIcon('heroicon-m-arrow-trending-down')
                ->color('danger'),
            Stat::make('Average time on page', '3:12')
                ->description('3% increase')
                ->descriptionIcon('heroicon-m-arrow-trending-up')
                ->color('success'),
        ];
    }
}
```

--------------------------------

### Generate Stats Overview Widget

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/02-stats-overview.md

Use the Artisan command to create a new StatsOverview widget file. This sets up the basic structure for displaying stats.

```bash
php artisan make:filament-widget StatsOverview --stats-overview
```

--------------------------------

### Add Dynamic Heading and Description to Widget

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/02-stats-overview.md

Override the `getHeading()` and `getDescription()` methods to dynamically generate the heading and description text. This allows for context-aware content.

```php
protected function getHeading(): ?string
{
    return 'Analytics';
}

protected function getDescription(): ?string
{
    return 'An overview of some analytics.';
```

--------------------------------

### Add Static Heading and Description to Widget

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/02-stats-overview.md

Set the static `$heading` and `$description` properties to add static text above the widget. This is useful for providing context.

```php
protected ?string $heading = 'Analytics';

protected ?string $description = 'An overview of some analytics.';
```

--------------------------------

### Define Basic Stats for Widget

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/02-stats-overview.md

Implement the `getStats()` method in your widget to return an array of `Stat` instances. Each `Stat` represents a single metric to be displayed.

```php
<?php

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class StatsOverview extends BaseWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make('Unique views', '192.1k'),
            Stat::make('Bounce rate', '21%'),
            Stat::make('Average time on page', '3:12'),
        ];
    }
}
```

--------------------------------

### Set responsive widget grid columns

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Provide an array to `getColumns()` to define the number of columns for different responsive breakpoints (e.g., 'md', 'xl').

```php
public function getColumns(): int | array
{
    return [
        'md' => 4,
        'xl' => 5,
    ];
}
```

--------------------------------

### Add Chart Description

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Implement the `getDescription()` method to add a descriptive text below the chart heading.

```php
public function getDescription(): ?string
{
    return 'The number of blog posts published per month.';
}
```

--------------------------------

### Create a Basic Chart Widget

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Use this command to generate a new chart widget. The `ChartWidget` class is used for all charts, with the type determined by the `getType()` method. The `protected ?string $heading` variable sets the chart's title.

```bash
php artisan make:filament-widget BlogPostsChart --chart
```

--------------------------------

### Create Line Chart Widget

Source: https://context7.com/filamentphp/widgets/llms.txt

Create a chart widget by extending `ChartWidget` and implementing the `getData()` and `getType()` methods. The `getData()` method should return data in Chart.js format, and `getType()` specifies the chart type.

```php
<?php

namespace App\Filament\Widgets;

use Filament\Widgets\ChartWidget;

class BlogPostsChart extends ChartWidget
{
    protected ?string $heading = 'Blog Posts';
    protected ?string $description = 'The number of blog posts published per month.';
    protected string $color = 'info';
    protected ?string $maxHeight = '300px';
    protected bool $isCollapsible = true;

    protected function getData(): array
    {
        return [
            'datasets' => [
                [
                    'label' => 'Blog posts created',
                    'data' => [0, 10, 5, 2, 21, 32, 45, 74, 65, 45, 77, 89],
                    'backgroundColor' => '#36A2EB',
                    'borderColor' => '#9BD0F5',
                ],
            ],
            'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}
```

--------------------------------

### Create a Table Widget in Filament

Source: https://context7.com/filamentphp/widgets/llms.txt

Extend `TableWidget` to create table widgets. Configure the table using Filament's builder, defining queries, columns, filters, and actions.

```php
<?php

namespace App\Filament\Widgets;

use App\Models\Order;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class LatestOrders extends BaseWidget
{
    protected int | string | array $columnSpan = 'full';

    public function table(Table $table): Table
    {
        return $table
            ->query(Order::query()->latest()->limit(10))
            ->columns([
                TextColumn::make('id')->label('Order ID'),
                TextColumn::make('customer.name')->label('Customer'),
                TextColumn::make('total')->money('usd'),
                TextColumn::make('status')->badge(),
                TextColumn::make('created_at')->dateTime(),
            ]);
    }
}

```

--------------------------------

### Import and Register Chart.js Plugin

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Import a Chart.js plugin and add it to the global `window.filamentChartJsPlugins` array. Ensure the array is initialized to prevent overwrites.

```javascript
import ChartDataLabels from 'chartjs-plugin-datalabels'

window.filamentChartJsPlugins ??= []
window.filamentChartJsPlugins.push(ChartDataLabels)
```

--------------------------------

### Generate Widget Scaffolding

Source: https://context7.com/filamentphp/widgets/llms.txt

Use this artisan command to generate the basic structure for a new Filament widget. The command will prompt you to select the type of widget you want to create.

```bash
php artisan make:filament-widget MyWidget
```

--------------------------------

### Add Description and Icon to Stat

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/02-stats-overview.md

Enhance individual stats by adding a descriptive text and an icon using the `description()` and `descriptionIcon()` methods. The icon's position can be controlled.

```php
use Filament\Support\Enums\IconPosition;
use Filament\Widgets\StatsOverviewWidget\Stat;

Stat::make('Unique views', '192.1k')
    ->description('32k increase')
    ->descriptionIcon('heroicon-m-arrow-trending-up', IconPosition::Before)
```

```php
use Filament\Widgets\StatsOverviewWidget\Stat;

protected function getStats(): array
{
    return [
        Stat::make('Unique views', '192.1k')
            ->description('32k increase')
            ->descriptionIcon('heroicon-m-arrow-trending-up'),
        Stat::make('Bounce rate', '21%')
            ->description('7% decrease')
            ->descriptionIcon('heroicon-m-arrow-trending-down'),
        Stat::make('Average time on page', '3:12')
            ->description('3% increase')
            ->descriptionIcon('heroicon-m-arrow-trending-up'),
    ];
}
```

--------------------------------

### Configure Live Polling and Lazy Loading for Widgets

Source: https://context7.com/filamentphp/widgets/llms.txt

Set the `pollingInterval` for real-time widget updates and control lazy loading behavior with `$isLazy` for performance optimization.

```php
<?php

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class LiveStats extends BaseWidget
{
    // Refresh every 10 seconds (default is 5s, null to disable)
    protected ?string $pollingInterval = '10s';

    // Disable lazy loading (default is true)
    protected static bool $isLazy = false;

    protected function getStats(): array
    {
        return [
            Stat::make('Active Users', rand(100, 500)),
            Stat::make('Server Load', rand(20, 80) . '%'),
        ];
    }
}

```

--------------------------------

### Generate Filament Table Widget

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Use the Artisan command to create a new Filament widget with table functionality. This sets up the basic widget class for displaying tabular data.

```bash
php artisan make:filament-widget LatestOrders --table
```

--------------------------------

### Return Raw JavaScript for Chart.js Options

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Use `RawJs::make()` within `getOptions()` to return raw JavaScript, enabling JavaScript callbacks like custom tick formatting.

```php
use Filament\Support\RawJs;

protected function getOptions(): RawJs
{
    return RawJs::make(<<<JS
        {
            scales: {
                y: {
                    ticks: {
                        callback: (value) => '€' + value,
                    },
                },
            },
        }
    JS);
}
```

--------------------------------

### Register JavaScript Asset in Filament

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Register the compiled JavaScript file as a Filament asset using `FilamentAsset::register()` within your service provider's `boot()` method. Use `Vite::asset()` to reference the compiled file and `.module()` to indicate it's a JavaScript module.

```php
use Filament\Support\Assets\Js;
use Filament\Support\Facades\FilamentAsset;
use Illuminate\Support\Facades\Vite;

FilamentAsset::register([
    Js::make('chart-js-plugins', Vite::asset('resources/js/filament-chart-js-plugins.js'))->module(),
]);
```

--------------------------------

### Generate Custom Filament Widget

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Use the Artisan command to create a custom Filament widget. This generates both the widget class (a Livewire component) and its corresponding Blade view.

```bash
php artisan make:filament-widget BlogPostsOverview
```

--------------------------------

### Customize Chart.js Options in Filament

Source: https://context7.com/filamentphp/widgets/llms.txt

Customize Chart.js options using the `$options` property for static configuration or the `getOptions()` method for dynamic JavaScript callbacks. Use `RawJs` for JavaScript callbacks.

```php
<?php

namespace App\Filament\Widgets;

use Filament\Support\RawJs;
use Filament\Widgets\ChartWidget;

class CustomizedChart extends ChartWidget
{
    protected ?string $heading = 'Revenue';

    protected ?array $options = [
        'plugins' => [
            'legend' => [
                'display' => false,
            ],
        ],
    ];

    // Or use getOptions() for dynamic JavaScript callbacks
    protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    y: {
                        ticks: {
                            callback: (value) => '€' + value,
                        },
                    },
                },
            }
        JS);
    }

    protected function getData(): array
    {
        return [
            'datasets' => [['label' => 'Revenue', 'data' => [1000, 2000, 3000]]],
            'labels' => ['Jan', 'Feb', 'Mar'],
        ];
    }

    protected function getType(): string
    {
        return 'bar';
    }
}

```

--------------------------------

### Bar Chart with Basic Select Filters

Source: https://context7.com/filamentphp/widgets/llms.txt

Implements basic dropdown filters for a chart. The selected filter value is accessible via the `$this->filter` property within the `getData()` method.

```php
<?php

namespace App\Filament\Widgets;

use Filament\Widgets\ChartWidget;

class FilteredChart extends ChartWidget
{
    protected ?string $heading = 'Filtered Revenue';
    public ?string $filter = 'today';

    protected function getFilters(): ?array
    {
        return [
            'today' => 'Today',
            'week' => 'Last week',
            'month' => 'Last month',
            'year' => 'This year',
        ];
    }

    protected function getData(): array
    {
        $activeFilter = $this->filter;

        $data = match ($activeFilter) {
            'today' => [100, 150, 200],
            'week' => [500, 600, 700, 800, 900, 1000, 1100],
            'month' => [2000, 2500, 3000, 3500],
            'year' => [10000, 12000, 15000, 18000, 20000, 22000, 25000, 28000, 30000, 32000, 35000, 40000],
            default => [],
        };

        return [
            'datasets' => [['label' => 'Revenue', 'data' => $data]],
            'labels' => array_keys($data),
        ];
    }

    protected function getType(): string
    {
        return 'bar';
    }
}
```

--------------------------------

### Define Chart Filters

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Implement the `getFilters()` method to return an array of available filter options, mapping keys to user-friendly labels for the chart.

```php
protected function getFilters(): ?array
{
    return [
        'today' => 'Today',
        'week' => 'Last week',
        'month' => 'Last month',
        'year' => 'This year',
    ];
}
```

--------------------------------

### Set Responsive Widget Widths in Filament

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Define widget column spans for different responsive breakpoints using an array. This allows widgets to adapt their width based on screen size.

```php
protected int | string | array $columnSpan = [
    'md' => 2,
    'xl' => 3,
];
```

--------------------------------

### Customize Filter Apply Action

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Customize the label and color of the apply action for deferred filters. Ensure the Action class is imported.

```php
use Filament\Actions\Action;

public function filtersApplyAction(Action $action): Action
{
    return $action
        ->label('Update Chart')
        ->color('success');
}
```

--------------------------------

### Register Global Chart.js Plugins

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Register global Chart.js plugins using `Chart.register([...])` by pushing them to the `window.filamentChartJsGlobalPlugins` array. This method is an alternative to inline plugin registration.

```javascript
import ChartDataLabels from 'chartjs-plugin-datalabels'

window.filamentChartJsGlobalPlugins ??= []
window.filamentChartJsGlobalPlugins.push(ChartDataLabels)
```

--------------------------------

### Register custom Dashboard class

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

If you create a custom Dashboard class, ensure it's registered in the `pages()` method of your panel configuration, especially if not using `discoverPages()`.

```php
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
        ->pages([]);
}
```

```php
use App\Filament\Pages\Dashboard;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->pages([
            Dashboard::class,
        ]);
}
```

--------------------------------

### Customize Chart Color with Preset

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Set the `$color` property to a predefined theme color like 'info' to customize the chart's data color.

```php
protected string $color = 'info';
```

--------------------------------

### Implement Filtering Widget Data with Action Modal

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Use the `HasFiltersAction` trait and register `FilterAction` in `getHeaderActions()` to enable filtering via a modal. This approach allows widgets to use full page height and defers widget reloading until the user applies filters.

```php
use Filament\Forms\Components\DatePicker;
use Filament\Pages\Dashboard as BaseDashboard;
use Filament\Pages\Dashboard\Actions\FilterAction;
use Filament\Pages\Dashboard\Concerns\HasFiltersAction;

class Dashboard extends BaseDashboard
{
    use HasFiltersAction;
    
    protected function getHeaderActions(): array
    {
        return [
            FilterAction::make()
                ->schema([
                    DatePicker::make('startDate'),
                    DatePicker::make('endDate'),
                    // ...
                ]),
        ];
    }
}
```

--------------------------------

### Customize Filter Reset Action

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Customize the label and color of the reset action for deferred filters. Ensure the Action class is imported.

```php
use Filament\Actions\Action;

public function filtersResetAction(Action $action): Action
{
    return $action
        ->label('Clear Filters')
        ->color('danger');
}
```

--------------------------------

### Configure Vite for JavaScript Compilation

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Include your custom JavaScript plugin file in the `input` array of your `vite.config.js` file to ensure it is compiled during the build process.

```javascript
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/admin/theme.css',
                'resources/js/filament-chart-js-plugins.js', // Include the new file in the `input` array so it is built
            ],
        }),
    ],
});
```

--------------------------------

### Add Global Dashboard Filters

Source: https://context7.com/filamentphp/widgets/llms.txt

Implement global filters for dashboards by using the `HasFiltersForm` trait and `InteractsWithPageFilters` in widgets. This allows filters to apply across all widgets on the dashboard.

```php
<?php

namespace App\Filament\Pages;

use Filament\Forms\Components\DatePicker;
use Filament\Pages\Dashboard as BaseDashboard;
use Filament\Pages\Dashboard\Concerns\HasFiltersForm;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Schema;

class Dashboard extends BaseDashboard
{
    use HasFiltersForm;

    protected bool $persistsFiltersInSession = true;

    public function filtersForm(Schema $schema): Schema
    {
        return $schema->components([
            Section::make()
                ->schema([
                    DatePicker::make('startDate'),
                    DatePicker::make('endDate'),
                ])
                ->columns(3),
        ]);
    }
}

// In widget class:
use Filament\Widgets\Concerns\InteractsWithPageFilters;

class FilteredStatsWidget extends StatsOverviewWidget
{
    use InteractsWithPageFilters;

    protected function getStats(): array
    {
        $startDate = $this->pageFilters['startDate'] ?? null;
        $endDate = $this->pageFilters['endDate'] ?? null;

        // Use filters in queries...
        return [
            Stat::make('Total Posts', 100),
        ];
    }
}
```

--------------------------------

### Customize the Dashboard page

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Extend the base `Dashboard` class in `app/Filament/Pages/Dashboard.php` to customize the dashboard layout and behavior.

```php
<?php

namespace App\Filament\Pages;

use Filament\Pages\Dashboard as BaseDashboard;

class Dashboard extends BaseDashboard
{
    // ...
}
```

--------------------------------

### Line Chart with Advanced Schema Filters

Source: https://context7.com/filamentphp/widgets/llms.txt

Utilizes schema components for advanced chart filtering, including date pickers. Filter values are accessed via the `$this->filters` array. Set `hasDeferredFilters` to true to require an 'Apply' click.

```php
<?php

namespace App\Filament\Widgets;

use Filament\Forms\Components\DatePicker;
use Filament\Schemas\Schema;
use Filament\Widgets\ChartWidget;
use Filament\Widgets\ChartWidget\Concerns\HasFiltersSchema;

class AdvancedFilteredChart extends ChartWidget
{
    use HasFiltersSchema;

    protected ?string $heading = 'Revenue Analysis';
    protected bool $hasDeferredFilters = true; // Only update on "Apply" click

    public function filtersSchema(Schema $schema): Schema
    {
        return $schema->components([
            DatePicker::make('startDate')
                ->default(now()->subDays(30)),
            DatePicker::make('endDate')
                ->default(now()),
        ]);
    }

    protected function getData(): array
    {
        $startDate = $this->filters['startDate'] ?? null;
        $endDate = $this->filters['endDate'] ?? null;

        // Use $startDate and $endDate to filter your query
        return [
            'datasets' => [['label' => 'Revenue', 'data' => [100, 200, 300, 400]]],
            'labels' => ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}
```

--------------------------------

### Set Stat Color

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/02-stats-overview.md

Customize the color of individual stats using the `color()` method, accepting predefined color names like 'success' or 'danger'.

```php
use Filament\Widgets\StatsOverviewWidget\Stat;

protected function getStats(): array
{
    return [
        Stat::make('Unique views', '192.1k')
            ->description('32k increase')
            ->descriptionIcon('heroicon-m-arrow-trending-up')
            ->color('success'),
        Stat::make('Bounce rate', '21%')
            ->description('7% increase')
            ->descriptionIcon('heroicon-m-arrow-trending-down')
            ->color('danger'),
        Stat::make('Average time on page', '3:12')
            ->description('3% increase')
            ->descriptionIcon('heroicon-m-arrow-trending-up')
            ->color('success'),
    ];
}
```

--------------------------------

### Customize Stat Component

Source: https://context7.com/filamentphp/widgets/llms.txt

Customize individual statistics within a `StatsOverviewWidget` using fluent methods on the `Stat` class. These methods allow for adding descriptions, icons, colors, charts, and interactive attributes.

```php
use Filament\Support\Enums\IconPosition;
use Filament\Widgets\StatsOverviewWidget\Stat;

Stat::make('Processed', '192.1k')
    ->description('32k increase')
    ->descriptionIcon('heroicon-m-arrow-trending-up', IconPosition::Before)
    ->descriptionColor('success')
    ->color('success')
    ->chart([7, 2, 10, 3, 15, 4, 17])
    ->chartColor('success')
    ->icon('heroicon-o-chart-bar')
    ->extraAttributes([
        'class' => 'cursor-pointer',
        'wire:click' => "\$dispatch('setStatusFilter', { filter: 'processed' })",
    ])
```

--------------------------------

### Define custom dashboard route path

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Set the `$routePath` static property to define a custom URL for additional dashboards.

```php
protected static string $routePath = 'finance';
```

--------------------------------

### Enable Deferred Filter Updates

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Set the `$hasDeferredFilters` property to `true` to defer filter updates until the user clicks an 'Apply' button, improving user experience for complex queries.

```php
use Filament\Widgets\ChartWidget\Concerns\HasFiltersSchema;

class BlogPostsChart extends ChartWidget
{
    use HasFiltersSchema;

    protected bool $hasDeferredFilters = true;

    // ...
}
```

--------------------------------

### Implement Custom Chart Filters Schema

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Utilize the `HasFiltersSchema` trait and implement `filtersSchema()` to define custom filters using schema components like DatePicker. Ensure data is validated before use.

```php
use Filament\Forms\Components\DatePicker;
use Filament\Schemas\Schema;
use Filament\Widgets\ChartWidget\Concerns\HasFiltersSchema;

class BlogPostsChart extends ChartWidget
{
    use HasFiltersSchema;
    
    // ...
    
    public function filtersSchema(Schema $schema): Schema
    {
        return $schema->components([
            DatePicker::make('startDate')
                ->default(now()->subDays(30)),
            DatePicker::make('endDate')
                ->default(now()),
        ]);
    }
}
```

--------------------------------

### Line Chart with Eloquent Data Trend

Source: https://context7.com/filamentphp/widgets/llms.txt

Generates a line chart showing a trend of Eloquent model data over time. Requires the `flowframe/laravel-trend` package for aggregations.

```php
<?php

namespace App\Filament\Widgets;

use App\Models\BlogPost;
use Filament\Widgets\ChartWidget;
use Flowframe\Trend\Trend;
use Flowframe\Trend\TrendValue;

class BlogPostsTrendChart extends ChartWidget
{
    protected ?string $heading = 'Blog Posts Trend';

    protected function getData(): array
    {
        $data = Trend::model(BlogPost::class)
            ->between(
                start: now()->startOfYear(),
                end: now()->endOfYear(),
            )
            ->perMonth()
            ->count();

        return [
            'datasets' => [
                [
                    'label' => 'Blog posts',
                    'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
                ],
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}
```

--------------------------------

### Dynamically Control Deferred Filters

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Override the `hasDeferredFilters()` method to dynamically control whether filters are deferred based on custom logic, such as user preferences.

```php
public function hasDeferredFilters(): bool
{
    return auth()->user()->prefersDeferredFilters();
}
```

--------------------------------

### Control custom dashboard sort order

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Use the `$navigationSort` static property to control the sort order of custom dashboards in the navigation.

```php
protected static ?int $navigationSort = 15;
```

--------------------------------

### Set widget sorting order

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Define the `$sort` property within your widget class to control its display order on the dashboard relative to other widgets.

```php
protected static ?int $sort = 2;
```

--------------------------------

### Customize Dashboard Grid Layout

Source: https://context7.com/filamentphp/widgets/llms.txt

Customize the dashboard widget grid layout by extending the `Dashboard` page and overriding the `getColumns()` method. This allows for responsive column definitions.

```php
<?php

namespace App\Filament\Pages;

use Filament\Pages\Dashboard as BaseDashboard;

class Dashboard extends BaseDashboard
{
    protected static string $routePath = '/';
    protected static ?string $title = 'Analytics Dashboard';
    protected static ?int $navigationSort = -2;

    public function getColumns(): int | array
    {
        return [
            'md' => 4,
            'xl' => 5,
        ];
    }

    public function getWidgets(): array
    {
        return [
            StatsOverview::class,
            RevenueChart::class,
            LatestOrders::class,
        ];
    }
}
```

--------------------------------

### Make Chart Collapsible

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Set the `$isCollapsible` property to `true` to allow users to collapse and expand the chart.

```php
protected bool $isCollapsible = true;
```

--------------------------------

### Configure Polling Interval for Widget

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/02-stats-overview.md

Control how frequently the stats overview widget refreshes its data. Set `$pollingInterval` to a string like '10s' for custom intervals or `null` to disable polling.

```php
protected ?string $pollingInterval = '10s';
```

```php
protected ?string $pollingInterval = null;
```

--------------------------------

### Set Maximum Chart Height

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Use the `$maxHeight` property to enforce a maximum height for the chart, preventing it from becoming too large.

```php
protected ?string $maxHeight = '300px';
```

--------------------------------

### Implement Dashboard Filters Form in Filament

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Add a filter form to the Filament dashboard by using the `HasFiltersForm` trait and defining the `filtersForm()` method. This method returns a schema for the form components.

```php
use Filament\Forms\Components\DatePicker;
use Filament\Pages\Dashboard as BaseDashboard;
use Filament\Pages\Dashboard\Concerns\HasFiltersForm;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Schema;

class Dashboard extends BaseDashboard
{
    use HasFiltersForm;

    public function filtersForm(Schema $schema): Schema
    {
        return $schema
            ->components([
                Section::make()
                    ->schema([
                        DatePicker::make('startDate'),
                        DatePicker::make('endDate'),
                        // ...
                    ])
                    ->columns(3),
            ]);
    }
}
```

--------------------------------

### Generate Chart Data from Eloquent Model

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Use the `laravel-trend` package to generate chart data from an Eloquent model, aggregating data per month within a specified date range.

```php
use Flowframe\Trend\Trend;
use Flowframe\Trend\TrendValue;

protected function getData(): array
{
    $data = Trend::model(BlogPost::class)
        ->between(
            start: now()->startOfYear(),
            end: now()->endOfYear(),
        )
        ->perMonth()
        ->count();

    return [
        'datasets' => [
            [
                'label' => 'Blog posts',
                'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
            ],
        ],
        'labels' => $data->map(fn (TrendValue $value) => $value->date),
    ];
}
```

--------------------------------

### Disable Widget Lazy Loading

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/02-stats-overview.md

Override the static `$isLazy` property to `false` to disable lazy loading for a widget. This ensures the widget loads immediately.

```php
protected static bool $isLazy = false;
```

--------------------------------

### Add Chart to Stat

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/02-stats-overview.md

Incorporate a historical data chart into a stat using the `chart()` method, which accepts an array of data points for plotting.

```php
use Filament\Widgets\StatsOverviewWidget\Stat;

protected function getStats(): array
{
    return [
        Stat::make('Unique views', '192.1k')
            ->description('32k increase')
            ->descriptionIcon('heroicon-m-arrow-trending-up')
            ->chart([7, 2, 10, 3, 15, 4, 17])
            ->color('success'),
        // ...
    ];
}
```

--------------------------------

### Set number of widget columns

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Override the `getColumns()` method in your custom Dashboard class to specify the number of grid columns for widgets.

```php
public function getColumns(): int | array
{
    return 2;
}
```

--------------------------------

### Conditionally Hide Widgets in Filament

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Override the static `canView()` method on a widget to control its visibility. Return `false` to hide the widget for the current user.

```php
public static function canView(): bool
{
    return auth()->user()->isAdmin();
}
```

--------------------------------

### Set Default Chart Filter

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Define the default filter value for a chart by setting the `$filter` property. This determines the initial data displayed when the chart loads.

```php
public ?string $filter = 'today';
```

--------------------------------

### Set custom widget column span

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Use the `$columnSpan` property in a widget class to control how many columns it occupies. Accepts a number from 1 to 12 or 'full'.

```php
protected int | string | array $columnSpan = 'full';
```

--------------------------------

### Access Dashboard Filters in Filament Widget

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Use the `InteractsWithPageFilters` trait in a widget to access filter data via the `$this->pageFilters` property. Ensure data validation before using it for queries.

```php
use App\Models\BlogPost;
use Carbon\CarbonImmutable;
use Filament\Widgets\StatsOverviewWidget;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use Illuminate\Database\Eloquent\Builder;

class BlogPostsOverview extends StatsOverviewWidget
{
    use InteractsWithPageFilters;

    public function getStats(): array
    {
        $startDate = $this->pageFilters['startDate'] ?? null;
        $endDate = $this->pageFilters['endDate'] ?? null;

        return [
            StatsOverviewWidget\Stat::make(
                label: 'Total posts',
                value:
                    BlogPost::query()
                        ->when($startDate, fn (Builder $query) => $query->whereDate('created_at', '>=', $startDate))
                        ->when($endDate, fn (Builder $query) => $query->whereDate('created_at', '<=', $endDate))
                        ->count(),
            ),
            // ...
        ];
    }
}
```

--------------------------------

### Set custom dashboard title

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

Override the `$title` static property to set a custom title for your dashboard.

```php
protected static ?string $title = 'Finance dashboard';
```

--------------------------------

### Access Active Filter in getData

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Retrieve the currently active filter value within the `getData()` method to dynamically adjust the data being fetched and displayed.

```php
protected function getData(): array
{
    $activeFilter = $this->filter;

    // ...
}
```

--------------------------------

### Dashboard Filter Action Modal

Source: https://context7.com/filamentphp/widgets/llms.txt

Utilize action modals for dashboard filters to provide a better user experience for complex filter forms, including validation. This approach uses `HasFiltersAction`.

```php
<?php

namespace App\Filament\Pages;

use Filament\Forms\Components\DatePicker;
use Filament\Pages\Dashboard as BaseDashboard;
use Filament\Pages\Dashboard\Actions\FilterAction;
use Filament\Pages\Dashboard\Concerns\HasFiltersAction;

class Dashboard extends BaseDashboard
{
    use HasFiltersAction;

    protected function getHeaderActions(): array
    {
        return [
            FilterAction::make()
                ->schema([
                    DatePicker::make('startDate')->required(),
                    DatePicker::make('endDate')->required(),
                ]),
        ];
    }
}
```

--------------------------------

### Disable Default Dashboard Widgets

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

To remove the default widgets displayed on the dashboard, update the `widgets()` array in the panel configuration to an empty array.

```php
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->widgets([]);
}
```

--------------------------------

### Add Extra HTML Attributes to Stat

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/02-stats-overview.md

Apply custom HTML attributes to a stat element using `extraAttributes()`. This is useful for adding classes or event listeners like `wire:click`.

```php
use Filament\Widgets\StatsOverviewWidget\Stat;

protected function getStats(): array
{
    return [
        Stat::make('Processed', '192.1k')
            ->color('success')
            ->extraAttributes([
                'class' => 'cursor-pointer',
                'wire:click' => "\$dispatch('setStatusFilter', { filter: 'processed' })",
            ]),
        // ...
    ];
}
```

--------------------------------

### Access Custom Filter Values

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/03-charts.md

Access the values from custom filters defined in `filtersSchema()` via the `$this->filters` array within your `getData()` method. Remember to validate this data.

```php
protected function getData(): array
{
    $startDate = $this->filters['startDate'] ?? null;
    $endDate = $this->filters['endDate'] ?? null;

    return [
        // ...
    ];
}
```

--------------------------------

### Disable Filter Persistence in Session

Source: https://github.com/filamentphp/widgets/blob/5.x/docs/01-overview.md

To prevent dashboard filters from persisting in the user's session between page loads, set the `$persistsFiltersInSession` property to `false` or override the `persistsFiltersInSession()` method to return `false`.

```php
use Filament\Pages\Dashboard as BaseDashboard;
use Filament\Pages\Dashboard\Concerns\HasFiltersForm;

class Dashboard extends BaseDashboard
{
    use HasFiltersForm;

    protected bool $persistsFiltersInSession = false;
}
```

```php
use Filament\Pages\Dashboard as BaseDashboard;
use Filament\Pages\Dashboard\Concerns\HasFiltersForm;

class Dashboard extends BaseDashboard
{
    use HasFiltersForm;

    public function persistsFiltersInSession(): bool
    {
        return false;
    }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.