KPI

KPI. A component displaying data as a single numeric value.

KPI Gif

Usage

import { KPI } from @motor-js/core
//...
<KPI label='Sales Amount' cols={[ "=Sum([Sales Amount])"]} />
//...

This can get more complex by setting various other propertes within the cols property which will allow for the naming of columns and the ability to sort the data.

A more advanced version demonstrating this is displayed below.

Props

PropDescriptionOptions / Example
labellabel to apear on the top of the KPI valuestring
colsColumns from Qlik Data Model to render in the chart. array
{[
"=Avg([Case Duration Time])"
]}
calcConditionCalculated condition to be met before chart can be displayed.shape
{
qCond: "=Avg([Case Duration Time])> 5",
qMsg: "Calculation condition has not been met",
}
widthChart width in percentage or value as pixelsstring
'100%'
'200px'
marginThe amount of margin around the componentstring
'5px'
sizeSize of the text used in the chartoneOf
'tiny'
'small'
'medium'
'large'
'xlarge'
colorColor of the KPI valuestring
* default obtained from theme.
justifyContentThe alignment of the text within the component oneOf
"flex-start"
"center"
"flex-end"
textAlignAlignment of KPI label and Value relative to their container oneOf
"left"
"center"
"right"
roundNumRound vlaue and display large numbers with symbol e.g K for '000sbool
* default obtained from theme.
precisionPrecision if RoundNum set to true. True equals 2 deciamls places, false equals nonebool
labelColorColor of the KPI labelstring
alignSelfAlignment of the KPI LabeloneOf
"flex-start"
"center"
"flex-end"
paddingPadding of the KPIstring
maxWidthMax width of the KPI, text will be wrappedstring
borderBorder to be dispalyed around the chartboolean
oneOf
"top"
"left"
"bottom"
"right"
"start"
"end"
"horizontal"
"vertical"
"all"
"between"
"none"
* default obtained from theme.
backgroundColorBackground color the chartstring
* default obtained from theme.
responsiveWhether the KPI size should scale for tablet and mobilebool
onClickEvent function to execute when button is clickedfunc
cursorCursor style on hoverstring
autoSizeValueAutomatically resize the label if it is too large for the min wrapperbool

Sample Syntax

config settings

import { KPI } from '@motor-js/core'
<KPI
config={{
host: "xxxxxxxxx",
secure: false,
port: xxxxx,
prefix: "",
appId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx",
}}
......
/>

cols settings

Overview

There are three different ways of specifying the columns:
  • As a string.
  • As an Object
  • As a reference to a predefined dimension or measure, a so-called master item.
String syntax

If a string starts with =, it will be treated as a measure, otherwise it is treated as a dimension.

import { KPI } from "@motor-js/core";
<KPI
cols={[
"=Avg([Case Duration Time])"
]}
....
/>
Object syntax

Use the object syntax if you want to set more options for your columns. If you. for example, create a pivot table with labels, you should use qFieldLabels for dimensions and qLabel for measures. Note the qLable is not used in this implementation of the KPI. The lable comes from the lable property

import { KPI } from "@motor-js/core";
<KPI
cols={[
/*measure with label*/
{
"qDef": {
"qDef": "=Avg([Case Duration Time])",
"qLabel": "Avg Case Duration Time"
}
},
]}
....
/>
Predefined dimensions and measures syntax

You can use dimensions and measures that are predefined in the app. This is mostly relevant if the user should be able to select dimensions and measures from lists. You must know the Dimension ID or the Measure ID, which is defined in the qLibraryID property. You must also state if it is a measure or a dimension in the qType property.

import { KPI } from "@motor-js/core";
<KPI
cols={[
{
"qLibraryId":"eqZjE",
"qType":"measure"
}
]}
....
/>

Examples

These examples are based off the Consumer Sales Qlik Sense application.

Standard KPI

A standard KPI.

function ColumnDemo() {
return (
<Motor config={config}>
<KPI
label="Revenue by Product Sub Group"
cols={["=Sum( [Sales Quantity]*[Sales Price])"]}
/>
</Motor>
);
}

Theme API

All components are styled from the main theme. Each theme can be overwtitten which will allow for all charts to share common functionality without having to set the props at an individual level.

Most of the chart settings are in global.chart. Changing any setting in the above will apply to all charts within the application. Specific KPI related theme items are stored in kpi. Changing these settings will apply to all KPIs within the application.

Theme settings can be overwritten at a global level. There are 2 possible approaches. Examples are shown below.

import { Motor, ... } from @motor-js/core
//...
const myTheme = {
global: {
colorTheme: "divergent9",
},
};
<Motor config={config} theme={myTheme}>
...
</Motor>
import { Motor, ... } from @motor-js/core
//...
<Motor config={config} theme={base}>
{ base.global.colorTheme = "divergent9"}
{ base.global.chart.allowSelections = false}
...
</Motor>

global.kpi

Settings in global.chart relevant for KPIS are below :

SettingDescriptionOptions / Example
allowSelectionsAllows to enable / disable selctions on charts at a global level.bool
backgroundColorApply a background color to all charts within the application.string
"white"
borderRadiusBorder radius for all charts.string
"10px"
selectionglobal.chart.selection
opacityOpacity of the item selectednumber
1
strokeStroke of the item selectedstring
"black"
strokeWidthStroke width of the item selectedstring
"1px"
nonSelectionglobal.chart.nonSelection
opacityOpacity of the items not selectednumber
0.5
backgroundBackground of the items not selectedstring
"var(--oc-gray-1)"
labelglobal.chart.label
fontColorLabel colorstring
"fontAlt"
noDataglobal.chart.noData
verticalAlignAlignment of main object to display no data messagestring
"top"
displayDisplay of main object to display no data messagestring
"inline-block"
borderRadiusBorder radius of main object to display no data messagestring
"10px"
backgroundColorBackground color of main object to display no data messagestring
"var(--oc-gray-1)"
borderCollapseBorder collapse of main object to display no data messagestring
"collapse"
noDataContentglobal.chart.noDataContent
displayDisplay attribute for the no data messagestring
"inline-block"
alignItemsAlignment attribute for the no data messagestring
"center"
justifyContentJustify attribute for the no data messagestring
"center"
marginMargin attribute for the no data messagestring
"10px"
errorglobal.chart.error
dimensionErrMsgerror mesage for invalid dimensionstring
"Invalid Dimension."
measureErrMsgerror mesage for invalid measurestring
"Invalid Measure. No values returned."

kpi

Settings in kpi are below :

e.g. kpi.wrapper.backgroundColor = "white"

SettingDescriptionOptions / Example
wrapperkpi.wrapper
backgroundColorBackground color of the KPIstring
"white"
radiusRadius of the KPI borderstring
"8px"
textAlignText alignment the KPIstring
"center"
boxSizingCSS box sizing the KPIstring
"border-box"
labelkpi.label
fontColorFont color the KPI labelstring
"font"
alignSelfCSS align self attribute of the KPI labelstring
"center"
valuekpi.value
fontColorFont color the KPI valuestring
"brand"
```