Gauge Chart Wrapper
UI Component
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 |
|---|
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` property is used to pass the setting name to the component.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` property should be set. It allows to scale to the given setting threshold values (that are per hour).Properties
Properties
| Name | Type | Required | Default | Description |
| dataSource | `string` | yes | none | A string that defines a path to GraphQL data. |
| settingName | `string` | yes | none | The name of the setting to be used for arc color calculation |
| timeFilterKey | `string` | yes | none | Defiles the url parameter to check the current selected period of time. |
| value | `number | string` | no | none | Template calculated value or number. It is used to compare with setting threshold value and get percent and color |
| primaryText | `string` | no | none | Big bold text in the center of the chart. |
| secondaryText | `string` | no | none | Small text to be displayed under the primary text. |
| colorConfig | `ColorConfig` | no | none | Color configuration object - allows the change of default colors of the chart. |
| arc | `Arc` | no |  | The property allows the display of data percentage line. |
| chartContainerConfig | `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 | `string` | no | none | Chart card title. |
| width | CardWidth (`"quarter"` / `"third"` / `"half"` / `"two-thirds"` / `"full"`/ `number` (1-12)) | 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 | `boolean` | no | none | If set to `true`, allows to use component without card background. |
| Name | Type | Required | Default | Description |
| startAngle | `number` | no | 210 | The start angle of 1st sector. |
| endAngle | `number` | no | -30 | The end angle of last sector. |
| innerRadius | `number | string` | no | “82%” | The inner radius of all sectors. |
| outerRadius | `number | string` | no | “93%” | The outer radius of all the sectors. |
| cx | `number | string` | no | “50%” | The x coordinate of center. |
| cy | `number | string` | no | “50%” | The y coordinate of center. |
| Name | Type | Required | Default | Description |
| active | `string/[[number, string]]` | no | none | Color for the active sector. Set in HEX-format.Example for string:`"active": "#CCCCCC"`Example for ColorMap (`[[number, string]]`):`"active": [`[0, "#ccc"], [26, "#aaa"], ] |
| inactive | `string/[[number, string]]` | no | none | Color for the inactive sector. Set in HEX-format.Example for string:`"inactive": "#CCCCCC"`Example for ColorMap (`[[number, string]]`):`"inactive": [`[0, "#ccc"], [26, "#aaa"], ] |
| primaryText | `string` | no | none | Color for the primary text. Set in HEX-format.Example:`"#CCCCCC"` |
| secondaryText | `string` | no | none | Color for the secondary text. Set in HEX-format.Example:`"#CCCCCC"` |
| Name | Type | Required | Default | Description |
| width | `string/number` | no | `"100%" / 100` | The percentage value of the chart's width or a fixed width. |
| aspect | `number` | no | `1` | Width/height. If specified, the height will be calculated by width/aspect. |
| maxHeight | `number` | no | `200` | The maximum height of the container. |
| height | `string/number` | no | none | The percentage value of the chart's width or a fixed height.Example:`"100px" / 100` |
| minWidth | `number/string` | no | none | The minimum width of the container.Example:`"100px" / 100` |
| minHeight | `number/string` | no | none | The minimum height of the container.Example:`"100px" / 100` |
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]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},Version History
Recommended Placement
Fluent Big Inventory Web App -> Sources and Feeds Dashboards
