Can widget chart repeateable without publishing views?

[amarafiif]

Can anyone help me, I've been trying to figure this out for days. As I'm still learning how to use filament

Laravel 9
Filament v2

I want to display a pie chart to see the total checkins and non-checkins on each existing ticket.

There is a problem when I try to create using a view where when the scan notification pop up appears, the card widget error:
Error: attribute d: Expected number, "M NaN NaN A NaN Na…".
Element.setAttribute @ index.js:152
attr @ filament-apex-charts-scripts.js:97
attr @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:7
(anonymous) @ filament-apex-charts-scripts.js:681
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:681
setTimeout
value @ filament-apex-charts-scripts.js:681
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:101
index.js:152 Error: attribute d: Expected number, "M NaN NaN A NaN Na…".
Element.setAttribute @ index.js:152
attr @ filament-apex-charts-scripts.js:97
attr @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:7
(anonymous) @ filament-apex-charts-scripts.js:681
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:681
setTimeout
value @ filament-apex-charts-scripts.js:681
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:101
index.js:152 Error: attribute transform: Expected number, "translate(NaN, 0) scale(1)".
Element.setAttribute @ index.js:152
attr @ filament-apex-charts-scripts.js:97
attr @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:97
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:7
(anonymous) @ filament-apex-charts-scripts.js:681
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:681
setTimeout
value @ filament-apex-charts-scripts.js:681
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:101
index.js:152 Error: attribute height: Expected length, "NaN".
Element.setAttribute @ index.js:152
value @ filament-apex-charts-scripts.js:97
(anonymous) @ filament-apex-charts-scripts.js:681
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:681
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:681
setTimeout
value @ filament-apex-charts-scripts.js:681
value @ filament-apex-charts-scripts.js:681
(anonymous) @ filament-apex-charts-scripts.js:101
index.js:152 Error: attribute height: Expected length, "NaN".

My code like this:

<?php

namespace App\Filament\Resources\BookingResource\Widgets;

use App\Models\Ticket;
use Filament\Widgets\Widget;
use Illuminate\Support\Facades\Auth;

class CheckinStats extends Widget
{
    protected static string $view = 'filament.widgets.checkin-stats';

    protected static ?string $pollingInterval = '30s';

    protected static ?string $loadingIndicator = 'Loading...';

    protected function getViewData(): array
    {
        $user = Auth::guard('partner')->user();

        $tickets = Ticket::where('partner_id', $user->id)
            ->whereHas('event', function ($query) {
                $query->where('is_running', true);
            })->get();

        if ($tickets->isEmpty()) {
            return ['charts' => [], 'message' => 'Tidak ada statistik checkin yang bisa ditampilkan.'];
        }

        $charts = [];

        foreach ($tickets as $ticket) {
            $sold = $ticket->transactions()
                ->where('status', 'PAID')
                ->sum('quantity');
            $checkin = $ticket->transactions()->with('bookings')->get()->sum(function ($q) {
                return $q->bookings->where('status', 'CHECKIN')->count();
            });

            $charts[] = [
                'name' => $ticket->name,
                'checkin' => is_numeric($checkin) ? $checkin : 0,
                'not_checkin' => is_numeric($sold - $checkin) ? $sold - $checkin : 0,
            ];
        }

        return ['charts' => $charts, 'message' => ''];
    }
}

views

@if (empty($charts))
    <div class="py-4">
        <p class="text-gray-500 text-center xl:text-left xl:pl-16">{{ $message }}</p>
    </div>
@else
    @foreach ($charts as $chart)
        <x-filament::card class="filament-apex-charts-card" @apexcharts-dropdown.window="dropdownOpen = event.detail.open">

            <x-filament-apex-charts::header :heading="$chart['name']" :subheading="''" :filters="[]" :indicatorsCount="0" width="xs" filterFormAccessible="false">
                <x-slot:filterForm>
                </x-slot:filterForm>
            </x-filament-apex-charts::header>

            <div id="chart-{{ $loop->index }}"></div>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    var checkin = {{ $chart['checkin'] ?? 0 }};
                    var notCheckin = {{ $chart['not_checkin'] ?? 0 }};

                    console.log('Checkin:', checkin);
                    console.log('Not Checkin:', notCheckin);

                    if (isNaN(checkin) || isNaN(notCheckin)) {
                        console.error('Invalid data for chart');
                        return;
                    }

                    var options = {
                        chart: {
                            type: 'pie',
                            height: 200,
                            animations: {
                                enabled: false,
                            },
                        },
                        // series: [{{ $chart['checkin'] }}, {{ $chart['not_checkin'] }}],
                        series: [checkin, notCheckin],
                        labels: ['Checkin', 'Belum Checkin'],
                        colors: ['#3b82f6', '#22c55e'],
                        title: {
                            align: 'center',
                        },
                        legend: {
                            labels: {
                                colors: '#9ca3af',
                                fontWeight: 600,
                            },
                        },
                    };

                    var chart = new ApexCharts(document.querySelector("#chart-{{ $loop->index }}"), options);
                    chart.render();

                    Livewire.on('chartDataUpdated', (charts) => {
                        charts.forEach((chartData, index) => {
                            var chart = ApexCharts.getChartById('chart-' + index);
                            if (chart) {
                                if (!isNaN(chartData.checkin) && !isNaN(chartData.not_checkin)) {
                                    chart.updateSeries([chartData.checkin, chartData.not_checkin]);
                                } else {
                                    console.error('Invalid data for chart update', chartData);
                                }
                            }
                        });
                    });
                });
            </script>

        </x-filament::card>
    @endforeach
@endif