Docs
Changed on:
2 July 2024
An area chart wrapper that converts data from Metrics API to chart-readable format.
| Plugin Name | Inventory |
|---|
Inventory components for managing a Fluent Commerce account.
Inventory UI
fc.chart.area.wrapper.feed
Area Chart Wrapper is used in the Feeds Dashboard
Name | Type | Required | Default | Description |
chartContainerConfig | | no |  | The property allows charts to 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. |
path | | no | none | A string that defines a path to the data in the chart data. |
tooltip | | no | none | Enables tooltip visibility. |
legend | | no | none | Enables legend visibility. |
cartesianGrid | | no | none | Whether the component should render graph lines. |
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. |
title | | no | none | Chart card title. |
width | CardWidth ( | no | ‘full’ | Define the width of the card on a 12-column grid. You 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 |
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. |
minWidth | | no | none | The minimum width of the container. |
minHeight | | no | none | The minimum height of the container. |
debounce | | no | | If specified, a positive number, debounced function will be used to handle the resize event. |
CartesianGrid
Name | Type | Required | Default | Description |
strokeDasharray | | yes | none | The pattern of dashes and gaps used to paint the lines of the grid. |
Axis
Name | Type | Required | Default | Description |
tickLine | | no | | If set false, no axis tick lines will be drawn. |
axisline | | no | | If set false, no axis line will be drawn. |
1{
2 "component": "fc.chart.area.wrapper.feed",
3 "props": {
4 "dataKey": "value",
5 "width": 6,
6 "noCard": true,
7 "YAxis": {
8 "label": "i18n:fc.inventory.feeds.dashboard.area.chart.updates",
9 "padding": {
10 "top": 10
11 },
12 "tickLine": false,
13 "axisLine": false
14 },
15 "XAxis": {
16 "label": "i18n:fc.inventory.feeds.dashboard.area.chart.time"
17 },
18 "tooltip": true,
19 "chartContainerConfig": {
20 "height": 170,
21 "maxHeight": 170
22 },
23 "dataSource": "inventoryFeedsFiltered"
24 }
25}Language: json
Area Chart Wrapper description
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.
