# Edge Security Telemetry block

> Edge Security Telemetry Dashboard with KPI Sparkline Tiles, Threat Charts and Node Load Bars

Security ops dashboard: 4 KPI tiles with SVG sparklines, threat-vector and network-flow charts, per-node cluster load bars, active threat progress lanes, date-range picker. ReUI Badge, shadcn Card, Chart, Breadcrumb. SOC, NOC, monitoring.

- Type: Pro block
- Category: [Dashboard](https://web.dev.reui.io/blocks/application/dashboard.md)
- Page: https://web.dev.reui.io/blocks/application/dashboard/dashboard-5
- MCP: `get_block("dashboard-5")`
- Built with: Badge, Breadcrumb, Button, Calendar, Card, Chart, Popover
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Telemetry cards with corner marks, dot textured KPI tiles, blocked and watched bars and per node load bars

## Agent notes

- Replace `metricCards`, `threatVectors`, `loadSamples` and `activeThreats` in data.tsx; `loadDistribution` makes 76 or more warm and 86 or more critical
- Swap `getFlowDay` and `getFlowHours` for your data; on a new `REPORT_END_DATE`, move the literal dates in `DEFAULT_REPORT_RANGE` and `REPORT_RANGE_PRESETS` too
- Only `NetworkFlowPanel` follows the applied `range`; the tiles, threat bars, load bars and lanes ignore it, and `handleExport` only fires a `toast`

## When not to use

- Only KPI tiles with sparklines, without the telemetry panels below: use [KPI Trend Cards](https://web.dev.reui.io/blocks/chart/sparkline/chart-15.md) (`get_block("chart-15")`)
- Crew coverage against forecast demand, with a staffing table and queue actions: use [Workforce Coverage](https://web.dev.reui.io/blocks/application/dashboard/dashboard-6.md) (`get_block("dashboard-6")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/dashboard-5
```

## About Dashboard blocks

### When to use

- A full page overview: a header, a row of summary tiles, then a trend chart, a work list or both
- A team home for fulfillment, product modules, timesheets, staffing, calls, security, revenue or payouts

### When not to use

- One trend panel to drop into a page layout you already have: use the [Area Chart blocks](https://web.dev.reui.io/blocks/chart/area-chart.md)
- A strip of KPI tiles on its own, with nothing under it: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)
- Product usage reporting on activation, cohorts, events or experiments: use the [Analytics blocks](https://web.dev.reui.io/blocks/solutions/analytics.md)

### Agent notes

- Each block sets its own `min-h-svh` wrapper, padding and max width in page.tsx, its root component or both; strip them inside an app shell

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.