BuilderElement Documentation

Overview

The BuilderElement component is a key part of the Vantage analytics and data platform, serving as a versatile container for various child elements that can display different types of data, text, or interactive components. It dynamically renders its content based on the element.type provided to it, allowing users to configure the appearance and behavior of each element efficiently. This component includes a toolbar for configuration and removal of elements, offering an intuitive editing experience.

Purpose

BuilderElement is designed to provide a flexible UI component for building and visualizing data within the Vantage platform. Depending on the type of data or insights needed, users can see options such as text, lists of items, graphical representations, and action buttons. This component is crucial for assembling dashboards and analytics views that adapt to specific user needs.

Settings

The BuilderElement component can be customized through a variety of settings. Below is a detailed explanation of each setting:

Element Props

• element

  • Input Type: Object
  • Description: The main configuration object that defines the properties and type of the element to be rendered (e.g., text, list, graph, etc.).
  • Default Value: N/A

• onRemove

  • Input Type: Function
  • Description: Callback function to invoke when the element is to be removed from the interface.
  • Default Value: N/A

• onConfigure

  • Input Type: Function
  • Description: Callback function that is called to configure the element when the settings button is clicked.
  • Default Value: N/A

• style

  • Input Type: Object
  • Description: Additional custom styles that can be applied inline to the component. This allows for quick styling overrides.
  • Default Value: N/A

• className

  • Input Type: String
  • Description: Custom CSS class names to apply to the component, allowing for further style customizations.
  • Default Value: N/A

• onMouseDown

  • Input Type: Function
  • Description: Event handler for mouse down events. This can be used for custom drag-and-drop functionality.
  • Default Value: N/A

• onMouseUp

  • Input Type: Function
  • Description: Event handler for mouse up events.
  • Default Value: N/A

• onTouchEnd

  • Input Type: Function
  • Description: Event handler for touch end events, enabling touch support for mobile devices.
  • Default Value: N/A

• props

  • Input Type: Object
  • Description: Contains additional props that can be passed to the child components rendered within BuilderElement.
  • Default Value: N/A

How It Works

The BuilderElement functions and uses various helpers and components to manage the rendering of specific element types. Based on the element.type, it dynamically selects the appropriate rendering logic. The workflow for rendering an element is as follows:

1. Receive Element Data: The component receives an element prop, which holds the type of content and its configuration.
2. Render Specific Content: A switch-case statement determines the correct child component to render—text, list, graph, etc.—based on the provided element.type.
3. Display Toolbar: A toolbar appears on hover, allowing users to configure or remove the element.
4. Apply Styles: Inline styles and class names can be set, adjusting the appearance dynamically.

Data Expectations

BuilderElement expects its element prop to include keys necessary for rendering, most notably:

• type: Indicates the type of content (e.g., 'text', 'graph').
• config: An object that can specify various visual configurations, such as background colors and alignment.
• content: For text elements, the primary string content to display.
• workflowIds: For list elements, an array of identifiers linking to specific workflows.

AI Integrations

Currently, there are no direct integrations with AI within the BuilderElement component. However, it can be enhanced with AI-driven insights or analytics in future updates which could dynamically modify what is being rendered based on usage patterns or predictive analytics.

Billing Impacts

Using the BuilderElement may implicate billing based on the types of data being processed or visualized within the Vantage platform. Specific costs may be incurred based on data volume, workflow executions, or additional advanced features such as AI integrations or additional data storage. Users should consult their billing agreements for specifics related to data visualization components like BuilderElement.

Use Cases & Examples

Use Case 1: Dashboard Analytics

A marketing team wants to create a dashboard displaying key performance indicators (KPIs) such as conversion rates, campaign performance, and customer engagement metrics. By utilizing the BuilderElement, they can set up various child elements to visualize these metrics in formats that best suit each KPI.

Use Case 2: Reporting Workflow

A business analyst needs a component that can show a list of reports available to stakeholders. The BuilderElement can be used to create a dynamic, scrollable list that pulls in report titles and their statuses.

Use Case 3: Interactive Data Exploration

Data scientists can leverage BuilderElement to create graphs representing trends in user behavior over time. The flexibly customizable aspect allows them to modify how the data is visualized immediately.

Detailed Example for Use Case 1

For the marketing dashboard, the following configuration can be applied to the BuilderElement:

const dashboardElement = {
    type: 'list',
    config: {
        backgroundColor: '#f9fafb',
        borderRadius: '0.375rem'
    },
    workflows: [
        { id: '1', title: 'Campaign Performance' },
        { id: '2', title: 'Customer Engagement Metrics' },
    ]
};

In this configuration:

• The type is set to 'list' to create a scrollable list of KPIs.
• It styles the background color for better visibility against the dashboard's overall theme, enhancing user experience. Both id values correspond to the individual workflows that will dynamically populate within the list.

By carefully configuring the BuilderElement, the marketing team can efficiently visualize critical data and insights in a user-friendly manner.