Packs

Data components

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

View as Markdown

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
Server
Name
api-eu-1
Region
eu-west-1
Uptime
41 days
Version
2.14.3
The model's answer
<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
Company milestones
  1. Founded in a Lisbon flat
  2. First 1,000 customers
  3. Opened the Berlin office
  4. Series B, 120 people
The model's answer
<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
72%
CPU
0100
42
Air quality (AQI)
0300
94%
Disk
0100
The model's answer
<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
Commits by time of day
DayMorningAfternoonEvening
Mon4123
Tue8151
Wed297
Thu6185
Fri370
The model's answer
<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
Signup funnel
  1. Landing12,000100%
  2. Signup3,10026%
  3. Verified2,40020%
  4. Paid4103.4%
The model's answer
<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
AAPL$187.20+1.4%
TSLA$242.10-2.1%
NVDA$131.60+0.3%
The model's answer
<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
Organisation
  • Engineering
    • Platform
    • Mobile
      • iOS
  • Sales
    • EMEA
    • Americas
      • US
      • Brazil
The model's answer
<Tree title="Organisation">
- Engineering > Platform
- Engineering > Mobile
- Engineering > Mobile > iOS
- Sales > EMEA
- Sales > Americas > US
- Sales > Americas > Brazil
</Tree>