ElementSettingsModal Documentation

Overview

The ElementSettingsModal component is designed to provide a user interface for configuring settings of individual elements within the Vantage analytics and data platform. It allows users to adjust element properties such as content, styling, and layout constraints prior to saving the changes. The component is rendered as a modal, providing a focused space for modifications.

Key Features

• Configures content and appearance for different types of elements.
• Handles layout constraints and visual styling.
• Allows integration with available workflows.
• Supports a user-friendly interface for setting adjustments.

Settings

The ElementSettingsModal encompasses various settings which can be divided based on the element type (e.g., 'text', 'bignumber'). Below is an exhaustive breakdown of these settings:

For Text Elements

1. Text Content

   • Input Type: String
   • Description: The actual text content displayed in the element.
   • Default Value: Empty string ('').

2. Font Size

   • Input Type: Dropdown
   • Description: Adjusts the size of the font. Changing this affects the readability and emphasis of the text.
   • Default Value: 'base' (Normal font size).
   • Options: 'sm', 'base', 'lg', 'xl'.

3. Font Weight

   • Input Type: Dropdown
   • Description: Modifies the thickness of the font. This setting influences the visual intensity of the text.
   • Default Value: 'normal'.
   • Options: 'normal', 'bold'.

4. Text Align

   • Input Type: Button Group
   • Description: Aligns the text to the specified direction within the element (left, center, or right). Changing this impacts the layout of the text.
   • Default Value: 'left'.

5. Vertical Align

   • Input Type: Button Group
   • Description: Aligns the element's text vertically. This affects how the text is positioned relative to the element's height.
   • Default Value: 'top'.

6. Background Color

   • Input Type: Color Picker
   • Description: Defines the background color of the element. Changing this setting directly affects the element's visual appearance.
   • Default Value: '#ffffff' (White).

7. Corner Rounding

   • Input Type: Dropdown
   • Description: Adjusts the roundness of the corners of the element, impacting its visual style.
   • Default Value: '0.375rem' (Default rounding).
   • Options: '0px', '0.125rem', '0.25rem', '0.375rem', '0.5rem', '0.75rem', '1rem', '9999px' (full pill rounding).

For Big Number Elements

1. Select Workflow

   • Input Type: Dropdown
   • Description: Allows users to select a workflow associated with the big number element. This ties analytic data to specified workflows for further processing.
   • Default Value: Empty string ('').

2. Label Override

   • Input Type: String
   • Description: Provides an optional custom label for the big number element, enhancing its description or purpose.
   • Default Value: Empty string ('').

3. Background Color

   • Input Type: Color Picker
   • Description: Similar to text elements, it allows the customization of background color to enhance the visibility and aesthetics.
   • Default Value: '#ffffff' (White).

4. Corner Rounding

   • Input Type: Dropdown
   • Description: Functions the same as in text elements, allowing customization of corner roundness.
   • Default Value: '0.375rem' (Default rounding).
   • Options: Same as mentioned above.

5. Content Align

   • Input Type: Button Group
   • Description: Aligns how the content inside the big number is displayed (left, center, or right).
   • Default Value: 'center'.

How It Works

1. When the modal is opened, it initializes its state with properties from the element prop.
2. The user can modify settings using various controls (text inputs, dropdowns, buttons) reflected through local state updates.
3. On clicking 'Save', the modal triggers the onSave function, which sends the updated element configuration back to the parent component.
4. The modal can be closed without saving changes by clicking on the backdrop or the 'Cancel' button.

Expected Data

The component expects the following props:

• element: The current element configuration containing properties like config, content, workflowId, workflowIds, label, and layout.
• onSave: Callback function triggered to save the modified configuration.
• onClose: Callback function triggered to close the modal.
• workflows: Array of available workflows for associating with big number elements.

Use Cases & Examples

Use Case 1: Content Editing

A content manager wishes to update the text displayed in a dashboard widget to reflect recent changes in company policy. They might use the ElementSettingsModal to input the new text, adjust its alignment to 'center', and change the font to 'bold' for emphasis.

Use Case 2: Dynamic Workflow Association

A data analyst needs a big number widget to reflect real-time data processed through a specific workflow. Using the modal, they can select the relevant workflow, customize the background color, and set a distinctive label for clarity.

Configuration Example for Use Case 1

To demonstrate the configuration process, here’s how the settings might be set for a text element:

{
    "element": {
        "type": "text",
        "content": "Updated Company Policy",
        "config": {
            "style": {
                "fontSize": "lg",
                "fontWeight": "bold",
                "textAlign": "center",
                "verticalAlign": "middle",
                "backgroundColor": "#f0f0f0",
                "borderRadius": "0.5rem"
            }
        },
        "workflowId": "",
        "workflowIds": [],
        "label": "Policy"
    }
}

This JSON represents the settings that would be utilized within the ElementSettingsModal to achieve the desired display and functionality for a text element that highlights a company's new policy.