Filament•4d ago

Change the size of the Stats Overview Widget

Hello, I would like some help to reduce the size of my stat widget, I want to reduce the size by half, I am rendering this widget on a custom page, I need the widgets to be shown in a single column, apparently by default the page is divided into 3 columns, could someone help me please? Card::make( $nms->name, $events ? ($nms->conn_status == 0 ? 'OFFLINE' : $events->count()) : 0 ) ->description('View Events') ->descriptionIcon('heroicon-o-arrow-right-circle') ->chart($eventsByDay->toArray()) ->color($events ? ($nms->conn_status == 0 ? 'warning' : ($events->count() > 0 ? 'danger' : 'success')) : 'success') ->extraAttributes([ 'class' => 'cursor-pointer', 'wire:click' => "nms_events('{$nms->id}')", ]);

3 Replies

EMMAN•4d ago

Vp•4d ago

Maybe this https://filamentphp.com/docs/3.x/panels/pages#customizing-the-widgets-grid

Pages - Panel Builder - Filament

Zen Nitiruj•4d ago

I customed its view page like this

@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 grid-cols-2',
        'md:grid-cols-1' => $columns === 1,
        'md:grid-cols-2' => $columns === 2,
        'md:grid-cols-3' => $columns === 3,
        'md:grid-cols-4' => $columns === 4,
        'md:grid-cols-5 xl:grid-cols-5' => $columns === 5,
    ])>
        @foreach ($this->getCachedStats() as $stat)
            {{ $stat }}
        @endforeach

@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 grid-cols-2',
        'md:grid-cols-1' => $columns === 1,
        'md:grid-cols-2' => $columns === 2,
        'md:grid-cols-3' => $columns === 3,
        'md:grid-cols-4' => $columns === 4,
        'md:grid-cols-5 xl:grid-cols-5' => $columns === 5,
    ])>
        @foreach ($this->getCachedStats() as $stat)
            {{ $stat }}
        @endforeach

</div> </x-filament-widgets::widget>

Gaming

Programming

Change the size of the Stats Overview Widget