@php($payload = ['labels' => $result->labels, 'series' => collect($result->series)->map(fn ($series) => ['name' => $series->name, 'values' => $series->values])->all(), 'suffix' => $suffix ?? '', 'max' => $max ?? null])

<div @class(['bg-white p-6 rounded-lg shadow-sm dark:bg-gray-800', 'opacity-40' => ! $rangeIsValid])>
    @if ($result->isTooWide())
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ $tooWideMessage }}</p>
    @elseif ($result->isEmpty() || $result->hasNoData())
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ $emptyMessage }}</p>
    @else
        <div
            wire:key="chart-{{ md5($island.json_encode($payload)) }}"
            x-data="trendChart({{ Js::from($payload) }})"
            class="relative h-72"
        >
            <canvas x-ref="canvas"></canvas>
        </div>
    @endif
</div>