The new range widget was implemented using the following purposes:
User is not confused which label represents which range.
The set of ranges (red-amber-green) depends on the limits defined for the metric.
The ranges (red-amber-green) are scaled proportionally according to the limits values.
§1. Description of the changes
§1.1 Configurable and scalable set of ranges
Allow users configuring custom set of limits, so that it is possible to configure not only red-amber-green-amber-red, but wider set of combinations, e.g amber-green or red-green.
Assume
MINandMAXare mandatory to build a valid range. WithoutMINandMAXthe range widget is invalid (See #17-20 in the table 1 below).
Scale the ranges according to the limit values entered (see screenshot 1 below).
On the ticks scale show only the defined limits (see screenshot 1 below).
Table 1: different cases how asset-metric limits can be defined:
# | MIN | LL | L | H | HH | MAX | ||||
1 | 0 | - | - | - | - | 100 | ||||
2 | 0 | 20 | - | - | - | 100 | ||||
3 | 0 | - | 40 | - | - | 100 | ||||
4 | 0 | - | - | 90 | - | 100 | ||||
5 | 0 | - | - | - | 95 | 100 | ||||
6 | 0 | 20 | 40 | - | - | 100 | ||||
7 | 0 | 20 | - | 90 | - | 100 | ||||
8 | 0 | 20 | - | - | 95 | 100 | ||||
9 | 0 | - | 40 | 90 | - | 100 | ||||
10 | 0 | - | 40 | - | 95 | 100 | ||||
11 | 0 | - | - | 90 | 95 | 100 | ||||
12 | 0 | - | 40 | 90 | 95 | 100 | ||||
13 | 0 | 20 | - | 90 | 95 | 100 | ||||
14 | 0 | 20 | 40 | - | 95 | 100 | ||||
15 | 0 | 20 | 40 | 90 | - | 100 | ||||
16 | 0 | 20 | 40 | 90 | 95 | 100 | ||||
Invalid ranges | ||||||||||
17 | - | - | - | - | - | - | ||||
18 | 0 | - | - | - | - | - | ||||
19 | 0 | - | 40 | 90 | - | - | ||||
20 | - | 20 | 40 | 90 | - | 100 |
Screenshot 1: The range widgets built according to the limits above
Screenshot 2: Hover states
§1.2 Put label closer to the range
Put the scale with ticks on the right, and the range label with current value indicator on the right, so that the label is always closer to the corresponding range.
This is applicable to all sizes of the range widget including full-screen mode.
Example:
