DashboardEditorSidebar Component Documentation

Overview

The DashboardEditorSidebar component is a part of the Vantage analytics and data platform, designed to provide users with the ability to modify, manage, and customize dashboards effectively. This sidebar contains various settings and options that facilitate the editing process of dashboards, including title management, tag input, icon selection, and dashboard tab organization.

Purpose

The primary purpose of the DashboardEditorSidebar is to serve as a user interface component for editing dashboard configurations. It allows users to customize their dashboards by updating attributes like the title, overview, tags, and by managing dashboard tabs.

How It Works

Upon rendering, the component initializes its state and retrieves necessary data from the dashboard store. Users can toggle between different settings and options to manipulate the dashboard's properties. The sidebar features an accordion layout to categorize various settings sections, making it easy for users to navigate through editing options. Users can also make use of a modal for accessing a library of tiles or build tiles using AI-integrated features.

Settings

General Settings

1. Dashboard Title

   • Input Type: String (text input).
   • Description: This setting allows users to input the title of the dashboard. The title is required for saving changes. If empty, users receive an error message indicating that the title is mandatory.
   • Default Value: Empty.

2. Icon

   • Input Type: Dropdown (icon selection from predefined icons).
   • Description: Users can select an icon to represent the dashboard visually. The selected icon will be displayed alongside the dashboard title.
   • Default Value: Default icon is 'Layout'.

3. Tags

   • Input Type: String (comma-separated values).
   • Description: This allows users to assign tags to the dashboard to help in categorization and searchability. Tags can be inputted as a comma-separated list and will be converted into an array internally.
   • Default Value: Empty array.

4. Overview

   • Input Type: Textarea.
   • Description: A field for users to write a brief overview of the dashboard's purpose or content. It provides context and objectives for users who may interact with the dashboard later.
   • Default Value: Empty.

5. Share with Company

   • Input Type: Boolean (checkbox).
   • Description: A checkbox that allows users to select whether the dashboard should be shared within the organization. If checked, the dashboard becomes publicly accessible to other users in the company.
   • Default Value: False (unchecked).

Dashboard Tabs

1. Tabs Management
   • Input Type: Dynamic Input (editable text for each tab).
   • Description: Users can manage multiple tabs within the dashboard. Each tab can have its name and can be edited or deleted as needed. The user can also change the icon associated with each tab through a dedicated icon picker.
   • Default Value: At least one tab must exist; the name is determined by the user.

Data Expectations

The DashboardEditorSidebar expects the following data from the useDashboardStore:

• dashboardTitle: A string representing the title of the dashboard.
• dashboardOverview: A string providing a description of the dashboard.
• dashboardTags: An array of strings (tags associated with the dashboard).
• dashboardIcon: A string representing the selected icon for the dashboard.
• dashboardTabs: An array of objects, where each object represents a tab with attributes such as id, name, and icon.
• activeTabId: A string representing the currently active tab ID.
• shareWithCompany: A boolean indicating whether the dashboard is shared within the organization.

AI Integrations

The DashboardEditorSidebar includes a feature for utilizing AI through the AiBuildTileModal. This allows users to generate dashboard tiles with AI assistance. The availability of this feature depends on the aiAvailable status retrieved from the useAi() provider.

Billing Impact

The usage of the DashboardEditorSidebar is generally included in the overall dashboard management feature set within the Vantage platform. However, utilizing AI tools or integrated features may have additional costs depending on the pricing model established by Vantage, which users should review accordingly.

Use Cases & Examples

Use Cases

1. Business Performance Tracking: A sales manager wants to create a dashboard to monitor sales performance metrics, including figures, team achievements, and forecasts.
2. Project Management Monitoring: An operations manager needs to set up a project management dashboard to track various project stages, deadlines, and team roles.
3. Marketing Campaign Analysis: A marketing analyst is tasked with creating a performance dashboard to analyze the effectiveness of different campaigns and user engagement metrics.

Example Configuration

Use Case: Business Performance Tracking

Configuration Data:

{
    "dashboardTitle": "Sales Overview",
    "dashboardOverview": "A dashboard to track sales trends, targets, and team performance.",
    "dashboardTags": ["sales", "Q3", "performance"],
    "dashboardIcon": "BarChart",
    "shareWithCompany": true,
    "dashboardTabs": [
        {
            "id": "1",
            "name": "Performance",
            "icon": "BarChart"
        },
        {
            "id": "2",
            "name": "Targets",
            "icon": "Target"
        }
    ]
}

This configuration creates a sales overview dashboard where the title indicates its purpose, the overview describes its content, tags facilitate easier searches, an icon visually represents it, and the dashboard is set to be shared with the company. The user can also manage the tabs that organize different performance metrics and targets effectively.