Components / Data display / Compare view
D9 · Data display
Compare view
The current period ranked against its own earlier periods.
<p class="value num">2 of 8</p>
<div class="c-compare current"><span>Week 8</span><span class="track"><i style="width:62%"></i></span><span class="num">13 h</span></div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A figure should be read against its own history.
- Lower or higher has a stated meaning.
When not to use
- The comparison is between two unrelated lists.
- There is no history yet.
Usage
<p class="value num">2 of 8</p>
<div class="c-compare current"><span>Week 8</span><span class="track"><i style="width:62%"></i></span><span class="num">13 h</span></div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| rank | n of N | — | Place of the current period. 1 is the shortest here. |
| bar width | percent of peak | — | Visual length. The hours remain as text. |
| current | class | absent | Marks the current period. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves past the static list. |
Accessibility
- Rank is a number and a sentence about direction.
- Each week shows its hours.
- Current week is a heavier label, not only a colour.
Motion
- No motion.
Pattern origin
Pattern type: a ranking against its own history.