Stats & Data
Meter blocks
Meter blocks are composed of two main blocks. The top part is where the labels and stats are located, and the bottom part is the meter.
The two main blocks should be wrapped around some kind of unit. In this example they're wrapped in a size1of2 unit.
The width of the bar is fed by the controller to make it dynamic, but it can be hard coded as well.
The meter color can be adjusted to provide additional context and feedback. Adding a meter--warning or meter--error class can indicate a warning or problem the customer may want to address. Adding a meter--neutral class can be used to communicate data with no positive or negative connotation like subscriber growth.
The meter should not be the sole indicator of information. It should accompany additional copy for accessibility.
Large meter
A larger version of our meter with labels and a width animation.
The spectrum type represents how we visualize reputation scores. Without spectrum, the pattern will fall back to our default meter colors.
Adding meterClass:'className' to data-dojo-props allows the large meter to adopt other colors if necessary.
No-data block
No-data blocks are used to show empty states.
We use different illustrations to associate the type of missing data with the no-data message.
Generally the block headers use sentence-case.
Stat block
Stat blocks work in grid units. Just add stat-block class to the unit element.
You can have any type of content inside the stat blocks, but usually they follow a pattern of title and data.
Use heading tags for the titles and paragraph tags for the content of the stats.
In this example we are also using some utility classes to hide and show content at different break points.
hide-phone will hide content if in phone break point (640px). show-phone Will show content if viewport is within the phone break point (640px).
Stat animation
Add an animation between a two numbers to create delightful motion. Adjusting number of decimals to animate, animation duration, and animation delay all allow flexibility.
Total opens
210
Successful deliveries
98.9%
By default the widget animates from 0 to the number in the widget DOM element.
Pass widget settings via data-dojo-props
Some of the settings include: startVal, numDecimals, animDuration, animDelay, easing