SettingsForm Documentation for Vantage

Overview

The SettingsForm component is a generic settings interface used to manage various configurable options within the Vantage analytics and data platform. It is designed to be adaptable, allowing developers to pass in a schema that defines the fields to be displayed, initial values for those fields, and a callback function that is invoked whenever a setting's value changes. This enables dynamic interactions and real-time updates, which are crucial for maintaining an intuitive user experience.

Purpose

The primary purpose of the SettingsForm is to provide users with a seamless way to adjust application settings according to their needs. The component handles a variety of input types, including text fields, select dropdowns, checkboxes, and color pickers. By utilizing this form, organizations can tailor their analytics experience to specific requirements, enhancing their data utilization and insights.

Settings

The SettingsForm accepts the following structured settings through its schema prop:

1. Schema Definition

• Field Structure: Each field in the schema is defined using the following keys:
  • key: The identifier for the setting.
  • label: The display name for the field.
  • type: The input type for the field (e.g., text, select, checkbox).
  • options (optional): An array of options for dropdown selections, where each option is an object containing value and label.
  • props (optional): Additional properties that can be applied to the input element.

Example of Schema

const schema = [
    { key: 'theme', label: 'Theme', type: 'select', options: [{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }] },
    { key: 'itemsPerPage', label: 'Items Per Page', type: 'number' },
    { key: 'notificationsEnabled', label: 'Enable Notifications', type: 'checkbox' },
    { key: 'primaryColor', label: 'Primary Color', type: 'color-select', options: [{ value: '#FF5733', label: 'Red' }, { value: '#33FF57', label: 'Green' }] },
];

2. Detailed Settings Explanation

Setting: Theme

• Type: Dropdown (select)
• Description: This setting allows users to choose between different themes (e.g., light or dark) for the application interface. Changing the theme alters the overall look and feel, improving user accessibility and preference.
• Default Value: None specified; depends on initialValues.

Setting: Items Per Page

• Type: Numeric (number)
• Description: This controls the number of items displayed per page in list views. Increasing this value will show more data on a single page, which can enhance usability for data-heavy applications.
• Default Value: None specified; depends on initialValues.

Setting: Enable Notifications

• Type: Boolean (checkbox)
• Description: This setting enables or disables notifications within the application. A checked box means notifications will be shown, while an unchecked box will suppress them. This is crucial for user experience and can affect user engagement.
• Default Value: false.

Setting: Primary Color

• Type: Color Select (color-select)
• Description: Users can select a primary color that affects the theme or branding of the application. Changing this color can enhance aesthetic cohesion or align with corporate branding strategies.
• Default Value: #184b6f (default blue color).

Data Expectations

The initialValues prop should be an object where keys correspond to the defined schema keys. The onChange prop is a function that takes two parameters: the key of the setting that was changed and the new value for that setting. The function can return either a promise or nothing.

AI Integrations and Billing Impacts

Currently, there are no specific AI integrations directly associated with SettingsForm. However, the values configured via this form may influence features that require user-defined thresholds, alert settings, or custom report appearances driven by AI models in Vantage. While the form itself does not have any direct billing impacts, the choices made via settings might determine resource usage, which could, in turn, impact billing, especially if they govern data processing limits or notification thresholds in relation to premium features.

Use Cases & Examples

Use Case 1: Theme Customization

A company wants to ensure that their analytics dashboard aligns with their corporate branding. They can use the SettingsForm to allow users to pick a theme and customize colors.

Use Case 2: Pagination Control

In a data-heavy application, users may want control over how many records are displayed per page. The Items Per Page setting can be adjusted based on user preferences, improving the navigation experience.

Example Configuration

To configure the SettingsForm to manage themes and enable notifications, here is a sample implementation:

const initialValues = {
    theme: 'light',
    itemsPerPage: 10,
    notificationsEnabled: true,
    primaryColor: '#33FF57'
};

const handleChange = async (key, value) => {
    console.log(`Setting changed: ${key} = ${value}`);
    // Save settings to backend or local storage here
};

<SettingsForm schema={schema} initialValues={initialValues} onChange={handleChange} />

This configuration initializes the settings with default values, allowing users to customize their experience directly from the UI, followed by corresponding actions on change events.