5 min readUpdated Mar 2, 2026

Documentation for "new-page"

Overview

The new-page component in the Vantage platform is designed to serve as a dedicated page for creating and managing dashboards effectively. Leveraging the DashboardWrapper, this component encapsulates the functionality needed to integrate various analytics and data visualizations and provides a streamlined user interface. It is primarily aimed at enhancing user experience by offering a centralized space where data-related tasks can occur seamlessly.

Purpose

The purpose of the new-page component is to:

Data Expectations

The new-page component expects:

AI Integrations

While the new-page component does not explicitly feature any AI integrations, the underlying analytics capabilities may employ machine learning algorithms to facilitate smart recommendations for data visualizations and analytics insights. This can lead to more tailored and effective dashboards based on user behavior and preferences.

Billing Impacts

The use of the new-page component may incur costs depending on the complexity of the dashboards created. Features such as high-frequency data fetching, processing large datasets, or utilizing advanced visualization tools may contribute to increased billing metrics on the user's account.

Settings

Settings Overview

The new-page component currently contains one setting, inherited from the DashboardWrapper, and it particularly affects how the dashboard is rendered within the application.

1. Setting for Dashboard Wrapper

  1. Setting Name: DashboardWrapper Props (inferred settings)
    • Input Type: Object

    • Description: The DashboardWrapper component may accept various properties through its own implementation. Though not explicitly outlined in the displayed code, these settings might typically include attributes such as dashboardId, userId, theme, and layoutOptions. Each of these plays a crucial role in determining how the dashboard is displayed and functions:

      • dashboardId: String. Identifies the specific dashboard the user wants to work with. Changing this affects which data and visualizations are loaded into the page.
      • userId: String or numeric. It informs the component about the user's specific settings and preferences. Modifying it changes the context of the data displayed according to the logged-in user's parameters.
      • theme: String. Selects the design style of the dashboard (light or dark mode). Changing this can lead to a significant visual difference in how the dashboard is perceived.
      • layoutOptions: Object. Specifies the arrangement of the various components within the dashboard. Adjustments here change the positioning and sizing of widgets, influencing usability.
    • Default Values: The default values for these props would typically depend on the overall application state and the user's profile settings. They are often designed to default to the most commonly used dashboard or layout configurations unless specified otherwise by the user.

Use Cases & Examples

Use Case 1: Sales Performance Monitoring

A business uses the new-page to create a dashboard that visualizes sales data across different regions and products. By utilizing the dashboard, the sales team can track performance metrics in real-time. An example configuration could include:

json
{
    "dashboardId": "sales_performance_2023",
    "userId": "user123",
    "theme": "dark",
    "layoutOptions": {
        "grid": true,
        "columns": 3,
        "rowHeight": "150px"
    }
}

This configuration provides the sales team with a visually appealing dashboard that efficiently uses space, allowing for better data analysis.

Use Case 2: Marketing Campaign Analysis

The marketing department requires insights from various campaign data across different digital platforms. They create a dashboard that consolidates performance metrics such as click rates, conversion rates, and engagement statistics. A sample setup would contain:

json
{
    "dashboardId": "marketing_campaigns_2023",
    "userId": "marketing_lead",
    "theme": "light",
    "layoutOptions": {
        "grid": false,
        "columns": 2,
        "rowHeight": "200px"
    }
}

In this case, the dashboard is designed to showcase larger metrics allowing for detailed views of analytics.

Use Case 3: Financial Reporting

A finance team needs a dashboard to provide an overview of annual financial reports. This can include revenue streams, expenditure analytics, and profit margins. An example configuration would be:

json
{
    "dashboardId": "financial_report_2023",
    "userId": "finance_manager",
    "theme": "dark",
    "layoutOptions": {
        "grid": true,
        "columns": 4,
        "rowHeight": "100px"
    }
}

This configuration supports multiple data visualizations, allowing the finance team to conduct thorough analysis and presentations.

Conclusion

The new-page component serves as a robust feature of the Vantage platform, providing users with the tools necessary for creating insightful dashboards tailored to their specific needs. By understanding the component's work, user configurations, and its application in real-world scenarios, users can maximize their data-driven insights effectively.