Scorecard
The Scorecard Grid component extends the functionality of a standard Data Grid by allowing data to be displayed in a hierarchical format. It also provides alerting capabilities, enabling conditional formatting and highlighting based on defined thresholds or ranges.
This makes the Scorecard Grid ideal for scenarios where hierarchy visualization and alert-driven insights are critical.
Best Situations to Use Scorecard Grid
Use a Scorecard Grid when you need to:
Display data in numerical format within a structured grid.
Configure and display alerts (e.g., thresholds, ranges, KPIs).
Present data in hierarchies (e.g., Country → State → City).
Enable comparisons between actual vs target values.
Support both single-level and multi-level hierarchical views.
Variations
The Scorecard Grid supports two key variations:
Compare: Define a Compare Value to trigger alerts. Data is evaluated against the set value, and alerts display accordingly. Example:
< 50% = Red, 50% = Yellow, > 50% = Green.Range: Configure alerts based on value ranges. Example:
0–40% = Red, 41–50% = Yellow, 51–59% = Blue, 60–69% = Green.
Properties of the Scorecard Grid
General
Component Name: Unique identifier for the component.
Left / Top: Defines horizontal and vertical placement.
Height / Width: Sets dimensions of the grid.
Initial Visibility: Controls visibility on first load.
Max Button: Expand the grid to full screen.
Fit Columns: Auto-adjusts column widths.
Hierarchy Level: Choose between Multiple or Single hierarchy views.
Tree Field: Define the field used to structure the hierarchical tree view.
Background
Gradient / Gradient Rotation / Opacity: Customize background effects.
Border / Border Color / Border Radius: Apply borders and rounded corners.
Shadow / Shadow Color / Shadow Transparency: Add depth effects.
💡 Tip: Use gradient and shadow sparingly to keep hierarchy trees readable.
Title
Show Title, Title Box, Title Box Color: Manage visibility and styling.
Title Bar Height: Adjust the title bar.
Description: Add contextual information.
Font (Color, Size, Style, Weight, Family): Style the title text.
Align / Text Decoration: Adjust formatting and alignment.
Show Dataset Description: Display dataset metadata.
Subtitle
Show Sub Title: Toggle subtitle visibility.
Description: Add supporting text.
Font (Color, Size, Style, Weight, Family): Customize typography.
Align / Text Decoration: Configure alignment and emphasis.
Header Style
Header Text Color / Background Color: Style headers.
Font (Size, Style, Weight, Family): Customize typography.
Use Field Color: Apply field-based colors.
Text Decoration: Add underline or other formatting.
Row Style
Font (Color, Size, Style, Weight, Family): Customize row text.
Text Decoration: Apply underline, overline, or strikethrough.
Text Wrap: Enable wrapping for long values.
Row Height: Adjust row height for readability.
Styles
Roll Over Color: Highlight row when hovered.
Selection Color: Indicate selected rows.
Horizontal & Vertical Grid Lines: Toggle and style grid lines.
Grid Colors: Apply colors for rows and alternate rows.
Export Options
Enable Context Menu: Right-click to open export menu.
Supported Formats: Excel (.xlsx), CSV (.csv), JPEG (.jpg), PNG (.png), PPT (.pptx), PDF (.pdf).
Show Print: Print directly.
Export File Name / Heading / Sub Heading: Customize exports.
Global Export Type: Define default format (Screenshot, Tabular).
Dataset Properties (Property Tab for Dataset Pallet)
Hierarchy Configuration:
Example: Set Country as Parent, and State/City as Child hierarchy types.
Numerical Columns:
Configure numeric fields (e.g., Population) for alerts and thresholds.
Advanced Usage
Variants: Scorecard grids can be customized by enabling Compare or Range-based alerts.
Dataset Configurations: Ensure Column Type is set to Numeric for fields responsive to Indicator tab configurations.
Alerts in Scorecards: Refer to the Alerts in Grids configuration guide to insert and customize alerts.