JanV Posts - Answer Overflow

JanV

•Created by JanV on 4/1/2025 in #❓┊help

Listen to Theme Switcher Event or Read the Current Theme Mode State

Hey, I would like to know how a widget (a ChartWidget) is aware of the current theme mode. The goal is, I want the chart border color changes depending on the current theme mode. If it is dark, I want to use lighter colors for better contrast. If the theme is system (light), the changes to another color. While researching, I found out that the theme swticher in filament has the following component structure.

<div
    x-data="{ theme: null }"
    x-init="
        $watch('theme', () => {
            $dispatch('theme-changed', theme)
        })

        theme = localStorage.getItem('theme') || @js(filament()->getDefaultThemeMode()->value)
    "
    class="fi-theme-switcher grid grid-flow-col gap-x-1"
>
    <x-filament-panels::theme-switcher.button
        icon="heroicon-m-sun"
        theme="light"
    />

    <x-filament-panels::theme-switcher.button
        icon="heroicon-m-moon"
        theme="dark"
    />

    <x-filament-panels::theme-switcher.button
        icon="heroicon-m-computer-desktop"
        theme="system"
    />
</div>

<div
    x-data="{ theme: null }"
    x-init="
        $watch('theme', () => {
            $dispatch('theme-changed', theme)
        })

        theme = localStorage.getItem('theme') || @js(filament()->getDefaultThemeMode()->value)
    "
    class="fi-theme-switcher grid grid-flow-col gap-x-1"
>
    <x-filament-panels::theme-switcher.button
        icon="heroicon-m-sun"
        theme="light"
    />

    <x-filament-panels::theme-switcher.button
        icon="heroicon-m-moon"
        theme="dark"
    />

    <x-filament-panels::theme-switcher.button
        icon="heroicon-m-computer-desktop"
        theme="system"
    />
</div>

` From this piece I see that an event is dispatched. I guess this is a livewire event, isn't it? When I try to listen in with the On attribute

    #[On('theme-changed')]
    public function handleThemeChange($theme): void
    {
        $this->theme = $theme;
        $this->updateChartData();
    }

    #[On('theme-changed')]
    public function handleThemeChange($theme): void
    {
        $this->theme = $theme;
        $this->updateChartData();
    }

I receive the following error.

Only arrays and Traversables can be unpacked

Only arrays and Traversables can be unpacked

Is there another way or approach to acccess the current theme mode? Thanks in advance for any hint/help.

2 replies

FFilament

•Created by JanV on 6/27/2024 in #❓┊help

How can I stream text/strings to the browser?

Hey folks, I would like to return a streamed response from a Symfony Process (Laravel Process Facade) to the user (browser). What does this mean? So I have clior a command that I call and that returns an ouput. Instead of waiting until the process is finished I want to stream the response incrementally to the user. I know how to solve this in a Laravel native way but not sure how this would work with FilamentPHP components. Anyone tried this already?

2 replies

FFilament

•Created by JanV on 6/21/2024 in #❓┊help

How to access an uploaded file without a resource

Hi there, I'm trying to figure out how to access an uploaded file without storing it in the database using a resource. I want to access the file and process it after uploading it. I have a custom page and a form with a FileUpload field. It's pretty straightforward. The documentation and other online sources require a resource, but I don't need it. Any hints or suggestions would be helpful!

15 replies

FFilament

•Created by JanV on 6/20/2024 in #❓┊help

Revert ToggleColumn State after failed Validation

Hi there, I have a ToggleColumn in a list view, and I’m facing an issue. I’ve added a validation rule, and based on the validation result, I want the toggle to revert to its previous state if the validation fails. This way, the user won’t be confused by seeing an invalid notification while the toggle state has changed. I know this behavior works in the edit or create record views, but I haven’t found a solution for the list view yet. Any hints or guidance would be greatly appreciated!

9 replies

FFilament

•Created by JanV on 1/3/2024 in #❓┊help

Line Chart not displayed caused by Alpine Error Exception

Hi there, I am following the official tutorial on drawing charts (https://filamentphp.com/docs/3.x/widgets/charts). I am using the Trend package as suggested to use Eloquent models. I have an OrdersChart Class. It is very simple and follows the tutorial structure. I included it in the AdminPanelProvider::widgets() array parameter.

// OrdersChart
return [
            'datasets' => [
                'label' => 'Bestellungen',
                'data' =>  $data->map(fn (TrendValue $value) => $value->aggregate),
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),
        ];

// OrdersChart
return [
            'datasets' => [
                'label' => 'Bestellungen',
                'data' =>  $data->map(fn (TrendValue $value) => $value->aggregate),
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),
        ];

What doesn't work? The line chart is not displayed. What exceptions do I see?

Alpine Expression Error: s.data.datasets.forEach is not a function

Expression: "function () {
            this.initChart(), this.$wire.$on("updateChartData", ({data: i}) => {
                mn = this.getChart(), mn.data = i, mn.update("resize")
            }), Alpine.effect(() => {
                Alpine.store("theme"), this.$nextTick(() => {
                    this.getChart().destroy(), this.initChart()
                })
            }), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
                Alpine.store("theme") === "system" && this.$nextTick(() => {
                    this.getChart().destroy(), this.initChart()
                })
            })
        }"

Alpine Expression Error: s.data.datasets.forEach is not a function

Expression: "function () {
            this.initChart(), this.$wire.$on("updateChartData", ({data: i}) => {
                mn = this.getChart(), mn.data = i, mn.update("resize")
            }), Alpine.effect(() => {
                Alpine.store("theme"), this.$nextTick(() => {
                    this.getChart().destroy(), this.initChart()
                })
            }), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
                Alpine.store("theme") === "system" && this.$nextTick(() => {
                    this.getChart().destroy(), this.initChart()
                })
            })
        }"

I have tried to console log the s.data.datasets in the function td(s, t) the charts.js file to ensure I am not running crazy. It would be great if someone could point me in a direction so I can see my mistake.

4 replies

Gaming

Programming