stat

A labelled number, for key figures like totals or counts. Add change= to show how it moved, and spark= for a small line of its recent values.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the propslabelvalue

tone

align

change

trend

good

Props

labelstringShort caption above the value.required

valuestringThe figure to show, usually an {expression}.required

tonedefault · muted · accent · good · warn · badColor role: default, muted, accent, good, warn or bad.default

alignleft · centerleft or center.left

changestringHow the figure moved, shown small beside or under it with ▲ or ▼, e.g. change="+12%" or change="{round(growth, 1)}%". Write the sign; don't add an arrow.—

trendup · down · flatup, down or flat: which way the change went, for its arrow and color. Leave it out to take it from change's sign.—

goodup · downWhich way is good news: up (default, colored good) or down, for figures like costs or churn where falling is good.up

sparkexpressionA list of numbers, oldest first, drawn as a small line under the value, e.g. spark={[12, 15, 14, 19]}, spark=weekly, or from a list of records spark={pluck(sales, 'revenue')}.—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

For your model

The exact guide entry a model gets for stat, generated from the same definition.

  stat  — A labelled number, for key figures like totals or counts. Add change= to show how it moved, and spark= for a small line of its recent values.
    label=<string, required>  Short caption above the value.
    value=<string, required>  The figure to show, usually an {expression}.
    tone=<default|muted|accent|good|warn|bad>  Color role: default, muted, accent, good, warn or bad.
    align=<left|center>  left or center.
    change=<string>  How the figure moved, shown small beside or under it with ▲ or ▼, e.g. change="+12%" or change="{round(growth, 1)}%". Write the sign; don't add an arrow.
    trend=<up|down|flat>  up, down or flat: which way the change went, for its arrow and color. Leave it out to take it from change's sign.
    good=<up|down>  Which way is good news: up (default, colored good) or down, for figures like costs or churn where falling is good.
    spark=<expression>  A list of numbers, oldest first, drawn as a small line under the value, e.g. spark={[12, 15, 14, 19]}, spark=weekly, or from a list of records spark={pluck(sales, 'revenue')}.
    example:
      state price=24 qty=2
      stat label="Total" value="${price*qty}"

More data

rating chart chart-line chart-rule chart-note meter table table-column compare compare-row details detail schedule board tree flow map pin

All data elements on one page →