leandrocfe / filament-apex-charts

Apex Charts integration for Filament PHP.
https://filament-apex-charts-demo.leandroferreira.dev.br
MIT License
331 stars 39 forks source link

Single filter is not updateing the chart on change. #86

Open MikePageDev opened 3 months ago

MikePageDev commented 3 months ago

I initially set it up with the form version, and it worked fine, but I switched to the single version because I'm only using a single filter. When the chart loads, the default filter loads fine, but nothing happens when I change the dropdown, and I can't see anything in the network tab. If I set polling to 10s and change the dropdown, the chart updates correctly after 10s, so my query works fine. It looks like the dropdown is not triggering a reload. Any thoughts?

Here is the chart class

<?php

namespace App\Filament\Widgets;

use App\Http\Controllers\TrainingSubjectController;
use App\Models\TrainingSubject;
use Carbon\Carbon;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class TrainingSessionChart extends ApexChartWidget
{
    protected static ?string $chartId = 'trainingSessionChart';

    /**
     * Widget Title
     *
     * @var string|null
     */
    protected static ?string $heading = 'Training Sessions';
    protected static ?string $pollingInterval = null;
    protected static ?int $sort = 3;
    private $trainingSubjects;
    private Carbon $start;
    private Carbon $end;
    public ?string $filter = 'week';

    public function __construct()
   {
       $this->trainingSubjects = TrainingSubject::get();
   }

    /**
     * Chart options (series, labels, types, size, animations...)
     * https://apexcharts.com/docs/options
     *
     * @return array
     */
    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'pie',
                'height' => 300,
            ],
            'series' => $this->getData(),
            'labels' => $this->getLabels(),
            'legend' => [
                'labels' => [
                    'fontFamily' => 'inherit',
                ],
            ],
            'colors' => ['#003f5c', '#444e82', '#995196', '#dd5182', '#ff6e54', '#ffa600'],
            'stroke' => [
                'show' => false,
            ],
        ];
    }

    private function getLabels(): array
    {
       return $this->trainingSubjects->pluck('name')->toArray();
    }

    private function getData(): array
    {
        $this->setFilter();
        $data = [];

        foreach($this->trainingSubjects as $trainingSubject) {
            $trainingSessions = TrainingSubjectController::getUsersSessions($this->start, $this->end, $trainingSubject);

            $data[] = round(TrainingSubjectController::getTimeSpent($trainingSessions), 2);
        }

        return $data;
    }

    protected function getFilters(): array
    {
        return [
                    'today' => 'Today',
                    'week' => 'Week',
                    'month' => 'Month',
                    'year' => 'Year',
                    'allTime' => 'All Time'
        ];
    }

    protected function setFilter()
    {
        switch ($this->filter) {
            case 'today':
                $this->start = Carbon::now()->startOfDay();
                $this->end = Carbon::now()->addDay()->startOfDay();
                break;
            case 'week':
                $this->start = Carbon::now()->subWeek()->startOfDay();
                $this->end = Carbon::now();
                break;
            case 'month':
                $this->start = Carbon::now()->subMonth()->startOfDay();
                $this->end = Carbon::now();
                break;
            case 'year':
                $this->start = Carbon::now()->subYear()->startOfDay();
                $this->end = Carbon::now();
                break;
            case 'allTime':
                $this->start = Carbon::now()->subYears(200);
                $this->end = Carbon::now();
                break;
        }
    }
}
davidemorotti commented 1 month ago

I have the same problem