Progress Monitor

The Progress Monitor component provides layout for one or several Progress Indicators, and controls the form in which they are represented (bar or doughnut). Progress Indicators are used to visualize progress within a single category via two contrasting measures, e.g. "completed" and "not completed".

The Progress Monitor determines what form to represent the indicators by way of a breakpoint based on the Monitor's width. Above the breakpoint, Indicators are shown as doughnuts in a horizontal layout; under the breakpoint they are shown as bars in a vertical layout. By default, the Monitor's breakpoint is the sum of the widths of its Indicators (as doughnuts). It can be overridden via the breakpoint property.

Properties Examples Events Accessibility

* Required property

Properties of the wm-progress-monitor

breakpoint
number | string
The breakpoint that determines the transition between doughnut and bar layouts. Can be a unit-less number representing the minimum number of Indicators to show side-by-side, or an exact pixel value. For example 3 or "900px". Defaults to the sum of the widths of the Indicators, meaning the component will try to fit them all on one row, and will switch to bar form whenever that is not possible.

Properties of the wm-progress-indicator

label *
string
A description for the indicator. It is required for accessibility reasons.
completion-message
string
The text to display when the amount represents 100%.
show-legend
boolean
Show or hide the legend. The legend is still read by screen readers, and for that reason the legend property on the wm-progress-slice elements is still required.
subinfo
string
Optional text to display under the label.

Properties of the children elements wm-progress-slice

amount *
string
Numeric value (whole number)
legend *
string
Text for the legend.
popover-title
string
The popover title
popover-text
string
The popover text
popover-button-text
string
The text inside the popover button. If not provided, the button is not rendered.

Usage in HTML

Edit the code below to see changes reflected in the example above.

Usage in Elm

Code generated from HTML.

wmProgressIndicatorButtonTriggered
Emitted by wm-progress-indicator when one of its popover buttons has been triggered. The event's detail property contains the wm-progress-slice element that has been triggered. See javascript sample in the examples tab for usage.

Screen Reader

Screen readers announce the following when the user tabs onto a Progress Indicator: "Interactive chart. Use arrow keys to browse elements, press Tab to exit."

Keyboard Support

Key Function
Arrow Down Arrow Right
  • If the indicator is in focus, brings focus to the first segment and opens the popover.
  • If a segment is in focus, brings focus to the next segment.
Arrow Up Arrow Left
  • If the indicator is in focus, brings focus to the last segment and opens the popover.
  • If a segment is in focus, brings focus to the previous segment.
Tab Exits the indicator (bringing focus to the next focusable element).
Shift + Tab Exits the indicator (bringing focus to the previous focusable element).
Enter Triggers the popover button (if popover is open and has a button).

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.