LevelIndicator
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A scale of equal bands, such as an air quality index or a pollen count, with the current band emphasized.
Import
import { LevelIndicator } from "~lib/data-display/level-indicator";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
levels | { label: string; pattern?: PatternType }[] | Yes | N/A | The bands of the scale, lowest first |
active | number | No | N/A | Position of the current band, counting from 0. Leave it out when there is no reading |
labels | "auto" | "all" | "active" | "none" | No | "auto" | Which band names to show under the bar |
size | "sm" | "md" | "lg" | No | "md" | Height of the bar and size of its labels |
width | number | string | No | "100%" | Width of the indicator |
inactive | "dim" | "outline" | No | "dim" | How the bands other than the current one are drawn |
label | string | No | N/A | Name of the scale, shown above the bar |
showCategory | boolean | No | false | Show the current band's name above the bar, at the other end from the label |
caption | ReactNode | No | N/A | Content shown above the bar in place of the label |
PatternType: "solid" | "diagonal" | "dots" | "crosshatch". A band without a pattern is
drawn as an outline, and fills in when it is the current one.
Labels: "auto" shows every band's name when they all fit, only the current band's name when
they would not, and none when even that would not fit. The row the names sit in keeps its height
either way, so the indicator is the same height at any width. "none" leaves the row out.
Examples
Air Quality
active counts from 0, so an air quality index of 3 on a 1 to 5 scale is active={2}.
Pollen
UV Index
Narrow
When the names would not all fit, only the current band's name is shown.
No Reading
Patterned
Outlined
The bands other than the current one are dimmed by default, so a solid band shows as grey on
screen and as speckles on the frame. Set inactive="outline" to draw them as plain outlines
instead; only the current band is filled.
Sizes
Label Modes
Name and Category
Give the scale a label to name it above the bar, and set showCategory to show the current
band's name at the other end of that row. Their text grows with size. The row stays the same
height when there is no reading, so the indicator does too.
Caption
Pass caption to put your own content above the bar in place of the label, such as a name beside
a Badge.