GraphElement Documentation

Component Overview

The GraphElement is a versatile charting component designed for Vantage's analytics and data platform. It provides a visual representation of data through various chart types, including line, bar, and area charts. By integrating with workflow data, it dynamically renders charts to help users analyze trends, performance metrics, and other important datasets.

Purpose

The primary purpose of the GraphElement is to visualize data in a way that is both insightful and engaging. By allowing users to choose different types of graphs, this component helps facilitate data-driven decision-making in businesses. It is particularly beneficial in scenarios where real-time data representation is crucial for monitoring performance or trends.

Expected Data

The component expects the following data:

• Element Object: This object must contain a config object to define settings and a workflowIds array for determining which data series will be rendered.
• Mock Data: The component explicitly uses mockData in its current implementation, which consists of monthly data points represented as objects with fields name, val1, val2, and val3. This would need to be replaced with real data in practice.

Settings

The settings for GraphElement are encapsulated within the config object of the element argument. Below is an exhaustive breakdown of each setting:

1. graphType

• Input Type: String
• Description: Determines the type of graph to render. Accepts values like 'line', 'bar', or 'area'. Changing this setting alters the chart's visual representation significantly, affecting how data is interpreted.
• Default Value: 'line'

2. style

• Input Type: Object (CSS styles)
• Description: Allows users to apply custom CSS styles to the container of the chart. This can include properties like backgroundColor, border, padding, etc. Modifying this can change the appearance of the component, such as its dimensions or colors.
• Default Value: None (requires user specification)

3. label

• Input Type: String
• Description: Defines the title displayed above the chart. This label provides context for the data being presented. Customizing this can improve user understanding of what data the graph represents.
• Default Value: 'Graph Chart'

4. workflowIds

• Input Type: Array
• Description: An array of IDs linking to workflows. Each ID is used to determine which datasets to plot. If no IDs are supplied, the component defaults to rendering with a single mock data series. Altering this setting changes the datasets represented on the chart.
• Default Value: Empty Array ([])

How It Works

The GraphElement utilizes the the charting engine library to render responsive charts. It contains a renderChart() function that dynamically decides which type of chart to display based on the graphType setting. Additionally, it includes a nested renderSeries() function that generates the appropriate chart elements (Lines, Bars, Areas) based on the selected graph type and the number of provided workflowIds.

The chart is responsive, adjusting to the size of its container, and utilizes mock data for display purposes. This mock data consists of hard-coded values organized by month, but this would ideally be replaced with dynamic data pulled from user-defined workflows.

Use Cases & Examples

Use Case 1: Sales Performance Monitoring

Business Context: A retail company wants to visualize its monthly sales performance across different product categories. By using the GraphElement, they can showcase the sales trends to identify high and low performers.

Use Case 2: Website Traffic Analysis

Business Context: A digital marketing team needs to chart website traffic data to understand visitor patterns over time. The GraphElement allows them to compare various traffic sources visually.

Use Case 3: Resource Utilization Reporting

Business Context: An IT department wants to track resource usage (CPU, memory, etc.) across multiple servers. The component helps visualize these metrics for easier identification of usage patterns.

Detailed Example Configuration

Scenario: Sales Performance Monitoring

To visualize sales data for a retail company that tracks sales across three categories: Electronics, Clothing, and Groceries, the staff can configure the GraphElement as follows:

const element = {
    label: 'Monthly Sales Performance',
    config: {
        graphType: 'bar',
        style: { backgroundColor: '#f9fafb' }
    },
    workflowIds: ['workflow_electronics', 'workflow_clothing', 'workflow_groceries']
};

In this configuration:

• label is set to "Monthly Sales Performance" for clarity.
• graphType is set to "bar" for better comparison of sales figures.
• style is specified to create a light background for aesthetic consistency.
• workflowIds include the identifiers for each product category's dataset to ensure all relevant sales data is represented.

This configuration would allow the sales team to view a sharp, comparative bar chart displaying their sales performance across key categories, facilitating more informed decision-making.