Readout
A printed label over a value: key figures, with the unit small and the change in words.
Kit parts
Stat tile
One headline number with its label, how it moved against another period and, if you give it readings, the small line of the run behind it. The label and the figure are the readout, set on a plate; the figure is formatted with the money field’s own helpers, so pounds, dollars and plain counts group the way the locale does. Say which way is better and a kit lamp and the word Better or Worse join it, so a fall in refunds can be good news; leave it out and nothing is judged. A tile can be loading (the skeleton with its amber lamp) or empty, and a screen reader hears one sentence for the whole tile.
Seats open in 11 days. Want one email that morning?
Anatomy
The label and the figure are the readout. The money field’s formatting sets the figure, so a currency, a grouped count and a percent follow the locale. The line is the sparkline, with its lamp when a verdict is given. The status is the kit’s lamp with a printed word, the arrows are the icon set’s, and loading is the skeleton with the amber lamp. The plate is the panel’s face. No colour is added.
Variants
- Money, up and better
- A fall that is good
- A rise that is bad
- Percent
- Not judged · no better
- No comparison and no line
- A negative figure
States
- With trend
- Loading
- Empty
- Level
- Judged worse
Props and options
| Name | Kind | Description |
|---|---|---|
| label · value | attribute · property | What is measured, and its figure. A value that is not a number draws the empty tile. |
| previous · change | attribute · property | The figure for the period to compare, from which the change is worked out (rounded to one place), or the change in percent when you have it. Inside a twentieth of a percent it is Level. |
| period | attribute | Words for the other period: “last week” prints “vs last week” and is spoken “on last week”. Left out, the change has no period. |
| format | attribute | How the figure is set. A currency is led by its symbol (or its code), a percent ends in %. |
| currency · locale · decimals | attribute | The currency and the locale of the separators. Decimals is how many places to print; left out it is the places the value has, or for a currency its usual two when it has any and none when it is whole. |
| unit · unit-says | attribute | A unit printed small after the figure (ms, GB), and the words for it when it is spoken (milliseconds). |
| better | attribute | Which way is good news. Left out the change is not judged. Set, a lit kit lamp and the word Better or Worse are added, the trend’s dot takes the lamp, and the sentence ends “which is better”. |
| spark · state · empty | attribute · property | The readings behind the line (two or more draw it), the loading or empty state, and the words for an empty tile. |
| statFigure() · statChange() · statVerdict() · statSentence() | function | The figure as printed and spoken, the move and its direction, whether it was better, and the one sentence. |
| statTileBody() · statTileHTML() | function | The inside, and the element with its inside written, for a server or a specimen. |
Usage notes
Press Refresh: all four tiles go to Loading with the amber lamp, then come back with new figures. Refunds fell, and fewer is better, so it shows a lit green Better beside a down arrow; Average basket rose and is better too. Read the tiles with a screen reader and each is one sentence.
Accessibility
- With no comparison the sentence stops at the figure; level it says “unchanged on last week”.
- Empty says “Revenue, no data for this period”, or your own words. Neither speaks a figure.
- A tile is not interactive, so it has no tab stop and no keys; put it in a link or beside a key if it should go anywhere. A live tile that is given a new value updates its sentence quietly: the tile is not a live region, so a screen reader is not interrupted by every reading.
- The direction is an arrow and the words “up” or “down”, and the verdict is a lamp with the word Better or Worse, so no meaning rests on colour. The figure and the words print in the kit’s ink and hold its contrast on the plate in every finish and both volumes.
- It has no animation, so reduced motion changes nothing.
Related parts
Sparkline
A word-sized line for the margin of a table or beside a readout. It is an SVG that takes the size of the type around it and the ink of the place it sits in, so on a panel it is ink and on display glass it is the display’s light. The last value is marked with a dot seated in a faint ring, and a lamp lights the dot when the reading matters. The trend and the last value are said in words on the image’s label, so the line is a second sign and never the only one.
Money field
An amount of money in the field’s well, with its currency printed on the floor at the left (the symbol and the code, or a native select when several are offered).
Meter
A value inside a known range, read off an LED strip. The strip is a native meter element, so low, high and optimum are the browser’s own: the whole lit length takes the colour of where the value stands (green in the good region, amber next to it, red beyond), not the colour of the segment it has reached. The marks under the strip print where the regions begin, and cut lines across it show the same two places. Words say the state too.
Skeleton
The shape of a page before its data arrives, drawn as the unprinted plate: blank engraved bars where the words will print. Nothing on it moves. One amber lamp beside “Loading” is the only sign of work.