Filament•13mo ago

How to load asynchronously a widget ?

Hey guys, I try to add a new widget to my dashboard using the LineChart, but the problem is about the time to perform the request... It take several seconds because we have a database with many millions of records. Do you know if it exist a method to load that async? Thanks

28 Replies

wyChoong•13mo ago

It should be lazy loaded by default

wyChoong•13mo ago

https://filamentphp.com/docs/3.x/widgets/charts#disabling-lazy-loading

Chart widgets - Widgets - Filament

SUNSHINEOP•13mo ago

As you can see on this video, the dashboard widgets are not loaded because the 3rd is a big query that take lot of time to load. @wyChoong And btw, it's not async, because when I try to go back on "Organizations" page, it's just block the render until the request on Dashboard Widgets is not done.

wyChoong•13mo ago

Submit an issue on GitHub with repo

SUNSHINEOP•13mo ago

I UP this request for support.

Dennis Koch•13mo ago

You are the OP? 😅

SUNSHINEOP•13mo ago

What do you mean by "OP" ?

Dennis Koch•13mo ago

You opened this thread.

SUNSHINEOP•13mo ago

I'm just having a bug and it was automatically closed by the bot because of the inactivity of this thread. That's why I up.

Dennis Koch•13mo ago

Ah 😅

SUNSHINEOP•13mo ago

Yes I am the OP of this thread. 😄

Dennis Koch•13mo ago

I guess that's a limitation of wire:navigate?

SUNSHINEOP•13mo ago

hmm, i don't really know. to be honest it's a fresh filament project ! It's a Laravel Project where only filament is installed

Dennis Koch•13mo ago

I think they are loaded async, but are batched because of LW3

SUNSHINEOP•13mo ago

ahhh.. and do you know how can I avoid this limitation ?

Dennis Koch•13mo ago

Nope, sorry. Haven't really played with it yet

SUNSHINEOP•13mo ago

hmmm ok ok, what can be the "problem" ? Then I can probably try to search a solution on stackoverflow.. or if you can ping someone from the filament team that know this ? 😄 Because I don't really use Livewire, I'm more a pro-inertia

wyChoong•13mo ago

Was the an issue on GitHub with repo provided? Maybe you can try make another 2 widgets not lazy

wyChoong•13mo ago

GitHub

add isolate parameter by eilerth · Pull Request #7102 · livewire/li...

Review the contribution guide first at: https://laravel-livewire.com/docs/2.x/contribution-guide 1️⃣ Is this something that is wanted/needed? Did you create a discussion about it first? This is nee...

awcodes•13mo ago

Caleb was working on an isolation feature that would allow you opt out of batching when needed. Not sure where he is on that feature though.

wyChoong•13mo ago

Ping him on the stream 😂

SUNSHINEOP•13mo ago

@awsqed @wyChoong Ok thanks you! So you think that at this time there is no solution for that?? It's a problem that we cannot make graphs/charts on huge database, that's why charts are for :/

wyChoong•13mo ago

This doesn’t work for you? If all 3 are slow, then there no solution for now The best is to optimize your query or make a snapshot of result for your chart with queue job It’s impossible to show live aggregated data with huge data anyways. Maybe redis can help but can’t advise

SUNSHINEOP•13mo ago

class FeedbackLineChart extends ChartWidget
{
    protected static ?string $heading = 'Feedbacks';


    protected function getData(): array
    {
        $feedbacks = $this->getFeedbacksData();

        return [
            'datasets' => [
                [
                    'label' => 'Feedbacks',
                    'data' => $feedbacks->pluck('total')->toArray(),
                    'fill' => 'start',
                ],
            ],
            'labels' => $feedbacks->pluck('period')->toArray(),
            'precision' => '50000',
        ];

    }

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

    private function getFeedbacksData() {
        $results = Feedback::query()
            ->selectRaw('YEAR(created_at) as year, MONTH(created_at) as month, SUBSTRING(MONTHNAME(created_at), 1, 3) as monthName, COUNT(*) as total')
            ->where('created_at', '>', Carbon::now()->subMonths(12))
            ->orderByRaw('YEAR(created_at) ASC, MONTH(created_at) ASC')
            ->groupByRaw('YEAR(created_at), MONTH(created_at), SUBSTRING(MONTHNAME(created_at), 1, 3)')
            ->get();

        return $results->map(fn ($result) => [
            'period' => $result['monthName'],
            'total' => $result['total'],
        ]);
    }
}

class FeedbackLineChart extends ChartWidget
{
    protected static ?string $heading = 'Feedbacks';


    protected function getData(): array
    {
        $feedbacks = $this->getFeedbacksData();

        return [
            'datasets' => [
                [
                    'label' => 'Feedbacks',
                    'data' => $feedbacks->pluck('total')->toArray(),
                    'fill' => 'start',
                ],
            ],
            'labels' => $feedbacks->pluck('period')->toArray(),
            'precision' => '50000',
        ];

    }

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

    private function getFeedbacksData() {
        $results = Feedback::query()
            ->selectRaw('YEAR(created_at) as year, MONTH(created_at) as month, SUBSTRING(MONTHNAME(created_at), 1, 3) as monthName, COUNT(*) as total')
            ->where('created_at', '>', Carbon::now()->subMonths(12))
            ->orderByRaw('YEAR(created_at) ASC, MONTH(created_at) ASC')
            ->groupByRaw('YEAR(created_at), MONTH(created_at), SUBSTRING(MONTHNAME(created_at), 1, 3)')
            ->get();

        return $results->map(fn ($result) => [
            'period' => $result['monthName'],
            'total' => $result['total'],
        ]);
    }
}

Here is the code of the ChartWidget, if you see something wrong??

wyChoong•13mo ago

Is there any indexes for those columns you used for order and group

Dennis Koch•13mo ago

Very unlikely as he’s using methods inside the query

SUNSHINEOP•13mo ago

@wyChoong which one ? created_at ? nop it's not indexed.

Gaming

Programming

How to load asynchronously a widget ?