wip chart in tab

app/Filament/Pages/Statistic.php

@@ -4,15 +4,6 @@ namespace App\Filament\Pages;
 
 use App\Actions\LoadStatisticFixturesLeaguesOptions;
 use App\Actions\LoadStatisticFixturesMatchOptions;
-use App\Filament\Widgets\ChartEvent;
-use App\Filament\Widgets\ChartEventMoAv;
-use App\Filament\Widgets\ChartEventPerf;
-use App\Filament\Widgets\ChartEventPerfMoAv;
-use App\Filament\Widgets\ChartPlayer;
-use App\Filament\Widgets\ChartPlayerMoAv;
-use App\Filament\Widgets\ChartPlayerPerf;
-use App\Filament\Widgets\ChartPlayerPerfMoAv;
-use App\Filament\Widgets\StatsMedianAverage;
 use App\Models\Element;
 use App\Models\StatisticFixtures;
 use App\Models\StatistikoDetail;
@@ -36,6 +27,10 @@ class Statistic extends BaseDashboard
 
     protected static string|BackedEnum|null $navigationIcon = 'phosphor-chart-line-up';
 
+    protected string $view = 'filament.pages.statistic';
+
+    protected string $activeTab = 'tab1';
+
     protected ?string $pollingInterval = null;
 
     protected static ?string $title = 'Statistic';
@@ -45,24 +40,34 @@ class Statistic extends BaseDashboard
         'xl' => 3,
     ];
 
+    public function getActiveTab()
+    {
+        return $this->activeTab;
+    }
+
     public function getHeading(): string|Htmlable|null
     {
         return '';
     }
 
-    protected function getHeaderActions(): array
+    public function updatedFilter($value) // Or whatever your property name is
     {
-        return [
+        $this->dispatch('filterChanged', filterValue: $value);
-            Action::make('collapseAll')
-                ->label('Collapse All Charts')
-                ->icon('heroicon-m-chevron-up')
-                ->color('gray')
-                ->action(function ($record, $livewire) {
-                    $livewire->dispatch('collapse-all-charts');
-                }),
-        ];
     }
 
