kpi-metric-card
KPI Metric Card
Compact industrial KPI tile for a single metric, trend delta, and process state. Designed for dashboard density, not marketing dashboards.
Prefer this card for a single numeric KPI. Do not invent extra props. Use params.state for industrial states instead of generic color names.
Parameters
- labelstring · required
- Metric name shown as the caption.Default: Line 4 Throughput
- valuenumber · required
- Current metric value.Default: 128.4
- unitstring
- Unit suffix displayed after the value.Default: u/h
- deltanumber
- Signed change versus the previous interval.Default: 4.2
- stateenum · required
- Visual process state for the tile.Default: normal
Import guidance
1. Copy registry/components/kpi-metric-card/perspective into your Ignition project at com.inductiveautomation.perspective/views/Foundry/Components/KpiMetricCard.
2. Or import the view from Designer using the Project Browser import action.
3. Bind params.value, params.delta and params.state to tags or expressions.
4. After filesystem copy, trigger a project scan if the Gateway does not pick up the resource automatically.
Instructions refer to the source checkout. Individual ZIPs and a public installer are not released yet. Compatibility declarations still need separate Gateway acceptance.
View the parameter contract as JSON
{
"id": "kpi-metric-card",
"parameters": {
"label": {
"type": "string",
"required": true,
"description": "Metric name shown as the caption.",
"default": "Line 4 Throughput"
},
"value": {
"type": "number",
"required": true,
"description": "Current metric value.",
"default": 128.4
},
"unit": {
"type": "string",
"required": false,
"description": "Unit suffix displayed after the value.",
"default": "u/h"
},
"delta": {
"type": "number",
"required": false,
"description": "Signed change versus the previous interval.",
"default": 4.2
},
"state": {
"type": "enum",
"required": true,
"description": "Visual process state for the tile.",
"default": "normal",
"values": [
"normal",
"loading",
"no-data",
"disconnected",
"warning",
"alarm",
"disabled",
"bad-quality"
]
}
},
"bindings": {
"supported": [
"tag",
"indirect-tag",
"expression"
]
},
"states": [
"normal",
"loading",
"no-data",
"disconnected",
"warning",
"alarm",
"disabled",
"bad-quality"
],
"responsive": {
"supported": true,
"modes": [
"desktop",
"tablet",
"mobile"
],
"containerAssumptions": "Sits in a dashboard grid cell. Desktop 280–360px wide. Tablet 50% row. Mobile full width.",
"collapseBehavior": "Below 480px the delta and unit stack under the value. Label remains a 12px uppercase caption. Sparkline hides on mobile if height is constrained below 140px."
},
"dependencies": [],
"ignition": {
"minVersion": "8.3",
"testedVersions": [
"8.3.x"
]
}
}