GanttTile Documentation

Overview

The GanttTile is a sophisticated component within the Vantage analytics and data platform, designed to visualize task timelines and project schedules. Utilizing a Gantt chart format, it enables users to observe task progress, start and end dates, and related data, facilitating effective project management and resource allocation.

Purpose

The GanttTile provides a visual representation of tasks organized in a timeline format. Users can easily assess overlapping tasks, their durations, and associated progress, allowing for better planning and execution within projects.

How It Works

• Data Processing: The tile processes incoming data related to tasks, which includes attributes like labels, start dates, end dates, progress, and colors. This data is either fetched directly from the prop configuration dataRefIds or from a manually defined series if the effective data is unavailable.
• Timeline Calculation: The component computes the range of dates required to display the tasks. It calculates the minimum and maximum dates, providing a buffer for an enhanced visual spacing.
• Rendering: Each task is rendered as a horizontal bar within the Gantt chart. Users can click on these bars to navigate to either external URLs or internal dashboards, depending on the configured properties.

Settings

Here we define the settings available for GanttTile in detail.

1. height

• Input Type: Numeric
• Description: Controls the vertical size of the GanttTile. Changing this value modifies the overall height, resulting in a larger or smaller display area for timeline tasks.
• Default Value: Not specified in the code; should be explicitly set by the user.

2. width

• Input Type: Numeric
• Description: Defines the horizontal size of the GanttTile. Adjusting this alters the width available for viewing and interacting with task bars.
• Default Value: Not specified in the code; should be explicitly set by the user.

3. title

• Input Type: String
• Description: The primary title displayed at the top of the GanttTile. Modifying this will change what text is shown, allowing users to provide context about the task list or project.
• Default Value: Not explicitly defined; users should specify it during configuration.

4. subtitle

• Input Type: String
• Description: An optional secondary title beneath the title, providing additional information or context. Changing this influences what supplementary details are presented.
• Default Value: Undefined; should be set by users as needed.

5. footerText

• Input Type: String
• Description: Text shown at the bottom of the tile that can summarize or provide additional information regarding the tasks. Customizing this will directly affect user information perception.
• Default Value: Undefined; user-defined as per requirement.

6. footerColor

• Input Type: String (Color HEX or CSS)
• Description: Sets the background or text color of the footer. Adjusting this offers visual customization, improving the aesthetic or brand alignment of the tile.
• Default Value: Undefined; to be configured by the user.

7. data

• Input Type: Array of Objects
• Description: The primary dataset input containing the tasks to display. Each object in the array should minimally contain properties like label, start date, end date, progress, and color. Changing this data directly influences what tasks are displayed on the Gantt chart.
• Default Value: Empty array ([]).

8. dataRefIds

• Input Type: Array of Strings
• Description: References to data sources from which the GanttTile can fetch tasks. The first entry will be prioritized for fetching when available. Updating or providing the correct references is crucial for dynamic data visualization.
• Default Value: Empty array ([]).

9. fieldMapping

• Input Type: Object
• Description: A mapping that links the keys of the incoming data to the schema expected by the GanttTile. Correct mapping is essential for proper data processing. Altering this object allows for flexibility in how data is interpreted and rendered in the Gantt chart.
• Default Value: Undefined; custom structure defined by user.

Data Expectations

The GanttTile expects the following data structure for each task (ideally shaped as an array of objects):

{
  "label": "Task Name",
  "start": "2023-10-01",
  "end": "2023-10-05",
  "progress": 80,
  "color": "#FF5733",
  "linkToDashboardId": "dashboard123",
  "linkToUrl": "https://example.com"
}

Key Attributes:

1. label: Represents the task name (string).
2. start: Start date of the task (ISO8601 date format).
3. end: End date of the task (ISO8601 date format).
4. progress: Progress as a percentage (0-100, numeric).
5. color: The color of the task bar (string, hex code).
6. linkToDashboardId: Internal navigation URL (string).
7. linkToUrl: External navigation URL (string).

Use Cases & Examples

Use Case 1: Project Management

In a project management system, the GanttTile can be utilized to visualize various project milestones, deadlines, and task dependencies, helping teams track progress and manage resources efficiently.

Use Case 2: Event Planning

Event coordinators can use this tile to outline tasks associated with event preparation stages, such as booking venues, coordinating speakers, and marketing efforts, ensuring timely execution of all responsibilities.

Use Case 3: Software Development Sprints

For development teams operating on Agile methodologies, the GanttTile can represent tasks across multiple sprints. It's helpful for tracking development timelines, understanding overlaps, and ensuring sprint goals are met.

Example Configuration

For instance, consider a project management scenario:

{
  "config": {
    "height": 300,
    "width": 400,
    "fieldMapping": {
      "_series": [
        {
          "label": { "dataRefId": "taskNameId" },
          "start": { "dataRefId": "taskStartId" },
          "end": { "dataRefId": "taskEndId" },
          "progress": { "dataRefId": "taskProgressId" },
          "color": { "dataRefId": "taskColorId" }
        }
      ]
    }
  },
  "title": "Project Timeline",
  "subtitle": "2023 Q4 Roadmap",
  "footerText": "Updated Weekly",
  "footerColor": "#F3F4F6",
  "data": [
    { "taskNameId": "Design Phase", "taskStartId": "2023-10-01", "taskEndId": "2023-10-15", "taskProgressId": 70, "taskColorId": "#FF5733" },
    { "taskNameId": "Development Phase", "taskStartId": "2023-10-16", "taskEndId": "2023-11-30", "taskProgressId": 40, "taskColorId": "#28A745" },
    { "taskNameId": "Testing Phase", "taskStartId": "2023-12-01", "taskEndId": "2023-12-15", "taskProgressId": 20, "taskColorId": "#007BFF" }
  ]
}

In this configuration, the GanttTile displays a project’s timeline with designated heights, widths, and details about each phase, enabling efficient monitoring and communication of the project's progress.