It renders a percentage value as a progress bar with different colors according to thresholds.

Progress Bar V2

This filter is parametric, so you can define how the progress bar should be displayed directly in the template.

Progress can be displayed as a simple bar (Show Details = false) and in this case the percentage is displayed directly in the bar. This layout fits well when used within lists, as it takes up little vertical space.

You can define whether to use a single color or to use a color based on thresholds. For example, using the Bad to Good color style, when the value is below the Lower Threshold (default 20%) the bar is red, if it is below the Upper Threshold (default 80%) the bar is orange, otherwise it is green.

Optionally, it can be defined whether to display details below the bar, in case the partial and total values are not themselves percentages.

Filter Variants

The set of predefined filter variants that can be used to format values.

Progress Bar V2

Displays a progress bar given a value (0 to 100). Optionally if applied to a composite-part, the partial and total value can be defined.

Name: progressBarV2

Input Types: INTEGER, FLOAT, NUMBER, COMPOSITE_PART

Output Type: HTML

Parameters

progressBarV2:{"showDetails": true, "colorStyle": BAD_TO_GOOD, "colorClass": "abc", "threshold1": 123, "threshold2": 123, "total": 123, "valueUnit": "abc"}

Show Details	If selecte, under the bar prints out the paratial value, the total value and the percentage. Name: showDetails Type: BOOLEAN \| Optional Default Value: false
Color Style	The style used to color the bar according to the percentage. Name: colorStyle Type: ENUM \| Optional Values: BAD_TO_GOOD, GOOD_TO_BAD,
Color Class	The fixed bar color class. Name: colorClass Type: STRING \| Optional Default Value: bg-gray
Lower Threshold	The lower threshold used for bar coloring according to the selected style. Name: threshold1 Type: INTEGER \| Optional
Higher Threshold	The higher threshold used for bar coloring according to the selected style. Name: threshold2 Type: INTEGER \| Optional
Total	The static total value used to compute the percentage value. Name: total Type: INTEGER \| Optional Default Value: 100
Value Unit	The unit of measurement of the partial and total value displayed in the details. Name: valueUnit Type: STRING \| Optional