Weekly Bars

Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.

Events this week2,840
Mon
Tue
Wed
Thu
Fri
Sat
Sun

New here? Read the installation guide.

Import & use
import { Dashboard8 } from "@/components/beste/piece/dashboard8";

<Dashboard8
  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"
/>

More Dashboard pieces

View all Dashboard
Traffic by device9,420 sessions
  • Mobile58%
  • Desktop32%
  • Tablet8%
  • Other2%

Stacked Bar

Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.

Retention
W0W1W2W3W4
W0
100
64
48
41
38
W1
100
71
55
46
W2
100
68
52
W3
100
74

Cohort Retention

Weekly cohort grid where each cell's opacity scales with the retention percentage in the tone color.

Last 24hpeak at 14:00
0006121824

Hourly Strip

Twenty-four hour activity strip with tone bars whose opacity scales with each hour's volume, labeled 00 to 24.

Milestones
DesignApr 2
BuildApr 12
QAApr 22
LaunchMay 3

Milestone Timeline

Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.

2Critical
6Warning
14Info

Alert Summary

Three-tile alert overview with semantic icons and counts for critical, warning, and info severities.

Top sources
1Direct
4,820
2Google
3,610
3Twitter
1,890
4Referral
980

Top List

Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.

Markdown version