Twenty-four hour activity strip with tone bars whose opacity scales with each hour's volume, labeled 00 to 24.
The import and the props worth knowing about, in one place.
import { Dashboard24 } from "@/components/beste/piece/dashboard24";
<Dashboard24
surface="card"
bordered={true}
inverted={false}
title="Last 24h"
peak="peak at 14:00"
values={[
2,
1,
0,
0,
1,
2,
4,
8,
14,
22,
28,
34,
38,
42,
48,
40,
36,
30,
22,
18,
14,
10,
6,
4
]}
hourLabels={[
"00",
"06",
"12",
"18",
"24"
]}
tone="violet"
/>Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.
Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.
Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.