feat: add metric name for big number chart types #33013 by fardin-developer · Pull Request #33099 · apache/superset

fardin-developer · 2025-04-11T14:43:50Z

SUMMARY

This PR introduces support for displaying the Metric name in Big Number chart types, including Big Number and Big Number with Time Comparison. The metric name appears above the main number, styled consistently with existing elements, and includes customization options in the control panel.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

CHANGES

Added metric name display to:
- Big Number
- Big Number with Time Comparison
Positioning and spacing follow existing patterns of Big Number and subtitle.
Metric name font size defaults to 24px and scales responsively with the chart.
Added toggle in Customize section to show/hide metric name.
Added input to control metric name font size (similar to Subheader Font Size).

BEFORE/AFTER SCREENSHOTS

Before

After

Screen.Recording.2025-04-07.at.12.32.34.AM.mov

ADDITIONAL NOTES

Ensured the feature behaves correctly across chart types and screen sizes.
Maintained dynamic scaling and visual hierarchy.
Verified with RTL support and Storybook examples.

CHECKLIST

Displayed metric name above the number for all Big Number chart types.
Used responsive font scaling with base size 24px.
Added toggle and font size input to Customize controls.
Verified RTL compatibility.

korbit-ai

I've completed my review and didn't find any issues.

Files scanned

File Path	Reviewed
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/utils.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/sharedControls.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.

You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.

Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.

On any given comment that Korbit raises on your pull request, you can have a discussion with Korbit by replying to the comment.

Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

Check out our docs on how you can make Korbit work best for you and your team.

Customize Korbit for your organization through the Korbit Console.

Current Korbit Configuration

General Settings

Setting Value

Review Schedule Automatic excluding drafts

Max Issue Count 10

Automatic PR Descriptions ❌

Issue Categories

Category Enabled

Documentation ✅

Logging ✅

Error Handling ✅

Readability ✅

Design ✅

Performance ✅

Security ✅

Functionality ✅

Feedback and Support

Tell us what you think of Korbit

Schedule a call with our team

Email us @ support@korbit.ai

Note

Korbit Pro is free for open source projects 🎉

Looking to add Korbit to your team? Get started with a free 2 week trial here

github-actions · 2025-04-14T11:49:06Z

@geido Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-04-14T11:57:58Z

@geido Ephemeral environment spinning up at http://44.248.49.123:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

michael-s-molina · 2025-04-14T17:24:17Z

@fardin-developer Is it possible to hide the metric name? There are cases where they are really extensive or the chart's title is pretty clear.

@rusackas also asked how does it handle really long metric names.

fardin-developer · 2025-04-14T18:22:20Z

@fardin-developer Is it possible to hide the metric name? There are cases where they are really extensive or the chart's title is pretty clear.

@rusackas also asked how does it handle really long metric names.

Thanks for your feedback. I have added a checkbox to show metric name, by default it will be hidden.

geido · 2025-04-15T11:42:49Z

I think we have lost the fix that supported showing friendly label names at the dataset level.

github-actions · 2025-04-16T14:48:27Z

@geido Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

Antonio-RiveroMartnez · 2025-04-16T14:57:19Z

Could we create a control we can reuse instead of defining this on all 3 charts every time? something like how you use subtitleControl for example?

resolved it.

Antonio-RiveroMartnez · 2025-04-16T14:57:52Z

Same with this block, could this be some sort of util we can reuse in the 3 chart types?

Thanks for the update! I’ve moved the originalLabel logic into a separate getOriginalLabel function and updated it to address issues where the metric key was incorrectly displayed in some cases. The new implementation now works as expected.

…e, fix spacing between name, big number and subtitle

…th Trendline

…isibility and getOriginalLabel utility

…ol.ts

…height

… div and content height comparison to maintain consistency

github-actions · 2025-05-07T14:23:29Z

@Antonio-RiveroMartnez Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-05-07T14:33:56Z

@Antonio-RiveroMartnez Ephemeral environment spinning up at http://34.218.224.49:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

Antonio-RiveroMartnez

Tested on the ephemeral and LGTM! Thanks for taking care of this

Screen.Recording.2025-05-07.at.4.43.02.PM.mov

fardin-developer · 2025-05-07T14:54:30Z

Tested on the ephemeral and LGTM! Thanks for taking care of this

Screen.Recording.2025-05-07.at.4.43.02.PM.mov

Thank you @Antonio-RiveroMartnez .

…#33099) Co-authored-by: Fardin Mustaque <fardinmustaque@Fardins-Mac-mini.local>

…#33099) Co-authored-by: Fardin Mustaque <fardinmustaque@Fardins-Mac-mini.local> (cherry picked from commit a928f8c)

…#33099) Co-authored-by: Fardin Mustaque <fardinmustaque@Fardins-Mac-mini.local>

pull-request-size Bot added the size/L label Apr 11, 2025

github-actions Bot added the plugins label Apr 11, 2025

dosubot Bot added the viz:charts:bignumber Related to BigNumber charts label Apr 11, 2025

