Docs
Changed on:
1 Nov 2023
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.
Initial changelog entry.
fc.dashboard.threshold
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.
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. |
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
First release
None
Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.
