QPR ProcessAnalyzer KPI Card: Difference between revisions

From QPR ProcessAnalyzer Wiki
Jump to navigation Jump to search
Line 22: Line 22:
* '''textColor''': Text color of the KPI Card. By default #0f2975 (dark blue). Configured similarly than in [[Tables Conditional Formatting]].
* '''textColor''': Text color of the KPI Card. By default #0f2975 (dark blue). Configured similarly than in [[Tables Conditional Formatting]].
* '''icon''': Icon type that is shown left of the measure value. Configured similarly than in [[Tables Conditional Formatting]]. If only icon color is defined, the default square icon is used.
* '''icon''': Icon type that is shown left of the measure value. Configured similarly than in [[Tables Conditional Formatting]]. If only icon color is defined, the default square icon is used.
** '''color''': Color of the icon. Configured similarly than in [[Tables Conditional Formatting]]. The icon color can also be set using the second measure (''Measure target coloring'').
** '''color''': Color of the icon. Configured similarly than in [[Tables 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]]).
* '''title''': Settings related to the measure title (label). Currently, only the title color can be changed.
* '''title''': Settings related to the measure title (label). Currently, only the title color can be changed.
** '''color''': Color of the measure title (label). By default #4f5765 (grey).
** '''color''': Color of the measure title (label). By default #4f5765 (grey).

Revision as of 13:48, 2 September 2020

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 Functionalities

The KPI card has the following functionalities:

  • KPI is able present a single measure value (which is set in the first measure).
  • The second measure can be used to define the icon color (for more information, see Visualize KPI Targets with Colors).
  • Color of the shown measure value can be changed using the measure color (in the measure's Advanced Settings).
  • Conditional formatting allow to determine measure value color, title color, background color and the icon color (for more information, see Conditional Formatting)

Visualize KPI Targets with Colors

Target values can be shown in the KPI card as follows:

  1. Select the KPI Card as a visualization.
  2. Define your KPI as the first measure.
  3. For the measure, select Variable for other measures in the measure settings.
  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 square next to the KPI value.

Conditional Formatting

The following conditional formatting are available:

  • backgroundColor: Background color of the KPI Card. Configured similarly than in Tables Conditional Formatting.
  • textColor: Text color of the KPI Card. By default #0f2975 (dark blue). Configured similarly than in Tables Conditional Formatting.
  • icon: Icon type that is shown left of the measure value. Configured similarly than in Tables 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.
    • 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

Title color:

{
	"title": {
		"color": {
			"rules": [
				{
					"value": 100,
					"comparison": ">",
					"color": "#36d475"
				},
				{
					"color": "#EF5254"
				}
			]
		}
	}
}

Icon and its color:

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