# SLO Burn Rate block

> SLO burn rate panel with hourly log scale lollipops, window tracks, alert rules and mute

Multiwindow SLO burn rate panel: the last hour, log tracks for 5 windows from 5m to 3d and alert rules with state Badges. Hourly Recharts lollipops on a log axis with a 24h or 72h toggle, Mute alerts and CSV or JSON export. ReUI Frame, shadcn Item.

- Type: Pro block
- Category: [Bar Chart](https://web.dev.reui.io/blocks/chart/bar-chart.md)
- Page: https://web.dev.reui.io/blocks/chart/bar-chart/chart-43
- MCP: `get_block("chart-43")`
- Built with: Alert Dialog, Badge, Button, Chart, Dropdown Menu, Frame, Icon Tile, Item, Toggle Group
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

One SLO's burn rate on log scales: 5 window tracks from 5m to 3d, hourly lollipops with a 24h or 72h toggle and Mute behind a confirm

## Agent notes

- `changeAlerting` only flips local `alerting` state and fires a sonner `toast`; no pager or alerting backend hears the mute
- Replace `RAW_SLO` in data.ts; `generateSeries` invents its 72 hourly ratios from the `id`, and its 4 `events` are demo incidents
- `ALERT_CHANNEL` hardcodes #sre-oncall into the Alert Rules header, the Mute dialog and the mute and unmute toasts

## When not to use

- Budget left day by day across the window, with a forecast of the run out date: use [Error Budget Burn](https://web.dev.reui.io/blocks/chart/bar-chart/chart-42.md) (`get_block("chart-42")`)
- Hourly burn peaks for the whole fleet in one tile beside budget and event tiles: use [SLO Fleet Health](https://web.dev.reui.io/blocks/chart/sparkline/chart-41.md) (`get_block("chart-41")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

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

## About Bar Chart blocks

### When to use

- Amounts compared across years, weeks, categories or regions as prisms, patterned bars, pills or lanes
- Activity over time stacked by outcome, such as job runs, audit events, firewall requests or data syncs
- Run durations and error budgets read against a timeout, a warning line or a paging threshold

### When not to use

- A share of a whole where the slices read better around a ring: use the [Pie Chart blocks](https://web.dev.reui.io/blocks/chart/pie-chart.md)
- A capacity or allocation split into colored segments on one meter, with no axis: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)
- Rows of jobs or deploys, each with its own run history strip: use the [Status Tracker blocks](https://web.dev.reui.io/blocks/chart/status-tracker.md)

### Agent notes

- `Chart` renders with no props and fetches nothing, so every bar, lane and limit is seeded from constants in the block folder

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.