Big Number with Trendline improvements

[richardfogaca]

BigNumberWithTrendline Improvements

Contribution Summary

We have enhanced the BigNumberWithTrendline chart, it may be worth considering the creation of a new chart type called "BigNumberDynamic". Here are the new features:

1. Improved Context: By adding top headers and prefixes, users can now provide better context for their metrics.
2. Flexible Comparison Display: The new calculation types allow users to choose the most appropriate way to display comparisons.
3. Dynamic Content: The variable calculation feature enables dynamic content in headers and subheaders, making visualizations more informative.

What We Added

We enhanced the BigNumberWithTrendline visualization with several practical features:

1. Top Header and Prefix

• Added a dedicated "Top Header" field above the main number
• Added a "Prefix" field that appears directly before the number
• Both fields help provide essential context for the displayed metrics

Screenshot

2. Calculation Options

• Added three calculation types for comparisons:
  • Actual Values: Shows the raw comparison value
  • Difference: Shows the absolute difference between values
  • Percentage Change: Shows the percentage change
• Added dedicated formatting options for comparison values

Screenshot

Implementation Notes

Understanding the Relationship Between Comparison Types and COMPARISON PERIOD LAG

The BigNumberWithTrendline visualization uses two key settings that work together to show comparisons:

1. Comparison Type: Determines how to calculate and display the comparison
2. COMPARISON PERIOD LAG: Determines which historical data point to compare against

These settings work as follows:

• Actual Values: Shows the raw value from the comparison period (e.g., if current value is 100 and comparison period value is 80, it will display "80").
• Difference: Shows the absolute difference between the current value and the comparison period value (e.g., if current value is 100 and comparison period value is 80, it will display "+20").
• Percentage Change: Shows the percentage change between the current value and the comparison period value (e.g., if current value is 100 and comparison period value is 80, it will display "+25%").

How COMPARISON PERIOD LAG Works

The "COMPARISON PERIOD LAG" setting can sometimes be misunderstood. Here's what you need to know:

The comparison always involves exactly two values, regardless of the lag number:

1. The current value (most recent data point)
2. One historical value (determined by the lag value)

For example, with a time series of [80, 85, 90, 95, 100] where 100 is the most recent value:

COMPARISON PERIOD LAG	Current Value	Historical Value Used	What It Means
1	100	95	Compare with 1 period ago
2	100	90	Compare with 2 periods ago
3	100	85	Compare with 3 periods ago

Common Misconception: Setting the lag to 2 or 3 does NOT mean that 3 or 4 values are being compared or averaged. It simply means looking back 2 or 3 periods for the comparison value.

The comparison is always between exactly two points - the current value and one historical value - regardless of which comparison type you select.

3. Dynamic Variables

1. Added variable calculation options (first/last value, sum, average, min, max)
   • Screenshot:

2. Added support for placeholders in header and subheader text
   • Example: "Last Week average {{ Weekly Admissions }}" will display "Last Week average 250" when the average is 250

Technical Details

The implementation includes:

• New UI Elements: Added topheader and prefix text fields with responsive font sizing that adjusts based on container dimensions. The rendering logic maintains proper spacing and alignment with the main number.

• Enhanced Data Processing: Modified the transformProps function to handle three different calculation types (values, difference, percentage) with appropriate formatting for each. Added logic to extract and calculate values based on the selected variable calculation method (first, last, sum, average, min, max).

• New Control Panel Options: Added four new control sections:

  • Topheader: Text input for the header above the main number
  • Prefix: Text input that appears before the main number
  • Calculation Type: Dropdown with three options (Values, Difference, Percentage)
  • Variable Calculation: Dropdown with six options for dynamic content calculation

• Placeholder Replacement Logic: Implemented a replacePlaceholderWithValue function that scans header and subheader text for patterns like {{ metric_name }}, calculates the appropriate value based on the selected calculation method, and replaces the placeholder with the formatted value.

Why This Matters

These improvements solve real problems:

1. Better Context: The top header and prefix provide crucial context for the numbers being displayed.

2. Flexible Comparisons: Users can now choose how to display comparisons based on what makes sense for their data.

3. Dynamic Content: Headers and subheaders can now include calculated values from the dataset, making visualizations more informative and reducing the need for multiple charts.

4. Clearer Data Stories: These features help users create more informative visualizations without cluttering dashboards with additional charts.

With these improvements, the BigNumberWithTrendline visualization becomes significantly more useful for displaying KPIs and metrics that require context and comparison.

Contribution

New BigNumber Feature

The BigNumberWithTrendline visualization has been enhanced with a powerful new feature that allows for more flexible and informative data displays. This contribution addresses several key needs:

1. Improved Context: By adding top headers and prefixes, users can now provide better context for their metrics.
2. Flexible Comparison Display: The new calculation types allow users to choose the most appropriate way to display comparisons.
3. Dynamic Content: The variable calculation feature enables dynamic content in headers and subheaders, making visualizations more informative.

Implementation Notes

When using the "COMPARISON PERIOD LAG" option with different comparison types:

• Actual Values: Shows the raw value from the comparison period (e.g., if current value is 100 and comparison period value is 80, it will display "80").
• Difference: Shows the absolute difference between the current value and the comparison period value (e.g., if current value is 100 and comparison period value is 80, it will display "+20").
• Percentage Change: Shows the percentage change between the current value and the comparison period value (e.g., if current value is 100 and comparison period value is 80, it will display "+25%").

The comparison type selection determines how the comparison value is calculated and displayed, while the "COMPARISON PERIOD LAG" option determines which historical data point is used for the comparison. These options work together to provide a complete picture of how metrics are changing over time.

Usage Recommendations

For the most effective visualizations:

1. Use "Actual Values" when the raw numbers are meaningful to your audience.
2. Use "Difference" when the absolute change is most important.
3. Use "Percentage Change" when the relative change is most important.

The dynamic variable feature works best when you need to incorporate calculated values from your dataset into your headers or subheaders, such as showing averages, totals, or extremes alongside your main metric.

Future Development

Given the significant enhancements to the BigNumberWithTrendline visualization, it may be worth considering the creation of a new chart type called "BigNumberDynamic" that specifically highlights these advanced features:

• Dynamic variable calculation and placeholder replacement
• Flexible comparison display options
• Enhanced header and prefix capabilities

This would make it easier for users to discover and utilize these powerful features while maintaining backward compatibility with the original BigNumberWithTrendline chart.

[richardfogaca]

Hi,

For those interested in testing the improvement, there's a branch where you can install and verify here

I'm also attaching a chart I created. Please let me know if you find this feature useful for superset :)

big-number-dynamic.zip

[rusackas]

@eschutho @Antonio-RiveroMartnez @kgabryje @kasiazjc have worked on similar things lately, so I'll ping them here to get their feelings.