PHP code example of mddev31 / filament-dynamic-dashboard
1. Go to this page and download the library: Download mddev31/filament-dynamic-dashboard library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
mddev31 / filament-dynamic-dashboard example snippets
namespace App\Filament\Pages;
use MDDev\DynamicDashboard\Pages\DynamicDashboard;
class Dashboard extends DynamicDashboard
{
//
}
namespace App\Filament\Widgets;
use Filament\Widgets\StatsOverviewWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use MDDev\DynamicDashboard\Concerns\HasEmptySettings;
use MDDev\DynamicDashboard\Concerns\HasSizeDefaults;
use MDDev\DynamicDashboard\Contracts\DynamicWidget;
class SimpleStatsWidget extends StatsOverviewWidget implements DynamicWidget
{
use InteractsWithPageFilters;
use HasEmptySettings;
use HasSizeDefaults;
public static function getWidgetLabel(): string
{
return 'Simple Stats';
}
protected function getStats(): array
{
return [
Stat::make('Users', 1234),
Stat::make('Sessions', 5678),
];
}
}
namespace App\Filament\Widgets;
use Filament\Widgets\StatsOverviewWidget;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use MDDev\DynamicDashboard\Concerns\HasEmptySettings;
use MDDev\DynamicDashboard\Concerns\HasSizeDefaults;
use MDDev\DynamicDashboard\Contracts\DynamicWidget;
class SimpleStatsWidget extends StatsOverviewWidget implements DynamicWidget
{
use InteractsWithPageFilters;
use HasEmptySettings;
use HasSizeDefaults;
public static function getWidgetLabel(): string
{
return 'Simple Stats';
}
protected function getStats(): array
{
// Access page filters via $this->pageFilters['country'] etc.
return [/* ... */];
}
}
class StatsBoardWidget extends StatsOverviewWidget implements DynamicWidget
{
use HasEmptySettings;
use HasSizeDefaults;
public static function getDynamicDashboardDefaultWidth(): int { return 6; }
public static function getDynamicDashboardMinWidth(): int { return 4; } // never narrower than 4
public static function getDynamicDashboardMinHeight(): int { return 1; }
public static function getDynamicDashboardMaxHeight(): int { return 1; } // height locked at 1 row
}
namespace App\Filament\Widgets;
use App\Enums\ResultTypeEnum;
use App\Enums\GroupingEnum;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Component;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
use MDDev\DynamicDashboard\Concerns\HasSizeDefaults;
use MDDev\DynamicDashboard\Contracts\DynamicWidget;
class SalesChartWidget extends ApexChartWidget implements DynamicWidget
{
use InteractsWithPageFilters;
use HasSizeDefaults;
public ResultTypeEnum $resultType = ResultTypeEnum::GrossRevenue;
public GroupingEnum $groupBy = GroupingEnum::Channel;
public ?int $limit = 5;
public static function getWidgetLabel(): string
{
return 'Sales Chart';
}
/** @return array<Component> */
public static function getSettingsFormSchema(): array
{
return [
Select::make('resultType')
->label('Result type')
->options(ResultTypeEnum::class)
->
public static function availableForDashboard(): array
{
return [
\App\Filament\Pages\Dashboard::class,
// listed dashboard pages only
];
}
class MyWidget extends StatsOverviewWidget implements DynamicWidget
{
public int $dynamicDashboardWidgetId;
public string $dynamicDashboardWidgetTitle;
protected function getStats(): array
{
// use $this->dynamicDashboardWidgetId / Title
return [/* ... */];
}
}
class HeavyChartWidget extends ApexChartWidget implements DynamicWidget
{
public static function showLoader(): ?bool
{
return false;
}
}
use Livewire\Attributes\On;
class MyWidget extends Widget implements DynamicWidget
{
use HasSizeDefaults;
public int $dynamicDashboardWidgetId;
#[On('dynamic-dashboard:widget-resized')]
public function onResized(int $id): void
{
if ($id !== $this->dynamicDashboardWidgetId) {
return;
}
// Re-render, reload data, dispatch a custom JS event to a canvas, etc.
}
}
return [
'flat_12' => [
'name' => 'Standard 12-column',
'description' => '12 columns, 80px row. Sensible default for most dashboards.',
],
'two_left_one_right' => [
'name' => 'Two-left + tall right',
'description' => 'Two stacked sections on the left and one full-height section on the right.',
'top_left' => 'Top left',
'right' => 'Right (tall)',
'bottom_left' => 'Bottom left',
],
// …
];