Ping monitor

Installation#

pnpm dlx shadcn@latest add @lumesec/ln-ping

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

npx shadcn@latest add https://elements.lumesec.ai/r/ln-ping.json

Usage#

import { LnPing } from "@/components/lumesec/ln-ping";

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

Behaviour#

Continuous latency probes to a target. Lost probes show as red marks at the base of the chart.

Accessibility#

• The target is a native select labelled Target.
• The chart canvas has role="img" and aria-label="Round-trip times for the last 60 probes"; the probe lane canvas is aria-hidden.
• Average, p95, jitter and loss are text in a region with aria-live="off", so updates are not announced.
• Reduced motion: the probe pixel on the lane is not drawn and CSS transitions are removed; the chart and statistics still update with every probe.

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

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

Notes#

• Targets are built in: Frankfurt DC (about 12.4 ms), 1.1.1.1 (about 9.1 ms) and AIOP API · Vienna (about 6.2 ms). Probes are simulated, one every 600 ms while the element is on screen; no attribute sets the target.
• Bars above 1.6 times the target's baseline use the warning colour; loss above 2% turns red. Changing the target reseeds the chart.