KPI Component

The KPI component displays a key performance indicator: a single numeric value with a label, optional title, and configurable formatting. Use it to surface important metrics like totals, counts, or percentages on dashboards.

How to read settings tables

The tables below describe each configurable option as it displays in the Unqork IDE. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Setting	Field	Type	Default	Description
Property ID	`key`	Text input	`kpi`	The unique identifier for this component instance.

Display Settings

Field Text

Setting	Field	Type	Default	Description
Label Text	`label`	Text input	—	Identifies the component on the canvas.

Formatting

Setting	Field	Type	Default	Description
KPI Title	`kpiData.kpiTitle`	Text input	—	A title displayed inside the KPI box above the value.
KPI Format	`kpiData.kpiFormat`	Text input	—	A format string that wraps the numeric value (for example, `$XM` displays the value as `$12M`). Use `X` as the placeholder for the number value.

Data Settings

Inputs

Setting	Field	Type	Default	Description
Property ID	`kpiData.dataInputObject.0.id`	Property ID	—	The module field whose value to display in the KPI box.

Advanced Settings

Additional Styling

Setting	Field	Type	Default	Description
KPI Box Height (in px)	`kpiData.kpiHeight`	Number input	`150`	Sets the height of the KPI box in pixels.
KPI Icon	`kpiData.kpiIcon`	Text input	—	A Font Awesome icon class string displayed inside the KPI box (for example, `fa fa-usd`).
KPI Background Color	`kpiData.kpiColor`	Drop-down	Default	Sets the KPI box background color. Options include: Default, Primary, Success, Danger, Warning, or Info.
KPI Text Color	`kpiData.kpiColorText`	Drop-down	White	Sets the KPI text color. Options include: White or Gray.

Changelog

Date	Change
—	Initial publication.

Documentation Index