# API Health block

> API health KPI panel with SLO ring gauges, trend arrows and region scope

API health panel: availability, p95 latency, error rate and throughput as segmented SLO rings with a redline band, trend arrows vs the prior window, latest, peak and time past limit per region, auto refresh and CSV export.

- Type: Pro block
- Category: [Radial Chart](https://web.dev.reui.io/blocks/chart/radial-chart.md)
- Page: https://web.dev.reui.io/blocks/chart/radial-chart/chart-8
- MCP: `get_block("chart-8")`
- Built with: Badge, Button, Button Group, Dropdown Menu, Empty, Frame, Select, Skeleton, Spinner, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Four service health signals per region against their SLO or capacity, each a ring of the limit used over its window's key facts

## Agent notes

- Replace `SERIES` and `PRIOR` in data.tsx with real slots and prior headlines; `readWindow` in health-view.ts folds them into headlines, trends and facts
- Limits live once in `SIGNALS`: `formatLimit` builds each limit line from them, and the 70% and 90% marks sit in health-view.ts
- `readWindow` swaps the latest slot for `LIVE_QUOTES` on refresh, so call your metrics API there; `AUTO_REFRESH` holds the cadences

## When not to use

- A KPI grid whose cells pair a delta badge with an area wedge in place of a gauge: use [KPI Area Charts](https://web.dev.reui.io/blocks/application/card/card-29.md) (`get_block("card-29")`)
- Uptime and coverage as two semicircle arc gauges with reviewer avatars: use [Error Budgets](https://web.dev.reui.io/blocks/chart/radial-chart/chart-7.md) (`get_block("chart-7")`)

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/chart-8
```

## About Radial Chart blocks

### When to use

- Error budget left per SLO objective as concentric rings beside burn rate and status
- A row of round meters, one per API or service metric, each with a trend delta
- Cash settled over a period on a radial day clock against a target ring

### When not to use

- Several sources sharing one total, read as slices of a ring: use the [Pie Chart blocks](https://web.dev.reui.io/blocks/chart/pie-chart.md)
- A capacity or allocation meter laid out as straight segments in a row: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)

### Agent notes

- chart-7 draws concentric rings with recharts `RadialBarChart`, chart-8 builds each gauge from SVG `line` ticks, and chart-12 draws its day clock as plain SVG

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.