LineTile Documentation

Purpose

The LineTile component is an interactive visualization tool within the Vantage data platform that provides users with a line chart representation of their data. It is designed to represent trends or changes over a continuous range, making it useful for displaying time series or sequential datasets.

How It Works

LineTile integrates with various hooks to fetch, process, and render data. It uses the charting engine to visually represent the data in a line chart format. The component supports dynamic interactions such as clickable links, adjustable settings, and AI data generation for enhanced analysis capabilities.

Data Flow

1. Data Fetching: The component fetches data based on configurations provided, including workflows and data identifiers.
2. Data Validation & Mapping: The fetched data is validated and mapped to the format required for visualization by the LineChart.
3. Rendering: The processed data is rendered into a line chart with configurable options for display.

Settings

The LineTile comes with multiple settings for customization within the props.config object. Each setting is outlined below:

1. showGrid

• Type: Boolean
• Description: Specifies whether to show grid lines on the chart.
• Effect: If set to true, horizontal and vertical gridlines will appear on the chart, improving readability.
• Default: true

2. showTooltip

• Type: Boolean
• Description: Determines whether tooltips appear when hovering over data points.
• Effect: When enabled, a tooltip with detailed data appears on hover, providing context for the data point.
• Default: true

3. showLegend

• Type: Boolean
• Description: Controls the visibility of the legend on the chart.
• Effect: If enabled, a legend will display the color-coded series information, helping distinguish between different data lines.
• Default: true

4. workflows

• Type: Array
• Description: Contains workflow configurations that may influence the data rendered in the chart.
• Effect: These workflows will be executed to fetch relevant data points that display on the chart.
• Default: []

5. series

• Type: Array
• Description: Defines the data series for the chart, including labels and data points.
• Effect: Configuring this array modifies the dataset represented in the chart, affecting what data is visualized.
• Default: []

6. bucketing

• Type: Object
• Description: Optional configurations for data bucketing, which involves aggregating data points to simplify visual representation.
• Fields:
  • bucketBy: Specifies the field for bucketing (e.g., time, category).
  • aggregation: Determines the method of aggregation (e.g., avg, sum).
• Effect: Enabling and configuring bucketing affects the granularity of the data represented in the chart.
• Default: {} (empty)

7. clickUrl

• Type: String
• Description: A URL that the chart will link to when clicked.
• Effect: When users click on the chart, they are redirected to the specified URL, enabling interactive exploration of related resources.
• Default: undefined

8. axisLabels

• Type: Object
• Description: Holds labels for the chart's axes.
• Fields:
  • x: Label for the x-axis.
  • y: Label for the y-axis.
• Effect: Customizes axis labels to provide better context for the chart data.
• Default: { x: '', y: '' }

9. skipAnimation

• Type: Boolean
• Description: Indicates whether to skip animations when rendering the chart.
• Effect: Prevents animations during tab switches for smoother rendering transitions.
• Default: false

Data Expectations

LineTile expects tabular data structured with numerical values for the y-axis and categorical or date values for the x-axis. Each data point should adhere to a consistent schema, commonly as objects with x and y properties.

Example Expected Data

[
  { "x": "2023-01-01", "y": 100 },
  { "x": "2023-01-02", "y": 150 },
  { "x": "2023-01-03", "y": 120 },
  { "x": "2023-01-04", "y": 180 }
]

Use Cases & Examples

Use Cases

1. Sales Performance Tracking: Businesses can track sales trends over time to understand the impact of marketing strategies.
2. Website Traffic Analysis: Marketing teams may use LineTile to visualize traffic patterns on their website, identifying peak engagement times.
3. Financial Forecasting: Financial analysts can display stock price trends to predict future performance based on historical data.

Example Configuration

Use Case: Sales Performance Tracking To monitor sales performance over time, the following configuration can be set:

{
  "title": "Monthly Sales Performance",
  "subtitle": "Tracking sales over the past year",
  "config": {
    "showGrid": true,
    "showTooltip": true,
    "showLegend": true,
    "axisLabels": {
      "x": "Date",
      "y": "Sales (in USD)"
    },
    "series": [
      {
        "key": "sales_amount",
        "label": "Sales Amount"
      }
    ],
    "clickUrl": "https://company.com/sales-report",
    "bucketing": {
      "bucketBy": "month",
      "aggregation": "sum"
    }
  },
  "data": [
    { "x": "2023-01", "y": 20000 },
    { "x": "2023-02", "y": 25000 },
    { "x": "2023-03", "y": 22000 },
    { "x": "2023-04", "y": 30000 },
    { "x": "2023-05", "y": 35000 },
    ...
  ]
}

In this configuration:

• Sales figures are aggregated monthly to simplify trends observation.
• Each data point reflects total sales for the respective month, allowing viewers to quickly gauge performance changes over time.