# Inflows by Source block

> Capital inflows donut card with a period switch, change on the period before and a source breakdown

Capital inflows card with a week, month or year switch, the total and its change on the period before, a ring of three tracked sources and a hatched rest, and source rows with share and change. ReUI Frame, Badge, shadcn Chart, ToggleGroup.

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

## Best for

One capital inflows card: total and change on the period before over a ring of tracked sources, with per source change

## Agent notes

- Replace `INFLOWS` in data.ts; amounts are USD millions, each source carries `previous` and the period its `previousTotal`
- `slicesOf` derives every share and fills the gap to the total with the hatched `REST_NAME` slice
- `chartConfig` in value-faces.tsx holds the violet ramp; keep the `SLICE_DOT` class literals so Tailwind emits its colours

## When not to use

- A half ring gauge with the total inside the arc and a range picked from a menu: use [Inflows Gauge](https://web.dev.reui.io/blocks/chart/radial-chart/chart-12.md) (`get_block("chart-12")`)
- Browser traffic with each slice labeled by its visitor count and an Export button: use [Browser Usage](https://web.dev.reui.io/blocks/chart/pie-chart/chart-27.md) (`get_block("chart-27")`)

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

## About Pie Chart blocks

### When to use

- A share of a total split across a few sources or browsers around a donut
- A donut with the total in its center and a row per segment under a period switch
- Spend per category against its budget on a rose, where an overspend breaks a dashed ring

### When not to use

- A single figure measured against a target on an arc gauge: use the [Radial Chart blocks](https://web.dev.reui.io/blocks/chart/radial-chart.md)
- Shares across more than a handful of categories that need exact comparison: use the [Bar Chart blocks](https://web.dev.reui.io/blocks/chart/bar-chart.md)

### Agent notes

- chart-13 and chart-27 draw a recharts `Pie` donut whose `innerRadius` sets the hole; chart-54 draws its rose as its own SVG in budget-rose.tsx

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.