# Campaign Impressions block

> Campaign impressions chart of this period against the prior one, with 4 stats and a channel filter

Ad impressions summed across search, social, display and video as dashed current and prior period areas, plus total, daily average, peak and top channel stats, a mix tooltip, accent picker and CSV export. ReUI Frame, Badge, ColorPicker. Marketing.

- Type: Pro block
- Category: [Area Chart](https://web.dev.reui.io/blocks/chart/area-chart.md)
- Page: https://web.dev.reui.io/blocks/chart/area-chart/chart-17
- MCP: `get_block("chart-17")`
- Built with: Badge, Button, Button Group, Chart, Color Picker, Dropdown Menu, Frame, Separator, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Dashed current and prior periods summed from the channels left on, with a hover card that splits each point into its channel mix

## Agent notes

- Replace `DAILY_ROWS` and `WEEKLY_ROWS`, both in thousands of impressions; `formatImpressions` adds the K or M suffix
- `viewOf` takes the prior window from the rows before the current one, so `DAILY_ROWS` needs 60 days and `WEEKLY_ROWS` 26 weeks
- `REPORT_DATE` is a fixed string the header prints as the last day, not read from the rows

## When not to use

- A full call analytics page with 6 metric buttons, an agent ranking and integrations: use [Voice Agent Calls](https://web.dev.reui.io/blocks/application/dashboard/dashboard-4.md) (`get_block("dashboard-4")`)
- A full year by month or quarter against the year before, with a fitted trend line: use [Inbound Leads](https://web.dev.reui.io/blocks/chart/area-chart/chart-52.md) (`get_block("chart-52")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

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

## About Area Chart blocks

### When to use

- A metric over time drawn as a gradient filled area and read against an earlier period or a baseline
- Dashboard widgets whose toolbar reshapes the view and exports the plotted data as CSV
- Report cards where a hovered point reads out beside its earlier value or its share of the whole

### When not to use

- A series held against a target or limit line drawn across the same axis: use the [Composed Chart blocks](https://web.dev.reui.io/blocks/chart/composed-chart.md)
- Several KPI tiles, each with a tiny trend tucked under its value: use the [Sparkline blocks](https://web.dev.reui.io/blocks/chart/sparkline.md)
- Conversion stages where each step keeps only part of the volume before it: use the [Sankey Chart blocks](https://web.dev.reui.io/blocks/chart/sankey-chart.md)

### Agent notes

- Keep the `useId` prefix on any new `linearGradient` id, so 2 copies of a block on one page never share a fill
- Copy and export confirmations call `toast` from `sonner`, so the app needs a mounted Toaster to show them
- `Chart` takes no props, so real figures replace the sample rows in the block's data file

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.