# Data components

> The data pack's 7 components: ways to show data beyond charts and tables: facts, timelines, gauges, heatmaps, funnels, sparklines and hierarchies.

Add it with `packs: ["data"]`, or leave `packs` out for every pack.

## KeyValue

Labelled facts, from the Markdown table inside: the label, then the value.

Between its tags: a Markdown table (first column labels, the others series).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |

```markdown
<KeyValue title="Server">
| Field | Value |
|---|---|
| Name | api-eu-1 |
| Region | eu-west-1 |
| Uptime | 41 days |
| Version | 2.14.3 |
</KeyValue>
```
## Timeline

Events in order, one per list item, written as "when: what happened".

Between its tags: a Markdown list.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |

```markdown
<Timeline title="Company milestones">
- 2019: Founded in a Lisbon flat
- 2021: First 1,000 customers
- 2023: Opened the Berlin office
- 2024: Series B, 120 people
</Timeline>
```
## Gauge

One number on a scale from min to max.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `value` | number | yes |  |
| `min` | number |  |  |
| `max` | number |  |  |
| `unit` | text |  |  |
| `tone` | one of |  | `neutral` (default), `info`, `success`, `warning`, `danger` |

```markdown
<Columns>
<Gauge label="CPU" value="72" unit="%" tone="warning" />
<Gauge label="Air quality (AQI)" value="42" max="300" tone="success" />
<Gauge label="Disk" value="94" unit="%" tone="danger" />
</Columns>
```
## Heatmap

A grid of numbers shaded by size, from the Markdown table inside: the row label, then one column per bucket.

Between its tags: a Markdown table (first column labels, the others series).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |

```markdown
<Heatmap title="Commits by time of day">
| Day | Morning | Afternoon | Evening |
|---|---|---|---|
| Mon | 4 | 12 | 3 |
| Tue | 8 | 15 | 1 |
| Wed | 2 | 9 | 7 |
| Thu | 6 | 18 | 5 |
| Fri | 3 | 7 | 0 |
</Heatmap>
```
## Funnel

How many reach each stage, from the Markdown table inside: the stage, then the count.

Between its tags: a Markdown table (first column labels, the others series).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |

```markdown
<Funnel title="Signup funnel">
| Step | Users |
|---|---|
| Landing | 12,000 |
| Signup | 3,100 |
| Verified | 2,400 |
| Paid | 410 |
</Funnel>
```
## Sparkline

A number with a small trend line from its recent values.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `values` | values split by ` | ` | yes |  |
| `value` | text |  |  |
| `change` | text |  |  |

```markdown
<Columns>
<Sparkline label="AAPL" value="$187.20" change="+1.4%" values="180 | 182 | 181 | 184 | 183 | 186 | 187" />
<Sparkline label="TSLA" value="$242.10" change="-2.1%" values="255 | 251 | 249 | 250 | 246 | 244 | 242" />
<Sparkline label="NVDA" value="$131.60" change="+0.3%" values="129 | 131 | 130 | 132 | 130 | 131 | 132" />
</Columns>
```
## Tree

A hierarchy, one list item per entry, written as its path with " > " between levels.

Between its tags: a Markdown list.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |

```markdown
<Tree title="Organisation">
- Engineering > Platform
- Engineering > Mobile
- Engineering > Mobile > iOS
- Sales > EMEA
- Sales > Americas > US
- Sales > Americas > Brazil
</Tree>
```