Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.
The import and the props worth knowing about, in one place.
import { Dashboard8 } from "@/components/beste/piece/dashboard8";
<Dashboard8
surface="card"
bordered={true}
inverted={false}
title="Events this week"
total="2,840"
days={[
{
"label": "Mon",
"value": 280
},
{
"label": "Tue",
"value": 410
},
{
"label": "Wed",
"value": 520
},
{
"label": "Thu",
"value": 340
},
{
"label": "Fri",
"value": 680
},
{
"label": "Sat",
"value": 480
},
{
"label": "Sun",
"value": 130,
"today": true
}
]}
tone="violet"
/>Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.
Weekly cohort grid where each cell's opacity scales with the retention percentage in the tone color.
Twenty-four hour activity strip with tone bars whose opacity scales with each hour's volume, labeled 00 to 24.
Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.