Heatmap Calendar

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

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

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