DashboardSettings Documentation

Overview

DashboardSettings is a component within the Vantage analytics and data platform that allows users to configure the settings for their dashboards. This component includes functionalities to set a default dashboard, manage the sidebar configurations, and customize icons for each item within that sidebar. The DashboardSettings component serves as the UI for users to interactively manage their dashboard configuration, providing a drag-and-drop interface for rearranging sidebar items.

Settings

1. Default Dashboard

• Name: defaultDashboard
• Input Type: Dropdown (select)
• Description: This setting enables users to select a default dashboard to display when the dashboard is first opened. Changing this setting determines which dashboard is shown by default, thereby impacting user experience during landing on the dashboard interface.
• Default Value: Empty string (''), representing no default selection.

2. Sidebar Items

• Name: sidebarItems
• Input Type: Array of objects
• Description: This property contains the list of sidebar items. Each item can include an icon and a corresponding dashboard ID. Modifications to this list will directly affect the visibility and order of items presented in the sidebar. Each sidebar item can be rearranged through a drag-and-drop interface, providing users with the flexibility to organize their work environment according to their preferences.
• Default Value: An empty array ([]), which means no sidebar items are initially configured.

Sidebar Item Configuration

Each sidebar item is an object containing:

• Key: A unique identifier generated by nanoid().
• Dashboard ID: The ID of the dashboard associated with the sidebar item.
• Icon: The name of the icon to be displayed.

3. Sidebar Item Icon

• Name: Icon Picker
• Input Type: Dropdown (visual picker)
• Description: The icon picker allows users to choose an icon from a predefined list of 25 icons. Changing the icon will update its appearance in the sidebar. This visually represents the related dashboard and aids user identification.
• Default Value: Empty string (''), indicating no icon initially assigned.

4. Sidebar Item Dashboard ID

• Name: dashboardId
• Input Type: Dropdown
• Description: Each sidebar item allows users to select a dashboard by its ID. This selection associates the sidebar item with a specific dashboard, determining which dashboard is displayed upon clicking that item.
• Default Value: Empty string (''), denoting no dashboard initially assigned.

How It Works

The DashboardSettings component utilizes several hooks and libraries to manage state and enable interactivity:

• Local State Management: Uses state management to manage changes in the sidebar items and default dashboard settings.
• Drag-and-Drop Functionality: Leverages the @dnd-kit/core and @dnd-kit/sortable libraries to allow users to arrange sidebar items through a drag-and-drop interface.
• Event Handlers: Includes methods (handleSidebarChangeInternal, addSidebarItem, removeSidebarItem, and onDragEnd) that reactively manage the additions, removals, and order changes to sidebar items upon user actions.
• Rendering: Generates dynamic dropdowns for both the default dashboard and sidebar items based on the provided groups prop, which represent categorized dashboards available for selection.

Use Cases & Examples

Use Case 1: Customizing Dashboard Access

A team in an organization using Vantage needs quick access to several frequently used dashboards. By configuring the DashboardSettings, they can set a default dashboard to one that is most commonly used while also arranging sidebar entries for quick access.

Use Case 2: Visual Organization of Dashboards

A data analyst wants to visually distinguish between different dashboards by assigning unique icons to each sidebar item. This customization enhances their workflow as they can identify dashboards quickly.

Detailed Example Configuration

Scenario: An analytics team wants to set their primary dashboard as the default and configure their sidebar for easy access to their most utilized dashboards.

Sample Configuration Data:

// Configuration Example
const groups = [
    {
        label: 'Sales Dashboards',
        options: [
            { id: 'sales_overview', title: 'Sales Overview' },
            { id: 'sales_trends', title: 'Sales Trends' },
        ]
    },
    {
        label: 'Marketing Dashboards',
        options: [
            { id: 'campaign_performance', title: 'Campaign Performance' },
            { id: 'website_analytics', title: 'Website Analytics' },
        ]
    }
];

const sidebarItems = [
    { key: '1', dashboardId: 'sales_overview', icon: 'BarChart' },
    { key: '2', dashboardId: 'campaign_performance', icon: 'PieChart' },
];

// Using the DashboardSettings component
<DashboardSettings
    groups={groups}
    defaultDashboard="sales_overview"
    sidebarItems={sidebarItems}
    onDefaultChange={(value) => { /* logic to handle default change */ }}
    onSidebarChange={(items) => { /* logic to handle sidebar change */ }}
/>

In this configuration, the user sets "Sales Overview" as the default dashboard, allowing quick access upon login. The sidebar is configured to display both the "Sales Overview" and "Campaign Performance" dashboards, each associated with relevant icons for easy recognition.

Conclusion

The DashboardSettings component provides users with a powerful tool for customizing their dashboard experience in Vantage. With the ability to manage default dashboards and organize sidebar items, users can create a tailored environment that enhances productivity and accessibility. Custom icons further improve visual identification, making it easier to navigate dashboards effectively.