PivotTile Documentation

Overview

The PivotTile component is a powerful table visualization tool that provides users with the ability to aggregate, sort, and pivot data within the Vantage analytics platform. It supports multiple modes of data presentation:

• Raw Mode: Displays unaltered workflow data with the ability to paginate and sort.
• Aggregated Mode: Provides server-side aggregation based on user-defined groups and metrics.
• Pivoted Mode: Enhances aggregated data by grouping column headers according to pivot values.

With features like responsive design, sticky headers, and customizable formatting, the PivotTile is a versatile solution for data presentation in business intelligence contexts.

Settings

The PivotTile component accepts several settings that control its appearance and functionality. Each setting is detailed below:

Component Props

• id

  • Type: string
  • Description: A unique identifier for the tile, typically used for tracking or integration purposes.
  • Default: None (Required)

• height

  • Type: string or number
  • Description: Specifies the height of the tile. This can be defined in pixels or percentages, allowing for a customizable display.
  • Default: None (Required)

• width

  • Type: string or number
  • Description: Defines the width of the tile. Like height, it can be specified in pixels or percentages.
  • Default: None (Required)

• data

  • Type: array
  • Description: The raw data to display in the tile if no server-side aggregation is required. This array should contain objects representing each row of data.
  • Default: An empty array []

• dataRefIds

  • Type: array
  • Description: An array of references used to uniquely identify data sources from which the tile fetches data. Supports multiple IDs if necessary for data aggregation.
  • Default: An empty array []

• config

  • Type: object
  • Description: Configuration settings that define the behavior and appearance of the PivotTile. This nested object can include fields for pivoting, aggregation, column visibility, and formatting.
  • Default: An empty object {}

Configuration Settings

1. pivotConfig / groupBy / pivotBy / aggregations / formatting

   • Type: object
   • Description: A nested configuration object that allows for detailed adjustments to how data is aggregated and displayed.
     • pivotConfig: This should include nested configurations for aggregation and pivoting if used.
     • groupBy: An array of strings specifying which fields to group the data by.
       • Default: An empty array []
     • pivotBy: A string indicating which field to use to pivot the data, creating multi-level headers in the table.
       • Default: An empty string ""
     • aggregations: An array of aggregation specifications, defining the operations to perform on grouped data (e.g. sum, average).
       • Default: An empty array []
     • formatting: An object that configures number formatting options such as decimals and prefix/suffix.
       • Keys can include:
         • decimals: Number of decimal places to display.
           • Default: 2
         • commas: A boolean to determine if commas should be used as thousand separators.
           • Default: true
         • prefix: A string to prefix formatted values.
           • Default: ""
         • suffix: A string to suffix formatted values.
           • Default: ""

2. visibleColumns

   • Type: array
   • Description: An optional array that specifies the columns to display in the tile. If not provided, all keys from the data are displayed.
   • Default: An empty array []

3. loadingPhase

   • Type: string
   • Description: Optional string to describe what loading phase the tile is in (e.g., fetching data, processing).
   • Default: ""

Pagination Settings

PivotTile integrates pagination functionality with the following parameters:

• pageSize
  • Type: number
  • Default: 100
  • Description: Number of rows displayed per page in the table. Changing this value will affect the paging of data that is shown to the user.

Loading States

The component displays appropriate loading messages based on the state of data ingestion, presenting a loader while aggregating and an error message if data fails to load.

Use Cases & Examples

Use Cases

1. Sales Data Reporting
   A business may want to analyze sales data over different territories. By configuring the PivotTile, users can group sales data by territory and pivot it by product categories, allowing for quick comparisons of performance across different dimensions.

2. Customer Support Analytics
   A support team can use the PivotTile to summarize ticket resolution times grouped by support agents, with a pivot on ticket priority. This will highlight performance variability based on ticket urgency.

3. HR Performance Dashboard
   In an HR context, the PivotTile can be utilized to aggregate employee performance metrics by department and level, providing insights into where training may be needed based on aggregated scores.

Example Configuration

To analyze sales data grouped by "Region" with a pivot based on "Product Category" while summing "Total Sales", the configuration for the PivotTile would be:

<PivotTile
    id="salesPivot"
    height="400px"
    width="100%"
    dataRefIds={["salesDataId"]}
    config={{
        pivotConfig: {
            groupBy: ["Region"],
            pivotBy: "Product Category",
            aggregations: [{ field: "Total Sales", operation: "sum" }],
            formatting: {
                decimals: 2,
                commas: true,
                prefix: "$"
            }
        },
        visibleColumns: ["Region", "Product Category", "Total Sales"]
    }}
/>

This example demonstrates a practical use of the PivotTile, preparing it to provide actionable insights for the sales team directly through the platform's interface.