TileDrilldownModal Documentation

Overview

The TileDrilldownModal is a full-screen modal component within the Vantage analytics platform designed for users to drill down into the data of specific tiles. It provides a three-zone layout that includes a Data Explorer on the left, an AI Insights panel on the right, and an Actions Bar at the bottom. This modular structure allows users to analyze and interact with their data meaningfully.

Purpose

The primary purpose of the TileDrilldownModal is to enable users to explore detailed insights from visualized data represented in tiles. It allows toggling between different views to gain deeper insights while performing analytics and data comparative analyses.

How It Works

• The modal is triggered when a user interacts with a tile on their dashboard. It uses state management, computed values, and lifecycle management hooks for managing state and rendering logic.
• The component listens for an "Escape" key event to allow users to close the modal.
• Data is resolved in order of precedence: tile data, runtime data, configuration data, and finally stats, ensuring that users interact with the most relevant data.
• Visualization types are handled dynamically, with associated icons and colors for easier data categorization.

Data Expectations

The TileDrilldownModal expects data in the following structures:

• tile: An object containing the configuration and data of the specific tile.
• tile.data: Actual data array displaying detailed information.
• tile.runtimeData.data: Runtime data available in case tile.data is absent.
• tile.config.data and tile.config.stats: Fallbacks when other data types are unpopulated.

Settings

Component Settings

The TileDrilldownModal does not have traditional settings passed at initialization but utilizes props from its parent component and state management for its internal configuration. Here is a breakdown of the key internal settings:

1. tile

   • Input Type: Object
   • Description: The configuration object of the tile that is currently being drilled down into. It can contain properties like data, config, and title.
   • Default Value: None. Must be passed during component instantiation.

2. close

   • Input Type: Function
   • Description: A function to close the modal, typically passed from the parent component that controls the modal's visibility.
   • Default Value: None. Must be passed during component instantiation.

3. isFullScreen (State)

   • Input Type: Boolean
   • Description: Represents whether the modal is in full-screen mode or not. Changing this modifies the layout and takes full advantage of the screen real estate.
   • Default Value: false.

4. chartView (State)

   • Input Type: Boolean
   • Description: Indicates whether the chart view is active. It allows toggling between data-rich views versus chart representations.
   • Default Value: false.

5. drilldownView (State)

   • Input Type: String
   • Description: Determines which view is currently active—either 'insights' or 'data'. This can affect what content is displayed on the left.
   • Default Value: 'insights'.

6. isEditing (State)

   • Input Type: Boolean
   • Description: Flags whether the template editor is active or not. If active, it allows users to edit their drilldown template.
   • Default Value: false.

7. template (State)

   • Input Type: Object or Null
   • Description: Holds the current drilldown template that can be modified and saved. This is crucial for customizing the user experience.
   • Default Value: tile?.config?.drilldownTemplate || null.

8. vizType (Derived from Tile)

   • Input Type: String
   • Description: Represents the visualization type of the current tile, determining functionality and compatibility with features.
   • Default Value: Depends on the tile configuration parameter.

Use Cases & Examples

Use Cases

1. Data Analysis and Insights Retrieval: Analysts can explore different aspects of a dataset through rich visualizations while asking contextual questions, collecting actionable insights in real-time.
2. Comparative Data Assessment: Users can easily switch views to compare data sets, particularly with the Comparison visualization type, enabling informed decision-making based on visual representations.
3. Template Customization: Users can edit drilldown templates to tailor the modal's data presentation, making it suitable for various reporting needs or business contexts.

Example Configuration

Use Case: A company wants to analyze its sales performance over the previous quarters using tile visualizations.

Configuration Data:

const tile = {
    id: "sales_performance",
    title: "Sales Performance",
    subtitle: "Quarterly Overview",
    config: {
        visualizationType: "comparison",
        data: [{ quarter: 'Q1', sales: 20000 }, { quarter: 'Q2', sales: 30000 }],
        drilldownTemplate: {
            type: 'summary',
            title: 'Sales Summary',
            display: true
        }
    }
};

function handleClose() {
    console.log("Modal closed");
}

// Instantiating TileDrilldownModal
<TileDrilldownModal tile={tile} close={handleClose} />;

This setup allows users to dive into their sales data, manipulating it in-depth based on historical performance, enhancing analytical capabilities while utilizing compelling visual displays.