5 min readUpdated Mar 2, 2026

StatCardElement Documentation

Purpose

The StatCardElement is a user interface component designed for displaying statistical data in a visually appealing manner on the Vantage analytics platform. It is particularly useful for showing key performance indicators (KPIs), trends, and comparisons that can be adjusted dynamically based on user input or workflow configurations. The component enhances the readability of data insights, integrating with various workflows to provide real-time feedback and metrics.

Settings

The StatCardElement comes equipped with several configurable settings that dictate its behavior and appearance. Below is a comprehensive explanation of each setting:

1. config.icon

2. config.showIcon

3. config.trendValue

4. config.comparisonWorkflowId

5. config.comparisonLabel

6. config.trendPositive

7. config.positiveColor

8. config.negativeColor

9. config.style

How It Works

The StatCardElement fetches its configuration from the element prop which contains settings to modify its display and functionality. The workflows prop is used to find a relevant workflow based on a specified workflowId, which can be significant for pulling in additional data such as workflow titles and comparison metrics.

On initialization, the component executes the following logic:

  1. It identifies if an icon should be shown based on config.showIcon.
  2. It generates a main statistical value (valueDisplay) that it mocks for demonstration purposes.
  3. If comparisonWorkflowId is specified, it computes the comparison value and calculates the percentage difference, determining the appropriate trend direction and color.
  4. If not in comparison mode, it defaults to the manual settings provided by the user for trend display.
  5. Finally, it renders the component, displaying all of the configured data prominently.

Use Cases & Examples

Use Cases

  1. KPI Dashboard for Sales Performance: A company may utilize the StatCardElement in a sales dashboard to configure cards that show monthly sales performance against targets, visually indicating progress and trend with corresponding arrows and colors.

  2. Website Analytics Reporting: An analytics team might deploy the component to visualize web traffic stats, such as user engagement growth, by comparing current daily active users against the previous day, utilizing trend indicators to provide quick insights.

  3. Financial Report Monitoring: Financial teams could leverage the component for displaying quarterly revenue growth trends, allowing comparison of the current quarter's revenue against the previous quarter.

Example Configuration

To illustrate a specific use case, consider a marketing dashboard that needs to visualize monthly customer acquisition.

Configuration Data

javascript
const statCardConfig = {
    element: {
        label: "Monthly Customer Acquisition",
        workflowId: "workflow123",
        config: {
            icon: "users",
            showIcon: true,
            trendValue: "+25%",
            comparisonWorkflowId: "workflow124",
            comparisonLabel: "versus last month",
            trendPositive: true,
            positiveColor: "#16a34a",
            negativeColor: "#dc2626",
            style: { backgroundColor: "#f0f4ff" }
        }
    },
    workflows: [
        { id: "workflow123", title: "Current Month Statistics" },
        { id: "workflow124", title: "Previous Month Statistics" }
    ]
}

In this example:

This extensive configuration makes the StatCardElement a versatile tool for displaying critical business metrics effectively.