A progress bar element with configurable entity binding/value, text, colors and width. The value represents the percentage of the progress bar that is filled and should be an integer between 0 and 100. Any values outside this range will be clamped to 0 or 100.
since 4.8
Example
<script>
// Calculate a color from red to green based on the percentage value
function getRedToGreen(value) {
var hue = Math.floor((value / 100) * 120);
return ['hsl(', hue, ',100%,50%)'].join('');
}
</script>
<vdl-progress-bar entity="ProgressValues" indices="=1" width="50%" background-color="=getRedToGreen"></vdl-progress-bar>
Attributes
| background-color |
The color of the progress bar background. Can be a static string, dynamic expression or function that gets passed the current value so a color can be calculated. This should return a CSS color value as a string, e.g. #-hexadecimal, RGB and HSL.
| Variable |
Type |
Description |
| value |
number |
The current progress percentage |
| Returns |
|
string |
The progress bar background color as a CSS color string. |
|
since 4.8 |
accepts expression |
|
| color |
The color of the progress bar text. Can be a static string, dynamic expression or function that gets passed the current value so a color can be calculated. This should return a CSS color value as a string, e.g. #-hexadecimal, RGB and HSL.
| Variable |
Type |
Description |
| value |
number |
The current progress percentage |
| Returns |
|
string |
The progress bar label text color as a CSS color string. |
|
since 4.8 |
accepts expression |
|
| entity |
Bind to a model scalar or array element for the percentage value. The entity/element value should be an integer between 0 and 100. When bound to an entity the percentage filled will take it's value from that entity/element and update whenever the entity changes. |
since 4.8 |
|
|
| indices |
The index tuple to use if the entity bound to the progress bar is an array. |
since 4.8 |
accepts expression |
|
| label |
Custom label to be shown inside the progress bar. If not specified then the entity label induced by "insight.transform.labels.entity" will be used if present otherwise the entity value is shown as a percentage. An expression or function reference can be used to dynamically generate the label. It receives the current percentage as the "value" argument. You can set as an empty string if no label is required.
| Variable |
Type |
Description |
| value |
number |
The current progress percentage |
| Returns |
|
string |
The progress bar label as a string, or blank if no label is to be shown. |
|
since 4.8 |
accepts expression |
|
| scenario |
The scenario id or index to be used when binding to an entity. |
since 4.8 |
accepts expression |
|
| value |
Percentage fill of the progress bar as an integer between 0 and 100. If it is an expression then the percentage fill will be updated if the expression value changes. You cannot use this attribute with the entity attribute. |
since 4.8 |
accepts expression |
|
| width |
Specify a static width for the progress bar using a CSS unit, e.g. px, %, vw. Defaults to 100%. |
since 4.8 |
|
|
© 2001-2024 Fair Isaac Corporation. All rights reserved. This documentation is the
property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not
convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except
solely for internal evaluation purposes to determine whether to purchase a license to the software
described in this documentation, or as otherwise set forth in a written software license agreement
between you and FICO (or a FICO affiliate). Use of this documentation and the software described in
it must conform strictly to the foregoing permitted uses, and no other use is permitted.
