QPR ProcessAnalyzer KPI Card: Difference between revisions

From QPR ProcessAnalyzer Wiki
Jump to navigation Jump to search
(TK-53703)
 
(36 intermediate revisions by 3 users not shown)
Line 1: Line 1:
KPI Card shows a single measure value. In addition to the value, the measure label is shown. Measure value color, title color and background color can be changed. Optionally, the measure can be visualized with an icon shown left side of the measure. The icon type and color can be customized.
KPI Card shows a single data point value with a descriptive label. Background color, shown value color and label color can be changed and set to be determined using the conditional formatting. Optionally, the data point can be visualized with an icon shown left side of the value. Also the icon type and color can be customized.


== KPI Card Functionalities ==
== KPI Card Functionalities ==
The KPI card has the following functionalities:
The KPI card has the following functionalities:
* KPI is able present a single measure value (which is set in the first measure).
* KPI presents a single data point value. The measure, dimension or column used is defined by the '''KPI value''' mapping.
* Color of the icon can be set either using the [[#Set Icon Color Using Second Measure|second measure]] or with the [[#Conditional Formatting|conditional formatting]] (if both are defined, the second measure is used).
* 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]] (if both are defined, the second measure is used).
* Color of the shown measure value can be changed using the measure color (in the measure's ''Advanced Settings'').
* Color of the shown measure value can be changed using the measure, dimension or column color (in the measure, dimension or column settings).
* Conditional formatting allow to determine measure value color, title color, background color and the icon color (for more information, see [[#Conditional Formatting|Conditional Formatting]]).
* The font size and text styles of the shown measure value can be changed using the measure, dimension or column settings.
* Appearance of the shown value can be changed in the first measure settings, using settings ''Round to decimals'', ''Measure unit'', ''Data type'' and ''Date format''.
* 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]]).
* Title of the measure can be changed either by specifying a custom measure label in the measure advanced settings or use the title field in the ''General'' tab.
* Appearance of the shown value can be changed by using settings ''Round to decimals'', ''Measure unit'' and ''Date format'' (in the measure, dimension or column settings).
* It's possible to define a dimension, which will show measure values for all those dimension values as a list.
* 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.


== Set Icon Color Using Second Measure ==
== Set Icon Color ==
Icon Color can be set either using the seconds measure or the conditional formatting settings. Use the second measure as follows:
Icon Color can be set either using another measure, dimension or column mapped to the '''Color''' or the [[#Conditional Formatting|conditional formatting]]. To use a measure, dimension or column, follow these steps:
# Select the ''KPI Card'' as a visualization.
# Select the KPI Card as a visualization.
# Define your KPI as the first measure.
# Define your KPI as the first measure in the '''Measures''' tab.
# For the measure, select ''Variable for other measures'' in the measure settings.
# In the '''Advanced settings''' of the first measure, set the '''Variable name''' field to ''measure1''.
# Select ''Data point colors'' as the second measure, and define the limit values between green-yellow and red-yellow.
# Select '''Data point colors''' as the second measure, and define the limit values between green-yellow and red-yellow.


Now the KPI targets are visualized as a colored square next to the KPI value.
Now the KPI targets are visualized as a colored icon next to the KPI value.


== Conditional Formatting==
== Conditional Formatting==
The following conditional formatting are available:
Conditional formatting is used to show the KPI Card with varying colors based on the data. The following conditional formatting are available:
* '''backgroundColor''': Background color of the KPI Card. Configured similarly than in [[QPR_ProcessAnalyzer_Table#Conditional_Formatting|table conditional formatting]].
* '''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]].
* '''textColor''': Text color of the KPI Card. By default #0f2975 (dark blue). Configured similarly than in [[QPR_ProcessAnalyzer_Table#Conditional_formatting|table conditional formatting]].
* '''icon''': Icon type that is shown left of the measure 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.
* '''title/color''': The label color. By default #4f5765 (grey).
** '''color''': Color of the icon. Configured similarly than in [[QPR_ProcessAnalyzer_Table#Conditional_Formatting|table conditional formatting]]. The icon color can also be set using the second measure (for more information, see [[#Visualize KPI Targets with Colors|Visualize KPI Targets with Colors]]).
* '''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.
* '''title''': Settings related to the measure title (label). Currently, only the title color can be changed.
* '''icon/color''': Color of the icon. Configured similarly than in [[QPR_ProcessAnalyzer_Table#Conditional_formatting|table conditional formatting]].
** '''color''': Color of the measure title (label). By default #4f5765 (grey).


It's also possible to define a dimension for the KPI Card, which shows a list of measure values for each dimension.
=== Conditional formatting examples ===


=== Conditional Formatting Examples ===
Value color:
<pre>
{
"textColor": {
"rules": [
{
"value": 100,
"comparison": ">",
"color": "#68DD8F"
},
{
"color": "#EF5254"
}
]
}
}
</pre>


Title color:
Title color:
Line 38: Line 54:
"title": {
"title": {
"color": {
"color": {
"rules": [
"scale": [
{
{
"value": 100,
"value": 0,
"comparison": ">",
"color": "#FFFFFF"
"color": "#36d475"
},
},
{
{
"color": "#EF5254"
"value": 100,
"color": "#68DD8F"
}
}
]
]
}
}

Latest revision as of 10:14, 3 July 2024

KPI Card shows a single data point value with a descriptive label. Background color, shown value color and label color can be changed and set to be determined using the conditional formatting. Optionally, the data point 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 data point 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 (if both are defined, the second measure is used).
  • 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).
  • Appearance of the shown value can be changed by using settings Round to decimals, Measure unit and Date format (in the measure, dimension or column settings).
  • 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.

Set Icon Color

Icon Color can be set either using another measure, dimension or column mapped to the Color or the conditional formatting. To use a measure, dimension or column, follow these steps:

  1. Select the KPI Card as a visualization.
  2. Define your KPI as the first measure in the Measures tab.
  3. In the Advanced settings of the first measure, set the Variable name field to measure1.
  4. Select Data point colors as the second measure, and define the limit values between green-yellow and red-yellow.

Now the KPI targets are visualized as a colored icon next to the KPI value.

Conditional Formatting

Conditional formatting is used to show the KPI Card with varying colors based on the data. The following conditional formatting 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

Value color:

{
	"textColor": {
		"rules": [
			{
				"value": 100,
				"comparison": ">",
				"color": "#68DD8F"
			},
			{
				"color": "#EF5254"
			}
		]
	}
}

Title color:

{
	"title": {
		"color": {
			"scale": [
				{
					"value": 0,
					"color": "#FFFFFF"
				},
				{
					"value": 100,
					"color": "#68DD8F"
				}
				
			]
		}
	}
}

Icon and its color:

{
	"icon": {
		"rules": [
			{
				"value": { "type": "measure", "index": 2 },
				"comparison": ">",
				"icon": "arrow_upward"
			},
			{
				"icon": "arrow_downward"
			}
		],
		"color": "#069cf0"
	}
}