QPR ProcessAnalyzer KPI Card: Difference between revisions
(Created page with "KPI Card shows one measure value. In addition to the value, the measure label is shown. Color of the measure value can be changed using the measure color (in the measure Adv...") |
|||
| (66 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
KPI Card shows | KPI Card shows a single measure value with a descriptive label. Background color, shown value color and label color can be changed and the colors can also be determined dynamically based on the measure value (using conditional formatting). Optionally, the measure can be visualized with an icon shown left side of the value. Also the icon type and color can be customized. | ||
Color of the measure value can be changed using the measure color (in the measure | == KPI Card Functionalities == | ||
The KPI card has the following functionalities: | |||
* KPI presents a single measure value. The measure, dimension or column used is defined by the '''KPI value''' mapping. | |||
* Color of the icon can be set either using another measure, dimension or column mapped to the '''Color''' or with the [[#Conditional formatting|conditional formatting]]. | |||
* Color of the shown measure value can be changed using the measure, dimension or column color (in the measure, dimension or column settings). | |||
* The font size and text styles of the shown measure value can be changed using the measure, dimension or column settings. | |||
* Conditional formatting allow to determine data point value color, title color, background color and the icon color (for more information, see [[#Conditional Formatting|Conditional Formatting]]). | |||
* Depending on the measure value data type, appearance of the shown value can be changed by using settings ''Decimals'', ''Unit'' and ''Date format''. | |||
* If the visualized data point value is null or there are no rows in the dataset, the [[Measure,_Dimension_and_Column_Settings#Special_values|null value label]] is applied. | |||
* The title of the KPI Card, the title font size, color, styling, and horizontal and vertical alignment can be changed in the ''Visual'' tab. | |||
* If there are several rows in the queried dataset, a data point for each row is shown as a comma separated list. | |||
== Conditional Formatting== | |||
Conditional formatting is used to show the KPI Card with varying colors based on the data. The following formattings are available: | |||
* '''backgroundColor''': Background color of the KPI Card. Configured similarly than in [[QPR_ProcessAnalyzer_Table#Conditional_formatting|table conditional formatting]]. | |||
* '''textColor''': Text color of the KPI Card. By default #0f2975 (dark blue). Configured similarly than in [[QPR_ProcessAnalyzer_Table#Conditional_formatting|table conditional formatting]]. | |||
* '''title/color''': The label color. By default #4f5765 (grey). | |||
* '''icon''': Icon type that is shown left of the data point value. Configured similarly than in [[QPR_ProcessAnalyzer_Table#Conditional_formatting|table conditional formatting]]. If only icon color is defined, the default square icon is used. | |||
* '''icon/color''': Color of the icon. Configured similarly than in [[QPR_ProcessAnalyzer_Table#Conditional_formatting|table conditional formatting]]. | |||
=== Conditional formatting examples === | |||
Show a dynamic icon with a static color: | |||
<pre> | |||
{ | |||
"icon": { | |||
"rules": [ | |||
{ | |||
"comparison": ">", | |||
"icon": "arrow_upward" | |||
}, | |||
{ | |||
"icon": "arrow_downward" | |||
} | |||
], | |||
"color": "#069cf0" | |||
} | |||
} | |||
</pre> | |||
Show a static icon with a dynamic color: | |||
<pre> | |||
{ | |||
"icon": { | |||
"icon": "arrow_upward", | |||
"color": { | |||
"rules": [ | |||
{ | |||
"value": 100, | |||
"comparison": ">", | |||
"color": "#68DD8F" | |||
}, | |||
{ | |||
"color": "#EF5254" | |||
} | |||
] | |||
} | |||
} | |||
} | |||
</pre> | |||
Show a dynamic icon where the color selection is based in the 2nd measure: | |||
<pre> | |||
{ | |||
"icon": { | |||
"rules": [ | |||
{ | |||
"value": { | |||
"type": "measure", | |||
"index": 1 | |||
}, | |||
"comparison": ">", | |||
"icon": "arrow_upward" | |||
}, | |||
{ | |||
"icon": "arrow_downward" | |||
} | |||
], | |||
"color": "#069cf0" | |||
} | |||
} | |||
</pre> | |||
Define color for the shown measure value: | |||
<pre> | |||
{ | |||
"textColor": { | |||
"rules": [ | |||
{ | |||
"value": 100, | |||
"comparison": ">", | |||
"color": "#68DD8F" | |||
}, | |||
{ | |||
"color": "#EF5254" | |||
} | |||
] | |||
} | |||
} | |||
</pre> | |||
Define color for the measure title: | |||
<pre> | |||
{ | |||
"title": { | |||
"color": { | |||
"scale": [ | |||
{ | |||
"value": 0, | |||
"color": "#FFFFFF" | |||
}, | |||
{ | |||
"value": 100, | |||
"color": "#68DD8F" | |||
} | |||
] | |||
} | |||
} | |||
} | |||
</pre> | |||
[[Category: QPR ProcessAnalyzer]] | [[Category: QPR ProcessAnalyzer]] | ||
Latest revision as of 15:00, 4 April 2026
KPI Card shows a single measure value with a descriptive label. Background color, shown value color and label color can be changed and the colors can also be determined dynamically based on the measure value (using conditional formatting). Optionally, the measure can be visualized with an icon shown left side of the value. Also the icon type and color can be customized.
KPI Card Functionalities
The KPI card has the following functionalities:
- KPI presents a single measure value. The measure, dimension or column used is defined by the KPI value mapping.
- Color of the icon can be set either using another measure, dimension or column mapped to the Color or with the conditional formatting.
- Color of the shown measure value can be changed using the measure, dimension or column color (in the measure, dimension or column settings).
- The font size and text styles of the shown measure value can be changed using the measure, dimension or column settings.
- Conditional formatting allow to determine data point value color, title color, background color and the icon color (for more information, see Conditional Formatting).
- Depending on the measure value data type, appearance of the shown value can be changed by using settings Decimals, Unit and Date format.
- If the visualized data point value is null or there are no rows in the dataset, the null value label is applied.
- The title of the KPI Card, the title font size, color, styling, and horizontal and vertical alignment can be changed in the Visual tab.
- If there are several rows in the queried dataset, a data point for each row is shown as a comma separated list.
Conditional Formatting
Conditional formatting is used to show the KPI Card with varying colors based on the data. The following formattings are available:
- backgroundColor: Background color of the KPI Card. Configured similarly than in table conditional formatting.
- textColor: Text color of the KPI Card. By default #0f2975 (dark blue). Configured similarly than in table conditional formatting.
- title/color: The label color. By default #4f5765 (grey).
- icon: Icon type that is shown left of the data point value. Configured similarly than in table conditional formatting. If only icon color is defined, the default square icon is used.
- icon/color: Color of the icon. Configured similarly than in table conditional formatting.
Conditional formatting examples
Show a dynamic icon with a static color:
{
"icon": {
"rules": [
{
"comparison": ">",
"icon": "arrow_upward"
},
{
"icon": "arrow_downward"
}
],
"color": "#069cf0"
}
}
Show a static icon with a dynamic color:
{
"icon": {
"icon": "arrow_upward",
"color": {
"rules": [
{
"value": 100,
"comparison": ">",
"color": "#68DD8F"
},
{
"color": "#EF5254"
}
]
}
}
}
Show a dynamic icon where the color selection is based in the 2nd measure:
{
"icon": {
"rules": [
{
"value": {
"type": "measure",
"index": 1
},
"comparison": ">",
"icon": "arrow_upward"
},
{
"icon": "arrow_downward"
}
],
"color": "#069cf0"
}
}
Define color for the shown measure value:
{
"textColor": {
"rules": [
{
"value": 100,
"comparison": ">",
"color": "#68DD8F"
},
{
"color": "#EF5254"
}
]
}
}
Define color for the measure title:
{
"title": {
"color": {
"scale": [
{
"value": 0,
"color": "#FFFFFF"
},
{
"value": 100,
"color": "#68DD8F"
}
]
}
}
}