BuilderSidebar Component Documentation

Overview

The BuilderSidebar component is an integral part of the Vantage analytics and data platform. It serves as a customizable interface for users to configure various layout options and component settings, facilitating a more efficient user experience in building and organizing dashboards and reports. This component allows users to adjust layout types, section settings, and formatting choices, helping them tailor the interface to their needs.

Purpose

The primary purpose of the BuilderSidebar component is to provide users with an intuitive interface to:

• Configure layout types and tabs for optimal organization.
• Manage section settings, including layout customization and visibility options.
• Define formatting attributes like background and border styles to enhance the visual appeal of the interface.

Settings

The BuilderSidebar includes a comprehensive set of settings, each of which impacts the appearance and behavior of the component. Below are detailed descriptions of each setting:

1. Layout & Tabs

a. Layout Type

• Name: Layout Type
• Input Type: Dropdown
• Description: This setting allows users to select the layout type of the component. The options are "Standard" and "Tabbed." Choosing "Tabbed" enables the user to create multiple tabs within the sidebar, facilitating better organization of content.
• Default Value: 'standard'

b. Tabs

• Name: Tabs
• Input Type: String (for each tab title) with buttons for interactivity
• Description: When the layout type is set to "Tabbed," this setting allows users to manage tab titles. Users can add new tabs, edit existing tab titles, and remove tabs as required. Each tab has an ID and a title, which helps in uniquely identifying and naming the tabs.
• Default Value: An array with one default tab: [{ id: '1', title: 'Tab 1' }]. New tabs can be added dynamically with titles populated in a sequential manner.

2. Section Settings

a. Show Header

• Name: Show Header
• Input Type: Boolean (Checkbox)
• Description: This setting toggles the visibility of the section header. If unchecked, the header and all related settings (Header Style, Title, Subtitle, Icon) are hidden from the sidebar.
• Default Value: true

b. Header Style

• Name: Header Style
• Input Type: Dropdown
• Description: Users can select the style of the header from "Default," "Minimal," or "Bold." This affects the font weight and aesthetics of the header display.
• Default Value: 'default'

c. Title

• Name: Title
• Input Type: String (Text Input)
• Description: Allows users to set the main title for the section. This title will be displayed prominently in the header.
• Default Value: Empty string ('')

d. Subtitle

• Name: Subtitle
• Input Type: String (Text Input)
• Description: Users have the option to provide a secondary subtitle for additional context or explanation beneath the main title.
• Default Value: Empty string ('')

e. Icon

• Name: Icon
• Input Type: String (multiple options for selection)
• Description: Users can select from predefined icons (Layout, BarChart, PieChart, Table) that represent the section's purpose graphically. Changing the icon updates the visual representation in the header.
• Default Value: The selected icon will vary based on user preference; no default icon is specified.

3. Formatting

a. Background Color

• Name: Background Color
• Input Type: Color Selection (button options)
• Description: Users can select a background color for the sidebar. The options range from adaptive (theme default) to several solid colors (White, Light Grey, Grey, Dark Grey, Black). Changing the background color alters the visual aspect of the sidebar and enhances usability depending on user preferences.
• Default Value: Adaptive (empty string)

b. Border Style

• Name: Border Style
• Input Type: String (Custom styles based on user selection)
• Description: This setting allows users to customize the border appearance of the sidebar. Users can apply various border styles that will affect how the sidebar visually encapsulates its content.
• Default Value: Not explicitly defined in the provided code.

Data Expectations

The BuilderSidebar expects a configuration object (config) that defines various properties related to layout, sections, and formatting. If some properties are missing, default values will be applied. The onAdd function handles the action of adding components based on user interaction, while the onConfigChange method is called to update the component state upon any configuration changes.

AI Integrations

No specific AI integrations are indicated within the provided code, but depending on Vantage's broader feature set, AI could be leveraged for features such as intelligent suggestions for layout configurations or component use based on user behavior analytics.

Billing Impacts

While the BuilderSidebar itself does not inherently have billing impacts, utilizing advanced features or requiring server-side configuration management might entail usage fees. It is advisable to consult Vantage's pricing model for details regarding usage tiers and billing consequences associated with extensive customization and layout configurations using this component.

Use Cases & Examples

Use Case 1: Dashboard Customization

A data analyst wants to create a customized dashboard that leverages multiple data visualization types across several tabs. They choose the "Tabbed" layout, name the tabs accordingly, and configure them to represent different data sources.

Use Case 2: Client Reporting Dashboard

A marketing team member needs to build a reporting dashboard for clients. They configure the sidebar to show a title for the report, select a header style that reflects their brand, and customize background colors for better readability.

Example Configuration for Use Case 1:

const exampleConfiguration = {
    layout: {
        type: 'tabbed',
        tabs: [
            { id: '1', title: 'Sales Metrics' },
            { id: '2', title: 'User Engagement' },
            { id: '3', title: 'Financial Overview' }
        ]
    },
    section: {
        showHeader: true,
        style: 'bold',
        title: 'Monthly Performance Report',
        subtitle: 'Summary of all key performance indicators',
        icon: 'BarChart'
    },
    backgroundColor: '#f3f4f6' // Grey background for enhanced visibility
};

// Sample Function Call to Update Config
onConfigChange(exampleConfiguration);

This configuration sets up a multi-tabbed layout with relevant titles while defining the overall section's aesthetic to meet user requirements, thus creating an effective reporting tool in Vantage.