Usage Overview

Overview

The UsageOverview component is an essential dashboard for the token usage information within the Vantage analytics platform. It provides insights about token consumption over various periods and allows users to filter, visualize, and download their usage data. It serves different scopes such as user-level, client-level, and organization-level insights. The primary aim of this component is to present usage metrics effectively, enabling users to understand and manage their resource consumption more effectively.

Settings

1. scope

• Input Type: String
• Purpose: Determines the scope of usage data to fetch, which can be 'user', 'client', or 'organization'.
• Effect: Changing the scope modifies the dataset displayed in the overview, either focusing on the individual user's usage or aggregating data for a larger group.
• Default Value: 'user'.

2. periodKey

• Input Type: String
• Purpose: Specifies the time period for which the usage data is fetched, with options for predefined ranges (e.g., 'this_month', 'last_7', etc.) and custom dates.
• Effect: The appearance and data displayed in the charts and summaries will change based on the selected period.
• Default Value: 'this_month'.

3. customFrom

• Input Type: String
• Purpose: Accepts a custom start date for the usage reports, formatted as a standard date string (e.g., '2023-01-01').
• Effect: The starting point of the usage data range changes, impacting the data shown on charts and summaries.
• Default Value: '' (empty string).

4. customTo

• Input Type: String
• Purpose: Accepts a custom end date for the usage reports, formatted as a standard date string.
• Effect: The endpoint of the usage range is set, affecting the output presented in the overview.
• Default Value: '' (empty string).

5. dateDropdownOpen

• Input Type: Boolean
• Purpose: Controls the visibility of the date selection dropdown menu.
• Effect: When set to true, the dropdown is displayed for date selection; when false, it is hidden.
• Default Value: false.

6. dateDropdownTab

• Input Type: String
• Purpose: Indicates which tab (presets or custom) is currently active in the date selection dropdown.
• Effect: Changes the available date options shown in the dropdown.
• Default Value: 'presets'.

7. summary

• Input Type: Object
• Purpose: Holds the summary data fetched for the specified scope and period.
• Effect: The content includes total credits, comparisons, and breakdowns, which will update as data is fetched and the component re-renders.
• Default Value: null.

8. events

• Input Type: Array
• Purpose: Stores individual events related to token usage that can be paginated.
• Effect: Displays detailed event data in the component, allowing users to analyze usage by specific actions.
• Default Value: [] (empty array).

9. pagination

• Input Type: Object
• Purpose: Manages pagination for the displayed events, particularly the current page and total pages available.
• Effect: Affects the navigation of events when viewing data in paginated form.
• Default Value: { page: 1, totalPages: 1 }.

10. loading

• Input Type: Boolean
• Purpose: Indicates whether the component is currently in a loading state while fetching data.
• Effect: When true, a loading spinner is displayed; when false, the component displays its data or an error.
• Default Value: true.

11. eventsLoading

• Input Type: Boolean
• Purpose: Similar to loading, but specifically indicates whether the event data is being fetched.
• Effect: Controls loading indicators unique to the event data retrieval process.
• Default Value: true.

12. activeSection

• Input Type: String
• Purpose: Track which section of usage data is currently active, such as 'overview' or 'details'.
• Effect: Changes the displayed section based on user interaction.
• Default Value: 'overview'.

13. granularity

• Input Type: String
• Purpose: Determines the granularity of the data, either 'hourly' or a more extended summarization.
• Effect: Will adjust the rendering of charts (e.g., hourly data points versus daily).
• Default Value: 'hourly'.

14. filterOp

• Input Type: String
• Purpose: Allows for filtering upon specific operational categories for the data summary.
• Effect: Applies a filter to the displayed data, refining the analysis to a particular operation if set.
• Default Value: null.

15. filterCategory

• Input Type: String
• Purpose: Similar to filterOp, but for filtering by broader categories.
• Effect: Affects the summary data displayed based on a specific category of operations.
• Default Value: null.

How It Works

1. Initialization: The component initializes with default settings, including 'user' scope and 'this_month' period.

2. Data Fetching:

   • Uses the fetchSummary function to send a request to the specified API endpoint to get the usage summary based on the current settings.
   • A similar approach is used in fetchEvents, which retrieves usage events data.

3. Event Handling: User interactions, such as changing scopes or periods, or selecting filters, trigger updates to state variables and subsequently re-fetch the relevant data.

4. Rendering:

   • Outputs a loading state until the data is ready, then dynamically populates the charts and summaries with fetched data.
   • Displays various UI elements including charts, summaries, and date selectors.

Use Cases & Examples

Use Case 1: User Monitoring

An analytics manager at a company wants to track the token consumption of individual users to optimize resource allocation and identify potential cost-saving areas.

Use Case 2: Business Insights

A project lead is interested in understanding the overall usage patterns within different operational categories over past months to make informed data budgeting decisions for the upcoming quarter.

Use Case 3: Performance Comparison

A data analytics team desires to conduct a comparative analysis of token usage between the current month and the previous month, identifying trends or anomalies.

Example Configuration for Use Case 1

To enable monitoring for a specific user over the last 30 days, the component can be configured as follows:

const usageOverviewConfig = {
    scope: 'user',
    periodKey: 'last_30',
    customFrom: '',
    customTo: '',
    dateDropdownOpen: false,
    dateDropdownTab: 'presets',
    summary: null,
    events: [],
    pagination: { page: 1, totalPages: 1 },
    loading: true,
    eventsLoading: true,
    activeSection: 'overview',
    granularity: 'daily',
    filterOp: null,
    filterCategory: null,
};

This configuration focuses on individual usage over an extended timeline, making it possible to gather comprehensive insights into token consumption patterns for analysis.