Filament•2y ago

Pass value to custom field

I am trying to create a custom field. It's a chart where I can select a date by clicking on the x-axis. When I click on zoomIn or zoomOut, the time span should change from, for example, 30 to 60 days. How can I pass the days to the field? This is my code:

class TimelineChartField extends Field
{
    /**
     * @var int
     */
    public int $days = 0;

    /**
     * @var string
     */
    public string $date = '';

    /**
     * @var array
     */
    public array $series = [
        [
            'name' => 'test',
            'data' => [
                ['2023-06-01', 100],
                ['2023-06-02', 100],
                ['2023-06-03', 85],
                ['2023-06-04', 85],
                ['2023-06-05', 85],
                ['2023-06-06', 100],
            ]
        ]
    ];
    ...
}

class TimelineChartField extends Field
{
    /**
     * @var int
     */
    public int $days = 0;

    /**
     * @var string
     */
    public string $date = '';

    /**
     * @var array
     */
    public array $series = [
        [
            'name' => 'test',
            'data' => [
                ['2023-06-01', 100],
                ['2023-06-02', 100],
                ['2023-06-03', 85],
                ['2023-06-04', 85],
                ['2023-06-05', 85],
                ['2023-06-06', 100],
            ]
        ]
    ];
    ...
}

        document.addEventListener('livewire:load', function () {

            let series = @js($series);

            let options = {
                series: series,
                ...
                chart: {
                    ...
                    events: {
                        ...
                        zoomed: function (chartContext, axis) {
                            let startDate = new Date(axis.xaxis.min);
                            let todayDate = new Date();
                            todayDate.setHours(startDate.getHours(), startDate.getMinutes(), startDate.getSeconds(), startDate.getMilliseconds());
                            let days = (todayDate.getTime() - axis.xaxis.min) / (1000 * 60 * 60 * 24);
                            @this.days = days;
                        },
                        ...
                }
            };

            var chart = new ApexCharts(document.querySelector("div#chartContainer"), options);
            chart.render();
        });

        document.addEventListener('livewire:load', function () {

            let series = @js($series);

            let options = {
                series: series,
                ...
                chart: {
                    ...
                    events: {
                        ...
                        zoomed: function (chartContext, axis) {
                            let startDate = new Date(axis.xaxis.min);
                            let todayDate = new Date();
                            todayDate.setHours(startDate.getHours(), startDate.getMinutes(), startDate.getSeconds(), startDate.getMilliseconds());
                            let days = (todayDate.getTime() - axis.xaxis.min) / (1000 * 60 * 60 * 24);
                            @this.days = days;
                        },
                        ...
                }
            };

            var chart = new ApexCharts(document.querySelector("div#chartContainer"), options);
            chart.render();
        });

6 Replies

Patrick Boivin•2y ago

Have a look at some of the built-in fields like TextInput. There are a lots of protected properties with getter and setter methods (e.g. $type, type() and getType()): https://github.com/filamentphp/filament/blob/2.x/packages/forms/src/Components/TextInput.php#LL146C5-L146C5

GitHub

filament/packages/forms/src/Components/TextInput.php at 2.x · filam...

Admin panel, form builder and table builder for Laravel. Built with the TALL stack. Designed for humans. - filament/packages/forms/src/Components/TextInput.php at 2.x · filamentphp/filament

Patrick Boivin•2y ago

You can use the same approach for the properties of your custom fields.

notwutOP•2y ago

Thank you very much for your quick support. My problem is that I get the error "Unable to set component data. Public property [$days] not found on component" when I try to set the value with "@this.days = days".

Patrick Boivin•2y ago

I see! Your form field is not a Livewire component... I think @this only applies in a Livewire component template.

notwutOP•2y ago

Oh ok, then how can I use javascript to pass data to my field? Do I need to do this with "@js()"?

Patrick Boivin•2y ago

I don't understand the full context of your page but maybe you could refactor your code to use form events instead : https://filamentphp.com/docs/2.x/forms/advanced#using-form-events

Filament

Advanced - Form Builder - Filament

The elegant TALL stack form builder for Laravel artisans.

Gaming

Programming

Pass value to custom field