IPU and IPC Report Component

UI Component

Changed on:

8 July 2024

Overview

Custom component to display a page with an IPU/IPC report chart that displays data filtered by three parameters: report type, time period, and granularity.

Plugin Name	Inventory

Inventory components for managing a Fluent Commerce account.

2023-12-15

v1.0.0

Inventory UI

Alias

fc.reports.ipuipc

Detailed technical description

The IPU/IPC Report component consists of the following parts:

Filters block

The Filters block allows to refine data using a combination of three filters:

Display: This filter determines the type of report to generate, with options including "Inventory Position Update" and "Inventory Position Change." By default, "Inventory Position Update" is chosen.
Date/time from and to: This filter sets the range for data visualization, with the default selection spanning the preceding 31 days. The data visualization range is determined based on UTC time.
Granularity: This filter selects the level of detail for data visualization, with options such as "Minute," "Hour," and "Day." By default, the granularity is set to "Day."

Line chart

The Line chart visually displays data points across a chosen date range interval. The x-axis illustrates the date range, while the y-axis depicts the quantity of inventory updates, offering a swift overview of data correlations. Both the start and end points on the x-axis are in UTC.

Read more about the Line chart component here.

Total Updates and the Definition:

Total Updates represents the cumulative sum of all Total Usages within the specified date range for the chosen report.

The Definition of Terms is a link to the document explaining the IPU and IPC definitions.

Validation

When generating reports, it's important to consider several technical constraints. Regardless of the report type, data beyond 185 days old cannot be displayed. If the selected date range exceeds this limit, an error message will prompt to reduce the timeframe:

The maximum time frame is 185 days. Please reduce the total time frame.

Furthermore, the chosen granularity directly influences the acceptable date/time range. Valid combinations are:

For minute granularity, the selected range should not surpass 12 hours.
For hour granularity, the range should not exceed 31 days.

If the validation criteria are not met, the following error message will appear:

The time frame for your chosen granularity is too long. Please choose a larger granularity or reduce the timeframe.

Properties

Name

Type

Required

Default

Description

width

CardWidth ("quarter" / "third" / "half" / "two-thirds" / "full"/ number (1-12))

‘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.

Configuration example

1{
2  "nav": {
3    "label": "i18n:fc.admin.reports.index.nav",
4    "icon": "outline_assignment"
5  },
6  "type": "page",
7  "path": "reports",
8  "component": "fc.page",
9  "props": {
10    "title": "i18n:fc.inventory.admin.reports.nav.label"
11  },
12  "descendants": [
13    {
14      "component": "fc.reports.ipuipc",
15      "props": {
16        "title": "i18n:fc.i.pages.descendants.title",
17        "width": "full"
18      }
19    }
20  ]
21}

Language: json

Version History

2024-02-13

v24.2.13

IPU/IPC Report Component description

2024-04-22

v24.4.22

Validation logic change. UX enhancements.

Recommended Placement

None