meter

One number against its range, as a ring or a gauge: progress toward a goal, a score, utilization or a budget used. Add bands= to color it bad, warn or good by where the value falls.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"

kind

min

max

100

bands

good

format

Props

"text"textA short label under the meter, e.g. "Goal reached".optional

valueexpressionThe number to show, e.g. value=score or value={round(spent / budget * 100)}.required

kindring · gaugering is a full circle, for progress toward a goal; gauge is a half circle, for a score or a level, and shows min and max at its ends and its bands.ring

minnumberThe low end of the range (default 0), a number or an {expression}.0

maxnumberThe high end of the range (default 100), e.g. max=500 or max={budget}.100

bandsstringOne or two values that split the range into bad, warn and good, low to high, e.g. bands="60,85": below 60 is bad, 60 to 85 warn, 85 and above good. One value splits it into bad and good.—

goodup · downWhich end of bands is good: up (default), or down for costs, risk or load, where low is good.up

formatnumber · money · percentHow the number reads: number (1,200), money ($1,200) or percent, the value's share of the range (82%).number

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 meter, generated from the same definition.

  meter "<text>"  — One number against its range, as a ring or a gauge: progress toward a goal, a score, utilization or a budget used. Add bands= to color it bad, warn or good by where the value falls.
    "<text>"  A short label under the meter, e.g. "Goal reached".
    value=<expression, required>  The number to show, e.g. value=score or value={round(spent / budget * 100)}.
    kind=<ring|gauge>  ring is a full circle, for progress toward a goal; gauge is a half circle, for a score or a level, and shows min and max at its ends and its bands.
    min=<number>  The low end of the range (default 0), a number or an {expression}.
    max=<number>  The high end of the range (default 100), e.g. max=500 or max={budget}.
    bands=<string>  One or two values that split the range into bad, warn and good, low to high, e.g. bands="60,85": below 60 is bad, 60 to 85 warn, 85 and above good. One value splits it into bad and good.
    good=<up|down>  Which end of bands is good: up (default), or down for costs, risk or load, where low is good.
    format=<number|money|percent>  How the number reads: number (1,200), money ($1,200) or percent, the value's share of the range (82%).
    example:
      state score=72
      meter "Health score" kind=gauge value=score max=100 bands="60,85"

More data

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

All data elements on one page →