Dashboard Threshold Component

UI 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.

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.

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