Activity heatmap

Installation#

pnpm dlx shadcn@latest add @lumesec/px-activity

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/px-activity.json

Usage#

import { PxActivity } from "@/components/lumesec/px-activity";

export function Example() {
  return (
    <PxActivity />
  );
}

Behaviour#

Every day is a cell made of nine sub-pixels, so intensity shows as both brightness and density. Hovering draws a crosshair and a tooltip; clicking sends a ripple across the months; switching metric flips the cells in a diagonal wave.

API reference#

Methods#

Call them on the element, for example through a React ref.

Accessibility#

• The metric switch is a role="radiogroup" with aria-label="Metric"; its two buttons have role="radio" and aria-checked. Both stay in the tab order and there is no arrow-key handling.
• The canvas has role="img" with an aria-label giving the total and the longest streak for the current metric.
• The streak summary above the grid is an aria-live="polite" region.
• The per-day tooltip appears on pointer hover only.
• Reduced motion: switching metric replaces the cells at once instead of flipping them in a diagonal wave; click ripples still play.

Theming#

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --card, --foreground, --lumesec, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-muted, --ui-surface and --ui-track.

Notes#

• The data is generated demo data, derived deterministically from each date, with weekdays busier than weekends. There is no attribute for real data.
• The grid ends at today and shows one 12px column per week, from 8 to 40 weeks depending on width. The canvas is 86px tall.