Metric Card widget
Displays name-value data with an optional sparkline chart. MetricCard is typically used to display numerical metrics or KPIs.
In-ports
data JSON - Input data that defines one or more metrics to be displayed and its properties.
config JSON - Configuration parameters.
Out-ports
on-click Bool - Emits boolean true when the user clicks on the widget. The event is emitted only when the widget is in interactive mode.
Overview
Kelp MetricCard is a simple yet versatile widget. You use it to display numerical values or KPIs. In addition to single values, it can also display a mini trend-line in the form of a Sparkline chart. Below are some examples of how to use the widget along with the properties you can use to customize its visual representation.
Creating a Metric Card is very easy. You only need to pass a simple array of objects to the data in-port. Each object defines a metric to be displayed and its properties.
| Property | Description |
|---|---|
name | The name of the metric. |
value | The value of the metric. |
convertor | Formatting function. See Value Formatters to learn how to format the values of different data types. Default value is none. |
unit | Custom unit property for metric. Converter has higher priority' |
changeValue | Value for change value indicator. Change value will be also displayed if history property is set and calculated based on the last value in history array. |
changeValuePercent | Percentage value for change value indicator. Has a higher priority than changeValue if both properties are set. |
history | An array of numbers representing historical values of the metric. If defined, the sparkline chart will be displayed. |
historyMeta | Additional meta data for the history sparkline chart: {"duration": 6, "unit": "months"}. This properties are used in the tooltip template. |
You can switch MetricCard to interactive mode. It will turn into a clickable tile with blue background on a mouse hover. A Boolean true event will be generated every time the user clicks on the widget.
Data input examples
Send the following JSON snippets to the data port to see different representations of the MetricCard widget.
1. Simple metric card
2. Multiple metrics in one card
3. Complex metric card with trendline
Settings
Title
Widget title. It is displayed in the header of the widget tile. To hide the header, leave the Title property empty.
Hide progress bar
Turn off progress indicator in the header of the widget tile.
Hide help icon
If checked, the Help icon will not be displayed.
Primary metric index
Index of the primary metric. Its the index of the object in the input array on the data port. Note that the index starts from 0. Only one metric can be primary.
Is interactive
Turn on interactive mode. On click, a boolean true event will be sent out on the on-click outport.
Advanced Settings
This widget supports the following advanced properties.
tooltipTemplates
By default tooltip content for primary metric have the following format. You can customize the tooltip by setting the tooltipTemplates property.
If changeValue and history props are specified for the primary metric, then a Sparkline chart will be displayed. Hover your mouse over the Sparkline chart to see the tooltip with metricName, historyDuration, and historyUnit. This is the default template for the sparkline chart:
Templates are defined as Handlebars templates. The following variables are supported:
metricNamemetricValuechangeValuechangePercenthistoryDurationhistoryUnitaccessor
In addition you can use <br> for new line, and <b> for strong text mark up.
tooltipContentAccessors
This parameter allows you to generate tooltip content from custom property defined for the primary metric. Set tooltipContentAccessors parameter as jspath to the property relative to the metric data object.
In this example, the tooltip will be auto-generated from the object defined under summary property of the primary metric card data object. See Example 3: Metric card with a trendline.
Supported value types: String, Number, Array, Object.