Docs
Changed on:
8 Feb 2024
A bar chart wrapper that converts data from the Metrics API to chart-readable format.
| Plugin Name | Inventory |
|---|
Inventory components for managing a Fluent Commerce account.
Inventory UI
fc.chart.bar.wrapper.source
Bar Chart Wrapper is used in the Sources Dashboard
Name | Type | Required | Default | Description |
XAxis | | yes | none | X-axis, which corresponds to the data. The property is used for the tiny axis configuration. |
YAxis | | no | none | Y-axis, which corresponds to the data. The property is used for the tiny axis configuration. |
bars | | yes | none | The key of data that is displayed in the chart. |
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. |
dataSource | | yes | none | A string that defines a path to GraphQL data. |
legend | | 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 | | no | none | Display detailed information when hovering the bars. |
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. The default is "full" and will take up the full width of the containing component. |
noCard | | no | none | If set to |
Axis
Name | Type | Required | Default | Description |
dataKey | | no | none | The key of a group of data should be unique in a bar chart. |
tick | | no | | If set to |
tickLine | | no | | If set to |
axisline | | no | | If set to |
label | | no | none | The property refers to the label of the axis. |
offset | | no | for y-axis: | The offset to the specified "position". |
angle | | no | for y-axis: | The angle of axis labels. |
position | | no | for x-axis: for y-axis: | The position of the label relative to the view box. |
Bar
Name | Type | Required | Default | Description |
dataKey | | yes | none | The key of a group of data which should be unique in a bar. |
stackId | | 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 | | no | none | Bar color in the HEX-format: |
ResponsiveContainerConfig
Name | Type | Required | Default | Description |
width | | no | | The percentage value of the chart's width or a fixed width. Example: |
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 "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}Language: json
Bar Chart Wrapper description
Fluent Big Inventory Web App -> Sources Dashboard
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.
