ScoreHeaderElement Documentation

Overview

The ScoreHeaderElement is a feature designed for the Vantage analytics and data platform. Its primary purpose is to display a score header that provides a quick visual summary of a specific metric or KPI (Key Performance Indicator). The component features a title, a subtitle, and a score along with a maximum score that allows users to understand performance at a glance, highlighting areas needing attention through color coding.

Settings

The ScoreHeaderElement receives various settings as part of its configuration, influencing its appearance and behavior. Below are the detailed explanations of each setting:

1. label

• Input Type: String
• Description: This setting allows users to specify the main title displayed in the component. If not provided, it defaults to "Revenue Growth". Changing this value alters the prominent heading in the displayed score header, allowing it to reflect the appropriate metric title.
• Default Value: "Revenue Growth"

2. subtitle

• Input Type: String
• Description: The subtitle provides additional context to the displayed score. It is customizable by the user to convey brief information about the metric being analyzed. If left empty, it defaults to "Performance Overview". Modifying this will change the secondary text that may aid in understanding the primary metric.
• Default Value: "Performance Overview"

3. maxScore

• Input Type: Numeric
• Description: This setting denotes the maximum possible score that can be displayed alongside the metric's actual score. If not explicitly defined, it defaults to 100. Adjusting this will modify the denominator in the score display, thus affecting the visual indication of performance in relation to the set maximum.
• Default Value: 100

4. style

• Input Type: Object (CSS styles)
• Description: The style setting allows for custom CSS styling to be applied to the overall component, enabling users to change the layout, margins, padding, and other stylistic elements to fit their design aesthetics. This property accepts a JavaScript object with valid CSS attributes.
• Default Value: {} (No custom styles)

How It Works

The ScoreHeaderElement component operates by taking an element object which contains configuration details and a workflows array for context.

1. Configuration Extraction: The config property is accessed from the element to configure the title, subtitle, maximum score, and styling.

2. Score Calculation: It attempts to find the appropriate workflow from the workflows array using the workflowId present within the element. If a corresponding workflow exists, a mock score of 82 is assigned; otherwise, the score defaults to 0.

3. Color Logic: The color of the displayed score is determined by applying a function (getScoreColor) which takes the score as an argument. This function assigns:

   • Yellow for scores >= 80
   • Blue for scores >= 50
   • Red for scores < 50

4. Rendering: Finally, the component is rendered, displaying the title, subtitle, and score within a flexible and responsive layout.

Use Cases & Examples

Use Case 1: Executive Dashboards

A business might use ScoreHeaderElement as part of an executive dashboard to visually represent revenue growth metrics. This would help executives quickly assess performance at a glance.

Use Case 2: Sales Performance Tracking

In a sales department, the component could be used to track monthly sales performance against set targets, providing team members with quick insights into whether they are meeting, exceeding, or falling short of goals.

Configuration Example

Scenario

For a sales performance dashboard, suppose a company wants to track monthly revenue. They wish to highlight performance levels based on a maximum score of $500,000.

Configuration Data

const elementConfig = {
    label: "Monthly Revenue",
    subtitle: "Sales Performance Overview",
    maxScore: 500000,
    style: {
        backgroundColor: '#f0f4f8',
        border: '1px solid #ccc',
        borderRadius: '8px'
    }
};

const workflowsArray = [
    { id: 'workflow1', /* additional workflow data */ }
];

<ScoreHeaderElement element={{ config: elementConfig }} workflows={workflowsArray} />;

In this example:

• The title "Monthly Revenue" clearly defines the focus of the metric.
• The subtitle provides additional context for users.
• A maximum score of $500,000 gives the detailed performance metric a clear benchmark.
• Custom styles ensure the component integrates seamlessly within the overall dashboard design.