ChartTile Documentation

Overview

The ChartTile component is a versatile visualization tool within the Vantage analytics and data platform, designed to render a variety of chart types including line, bar, area, pie, and scatter plots. It leverages the charting engine, allowing users to visualize and interact with datasets in a flexible and intuitive manner. This document details its functionality, configuration, and expected usage.

Purpose

ChartTile is used for visualizing data in various formats, providing users with insights through graphical representation. The component supports interactivity and can redirect users upon clicking charts, enriching the overall user experience in data analytics.

How It Works

The ChartTile functions by taking configuration props that dictate how the chart is rendered, what data is displayed, and how users can interact with it. Once rendered, the chart listens for interactions such as clicks, which can navigate to specified URLs, and fetches data from workflows concurrent to its lifecycle.

Data Expectations

The component primarily expects data in the form of structured objects, which must conform to the mapping defined in the configuration. It supports both legacy configuration (via series) and newer mapping strategies (workflows and fieldMapping). The processed data determines the values plotted on the chart, and includes x and y variables for scatter and various series configurations for other chart types.

Settings

1. Chart Type

• Name: chartType
• Input Type: String
• Description: Defines the type of chart to render (e.g., 'line', 'bar', 'area', 'pie', 'scatter'). Changing this setting alters the visualization displayed to the user, impacting both styling and underlying calculations for the data.
• Default Value: 'bar'

2. Visualization Type

• Name: visualizationType
• Input Type: String
• Description: Similar to chartType, this setting is a fallback used if chartType is not provided. This defines the type of visualization to be displayed.
• Default Value: 'bar'

3. Show Grid

• Name: showGrid
• Input Type: Boolean
• Description: Toggles the visibility of the grid lines in the chart, which helps in reading and interpreting the data better. Disabling this may lead to a cleaner appearance but could make it harder to gauge the scale of data points.
• Default Value: true

4. Show Tooltip

• Name: showTooltip
• Input Type: Boolean
• Description: Controls whether or not to display tooltips that provide additional information on hover. This enhances user interactivity by displaying detailed information without cluttering the chart.
• Default Value: true

5. Show Legend

• Name: showLegend
• Input Type: Boolean
• Description: Displays or hides a legend that helps identify the various data series represented in the chart. Useful for multi-series visualizations to distinguish between data points.
• Default Value: true

6. Series

• Name: series
• Input Type: Array
• Description: A legacy configuration for defining data series explicitly. It holds an array of objects, where each object may represent a single data series to diagram.
• Default Value: []

7. Workflows

• Name: workflows
• Input Type: Array
• Description: A new configuration method that allows mapping via workflows. This can leverage complex data transformations and ensure that the chart receives appropriate data.
• Default Value: []

8. Click URL

• Name: clickUrl
• Input Type: String
• Description: URL to redirect to when the chart is clicked. This enables navigation to related resources or dashboards, enhancing user interactivity.
• Default Value: None (undefined)

9. Title

• Name: title
• Input Type: String
• Description: Sets the title of the chart, usually displayed prominently above the visualization. This helps users quickly grasp the context of the chart.
• Default Value: 'Untitled'

10. Subtitle

• Name: subtitle
• Input Type: String
• Description: Provides an additional line of context or description found directly underneath the title, offering more clarity about the data being viewed.
• Default Value: None (undefined)

11. Footer Text

• Name: footerText
• Input Type: String
• Description: Text displayed in the footer of the chart, often used for notes or additional context related to the data.
• Default Value: None (undefined)

12. Footer Color

• Name: footerColor
• Input Type: String
• Description: Specifies the color of the footer text for better visibility or theming within the dashboard.
• Default Value: None (undefined)

Use Cases & Examples

Use Case 1: Sales Performance Tracking

A company wants to visualize its monthly sales performance across different regions. By utilizing the ChartTile, sales data can be represented as a bar chart, allowing quick identification of top-performing regions.

Use Case 2: Customer Interaction Insights

A product analytics team needs to track the number of interactions with products over time. A line chart will reveal interaction trends, highlighting peaks during marketing campaigns or seasonal highs.

Use Case 3: User Feedback Analysis

Using a pie chart for visualizing user feedback distribution can help stakeholders identify areas of improvement. Each slice could correspond to different feedback types (positive, negative, neutral), helping guide strategic decisions.

Detailed Example Configuration

Configuration for Sales Performance Tracking

{
  "config": {
    "chartType": "bar",
    "title": "Monthly Sales Performance",
    "subtitle": "Analysis of sales across regions",
    "footerText": "Data sourced from sales database",
    "footerColor": "#333",
    "showGrid": true,
    "showTooltip": true,
    "showLegend": true,
    "workflows": [
      { "id": "sales-workflow-2023" }
    ],
    "fieldMapping": {
      "_series": [
        {
          "id": "region1",
          "x": { "workflowId": "sales-workflow-2023", "field": "region" },
          "y": { "workflowId": "sales-workflow-2023", "field": "salesAmount" }
        }
      ]
    }
  },
  "height": "400px",
  "width": "600px"
}

In this example, a bar chart will be configured to visualize sales data per region, including all necessary enhancements for usability and easy understanding of the performance trends.