# Firewall Traffic block

> Hourly firewall traffic pill grid with hour tooltips, a range and view toolbar and incident markers

Firewall traffic per hour as pill columns of blocked, challenged and allowed requests that light up on load. Hover or focus opens an hour's breakdown tooltip; the toolbar sets range, view and layers, refreshes and exports.

- 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-40
- MCP: `get_block("chart-40")`
- Built with: Badge, Button, Button Group, Dropdown Menu, Frame, Spinner, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

An hourly firewall pill grid where hover shows each hour's breakdown, a click pins it, and a toolbar sets range, view and layers

## Agent notes

- Swap `HOURLY`, oldest first, and `HOUR_NOTES`, keyed by bucket index; keep at least 24 buckets, as the `RANGES` ticks and range menu index into them
- Refresh adds the next `REFRESH_STEPS` row through `withRefreshes`; replace both with your fetch and pass the new buckets to the plot and toolbar
- A click sets `pinned` in Chart, dimming the other hours and marking the pinned one; call `setPinned` from your log view to open an hour there

## When not to use

- Connector sync runs per hour, switched between run outcomes and rows moved: use [Data Sync Activity](https://web.dev.reui.io/blocks/chart/bar-chart/chart-45.md) (`get_block("chart-45")`)
- Scheduled job runner time per hour, stacked by succeeded, timed out and failed: use [Cron Runner Load](https://web.dev.reui.io/blocks/chart/bar-chart/chart-32.md) (`get_block("chart-32")`)

## 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-40
```

## 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.