Dashboard Threshold Component

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

UI Component

Changed on:

14 Jan 2025

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.

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.dashboard.threshold

Detailed technical description

Note

If the GraphQL query is configured to return 999 results, then the number more than 999 results is shown with a "+" appended to it. For example: 999+.

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.

Another example of testing the lowThreshold and highThreshold:

1{
2    "component": "fc.dashboard.threshold",
3    "props": {
4        "dataSource": "escalations",
5        "label": "i18n:fc.om.dashboard.alerts.ordersEscalated.label",
6        "subTitle": "low:0, high:1, value:2",
7        "value": "2",
8        "thresholdLow": 0,
9        "thresholdHigh": 1,
10        "link": "#/escalatedFulfilments?fulfilments_createdOn={\"from\":\"{{dateStringFormatter (dateAdd day=-30) 'YYYY-MM-DD[T]HH:mm:ss.SSS' true}}Z\"}"
11    }
12},
13{
14    "component": "fc.dashboard.threshold",
15    "props": {
16        "dataSource": "escalations",
17        "label": "i18n:fc.om.dashboard.alerts.ordersEscalated.label",
18        "subTitle": "low:2, high:10, value:2",
19        "value": "2",
20        "thresholdLow": 2,
21        "thresholdHigh": 10,
22        "link": "#/escalatedFulfilments?fulfilments_createdOn={\"from\":\"{{dateStringFormatter (dateAdd day=-30) 'YYYY-MM-DD[T]HH:mm:ss.SSS' true}}Z\"}"
23    }
24},
25{
26    "component": "fc.dashboard.threshold",
27    "props": {
28        "dataSource": "escalations",
29        "label": "i18n:fc.om.dashboard.alerts.ordersEscalated.label",
30        "subTitle": "low:1, high:2, value:2",
31        "value": "2",
32        "thresholdLow": 1,
33        "thresholdHigh": 2,
34        "link": "#/escalatedFulfilments?fulfilments_createdOn={\"from\":\"{{dateStringFormatter (dateAdd day=-30) 'YYYY-MM-DD[T]HH:mm:ss.SSS' true}}Z\"}"
35    }
36},
37{
38    "component": "fc.dashboard.threshold",
39    "props": {
40        "dataSource": "escalations",
41        "label": "i18n:fc.om.dashboard.alerts.ordersEscalated.label",
42        "subTitle": "low:3, high:10, value:2",
43        "value": "2",
44        "thresholdLow": 3,
45        "thresholdHigh": 10,
46        "link": "#/escalatedFulfilments?fulfilments_createdOn={\"from\":\"{{dateStringFormatter (dateAdd day=-30) 'YYYY-MM-DD[T]HH:mm:ss.SSS' true}}Z\"}"
47    }
48},
49{
50    "component": "fc.dashboard.threshold",
51    "props": {
52        "dataSource": "escalations",
53        "label": "i18n:fc.om.dashboard.alerts.ordersEscalated.label",
54        "subTitle": "low:2, high:2, value:2",
55        "value": "2",
56        "thresholdLow": 2,
57        "thresholdHigh": 2,
58        "link": "#/escalatedFulfilments?fulfilments_createdOn={\"from\":\"{{dateStringFormatter (dateAdd day=-30) 'YYYY-MM-DD[T]HH:mm:ss.SSS' true}}Z\"}"
59    }
60},

Language: json

Name: Dashboard Threshold Sample Code:

Description:

sample corresponding to the sample screenshot

Properties

*Name*	*Type*	*Required*	*Default*	*Description*
label	`string`	Yes		Main text label of the tile. (see above for details).
value	`string`	Yes		Numeric value to display on the card. (see above for details).
link	`string`	No		Optional URL to navigate to when the card is clicked. (see above for details).
subTitle	`string`	No		Secondary text, used to give more context to the main title. (see above for details).
width	`CardWidth`	No	3	Card width for arranging this tile on the grid (see above for details).
thresholdLow	`number`	No		Lower threshold, below which the tile will appear green.
thresholdHigh	`number`	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

2023-07-31

v0.0.0

First release

Recommended Placement

None