PieTile Documentation

Overview

PieTile is a visual component within the Vantage analytics and data platform designed to represent data in a pie chart format. This Tile provides a clear, visual way for users to digest complex data sets, making it easier to identify proportions, patterns, and trends within the data.

Purpose

The primary purpose of the PieTile component is to visually display distributions of data categories through pie slices. Each segment of the pie chart corresponds to a proportion of the overall dataset, enabling quick comparisons between parts and the whole.

Data Expectations

The PieTile component expects the following data structure for rendering:

• data: An array of objects, where each object should contain at least two properties:
  • value: A numeric value representing the size of the segment.
  • color (optional): A string representing the color of the segment in hexadecimal format, e.g., #FF0000.

[
    {
        "value": 30,
        "color": "#FF0000"
    },
    {
        "value": 70,
        "color": "#00FF00"
    }
]

Settings

General Component Props

1. Title

   • Input Type: String
   • Description: The title that appears at the top of the tile, providing context for the data being displayed.
   • Default Value: None (Title is required).

2. Subtitle

   • Input Type: String
   • Description: An optional subtitle beneath the title that can provide additional context or information about the data.
   • Default Value: None.

3. FooterText

   • Input Type: String
   • Description: Text displayed at the bottom of the tile; can be used for notes or explanations related to the data.
   • Default Value: None.

4. FooterColor

   • Input Type: String (CSS color)
   • Description: Specifies the color of the footer text, allowing customization to match branding or other UI elements.
   • Default Value: Default color as per the UI theme, typically a neutral tone.

Pie Chart Configuration Props

1. Height

   • Input Type: Numeric
   • Description: Determines the height of the pie chart within the tile. Adjusting this value changes the vertical space allocated for the chart.
   • Default Value: None (Must be specified).

2. Width

   • Input Type: Numeric
   • Description: Determines the width of the pie chart within the tile. Similar to height, changing this value will alter the horizontal space.
   • Default Value: None (Must be specified).

How It Works

The PieTile operates by rendering a PieChart utilizing the the charting engine library. It uses the provided data to create the pie slices, with each slice corresponding to the value key of each object in the dataset. The innerRadius and outerRadius properties define the thickness of the pie slices, creating a donut shape. The Cell component assigns a color to each slice based on the data provided.

The Tooltip component displays detailed information when hovering over a segment, enhancing user interactivity. The Legend component provides a list representation of the pie segments, further contextualizing the data.

Use Cases & Examples

Use Cases

1. Sales Distribution Analysis: Companies can use the PieTile to visualize the distribution of sales across different products or regions, enabling a quick understanding of which areas are performing well.

2. Resource Allocation: In project management, the PieTile can illustrate how resources (time, budget) are allocated among different tasks or projects, helping in strategic planning.

3. Survey Results Visualization: Organizations can display survey results about customer preferences, providing insights into what features or products are favored.

Example Configuration

Use Case: Sales Distribution Analysis

To visualize sales data across four product categories, the PieTile might be configured as follows:

Configuration:

{
    "config": {
        "height": 300,
        "width": 500,
        "data": [
            {
                "value": 150,
                "color": "#0088FE"
            },
            {
                "value": 100,
                "color": "#00C49F"
            },
            {
                "value": 75,
                "color": "#FFBB28"
            },
            {
                "value": 50,
                "color": "#FF8042"
            }
        ]
    },
    "title": "Sales Distribution for Q1",
    "subtitle": "Categorical sales performance",
    "footerText": "Data sourced from sales database",
    "footerColor": "#6A6A6A"
}

Summary

In this example configuration, the PieTile visually presents the sales data for various product categories, offering an immediate visual insight into sales distribution for decision-makers. The specified colors help in distinguishing between the different categories, while the footer provides additional context.

This documentation provides a robust understanding of the PieTile, enabling users to effectively implement and customize it according to their analytical needs.