Tile Component Documentation

Overview

The Tile component serves as a versatile visual element within the Vantage analytics & data platform. It is designed to encapsulate various types of data visualizations or content, providing users with the ability to view, interact with, and analyze their data through a customizable and aesthetic interface. The Tile can adapt its appearance based on input properties and supports loading states, tooltip descriptions, and action buttons.

Settings

The Tile component has several settings that control its appearance and behavior. Below, each setting is explained in detail:

1. Children

• Input Type: UI element
• Description: This represents the main content that will be displayed inside the Tile. It accepts any content elements. The impact of this setting is that it allows the Tile to contain any type of data visualization or text that the developer needs to present.

2. isLoading

• Input Type: Boolean
• Default Value: false
• Description: Indicates whether the Tile is currently in a loading state. If set to true, the Tile will display a skeleton loader instead of the actual content. This is crucial for user experience to signal that data is being fetched or processed.

3. headerActions

• Input Type: UI element
• Description: These are action buttons or icons to be displayed in the header section of the Tile. This might include options like refresh, edit, or other contextual actions related to the data presented. This setting enhances user interactivity.

4. props.config

• Input Type: Object

• Properties of config:

  • title

    • Input Type: String
    • Description: The main title displayed at the top of the Tile. It's crucial for informing users about the content of the Tile.

  • subtitle

    • Input Type: String
    • Description: The optional subtitle displayed below the title. It provides additional context or information relevant to the title.

  • height

    • Input Type: Numeric
    • Default Value: 1
    • Description: Determines the height of the Tile in the grid layout. Changing this affects how many rows the Tile spans in a grid arrangement.

  • width

    • Input Type: Numeric
    • Default Value: 1
    • Description: Specifies the width of the Tile. It impacts how many columns the Tile occupies and its overall visibility on the dashboard.

  • borderColor

    • Input Type: String (CSS Color)
    • Description: Defines the color of the Tile's border. Customizing this affects the visual distinction between the Tile and adjacent elements.

  • borderWidth

    • Input Type: String (CSS Size)
    • Description: Determines the thickness of the Tile's border. Adjusting this can enhance or reduce emphasis on the Tile.

  • borderRadius

    • Input Type: String (Responsive Type: 0, md, lg, full)
    • Default Value: lg
    • Description: Controls the roundness of the Tile's corners. This impacts the overall aesthetic of the Tile, providing a sharper or softer look.

  • backgroundColor

    • Input Type: String (CSS Color)
    • Description: Sets the background color of the Tile. Changing this property influences its visual hierarchy and user engagement.

  • footerText

    • Input Type: String
    • Description: Optional text displayed in the footer section of the Tile, typically used for annotations or additional information related to the content.

  • footerActions

    • Input Type: Array of Objects
    • Description: Contains action items that will be displayed in the Tile's footer. This enhances interactivity, allowing users to perform functions directly associated with the Tile's content.

  • clickUrl

    • Input Type: String (URL)
    • Description: A URL for making the entire Tile clickable. When set, clicking on the Tile will navigate users to the specified link.

How It Works

The Tile component dynamically resolves its content based on the properties provided:

1. Data Handling: It first checks for any data defined in props.config.data. If not found, it looks in props.config.stats and subsequently in the workflow or AI data caches.

2. Dynamic Rendering: Based on the isLoading boolean, the Tile will either display a loading skeleton or the actual content provided via children.

3. Styling: The Tile applies various CSS styles determined by the settings related to colors, dimensions, and borders to adjust its look and layout.

4. Interactivity: If a clickUrl is provided, the Tile is wrapped in an anchor element to make it clickable, enhancing navigation and interactivity.

Expected Data

The Tile component expects data in a specific format that will be used in visualizations or content displays. The most critical pieces are:

• Data for rendering visualizations is expected either directly through props.config.data or indirectly via the workflow caches.
• The configuration object must align with the expected attributes such as height, width, and color properties.

AI Integrations

The Tile component can leverage the AI capabilities present in the Vantage platform through data caching mechanisms. The component can retrieve relevant data from the AI context cache based on the tileId, facilitating a robust data-driven experience.

Billing Impacts

No direct billing impacts are associated with the Tile component itself. However, the use of AI data retrieval may incur usage costs based on the Vantage platform's pricing model. Users should ensure they are aware of any potential costs related to extensive use of AI features or workflows that incur billing based on data processing.

Use Cases & Examples

Use Case 1: Data Monitoring Dashboard

A business might use Tiles to monitor key performance indicators (KPIs) such as sales metrics, user engagement statistics, and inventory levels. Each Tile could represent a different metric, visually summarizing the data for easy interpretation.

Use Case 2: Interactive Reports

The Tile can be implemented in reports where various data visualizations are presented. Each Tile could provide insights into different datasets, making it easier for users to interact with and draw conclusions from the data.

Detailed Example Configuration:

To monitor sales KPIs, a business can create a Tile configuration as follows:

{
  config: {
    title: "Monthly Sales",
    subtitle: "Performance Overview",
    height: 2,
    width: 1,
    borderColor: "#4CAF50",
    borderWidth: "2px",
    borderRadius: "md",
    backgroundColor: "#E8F5E9",
    footerText: "Data updated monthly",
    footerActions: [
      { label: "Refresh", action: "refreshSales()" },
      { label: "View Details", action: "viewSalesDetails()" },
    ],
    clickUrl: "https://www.example.com/sales"
  },
  isLoading: false,
  children: <SalesChart data={salesData}/>,
}

In this configuration:

• The Tile is styled in green to match a sales theme.
• It includes a loading state for user feedback and has footer actions for interactivity.
• The clickUrl allows users to navigate to a detailed sales page.