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
Date Range Input
Users can select a date range using the From and To date pickers displayed at the top of the component.
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.
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.
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.
Finally, keep in mind that this component can be added anywhere inside your commerce portal.
Last updated
