Uptime history

Installation#

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

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

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

Usage#

import { PxUptime } from "@/components/lumesec/px-uptime";

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

Behaviour#

Ninety days per service as pixel columns, swept in on load. Hovering a day lifts that column across every service and shows what happened.

Accessibility#

• The canvas has role="img" and a fixed aria-label="Uptime for the last 90 days".
• Per-day details appear in a tooltip on pointer hover only; there is no keyboard access to individual days.
• Reduced motion: all columns appear at once instead of sweeping in from the left.

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 and --muted-foreground.

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

Notes#

• The services (API, Console, Workflows), their daily statuses, incident durations and uptime percentages are generated demo data; there is no attribute for real data.
• Each day is 5px wide, so narrow containers show fewer than 90 days; the left label states the actual count.
• The canvas is 168px tall.