korbit-ai Bot reviewed Apr 11, 2025

View reviewed changes

fardin-developer mentioned this pull request Apr 11, 2025

feat: add metric name for big number chart types #33013

Closed

4 tasks

geido added the testenv-up label Apr 14, 2025

geido added the hold! On hold label Apr 14, 2025

michael-s-molina requested review from Antonio-RiveroMartnez and justinpark April 14, 2025 17:21

geido added the preset:bounty Issues that have been selected by Preset and have a bounty attached. label Apr 15, 2025

Antonio-RiveroMartnez reviewed Apr 16, 2025

View reviewed changes

Comment thread ...ntend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts Outdated

geido added testenv-up and removed testenv-up labels Apr 16, 2025

Antonio-RiveroMartnez reviewed Apr 16, 2025

View reviewed changes

kgabryje added testenv-up and removed testenv-up labels Apr 17, 2025

apache deleted a comment from github-actions Bot Apr 17, 2025

geido added testenv-up and removed testenv-up labels Apr 17, 2025

apache deleted a comment from github-actions Bot Apr 17, 2025

Fardin Mustaque and others added 17 commits May 7, 2025 19:07

add missing import, set show_metric_name to false, use theme font siz…

f36b5ed

…e, fix spacing between name, big number and subtitle

show metric name check box added for BigNumber Total and BigNumber Wi…

7415896

…th Trendline

user friendly metric name added

7554c7e

Simplify friendly label name logic

c100659

Refactor: Add reusable showMetricNameControl, metricNameFontSizeWithV…

ce4eca8

…isibility and getOriginalLabel utility

Remove unused verboseMap

12130d4

fix: reduce BigNumberVis text size, prevent overflow & DRY sharecontr…

13a7c92

…ol.ts

Revert accidental change in package-lock.json

d223d04

remove duplicate metric name check in BigNumberViz

8dcce4c

Revert font size reduction to original values

ca73dd9

console log removed

2fd88a8

Add mock for getOriginalLabel and include subheader in BigNumberViz

e68279c

preserve metric name font size when toggling visibility

0993c66

fix: maintain consistent layout for metric display

e7d3cb5

fix: maintain consistent layout for metric display

4cbc971

Fix header-line issue where top of large numbers was cut off by line-…

2bb2b7c

…height

Dynamically switch justify-content from center to flex-start based on…

588f2c3

… div and content height comparison to maintain consistency

fardin-developer force-pushed the metric-name-big-number branch from 414ca47 to 588f2c3 Compare May 7, 2025 13:54

Antonio-RiveroMartnez added testenv-up and removed testenv-up labels May 7, 2025

Antonio-RiveroMartnez approved these changes May 7, 2025

View reviewed changes

Antonio-RiveroMartnez removed the hold! On hold label May 7, 2025

Antonio-RiveroMartnez merged commit a928f8c into apache:master May 7, 2025
56 of 59 checks passed

LevisNgigi pushed a commit to LevisNgigi/superset that referenced this pull request Jun 18, 2025

feat: add metric name for big number chart types apache#33013 (apache…

ab8f3d3

…#33099) Co-authored-by: Fardin Mustaque <fardinmustaque@Fardins-Mac-mini.local>

sadpandajoe removed the testenv-up label Jun 25, 2025

qfcwell pushed a commit to qfcwell/superset that referenced this pull request May 12, 2026

feat: add metric name for big number chart types apache#33013 (apache…

12cb96b

…#33099) Co-authored-by: Fardin Mustaque <fardinmustaque@Fardins-Mac-mini.local>

Setting	Value
Review Schedule	Automatic excluding drafts
Max Issue Count	10
Automatic PR Descriptions	❌

Category	Enabled
Documentation	✅
Logging	✅
Error Handling	✅
Readability	✅
Design	✅
Performance	✅
Security	✅
Functionality	✅

Conversation

fardin-developer commented Apr 11, 2025

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

CHANGES

BEFORE/AFTER SCREENSHOTS

Before

After

ADDITIONAL NOTES

CHECKLIST

Uh oh!

korbit-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Interacting with Korbit

Customizing Korbit

Current Korbit Configuration

Feedback and Support

Looking to add Korbit to your team? Get started with a free 2 week trial here

Uh oh!

github-actions Bot commented Apr 14, 2025

Uh oh!

github-actions Bot commented Apr 14, 2025

Uh oh!

michael-s-molina commented Apr 14, 2025

Uh oh!

fardin-developer commented Apr 14, 2025

Uh oh!

geido commented Apr 15, 2025

Uh oh!

Uh oh!

github-actions Bot commented Apr 16, 2025

Uh oh!

Antonio-RiveroMartnez Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

fardin-developer Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

Antonio-RiveroMartnez Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

fardin-developer Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 7, 2025

Uh oh!

github-actions Bot commented May 7, 2025

Uh oh!

Antonio-RiveroMartnez left a comment

Choose a reason for hiding this comment

Uh oh!

fardin-developer commented May 7, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

korbit-ai Bot left a comment •

edited

Loading