Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

wikorl's avatar
Level 13

Uncaught Snapshot missing on Livewire component with id...

I have a livewire fullpage component. As soon as I update the date on the frontend and call the updateDate function I get the following error: "Uncaught Snapshot missing on Livewire component with id". Why is he not able to update the component properly?

public $desks;
public $date;

public function boot(): void
{
    $this->desks = Desk::count();
    $this->date = now();
}

#[Computed]
public function reservations(): Collection
{
    $startDate = (clone $this->date)->subWeekdays(2)->startOfDay();
    $endDate = (clone $this->date)->addWeekdays(2)->startOfDay();

    $reservationsArray = DB::table('reservations')
        ->join('users', 'reservations.user_id', '=', 'users.id')
        ->selectRaw("
            DATE_FORMAT(start_date, '%d.%m.%Y') as date,
            DATE_FORMAT(start_date, '%d%m%Y') as dateCompact,
            SUM(duration = 'complete') as complete,
            SUM(duration = 'morning') as morning,
            SUM(duration = 'afternoon') as afternoon,
            GROUP_CONCAT(DISTINCT CONCAT(users.firstname, ' ', users.lastname) ORDER BY users.firstnameASC, users.lastnameASC SEPARATOR ', ') as user_names
        ")
        ->whereBetween('start_date', [$startDate, $endDate])
        ->where('series', 0)
        ->groupBy(DB::raw("DATE_FORMAT(start_date, '%d.%m.%Y')"))
        ->get();

    foreach($reservationsArray as $reservation)
    {
        if($reservation->complete > 0)
        {
            $reservation->morning += $reservation->complete;
            $reservation->afternoon += $reservation->complete;
            unset($reservation->complete);
        }
    }

    return $reservationsArray;
}

public function updateDate($newDate): void
{
    $this->date = new Carbon ($newDate);
    $this->reservations();
}

public function render(): View
{
    return view('livewire.dashboard.home')
        ->layoutData(['header' => 'Dashboard']);
}
0 likes
1 reply
wikorl's avatar
Level 13

The following javascript is used to render the data afterwards in apexcharts. It renders the initial charts. But as soon as I change the date I get the following additional error

Error: attribute transform: Expected number, "translate(NaN, 0)".

let reservations = $wire.$get('reservations')
let desks = $wire.$get('desks')

for (let i = 0; i < reservations.length; i++) {
    let morning = reservations[i].morning
    let afternoon = reservations[i].afternoon
    let dateCompact = reservations[i].dateCompact

    let options = {
        chart: {
            height: 200,
            type: "radialBar",
        },
        series: [(morning / desks) * 100, (afternoon / desks) * 100],
        colors: ['#D30E28', '#000000'],
        plotOptions: {
            radialBar: {
                startAngle: -90,
                endAngle: 90,
                track: {
                    startAngle: -90,
                    endAngle: 90,
                },
                dataLabels: {
                    name: {
                        show: true,
                        fontSize: '13px'
                    },
                    value: {
                        offsetY: -2,
                        fontSize: '11px',
                        formatter: function (val) {
                            return Math.ceil(val * desks) / 100
                        }
                    },
                }
            }
        },
        labels: ['Vormittag', 'Nachmittag']
    };

    new ApexCharts(document.querySelector("#chart-" + dateCompact), options).render();
}

Please or to participate in this conversation.