# Throughput
> Download and upload chart for the last minute, hour or day, with a live head on the newest sample and exact values on hover.
- Element: `<ln-throughput>`
- React: `import { LnThroughput } from "@/components/lumesec/ln-throughput"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-throughput.json
- Page: https://elements.lumesec.ai/components/network/throughput



Live preview: https://elements.lumesec.ai/view/ln-throughput

```html
<ln-throughput></ln-throughput>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-throughput
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx 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

React:

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

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/ln-throughput.js"></script>

<ln-throughput></ln-throughput>
```

## 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](/docs/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.