KPI Widget
The KPI widget displays a single key figure prominently on the dashboard. Depending on the configuration, the value is shown as a plain number, a gauge, or a traffic light.
This makes it possible to monitor critical metrics at a glance – such as open orders, revenue, or processing time.
Typical Use Cases
| Metric | Description |
|---|---|
| Revenue (month/year) | Current total revenue as a number or gauge with target value. |
| Open orders | Number of orders with status "open" – as a traffic light with thresholds. |
| Customer count | Total number of active customers or new customers this month. |
| Average processing time | Mean duration from creation to completion of a case. |
| On-time delivery rate | Share of deliveries meeting the deadline, shown as a gauge (target: > 95%). |
| Open complaints | Traffic light: green below 5, yellow at 5–15, red above 15 open complaints. |
| Inventory level | Current stock value or number of items below minimum stock. |
| Overdue invoices | Number of unpaid invoices past the payment deadline. |
Display Modes
| Mode | Description |
|---|---|
| Value | The key figure is displayed as a large number with an optional unit. |
| Gauge | The key figure is shown on a gauge dial within a defined range (minimum to maximum). |
| Traffic Light | The key figure is evaluated using thresholds and displayed as a green, yellow, or red traffic light. |
Configuration
Configuration is done in two steps in the properties panel:
Step 1: Data Source
- SQL Query: An SQL query that returns the value to be displayed (first row, first column).
Step 2: Display Settings
- Display Mode: Value, gauge, or traffic light.
- Label: A descriptive label below the key figure.
- Unit (optional): A unit like "pieces", "€", or "%".
- Direction (for gauge/traffic light): Whether higher or lower values are good.
- Boundaries (for gauge/traffic light): Two values that separate green, yellow, and red.
Direction and Boundaries
For the gauge and the traffic light, first choose which direction is "good":
| Direction | Meaning | Examples |
|---|---|---|
| Higher is better | Large values are green, small values red. | Revenue, delivery rate, utilization |
| Lower is better | Small values are green, large values red. | Sick leave, open complaints, overdue invoices |
Then enter two boundaries. The field labels follow the chosen direction:
- Higher is better: "Green from" and "Yellow from". Everything below the yellow value is red.
- Lower is better: "Green up to" and "Yellow up to". Everything above the yellow value is red.
Example "Employees on sick leave": direction "Lower is better", green up to 1, yellow up to 5. Result: 0–1 green, 2–5 yellow, 6 and more red.
The gauge uses the same boundaries for its color bands. The Default button sets them to 30 % and 70 % of the range between minimum and maximum.
Example
A team lead has a KPI widget showing the number of currently open support tickets. The display mode is set to "Traffic Light" with direction "Lower is better": green up to 9 tickets, yellow up to 20, red above 20.
Tips
- Simple queries: A good KPI query returns exactly one row with one column – for example
SELECT COUNT(*) FROM tickets WHERE status = 'open'. - Gauge for ranges: The gauge is ideal when a value should be shown in context (e.g., utilization from 0 to 100%).
- Multiple KPIs: Several KPI widgets can be placed side by side to create a key figure dashboard.