ExpandedTileModal Documentation

Overview

The ExpandedTileModal component is an integral part of the Vantage analytics & data platform. Its primary purpose is to display an expandable modal containing various data visualizations and insights derived from a defined tile configuration. It supports multiple content types, including text, graphs, and insights, which can be customized to meet user-specific requirements. The component ensures a responsive layout, adapting to different screen sizes, and provides a rich user interaction experience.

Features

• Responsive design for various screen sizes.
• Multiple content types including textual data, charts, and insights.
• Evaluation of rules to dynamically adjust display properties.
• Customizable appearance through configuration settings.

Props

The following props are used to initialize and define the behavior of the ExpandedTileModal:

Tile

tile

• Type: Object
• Description: Represents the tile configuration. It includes visualization parameters and workflows associated with the tile.

Config

config: propConfig

• Type: Object
• Description: This is an optional prop that can be provided to override the default tile configuration and specify any other settings required for the component.

Expanded Content

expandedContent = []

• Type: Array
• Description: An array that can hold various content items such as text, graphs, or other data visualizations that should be rendered inside the modal.

Stats

stats = []

• Type: Array
• Description: An array containing statistical objects that carry data related to the workflows defined in the tile. This data can be displayed alongside the visual content.

Settings

The ExpandedTileModal operates with numerous internal settings that govern its appearance and functionality. Here are the detailed explanations of those settings:

1. Expanded Content Configuration

• Field Name: expandedContent
• Input Type: Array
• Description: This setting accepts an array of content items to be displayed in the modal. Each item can have attributes like type (text, graph, list, etc.), configuration (style, layout, etc.), and data (values, labels, etc.).
• Default Value: [] (empty array, meaning no content by default)

2. Statistics

• Field Name: stats
• Input Type: Array
• Description: It expects an array of statistical data corresponding to workflows that can be displayed alongside the content. For each content item that requires statistical insight, a stat entry in this array must match the index of the respective workflow in the parent configuration.
• Default Value: [] (empty array, meaning no stats by default)

3. Close Modal Functionality

• Field Name: closeModal
• Input Type: Function
• Description: This setting gets the function to close the modal. It facilitates an interactive user experience allowing users to dismiss the modal once they finish with the displayed content.
• Default Value: N/A (no default value; it's provided as part of the modal’s context)

4. Layout and General Settings

• Field Name: layout
• Input Type: Array of Objects
• Description: Each layout object specifies the positioning and size of the items inside the grid (x, y coordinates and width, height). Items on the grid are rendered according to this layout, which defines their display behavior.
• Default Value: Configurable through the component and defaults to responsive behavior based on the available data.

How It Works

1. Modal Display: When triggered (usually via user action), the ExpandedTileModal takes the tile data and renders it in a visually appealing modal format.
2. Rendering Content: It maps through the expandedContent array to create a responsive grid layout using the react-grid-layout library. Each content item is rendered based on its type, applying specific rendering logic.
3. Statistics Integration: The component matches the statistical data from the stats array to the appropriate workflows and presents relevant insights alongside the graphical or text representation.
4. Dynamic Style Evaluation: The evaluateRules function is called to determine if any style overrides should be applied based on the provided configurations and data.
5. Responsive Design: The ResponsiveGridLayout ensures that items are displayed correctly across a variety of screen sizes, ensuring that the user experience is consistent and professional.

Use Cases & Examples

Use Case 1: Data Presentation in Business Analytics

In a business analytics dashboard, the ExpandedTileModal could be utilized to present sales performance data over a quarter. The tile could display various graphs showing sales trends, insights into top-selling products, and potential warning flags for underperforming items.

Use Case 2: Operational Dashboards in IT

For IT operations, the modal can be used to display system performance metrics. This might include uptime statistics, error rates, and service-level agreement (SLA) compliance data.

Example Configuration for Sales Performance

To create a modal displaying quarterly sales data, the configuration might look like this:

{
    "tile": {
        "config": {
            "workflows": [
                { "id": "salesQ1", "title": "Sales Q1" },
                { "id": "salesQ2", "title": "Sales Q2" }
            ]
        }
    },
    "expandedContent": [
        {
            "id": "title1",
            "type": "text",
            "text": "Quarterly Sales Overview",
            "config": {
                "style": {"fontSize": "lg", "fontWeight": "bold"}
            }
        },
        {
            "id": "graph1",
            "type": "graph",
            "workflowIds": ["salesQ1", "salesQ2"],
            "config": {
                "graphType": "line"
            }
        },
        {
            "id": "stat1",
            "type": "bignumber",
            "workflowId": "salesQ1",
            "label": "Total Sales",
            "config": {
                "justifyContent": "center"
            }
        }
    ],
    "stats": [
        { "value": "$100,000", "label": "Sales Q1", "color": "text-green-600" },
        { "value": "$120,000", "label": "Sales Q2", "color": "text-blue-600" }
    ]
}

In this example, the modal presents a title, a sales performance graph, and a big number highlighting total sales for Q1. The statistics for each quarter (sales amount and labels) are provided to support the visuals.

This detailed configuration ensures that the ExpandedTileModal effectively communicates important sales data to stakeholders and decision-makers.

Billing Impact & AI Integrations

Currently, there are no direct billing impacts associated with the use of the ExpandedTileModal itself. However, usage of certain metrics or heavy graphical rendering might incur costs related to additional data source queries or processing efforts.

In terms of AI integration, specifics are not outlined in the current code. However, there is a placeholder for AI-based insights in the “insightbox” type, which could be integrated in the future to recommend actions or analyze trends intelligently based on user interactions.

This comprehensive documentation provides all necessary details to effectively utilize the ExpandedTileModal component within the Vantage platform.