Components

Heatmap

A GitHub-style contributions heatmap of colour-graded daily counts.

php artisan blatui:add heatmap
Less More
<x-ui.heatmap />

Compact

Less More
<x-ui.heatmap :data="[
    0, 1, 0, 2, 4, 1, 0,
    2, 3, 1, 0, 5, 2, 1,
    4, 0, 2, 3, 6, 1, 0,
    1, 2, 0, 4, 3, 0, 1,
    0, 5, 2, 1, 4, 2, 0,
    3, 1, 0, 2, 6, 1, 0,
]" />

API Reference

Props, slots and exposed methods for <x-ui.heatmap>.

Props

Prop Type Default Description
data [date => int]|int[] [] The activity counts to plot. Either an associative map of "YYYY-MM-DD" => count (sorted chronologically and used in tooltips) or a flat list of integer counts. When empty, deterministic demo data is shown.
levels int[] Optional ascending count thresholds that split cells into the four shaded levels, e.g. [1, 3, 6, 9]. Only the first four are used. Defaults to quartile-style thresholds derived from the highest count.