Throughput

Installation#

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

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

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

Usage#

import { LnThroughput } from "@/components/lumesec/ln-throughput";

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

Behaviour#

Download and upload for the last minute, hour or day, with a live head on the newest sample. Hover for exact values.

Accessibility#

• The range control is a role="group" labelled Range with aria-pressed buttons (1 min, 1 h, 24 h).
• The chart canvas has role="img" and aria-label="WAN throughput chart"; the current download and upload values are text above it.
• Hover values appear in a tooltip on pointer movement only; there is no keyboard equivalent.
• Reduced motion: the chart appears without its 0.6 s reveal and without the slide on each new sample, and no pixels rise from the newest point.

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

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

Notes#

• Data is generated around 420 Mb/s down and 64 Mb/s up; no attribute selects a source. Only the 1 min range adds a sample every second while the element is on screen; the 1 h and 24 h ranges are static.
• The chart is 180 px tall and fills the width of its container.