Filament•2mo ago

How can I change the width of individual statsoverview stats?

Hey all, im trying to have a stats overview widget which consists of 2 stats to take up the full width, the problem is that I can't find out how.

    protected function getStats(): array
    {
        return [
            Stat::make('Unique views', '192.1k'),
            Stat::make('Bounce rate', '21%'),
        ];
    }

    protected function getStats(): array
    {
        return [
            Stat::make('Unique views', '192.1k'),
            Stat::make('Bounce rate', '21%'),
        ];
    }

okay if I for example have this basic stat it takes up 2/3 the width of the page. Instead of this I want it so that it takes up full space and not have 2 stats that take up each 1/3th of the page. I already tried to do something with the columspan, but that is for the whole widget, so then each takes 1/3 of the columnspan that has been asigned. If anyone can help me out to individually change the width, so I will be able to make them both take 50% of the width, or any other posible solution, it would be really appreciated.

5 Replies

yandos666•2mo ago

Have you looked at getHeaderWidgetsColumns? you should be able to set the columns to 2 and then set columspan to 1 each

TjielOP•2mo ago

I already tried doing something with getHeaderColumns but then the problem is that i can't change the individual size of the stats. So for example if I set the columns to 2 like this:

    public function getHeaderWidgetsColumns(): int|string|array
    {
        return 2;
    }

    public function getHeaderWidgetsColumns(): int|string|array
    {
        return 2;
    }

and then adjust the columnSpan in the stats widget like this:

    protected int | string | array $columnSpan = 1;

    protected int | string | array $columnSpan = 1;

Each stat will now only be 1/6 of the width. This is because the columnSpan variable is not for a single stat but instead for the whole widget. So it could work this way if there was a way to specify a columnspan for an individial stat. Which I can't seem to find.

Miguel García•2mo ago

I'd recommend to customise the widget's grid : https://filamentphp.com/docs/3.x/panels/dashboard#customizing-the-widgets-grid Then set how many grid columns are used to display widgets in your new (dashboard) page

    public function getColumns(): int | string | array
    {
        return 12;
    }

    public function getColumns(): int | string | array
    {
        return 12;
    }

Finally, create as many overview widgets as you need with one stat each and set their column spam as you wish

    protected int | string | array $columnSpan = [
        'md' => 12,
        'lg' => 6
    ];

    protected int | string | array $columnSpan = [
        'md' => 12,
        'lg' => 6
    ];

Dashboard - Panel Builder - Filament

paanblogger•2mo ago

Since I dont use Panel & Resources , but only install filament widget , so , what I do is , I create custom blade file for my stats widget , then I copy file content from 'filament-widgets::stats-overview-widget' , and customize from that.

@php
    $columns = $this->getColumns();
@endphp

<x-filament-widgets::widget class="fi-wi-stats-overview">
    <div
        @if ($pollingInterval = $this->getPollingInterval())
            wire:poll.{{ $pollingInterval }}
        @endif
        @class([
            'fi-wi-stats-overview-stats-ctn grid gap-6',
            'md:grid-cols-1' => $columns === 1,
            'md:grid-cols-2' => $columns === 2,
            'md:grid-cols-3' => $columns === 3,
            'md:grid-cols-2 xl:grid-cols-4' => $columns === 4,
        ])
    >
        @foreach ($this->getCachedStats() as $stat)
            {{ $stat }}
        @endforeach
    </div>
</x-filament-widgets::widget>

@php
    $columns = $this->getColumns();
@endphp

<x-filament-widgets::widget class="fi-wi-stats-overview">
    <div
        @if ($pollingInterval = $this->getPollingInterval())
            wire:poll.{{ $pollingInterval }}
        @endif
        @class([
            'fi-wi-stats-overview-stats-ctn grid gap-6',
            'md:grid-cols-1' => $columns === 1,
            'md:grid-cols-2' => $columns === 2,
            'md:grid-cols-3' => $columns === 3,
            'md:grid-cols-2 xl:grid-cols-4' => $columns === 4,
        ])
    >
        @foreach ($this->getCachedStats() as $stat)
            {{ $stat }}
        @endforeach
    </div>
</x-filament-widgets::widget>

Then on the widget file , change

protected static string $view = '';

protected static string $view = '';

to the custom blade file

TjielOP•2mo ago

@paanblogger Thanks for the help! This is exactly what I was looking for

Gaming

Programming

How can I change the width of individual statsoverview stats?