StepTile Documentation

Overview

The StepTile component is part of the Vantage analytics and data platform. It serves as a visualization tool that displays a series of steps or statuses in a linear progression, useful for tracking the status of tasks, projects, or events. It allows users to visualize the progress of activities in real-time, facilitating better decision-making and resource allocation.

Purpose

The primary purpose of StepTile is to provide users with an intuitive interface to monitor progress across sequential steps. It can be used to represent various workflows, tasks, or milestones, visually indicating the current status of each step, whether it is completed, active, or pending.

Settings

The StepTile component supports several configurational settings, detailed below:

1. Height

   • Input Type: Numeric
   • Description: This setting defines the vertical height of the tile. Changing this value alters the height of the component in the UI.
   • Default Value: undefined (auto-adjust based on content)

2. Width

   • Input Type: Numeric
   • Description: This setting specifies the horizontal width of the tile. Adjusting the width impacts the component’s overall layout within the parent container.
   • Default Value: undefined (auto-adjust based on content)

3. Steps (configSteps)

   • Input Type: Array of Objects
   • Description: This represents the steps to be displayed in the component. If no data is available to map, it will fallback to these configured steps. Each step object may contain fields like label, status, date, etc.
   • Default Value: [] (an empty array which shows no steps)

4. Visualization Type

   • Input Type: Dropdown (Options: 'stepper', 'tracker')
   • Description: This setting determines the visual layout of the step display. The stepper type is ideal for sequential steps while tracker emphasizes the progression and statuses more explicitly.
   • Default Value: 'stepper'

5. Title

   • Input Type: String
   • Description: The main title displayed at the top of the tile. This is a key identifier for the visualization context.
   • Default Value: undefined

6. Subtitle

   • Input Type: String
   • Description: A secondary title beneath the main title. This can be used to provide additional context about the steps.
   • Default Value: undefined

7. Footer Text

   • Input Type: String
   • Description: This text is displayed at the bottom of the tile. It can be used for additional remarks or insights related to the steps presented.
   • Default Value: undefined

8. Footer Color

   • Input Type: String (CSS color)
   • Description: This setting changes the background color of the footer to emphasize or categorize the displayed information.
   • Default Value: undefined

9. Data

   • Input Type: Array of Objects
   • Description: The dataset to be processed and displayed. It can contain various attributes necessary for mapping to steps (label, status, timestamp, etc.).
   • Default Value: [] (an empty array)

10. Data Ref IDs

• Input Type: Array of Strings
• Description: Identifiers used to reference datasets. If provided, the component will attempt to load datasets associated with these IDs.
• Default Value: [] (an empty array)

How It Works

1. Dataset Loading: The component attempts to load data from the provided dataRefIds. If the ref IDs do not lead to any data, it utilizes tileData for rendering the steps.

2. Mapping and Validation: The data undergoes validation and mapping based on the provided configuration. The component utilizes helper functions to transform the data into a usable format. If the mapping fails, an error message will be displayed within the tile.

3. Step Status Calculation: The active step is determined based on the mapping of the current value against the statuses of the steps. The component visually indicates which step is currently active, completed, or pending using distinct visual cues.

4. Rendering: The component renders the steps according to the chosen visualizationType. For a 'tracker', it may have connecting lines and status icons, while a 'stepper' layout is more linear and step-focused.

Use Cases & Examples

Use Cases

1. Project Management:

   • Description: Teams can manage project milestones using StepTile to visualize completed and pending tasks. This allows for quick updates during team meetings.

2. Sales Pipeline Tracking:

   • Description: Sales teams can use the StepTile to display the progression of leads through the sales funnel, indicating which stage a lead is at and what actions are required.

3. Onboarding Process:

   • Description: HR departments could utilize StepTile for new employee onboarding, visually indicating which onboarding steps have been completed.

Example Configuration

Use Case: Project Management

Configuration Data:

{
  "config": {
    "height": 300,
    "width": 400,
    "steps": [
      {
        "label": "Initiation",
        "status": "completed",
        "date": "2023-01-01T00:00:00.000Z",
        "description": "Project initiated.",
        "actor": "Project Manager",
        "actor_label": "Assigned By",
        "timestamp_label": "Completed On"
      },
      {
        "label": "Planning",
        "status": "active",
        "date": "2023-02-01T00:00:00.000Z",
        "description": "Currently drafting project plan.",
        "actor": "Project Coordinator",
        "actor_label": "Assigned To",
        "timestamp_label": "Started On"
      },
      {
        "label": "Execution",
        "status": "pending",
        "date": null,
        "description": "Execution phase not yet started."
      }
    ],
    "visualizationType": "tracker",
    "title": "Project Timeline",
    "subtitle": "Current project progress",
    "footerText": "Updated bi-weekly",
    "footerColor": "#f0f0f0"
  },
  "data": [],
  "dataRefIds": []
}

This configuration sets up a StepTile to visualize a project's progress, with well-defined steps, statuses, and additional metadata to guide stakeholders.