Usage heatmap

Weekday-by-hour usage heatmap in which dot density is the value; the peak pulses, and hover or arrow keys show a cell's count.

View as Markdown

<hf-matrix>· loading

Tryswitch to Tokens, then hover.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-matrix>

Props

labelremounts

<HfMatrix label="When your team uses Claude" />

Installation

pnpm dlx shadcn@latest add @lumesec/hf-matrix

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

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

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-matrix.json

Usage

import { HfMatrix } from "@/components/lumesec/hf-matrix";

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

Behaviour

Weekday by hour. Each cell is a block of dots whose density is the value; the peak pulses, hovering adds a crosshair and the metrics morph into each other.

API reference

Attributes

labelReact proplabelTypestringDefaultWhen your team uses Claude

Heading text. Read once on connect.

Keyboard

Keys	Action
ArrowLeft / ArrowRight / ArrowUp / ArrowDown	Move the inspected cell by one hour or one day. The first press starts from Wednesday 11:00.

Accessibility

The heatmap canvas is focusable with role="img" and aria-label Usage heatmap by weekday and hour. Use arrow keys to inspect cells.
The cell tooltip is plain text, not a live region, so inspected values are not announced.
The Messages and Tokens switch is a role="group" labelled Metric, with aria-pressed buttons.
Moving the pointer off the canvas or moving focus away hides the tooltip.
Reduced motion: cells appear without the diagonal intro, metric changes apply at once, the peak cell does not pulse and drawing stops between interactions.

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 --border, --card, --foreground, --lumesec, --muted and --muted-foreground.

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

Notes

Data is synthetic and built in: 7 × 24 values for messages (up to 420 per cell) and tokens (up to 48,000 per cell).
The heatmap is 154px tall and fills the width. Without reduced motion it redraws every frame while visible.

<hf-area>

<hf-donut>

<hf-stat>

<hf-funnel>

Was this page helpful?

Related