Dashboard Widgets: Stats, Charts, Tables and Header/Footer

Filament has a concept of "Widget", which may be used in different contexts on different pages. But the most typical use case is the Dashboard: you can replace the default "Information" blocks with your own widgets.

This is what the default Dashboard looks like:

Not very useful, is it? A typical user shouldn't even know what version of Filament is running under the hood.

So let's add a few widget blocks here. Filament offers three typical widget types:

• Stats Overview
• Chart
• Table

I will show you all three, in this lesson.

Stats Overview: Total Revenue Widget

We will calculate the total revenue from orders in three slices: the sum of orders.price today, over the last 7 days and 30 days.

For that, we generate a Widget with the type stats-overview:

php artisan make:filament-widget RevenueToday --stats-overview

Important: this Artisan command requires choosing the panel. Since widgets can be used outside of the dashboard as separate Livewire components, you need to choose specifically "admin" if you want to use it on the dashboard.

Then it generates the file in app/Filament/Widgets where we need to fill in the getStats() method. The syntax is this:

app/Filament/Widgets/RevenueToday.php:

use App\Models\Order;
use Filament\Widgets\StatsOverviewWidget\Stat;
 
class RevenueToday extends BaseWidget
{
    protected function getStats(): array
    {
        $totalRevenue = Order::whereDate('created_at', date('Y-m-d'))->sum('price') / 100;
 
        return [
            Stat::make('Revenue Today (USD)',
                number_format($totalRevenue, 2))
        ];
    }
}

As you can see, we have two parameters to Stat::make(): the title and the number/text we want to show.

And that's it. We have a new widget on the dashboard. No need to configure anything else!

But of course, this is just the beginning of our dashboard. Let's generate...