+    // protected function getHeaderActions(): array
+    // {
+    //     return [
+    //         Action::make('collapseAll')
+    //             ->label('Collapse All Charts')
+    //             ->icon('heroicon-m-chevron-up')
+    //             ->color('gray')
+    //             ->action(function ($record, $livewire) {
+    //                 $livewire->dispatch('collapse-all-charts');
+    //             }),
+    //     ];
+    // }
+
     public function filtersForm(Schema $schema): Schema
     {
         return $schema
@@ -84,8 +89,9 @@ class Statistic extends BaseDashboard
                             ->options(fn () => LoadStatisticFixturesLeaguesOptions::load(1))
                             ->live()
                             ->label('League')
-                            ->afterStateUpdated(function (callable $set) {
+                            ->afterStateUpdated(function (callable $set, $state) {
                                 $set('match_id', null);
+                                $this->dispatch('filterChanged', filterValue: $state);
                             }),
                         Select::make('match_id')
                             ->prefixIconColor('primary')
@@ -247,25 +253,6 @@ class Statistic extends BaseDashboard
         return [
             'default' => 1,
             'md' => 2,
-            'lg' => 4,
-        ];
-    }
-
-    protected function getFooterWidgets(): array
-    {
-        return [
-            StatsMedianAverage::make(),
-
-            // Events
-            ChartEvent::make(),
-            ChartEventMoAv::make(),
-            ChartEventPerf::make(),
-            ChartEventPerfMoAv::make(),
-            // Players
-            ChartPlayer::make(),
-            ChartPlayerMoAv::make(),
-            ChartPlayerPerf::make(),
-            ChartPlayerPerfMoAv::make(),
         ];
     }
 

app/Filament/Widgets/ChartEvent.php

@@ -6,19 +6,18 @@ use App\Filament\Widgets\Data\HelperStatisticType;
 use App\Filament\Widgets\Data\LoadEvents;
 use Filament\Support\RawJs;
 use Filament\Widgets\ChartWidget;
-use Filament\Widgets\Concerns\InteractsWithPageFilters;
+use Livewire\Attributes\Reactive;
 
 class ChartEvent extends ChartWidget
 {
-    use InteractsWithPageFilters;
+    #[Reactive]
-
+    public ?array $filters = [];
-    // protected string $view = 'filament.widgets.custom-chart-widget';
 
     protected ?string $heading = 'Events';
 
     protected ?string $pollingInterval = null;
 
-    protected bool $isCollapsible = true;
+    protected bool $isCollapsible = false;
 
     protected $f;
 

app/Filament/Widgets/ChartEventMoAv.php

@@ -7,11 +7,12 @@ use App\Filament\Widgets\Data\HelperStatisticType;
 use App\Filament\Widgets\Data\LoadEvents;
 use Filament\Support\RawJs;
 use Filament\Widgets\ChartWidget;
-use Filament\Widgets\Concerns\InteractsWithPageFilters;
+use Livewire\Attributes\Reactive;
 
 class ChartEventMoAv extends ChartWidget
 {
-    use InteractsWithPageFilters;
+    #[Reactive]
+    public ?array $filters = [];
 
     protected ?string $heading = 'Events';
 

app/Filament/Widgets/ChartEventPerf.php

@@ -5,11 +5,12 @@ namespace App\Filament\Widgets;
 use App\Filament\Widgets\Data\LoadPerformance;
 use Filament\Support\RawJs;
 use Filament\Widgets\ChartWidget;
-use Filament\Widgets\Concerns\InteractsWithPageFilters;
+use Livewire\Attributes\Reactive;
 
 class ChartEventPerf extends ChartWidget
 {
-    use InteractsWithPageFilters;
+    #[Reactive]
+    public ?array $filters = [];
 
     protected ?string $heading = 'Events';
 

app/Filament/Widgets/ChartEventPerfMoAv.php

@@ -6,11 +6,12 @@ use App\Filament\Widgets\Data\HelperMoveingAveragePerformens;
 use App\Filament\Widgets\Data\LoadPerformance;
 use Filament\Support\RawJs;
 use Filament\Widgets\ChartWidget;
-use Filament\Widgets\Concerns\InteractsWithPageFilters;
+use Livewire\Attributes\Reactive;
 
 class ChartEventPerfMoAv extends ChartWidget
 {
-    use InteractsWithPageFilters;
+    #[Reactive]
+    public ?array $filters = [];
 
     protected ?string $heading = 'Events';
 

app/Filament/Widgets/ChartPlayer.php

@@ -5,11 +5,12 @@ namespace App\Filament\Widgets;
 use App\Filament\Widgets\Data\LoadPlayer;
 use Filament\Support\RawJs;
 use Filament\Widgets\ChartWidget;
-use Filament\Widgets\Concerns\InteractsWithPageFilters;
+use Livewire\Attributes\Reactive;
 
 class ChartPlayer extends ChartWidget
 {
-    use InteractsWithPageFilters;
+    #[Reactive]
+    public ?array $filters = [];
 
     protected ?string $pollingInterval = null;
 

app/Filament/Widgets/ChartPlayerMoAv.php

@@ -6,11 +6,12 @@ use App\Filament\Widgets\Data\HelperMoveingAverage;
 use App\Filament\Widgets\Data\LoadPlayer;
 use Filament\Support\RawJs;
 use Filament\Widgets\ChartWidget;
-use Filament\Widgets\Concerns\InteractsWithPageFilters;
+use Livewire\Attributes\Reactive;
 
 class ChartPlayerMoAv extends ChartWidget
 {
-    use InteractsWithPageFilters;
+    #[Reactive]
+    public ?array $filters = [];
 
     protected ?string $pollingInterval = null;
 

app/Filament/Widgets/ChartPlayerPerf.php

@@ -3,11 +3,12 @@
 namespace App\Filament\Widgets;
 
 use Filament\Widgets\ChartWidget;
-use Filament\Widgets\Concerns\InteractsWithPageFilters;
+use Livewire\Attributes\Reactive;
 
 class ChartPlayerPerf extends ChartWidget
 {
-    use InteractsWithPageFilters;
+    #[Reactive]
+    public ?array $filters = [];
 
     protected ?string $heading = 'Player';
 

app/Filament/Widgets/ChartPlayerPerfMoAv.php

@@ -3,11 +3,12 @@
 namespace App\Filament\Widgets;
 
 use Filament\Widgets\ChartWidget;
-use Filament\Widgets\Concerns\InteractsWithPageFilters;
+use Livewire\Attributes\Reactive;
 
 class ChartPlayerPerfMoAv extends ChartWidget
 {
-    use InteractsWithPageFilters;
+    #[Reactive]
+    public ?array $filters = [];
 
     protected ?string $heading = 'Player';
 

app/Filament/Widgets/Data/LoadPerformance.php

@@ -3,7 +3,6 @@
 namespace App\Filament\Widgets\Data;
 
 use App\Models\StatisticFixtures;
-use App\Models\StatistikoDetail;
 use App\Models\StatistikoEvent;
 use App\Models\StatistikoPlayer;
 use Illuminate\Support\Carbon;
@@ -146,30 +145,6 @@ class LoadPerformance
 
         return $data;
 
-        /**
-         * IF WITH PLAYER
-         */
-        // $matches_played = 0;
-        // $description = '';
-        // if ($tm_player_id) {
-        //     $matches_played = StatistikoPlayer::where('tm_player_id', (int) $tm_player_id)
-        //         ->when($player_on_field, function ($query) use ($player_on_field) {
-        //             switch ($player_on_field) {
-        //                 case 'lineup':
-        //                     return $query->where('lineup', 'T');
-        //                 case 'substituted':
-        //                     return $query->where('lineup', 'P');
-        //             }
-        //         })
-        //         ->pluck('match_id')->toArray();
-
-        //     if (! $matches_played) {
-        //         return [];
-        //     }
-
-        //     $description = ' (with '.StatistikoDetail::where('tm_player_id', (int) $tm_player_id)->value('name').')';
-        // }
-
     }
 
     public static function filterMatches($res, $matches)

app/Filament/Widgets/StatsMedianAverage.php

@@ -5,16 +5,22 @@ namespace App\Filament\Widgets;
 use App\Filament\Widgets\Data\HelperStatisticType;
 use App\Filament\Widgets\Data\LoadEvents;
 use App\Utilities\Round;
-use Filament\Widgets\Concerns\InteractsWithPageFilters;
 use Filament\Widgets\StatsOverviewWidget;
 use Filament\Widgets\StatsOverviewWidget\Stat;
+use Livewire\Attributes\Reactive;
 
 class StatsMedianAverage extends StatsOverviewWidget
 {
-    use InteractsWithPageFilters;
-
     protected ?string $pollingInterval = null;
 
+    #[Reactive]
+    public ?array $filters = [];
+
+    public function mount(array $filters)
+    {
+        $this->filters = $filters;
+    }
+
     public function getColumns(): int|array
     {
         return [

resources/views/filament/pages/statistic.blade.php

@@ -1,2 +1,51 @@
 <x-filament-panels::page>
+    {{ $this->filtersForm }}
+
+    @livewire(\App\Filament\Widgets\StatsMedianAverage::class, ['filters' => $this->filters])
+
+    <div x-data="{ activeTab: 'tab1' }">
+        <!-- Tab Navigation -->
+        <x-filament::tabs label="Statistics" class="mb-6 justify-center gap-8">
+            <x-filament::tabs.item x-on:click="activeTab = 'tab1'" :alpine-active="'activeTab === \'' . 'tab1' . '\''" icon="phosphor-trophy">
+                Events
+            </x-filament::tabs.item>
+
+            <x-filament::tabs.item x-on:click="activeTab = 'tab2'" :alpine-active="'activeTab === \'' . 'tab2' . '\''" icon="phosphor-trophy">
+                Events Performance
+            </x-filament::tabs.item>
+
+            <x-filament::tabs.item x-on:click="activeTab = 'tab3'" :alpine-active="'activeTab === \'' . 'tab3' . '\''" icon="icon-player">
+                Player
+            </x-filament::tabs.item>
+
+            <x-filament::tabs.item x-on:click="activeTab = 'tab4'" :alpine-active="'activeTab === \'' . 'tab4' . '\''" icon="icon-player">
+                Player Performance
+            </x-filament::tabs.item>
+        </x-filament::tabs>
+
+        <!-- Tab Content -->
+        <div class="mt-6">
+            <!-- Content for Tab 1 -->
+            <div x-show="activeTab === 'tab1'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @livewire(\App\Filament\Widgets\ChartEvent::class, ['filters' => $this->filters])
+                @livewire(\App\Filament\Widgets\ChartEventMoAv::class, ['filters' => $this->filters])
+            </div>
+
+            <!-- Content for Tab 2 -->
+            <div x-show="activeTab === 'tab2'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @livewire(\App\Filament\Widgets\ChartEventPerf::class, ['filters' => $this->filters])
+                @livewire(\App\Filament\Widgets\ChartEventPerfMoAv::class, ['filters' => $this->filters])
+            </div>
+
+            <div x-show="activeTab === 'tab3'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @livewire(\App\Filament\Widgets\ChartPlayer::class, ['filters' => $this->filters])
+                @livewire(\App\Filament\Widgets\ChartPlayerMoAv::class, ['filters' => $this->filters])
+            </div>
+
+            <div x-show="activeTab === 'tab4'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                @livewire(\App\Filament\Widgets\ChartPlayerPerf::class, ['filters' => $this->filters])
+                @livewire(\App\Filament\Widgets\ChartPlayerPerfMoAv::class, ['filters' => $this->filters])
+            </div>
+        </div>
+    </div>
 </x-filament-panels::page>