DashboardWrapper Component Documentation

Overview

The DashboardWrapper component is a central part of the Vantage analytics and data platform that encapsulates the functionality related to managing dashboards. It provides a user interface for displaying, editing, and saving dashboard content, including tiles that represent analytics and data visualizations. This component integrates various features such as autosaving, refresh capabilities, and context integration for improved user experience and data coherence.

Purpose

The primary purpose of the DashboardWrapper component is to:

• Manage the state and layout of a user's dashboard.
• Provide editing capabilities, allowing users to add, edit, and remove dashboard tiles.
• Implement autosave functionality while editing, ensuring no data is lost on accidental page exits.
• Facilitate real-time data refresh to maintain the dashboard's relevance.
• Integrate context for AI functionalities, enhancing data insights and analysis.

Component Settings

1. dashboardId

• Input Type: String
• Description: The unique identifier for the dashboard. It determines which dashboard instance is being loaded or manipulated. Changing this value triggers the loading of a different dashboard.
• Default Value: None (Required for proper functionality).

2. refreshInterval

• Input Type: Numeric (in minutes)
• Description: Indicates the interval for auto-refreshing the dashboard data. Set to 0 to disable auto-refresh. Changing this value directly impacts how frequently the dashboard queries the latest data.
• Default Value: 0 (refresh off).

3. isEditing

• Input Type: Boolean
• Description: A flag indicating whether the dashboard is currently in editing mode. Setting this to true enables the user to modify tiles, while false indicates view mode. The appearance of UI elements changes based on this state.
• Default Value: false.

4. dashboardTiles

• Input Type: Array
• Description: An array of tile objects that represents individual data visualizations or components within the dashboard. Modifying this array refreshes the dashboard's visual representation.
• Default Value: An empty array [].

5. dashboardTitle

• Input Type: String
• Description: The title of the dashboard, displayed prominently in the UI. Changing this will update the title displayed to users.
• Default Value: 'New Dashboard' (if creating a new dashboard).

6. dashboardOverview

• Input Type: String
• Description: A short description of what the dashboard encompasses. This appears below the title and provides context to users.
• Default Value: '' (empty string).

7. dashboardTags

• Input Type: Array of Strings
• Description: Tags associated with the dashboard for easier categorization and search. Updating this array affects the tags displayed on the dashboard.
• Default Value: An empty array [].

8. dashboardIcon

• Input Type: String
• Description: The identifier for the icon representing the dashboard. Changing this will change the icon displayed next to the title.
• Default Value: 'Layout'.

9. activeTabId

• Input Type: String
• Description: The identifier for the currently active tab in the dashboard if multiple tabs are present. Modifying this prop dynamically changes the displayed content based on the tab selected.
• Default Value: 'main'.

10. shareWithCompany

• Input Type: Boolean
• Description: A flag determining whether the dashboard is shared with the organization. This controls visibility and permissions related to the dashboard.
• Default Value: false.

How It Works

• State Management: The component utilizes a store (useDashboardStore) for managing the state of the dashboard, including tiles, editing status, and configurations.
• Local Storage: When in editing mode, changes made to the dashboardTiles are saved to local storage to prevent data loss. Upon successful save, the draft is cleared from local storage.
• Use of Hooks: internal hooks like lifecycle management manage side effects such as autosaving, refreshing the dashboard at set intervals, and syncing dashboard state when the component mounts.
• Keyboard Shortcuts: It implements keyboard shortcuts for actions such as adding tiles or performing undo/redo functionalities to streamline the user experience.
• AI Context Integration: The component gathers detailed information about the tiles for potential integration with AI functionalities, providing context to AI models.

Use Cases & Examples

Use Case 1: Real-Time Analytics Dashboard

Objective: Create a dashboard displaying real-time sales data for a retail organization, enabling managers to track performance.

Configuration:

<DashboardWrapper dashboardId="sales-dashboard-001" />

• refreshInterval: Set to 5 (refresh every 5 minutes).
• Enable editing to add tiles that show sales figures and trends.

Use Case 2: Project Management Dashboard

Objective: A dashboard for project managers to oversee the tasks and timelines of ongoing projects.

Configuration:

<DashboardWrapper dashboardId="pm-dashboard-002" />

• dashboardTitle: "Project Management Overview"
• dashboardOverview: "Overview of ongoing projects and task statuses."
• dashboardTags: ["Project", "Management", "Status"]
• activeTabId: "current-tasks"

Detailed Example: Creating a New Dashboard

Scenario: A user wants to create a new dashboard for their team.

Configuration:

<DashboardWrapper />

• dashboardId: null (indicating a new dashboard).
• dashboardTitle: "Team Performance Dashboard".
• dashboardOverview: "Metrics on team performance and KPIs."
• dashboardTags: ["Performance", "KPI", "Team"]
• Is Editing: Automatically set to true so users can begin adding tiles immediately.

Additional Details

• AI Integrations: The component has provisions for integration with AI services, allowing tiles to display AI-generated insights based on the data.
• Billing Impact: Use of additional AI features or high-frequency data refreshes could impact billing. Users should monitor their usage if features such as data fetching intervals or AI processing are employed extensively.
• Accessibility and Usability: Keyboard shortcuts and clear UI feedback mechanisms are designed to enhance the overall usability of the component while ensuring compliance with accessibility standards.

This documentation provides a thorough overview and comprehensive details necessary for developers and users to effectively utilize and integrate the DashboardWrapper component within the Vantage platform.