Heatmap

@php
    // One row per series (weekday), one column per category (hour).
    $hours = collect(range(8, 20))->map(fn (int $h) => [
        'hour' => sprintf('%02d:00', $h),
        'mon' => (int) round(20 + 30 * sin(($h - 8) / 4)),
        'tue' => (int) round(26 + 34 * sin(($h - 8) / 4)),
        'wed' => (int) round(30 + 38 * sin(($h - 7) / 4)),
        'thu' => (int) round(24 + 32 * sin(($h - 8) / 4)),
        'fri' => (int) round(14 + 22 * sin(($h - 9) / 4)),
    ])->all();
@endphp

<x-ui.echart type="heatmap" :data="$hours" index="hour" label="Support tickets by hour" class="h-72 w-full" :config="[
    'mon' => ['label' => 'Monday'],
    'tue' => ['label' => 'Tuesday'],
    'wed' => ['label' => 'Wednesday'],
    'thu' => ['label' => 'Thursday'],
    'fri' => ['label' => 'Friday'],
]" />

@php
    // 7 days × 24 hours. Rows are series, so each weekday is one config entry.
    $days = ['mon' => 'Monday', 'tue' => 'Tuesday', 'wed' => 'Wednesday', 'thu' => 'Thursday', 'fri' => 'Friday', 'sat' => 'Saturday', 'sun' => 'Sunday'];
    $hours = collect(range(0, 23))->map(function (int $h) use ($days) {
        $row = ['hour' => sprintf('%02d', $h)];
        foreach (array_keys($days) as $d => $key) {
            $weekend = $d >= 5;
            $row[$key] = max(0, (int) round(($weekend ? 18 : 42) * exp(-(($h - ($weekend ? 16 : 11)) ** 2) / 22) + ($d * 3 % 5)));
        }

        return $row;
    })->all();
@endphp

<x-ui.echart type="heatmap" :data="$hours" index="hour" label="Deploys by hour and weekday" class="h-96 w-full"
    :config="collect($days)->map(fn ($label) => ['label' => $label])->all()"
    :options="['visualMap' => ['itemWidth' => 12, 'itemHeight' => 160]]" />