Heatmap Calendar

Seven-row activity grid that bins each cell into one of five tonal steps for at-a-glance density.

New here? Read the installation guide.

Import & use
import { Monitoring11 } from "@/components/beste/piece/monitoring11";

<Monitoring11
  data={[
    0,
    1,
    2,
    1,
    0,
    1,
    2,
    3,
    2,
    1,
    0,
    1,
    1,
    2,
    3,
    2,
    1,
    2,
    3,
    4,
    3,
    2,
    1,
    0,
    0,
    1,
    1,
    2,
    2,
    3,
    4,
    4,
    3,
    2,
    2,
    1,
    1,
    0,
    1,
    2,
    3,
    3,
    4,
    3,
    2,
    1,
    1,
    2,
    2,
    1,
    0,
    1,
    2,
    2,
    3,
    4,
    4,
    3,
    2,
    1,
    0,
    1,
    2,
    1,
    1,
    2,
    3,
    3,
    2,
    1,
    0,
    1,
    1,
    0,
    1,
    2,
    1,
    2,
    2,
    3,
    2,
    1,
    1,
    0
  ]}
  tone="emerald"
/>

More Monitoring pieces

View all Monitoring
http.req
auth
db.query
cache.set

Trace Spans

Distributed trace timeline laying spans across a shared horizontal axis, each row labeled in monospace.

API Gateway
Operational99.98%

Service Status

Compact service health row with operational state, pulsing dot, and uptime percentage on the right.

7/10

Token Bucket

Rate-limit row that maps remaining capacity to a chain of filled and hollow dots, with a count beside it.

CPU
72%

Resource Meter

Utilization bar for CPU, memory, disk, or network with a recolorable fill and matching percentage label.

812

Queue Depth

Vertical battery of segments rendering current queue fill against capacity, with a stacked numeric ratio beside it.

Requests
12.4Kreq/s
+12%

Throughput Counter

Headline number for traffic volume with a trend arrow and tinted delta badge against a prior window.

Markdown version