# Reports and dashboards

Show how the work is going in charts and tables, and hand a finished report to someone who wasn't there.

For: Team leads and anyone reading a summary.

Web page: https://candor.themethodic.com/screens/reports-and-dashboards

## Layouts

### Metrics and charts

Pick it when: The default: a page people open to see how things are going.

Layout: A row of metric cards, then a line chart and a bar chart, each in a frame with a chart or table toggle.

Items:

- **Stat card** (`stat-card`, Pro; https://candor.themethodic.com/docs/stat-card.md): One metric with its change against a named period.
- **Chart frame** (`chart-frame`, Pro; https://candor.themethodic.com/docs/chart-frame.md): The frame every chart sits in: title, legend, a chart or table toggle, and the states a chart can be in.
- **Line chart** (`line-chart`, Pro; https://candor.themethodic.com/docs/line-chart.md): Change over time.
- **Bar chart** (`bar-chart`, Pro; https://candor.themethodic.com/docs/bar-chart.md): Columns by category, grouped or stacked.
- **Sparkline** (`sparkline`, Pro; https://candor.themethodic.com/docs/sparkline.md): A word-sized trend.

```bash
npx candor-ui add stat-card chart-frame line-chart bar-chart sparkline
```

### Parts of a whole and targets

Pick it when: The question is how much of something is covered, or how far from a target.

Layout: A donut for the shares and bullet bars for actual against target, with a heatmap of intensity below.

Items:

- **Donut chart** (`donut-chart`, Pro; https://candor.themethodic.com/docs/donut-chart.md): Parts of a whole.
- **Bullet bar** (`bullet-bar`, Pro; https://candor.themethodic.com/docs/bullet-bar.md): Actual against a target in one row.
- **Heatmap** (`heatmap`, Pro; https://candor.themethodic.com/docs/heatmap.md): Intensity over a grid.
- **Chart frame** (`chart-frame`, Pro; https://candor.themethodic.com/docs/chart-frame.md): The frame and its states.

```bash
npx candor-ui add donut-chart bullet-bar heatmap chart-frame
```

### A report to hand on

Pick it when: Someone who wasn't there needs a finished document with its findings and where they came from.

Layout: A paged report: a cover, a summary, numbered sections of findings with evidence, and a provenance footer.

Items:

- **Report sheet** (`report-sheet`, Pro; https://candor.themethodic.com/docs/report-sheet.md): The paged chassis of a report: cover, numbered sections, an export bar and a provenance footer.
- **Insight ledger** (`insight-ledger`, Pro; https://candor.themethodic.com/docs/insight-ledger.md): The executive summary: not run yet, partial, or ready.
- **Finding** (`finding`, Pro; https://candor.themethodic.com/docs/finding.md): One finding with its evidence and the next step.
- **Result table** (`result-table`, Pro; https://candor.themethodic.com/docs/result-table.md): Query rows as a typed, sortable table.

```bash
npx candor-ui add report-sheet insight-ledger finding result-table
```

## Rules that matter most here

- **Unknown stays unknown** (https://candor.themethodic.com/principles#unknown-stays-unknown): A chart with no data for a period leaves a gap and says so; a section that couldn't be computed is named.
- **Model output is text, never markup** (https://candor.themethodic.com/principles#model-text-is-text): A summary the model wrote is shown as text, with the findings it rests on beside it.
- **Reasoning is believed, not verified** (https://candor.themethodic.com/principles#reasoning-is-believed): A finding's reasoning is shown as the agent's account, with the evidence it cites.

## Brief for a coding agent

Paste this to the agent that builds the screen.

```text
Build reports and dashboards with Candor UI.
Put every chart in ChartFrame (title, legend, chart or table toggle, and its loading, empty and error states). Choose LineChart for change over time, BarChart for categories, DonutChart for parts of a whole, Heatmap for a grid and BulletBar for actual against a target.
StatCard names the period its change is against.
Draw only data you have. A missing period is a gap, not a zero.
For a report, use ReportSheet. InsightLedger says honestly whether the summary is not run, partial (naming what couldn't be computed) or ready, and each Finding carries its evidence.
ReportSheet's footer says who or what generated it, from which sources and when they were read.

Start from the "Metrics and charts" layout: A row of metric cards, then a line chart and a bar chart, each in a frame with a chart or table toggle.
Candor items: stat-card (https://candor.themethodic.com/docs/stat-card.md), chart-frame (https://candor.themethodic.com/docs/chart-frame.md), line-chart (https://candor.themethodic.com/docs/line-chart.md), bar-chart (https://candor.themethodic.com/docs/bar-chart.md), sparkline (https://candor.themethodic.com/docs/sparkline.md).
Install: npx candor-ui add stat-card chart-frame line-chart bar-chart sparkline
Read each item's docs before using it and take its props from there; don't guess them. Pro and Premium items need the person's licence key, which they add with `npx candor-ui key <key>`; don't ask for it.
```