Gauge Chart Wrapper
Changed on:
8 Feb 2024
Overview
The gauge chart wrapper will convert Metrics data to be displayed in a gauge. This is configurable for different color and fill thresholds.
| Plugin Name | Inventory |
|---|
Inventory components for managing a Fluent Commerce account.
v1.0.0
Inventory UI
Alias
fc.chart.gauge.wrapper.threshold
Detailed technical description
Setting
It is an array of items that define color, percentage and threshold. The threshold field represents the count of items per hour. Percent chart value and active color are calculated based on the setting.
`settingName`Time filter key
The pages with any chart may contain a time filter to extend the amount of data to be displayed. To display the correct color for the given time period, the
`timeFilterKey`Properties
Properties
Name | Type | Required | Default | Description |
dataSource | | yes | none | A string that defines a path to GraphQL data. |
settingName | | yes | none | The name of the setting to be used for arc color calculation |
timeFilterKey | | yes | none | Defiles the url parameter to check the current selected period of time. |
value | | no | none | Template calculated value or number. It is used to compare with setting threshold value and get percent and color |
primaryText | | no | none | Big bold text in the center of the chart. |
secondaryText | | no | none | Small text to be displayed under the primary text. |
colorConfig | | no | none | Color configuration object - allows the change of default colors of the chart. |
arc | | no |  | The property allows the display of data percentage line.
|
chartContainerConfig | | no |  | The property allows to make charts adapt to the size of the parent container. One of the props width and height should be a percentage string. |
title | | no | none | Chart card title. |
width | CardWidth ( | no | ‘full’ | Define the width of the card on a 12-column grid. Can use the named widths for readability or numbers directly. On mobile devices all widths will automatically change to 12 for the best responsive experience. Default is "full" and will take up the full width of the containing component. |
noCard | | no | none | If set to |
Arc
Name | Type | Required | Default | Description |
startAngle | | no | 210 | The start angle of 1st sector. |
endAngle | | no | -30 | The end angle of last sector. |
innerRadius | | no | “82%” | The inner radius of all sectors. |
outerRadius | | no | “93%” | The outer radius of all the sectors. |
cx | | no | “50%” | The x coordinate of center. |
cy | | no | “50%” | The y coordinate of center. |
ColorConfig
Name | Type | Required | Default | Description |
active | | no | none | Color for the active sector. Set in HEX-format. Example for string: Example for ColorMap ( [0, "#ccc"], [26, "#aaa"], ] |
inactive | | no | none | Color for the inactive sector. Set in HEX-format. Example for string: Example for ColorMap ( [0, "#ccc"], [26, "#aaa"], ]
|
primaryText | | no | none | Color for the primary text. Set in HEX-format. Example: |
secondaryText | | no | none | Color for the secondary text. Set in HEX-format. Example: |
ChartContainerConfig
Name | Type | Required | Default | Description |
width | | no | | The percentage value of the chart's width or a fixed width. |
aspect | | no | | Width/height. If specified, the height will be calculated by width/aspect. |
maxHeight | | no | | The maximum height of the container. |
height | | no | none | The percentage value of the chart's width or a fixed height. Example: |
minWidth | | no | none | The minimum width of the container. Example: |
minHeight | | no | none | The minimum height of the container. Example: |
1[
2 {
3 "percentage": 25,
4 "color": "#D23B3B",
5 "threshold": 0
6 },
7 {
8 "percentage": 75,
9 "color": "#EF8F00",
10 "threshold": 3000
11 },
12 {
13 "percentage": 100,
14 "color": "#4CAF50",
15 "threshold": 4000
16 }
17]Language: json
Name: Default Setting
Description:
[Warning: empty required content area]Configuration example
1URL part with time filter:
2.../inventory#/sourcesDashboard?filter_value=30
3
4{
5 "component": "fc.chart.gauge.wrapper.threshold",
6 "props": {
7 "value": "{{arraySum inventoryFeedsFiltered.edges 'node.count'}}",
8 "chartContainerConfig": {
9 "height": 250
10 },
11 "timeFilterKey": "filter_value",
12 "settingName": "fc.chart.gauge.feeds.dashboard",
13 "primaryText": "{{compactDisplayNumberFormat (arraySum inventoryFeedsFiltered.edges 'node.count')}}",
14 "secondaryText": "i18n:fc.inventory.feeds.dashboard.overview.card.inventoryOutput"
15 }
16},Language: json
Version History
v1.0.0
Gauge Chart Wrapper description
Recommended Placement
Fluent Big Inventory Web App -> Sources and Feeds Dashboards
