Bar Chart Wrapper
UI Component
Changed on:
8 Feb 2024
Overview
A bar chart wrapper that converts data from the Metrics API to chart-readable format.| Plugin Name | Inventory |
|---|
Alias
fc.chart.bar.wrapper.source
Detailed technical description
Bar Chart Wrapper is used in the Sources Dashboard
Properties
Properties
| Name | Type | Required | Default | Description |
| XAxis | ` Axis` | yes | none | X-axis, which corresponds to the data. The property is used for the tiny axis configuration. |
| YAxis | ` Axis` | no | none | Y-axis, which corresponds to the data. The property is used for the tiny axis configuration. |
| bars | `Bar[]` | yes | none | The key of data that is displayed in the chart. |
| chartContainerConfig | `ResponsiveContainerConfig` | 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. |
| dataSource | `string` | yes | none | A string that defines a path to GraphQL data. |
| legend | `boolean` | no | none | The content of the legend is generated by the name of Bar. Alternatively, if no name has been set, the dataKey will be used to generate legend content. |
| tooltip | `boolean` | no | none | Display detailed information when hovering the bars. |
| 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. The default is "full" and will take up the full width of the containing component. |
| noCard | `boolean` | no | none | If set to `true`, it allows the use of component without a card background. |
| Name | Type | Required | Default | Description |
| dataKey | `string` | no | none | The key of a group of data should be unique in a bar chart. |
| tick | `boolean` | no | `true` | If set to `false`, no ticks will be drawn. |
| tickLine | `boolean` | no | `true` | If set to `false`, no axis tick lines will be drawn. |
| axisline | `boolean` | no | `true` | If set to `false`, no axis line will be drawn. |
| label | `string` | no | none | The property refers to the label of the axis. |
| offset | `number` | no | for y-axis: `-20` | The offset to the specified "position". |
| angle | `number` | no | for y-axis: `-90` | The angle of axis labels. |
| position | `"top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"` | no | for x-axis: `"insideBottom"`for y-axis: `"insideLeft"` | The position of the label relative to the view box. |
| Name | Type | Required | Default | Description |
| dataKey | `string` | yes | none | The key of a group of data which should be unique in a bar. |
| stackId | `string` | no | none | The stack id of the bar, when two bars have the same value axis and same stackId, then the two bars are stacked in order. |
| fill | `string` | no | none | Bar color in the HEX-format:`"fill": "#8B45E4"` |
| Name | Type | Required | Default | Description |
| width | `string/number` | no | `100%` | The percentage value of the chart's width or a fixed width.Example:`"100px" / 100` |
| aspect | `number` | no | `1` | Width/height. If specified, the height will be calculated by width/aspect. |
| maxHeight | `number` | no | `300` | 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 | `string/number` | no | none | The minimum width of the container.Example:`"100px" / 100` |
| minHeight | `string/number` | no | none | The minimum height of the container.Example:`"100px" / 100` |
Configuration example
1{
2 "component": "fc.chart.bar.wrapper.source",
3 "props": {
4 "datasource": "barChartSource",
5 "YAxis": {
6 "label": "i18n:fc.inventory.sources.dashboard.bar.chart.updates"
7 },
8 "XAxis": {
9 "dataKey": "name",
10 "label": "i18n:fc.inventory.sources.dashboard.bar.chart.time",
11 "tick": false
12 },
13 "bars": [
14 { "dataKey": "ERP", "stackId": "a", "fill": "#8B45E4" },
15 { "dataKey": "RFID", "stackId": "a", "fill": "#4568E4" },
16 { "dataKey": "FluentOMS", "stackId": "a", "fill": "#45B4E4" }
17 ],
18 "chartContainerConfig": {
19 "height": 500
20 },
21 "legend": true,
22 "tooltip": true
23 }
24}Version History
Recommended Placement
Fluent Big Inventory Web App -> Sources Dashboard
