Usage History

The Usage History component displays relevant Subscription details of your APIs. In this guide, you will learn how to set it up and also get a recommendation for our preferred configuration.

The Usage History component provides a visual representation of API usage over a selected time range in the form of a bar chart, enabling users to monitor and analyze their API consumption trends.

Key Features

1. Date Range Input

   • Users can select a date range using the From and To date pickers displayed at the top of the component.

2. Dynamic Horizontal Axis Granularity

   • The horizontal axis automatically adjusts based on the selected time range to enhance readability:

     • ≤ 2 weeks: Displays daily data points.

     • > 2 weeks and ≤ 6 months: Aggregates and displays data by weeks.

     • > 6 months: Displays data aggregated by months.

3. Data Retrieval

   • All usage data is retrieved from the GraphQL API, which uses the authenticated user's email address to fetch relevant API call statistics.

Additional Notes

• The bar heights reflect the number of API calls made during the corresponding time intervals.

• Ensure the user’s email address is accurately registered in the system to enable data fetching.

Detailed setup instructions for configuring this component in the user's commerce portal will be provided below.

Setup instructions

Inside your commerce portal site's builder, create a new Blank Page called Usage History. More information on how to create custom pages can be found in this link. Choose your preferred layout, it is recommended to set it layout as 1 full-width column. Set the configuration of the page, as described in Table 1.

Name	URL	API Name
Usage History	/usage-history	Usage_History

Table 1. Usage History page configuration.

Finally, drag and drop the API Usage Analytics component on your new page, it is recommended to add it to the second slot of the 1 full-width column layout. One possible layout design of this page is shown in Figure 1.

Figure 1. Product usage history component.

Finally, keep in mind that this component can be added anywhere inside your commerce portal.