Filament•16mo ago

Widget Color()

I'm doing some initial work with Widgets and it seems the ->color() function isn't working for me. Here is how I'm using it:

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class AgentFinancialOverview extends BaseWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make('Amount Billed', '$11.2k')
                ->icon('heroicon-o-arrow-trending-up'),
            Stat::make('LOI Pending', '$2.1k')
                ->icon('heroicon-o-clipboard'),
            Stat::make('Uncollected', '$1.4k')
                ->color('danger')
                ->icon('heroicon-o-currency-dollar'),
        ];
    }
}

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class AgentFinancialOverview extends BaseWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make('Amount Billed', '$11.2k')
                ->icon('heroicon-o-arrow-trending-up'),
            Stat::make('LOI Pending', '$2.1k')
                ->icon('heroicon-o-clipboard'),
            Stat::make('Uncollected', '$1.4k')
                ->color('danger')
                ->icon('heroicon-o-currency-dollar'),
        ];
    }
}

Output of this is attached. When I added descriptions and description colors those worked so not sure why the widget 'color' itself isn't. Thanks for any insight!

Solution:

value or label

->value(new HtmlString('<span class="text-danger-600">Value</span>'))

->value(new HtmlString('<span class="text-danger-600">Value</span>'))

...

Jump to solution

15 Replies

Thijmen•16mo ago

The only part that can be colored is the description i think.

ShavikOP•16mo ago

This is what I had been reading: https://filamentphp.com/docs/3.x/widgets/stats-overview#changing-the-color-of-the-stat

Stats overview widgets - Widgets - Filament

Thijmen•16mo ago

Yeah i am looking at it right now Looks like it states that you can color the widget But in V2 this wasn't possible So i don't think they updated this for V3

ShavikOP•16mo ago

There is a separate descriptionColor. I hadn't used Filament until v3 so I have no baseline unfortunately. Are you saying the docs are just talking about planned features?

Thijmen•16mo ago

I just think the docs are wrong

Thijmen•16mo ago

https://github.com/filamentphp/filament/blob/64811c8be6a1c7cb55bf1eb5fc76f69c66fb3c6c/packages/widgets/resources/views/stats-overview-widget/stat.blade.php#L12

GitHub

filament/packages/widgets/resources/views/stats-overview-widget/sta...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

Thijmen•16mo ago

If you look at the code i don't see any possibility for a color beside the description one

ShavikOP•16mo ago

Agreed Hmm

Thijmen•16mo ago

I guess make a PR to change the docs or upgrade the view to make it possible to color the stat itself.

ShavikOP•16mo ago

I was thinking to do the second. Not contributed yet. Don't have the local copy setup yet. Those existing methods to calculate the color has me 👀

Dan Harrin•16mo ago

correct, color is only used for the description color() is just an alias for descriptionColor() and chartColor() together i think? so you dont have to set them both at once

CappaS•10mo ago

Anyone solved it? I'm trying to colorize my Stat value lol

Solution

LeandroFerreira•10mo ago

value or label

->value(new HtmlString('<span class="text-danger-600">Value</span>'))

->value(new HtmlString('<span class="text-danger-600">Value</span>'))

CappaS•10mo ago

Genius!!!! Thanks man @Chris Reed i think that the guy solved our problem. You can tag this Question as solved

ShavikOP•10mo ago

Done, I had totally forgotten about this 🙂

Gaming

Programming

Widget Color()