5 min readUpdated Mar 2, 2026

TimelineTile Documentation

Overview

The TimelineTile is a component within the Vantage analytics & data platform that provides a visually engaging timeline of events. It organizes these events in chronological order, along with relevant metadata such as titles and types, which can help users quickly understand the sequence and significance of occurrences. The tile can be configured to pull data from various sources, transforming and displaying it in a readable format.

Purpose

The primary purpose of the TimelineTile is to render a chronological list of events with their associated attributes. It allows users to visualize sequences over time, making it valuable in domains such as project management, incident reporting, historical analysis, or any scenario where event history is pivotal.

Settings

The TimelineTile component comes with a variety of settings that allow for customization. Below are the settings explained in detail:

1. Height

Name: height
Input Type: Numeric
Description: This setting specifies the height of the tile. Adjusting the height affects how compact or spacious the tile appears. A larger height allows for more content to be displayed vertically.
Default Value: Undefined (customizable per instance).

2. Width

Name: width
Input Type: Numeric
Description: This setting determines the width of the tile, impacting how much horizontal space it occupies. Changing this value can accommodate varying data lengths or improve layout aesthetics.
Default Value: Undefined (customizable per instance).

3. Events

Name: events
Input Type: Array
Description: This is an array of event objects which represent the default events displayed in the timeline. If no data is supplied through dataRefId or tileData, these events will be rendered.
Default Value: An empty array [].

4. Title

Name: title
Input Type: String
Description: This sets the main title of the tile, providing a clear indication of the content’s purpose. Changing this will directly affect the header of the tile.
Default Value: Undefined (customizable per instance).

5. Subtitle

Name: subtitle
Input Type: String
Description: This setting allows you to provide a secondary description for the tile. It typically offers additional context or details about the timeline.
Default Value: Undefined (customizable per instance).

6. Footer Text

Name: footerText
Input Type: String
Description: This setting specifies a text element that appears at the bottom of the tile. It can be used for additional notes or references.
Default Value: Undefined (customizable per instance).

Name: footerColor
Input Type: String
Description: This setting determines the background color of the footer. Customizing this can enhance visual appeal or improve adherence to branding guidelines.
Default Value: Undefined (customizable per instance).

8. Data Ref IDs

Name: dataRefIds
Input Type: Array
Description: This is an array of data reference IDs used to fetch a dataset. The tile will prioritize using this when retrieving event data.
Default Value: An empty array [].

9. Field Mapping

Name: fieldMapping
Input Type: Object
Description: This object maps the event data fields to the expected keys within the dataset. It allows customization of how titles, dates, and types are extracted from the dataset.
Default Value: An empty object {}.

10. Series Items

Name: seriesItems
Input Type: Array
Description: Contains configurations for each series of items to be displayed in the timeline, allowing for targeted data handling.
Default Value: An empty array [].

How It Works

The TimelineTile operates by leveraging incoming configuration props. It processes these props to establish a dataset to display in a timeline format. The component first checks for the provided dataRefIds to fetch a dataset; if none are found, it falls back to tileData or the static events provided.

Data is processed by extracting relevant fields using the configurations specified in fieldMapping and seriesItems. This allows the component to adapt to various data structures. Finally, the data is rendered in a vertical, ordered list with unique icons and colors that correspond to the types of events.

Data Expectations

The TimelineTile expects the following data format for events:

json

[
    {
        "title": "Event Title",
        "date": "2023-01-01",
        "type": "eventType"
    }
]

Where:

title is a string representing the name of the event.
date is a string in a recognizable date format.
type is a string representing the category of the event (e.g., 'alert', 'order').

Use Cases & Examples

Use Case 1: Project Management Tool

In project management, a timeline is essential for tracking milestones, deadlines, and deliverables. The TimelineTile can visually display the sequence of tasks completed or due dates, enhancing project transparency for stakeholders.

Use Case 2: Incident Reporting Dashboard

In a tech operations context, the TimelineTile can be used to display incidents and resolutions over time. By capturing each event with timestamps and descriptions, teams can analyze patterns in incidents and their resolution.

Example Configuration

Business Context: Using TimelineTile for an incident reporting dashboard.

Sample Configuration: