Dashboard Threshold Component
Changed on:
1 Nov 2023
Overview
The dashboard threshold component displays a card with a number referring to the total records returned by a GraphQL query. Tiles can be configured to change colour based on configured threshold limits to indicate their status.
Each tile is configurable with a high and low threshold value, allowing users to view any 'total' data records.
| Plugin Name | Core |
|---|
The standard library of mystique components.
v1.0.0
Initial changelog entry.
Alias
fc.dashboard.threshold
Detailed technical description
Tile Colors
Below Low Threshold: Green
In the sample manifest, the result count ‘0’ is equal or less than the thresholdLow (3) that results in green tile color.
Between Low and High Threshold: Orange
In the sample manifest, the result count ‘7’ lies between thresholdLow (3) and thresholdHigh(11) that results in orange tile color.
Above High Threshold: Red
In the sample manifest, the result count ‘999+’ is equal or greater than the thresholdHigh (11) that results in red tile color.
Properties
Name | Type | Required | Default | Description |
label | | Yes | Main text label of the tile. (see above for details). | |
value | | Yes | Numeric value to display on the card. (see above for details). | |
link | | No | Optional URL to navigate to when the card is clicked. (see above for details). | |
subTitle | | No | Secondary text, used to give more context to the main title. (see above for details). | |
width | | No | 3 | Card width for arranging this tile on the grid (see above for details). |
thresholdLow | | No | Lower threshold, below which the tile will appear green. | |
thresholdHigh | | No | Upper threshold, above which the tile will appear red. |
Configuration example
1{
2 "component": "fc.dashboard.threshold",
3 "dataSource": "fulfilmentsAwaitingWave",
4 "props": {
5 "label": "Fulfilments Awaiting Wave",
6 "subTitle": "(> 1 day)",
7 "value": "{{edges.length}}",
8 "link": "#/urgentFulfilments",
9 "thresholdLow": 3,
10 "thresholdHigh": 11
11 }
12}Language: json
Version History
v0.0.0
First release
Recommended Placement
None
