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

fardin-developer · 2025-04-06T20:09:05Z

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

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Incorrect Boolean Type Declaration ▹ view	✅ Fix detected

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/sharedControls.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/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.

Feedback and Support

Tell us what you think of Korbit

Schedule a call with our team

Email us @ support@korbit.ai

github-actions · 2025-04-07T15:29:21Z

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

github-actions · 2025-04-07T15:38:34Z

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

Antonio-RiveroMartnez · 2025-04-07T15:31:51Z

Would it be better to use the theme.typography.sizes?

Antonio-RiveroMartnez · 2025-04-07T15:33:10Z

Should be weird if existing charts start showing the metric all of the sudden, wouldn't be better to default to false?

+1 for this. It should be either false by default (preferable I guess? and low effort solution) or we need a migration that sets that to false in existing charts

Should be weird if existing charts start showing the metric all of the sudden, wouldn't be better to default to false?

Fixed

Antonio-RiveroMartnez · 2025-04-07T15:34:54Z

Same comment about default from above

Changed to false

Antonio-RiveroMartnez · 2025-04-07T15:38:56Z

Curious what's the header here? the big number? and probably we could use the same sizes as the header or subheader?

Yes, the header font size is used for displaying the big number. I’ve unified the font sizes for both the metric name and subheader (comparison) into a single array:
const sharedFontSizes = [16, 20, 26, 32, 40];

Antonio-RiveroMartnez · 2025-04-07T15:39:59Z

Not fault of this PR but we could DRY these utils a bit since all these methods are pretty much the same but reading from different arrays: metricNameFontSizes, headerFontSizes etc.

Thank you, I've DRYed it up, let me know if it looks good!

Antonio-RiveroMartnez · 2025-04-07T15:41:40Z

Could we DRY this to render any info? because this is the same as how you're rendering kickerFontSize

Yup, I DRY’d it into a renderWithFontSize(rendererFn, fontSize) helper method that calculates the height based on the font size and optional trendline, and renders the desired content using the passed function.

kgabryje · 2025-04-07T15:54:28Z

I found 2 issues in BigNumber chart:

We display the "not pretty" metric name instead of label
I don't see an option to disable displaying metric name
It appeared on an existing chart - the existing charts should remain unchanged

kgabryje · 2025-04-07T15:55:41Z

Do we want this feature in Big Number with Trendline as well? I think the feature wasn't implemented there

sadpandajoe · 2025-04-07T17:26:46Z

@kasiazjc to review ui changes.

fardin-developer · 2025-04-10T05:12:20Z

Do we want this feature in Big Number with Trendline as well? I think the feature wasn't implemented there

Thank you @kgabryje. I have added metric name for Big Number with Trendline as well.

…gNumberWithTrendline

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

Created a new PR
#33099

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

…#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 6, 2025

github-actions Bot added plugins dependencies:npm labels Apr 6, 2025

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

korbit-ai Bot reviewed Apr 6, 2025

View reviewed changes

Comment thread superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts Outdated

geido added hold! On hold preset:bounty Issues that have been selected by Preset and have a bounty attached. labels Apr 7, 2025

kgabryje added the testenv-up label Apr 7, 2025

Antonio-RiveroMartnez reviewed Apr 7, 2025

View reviewed changes

Fardin Mustaque added 5 commits April 10, 2025 21:53

add option to show metric name in Big Number chart types

70af6f8

correct boolean type for showMetricName

5efe5d0

refactor: DRY metric rendering, set initial show_metric_name to false

1828905

Refactor BigNumberViz for DRY text rendering and add metricName to Bi…

c8a89e5

…gNumberWithTrendline

rebase and conflict fix

43bb4a1

fardin-developer force-pushed the show-metric-big-number branch from 364b15b to 43bb4a1 Compare April 11, 2025 05:29

fix: remove trailing whitespace and lock files

57a4ec3

pull-request-size Bot added size/XXL and removed size/L labels Apr 11, 2025

github-actions Bot added the doc Namespace | Anything related to documentation label Apr 11, 2025

lock files removed

d6edc2f

fardin-developer closed this Apr 11, 2025

Antonio-RiveroMartnez pushed a commit that referenced this pull request May 7, 2025

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

a928f8c

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

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>

Conversation

fardin-developer commented Apr 6, 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

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Interacting with Korbit

Customizing Korbit

Feedback and Support

Uh oh!

Uh oh!

github-actions Bot commented Apr 7, 2025

Uh oh!

github-actions Bot commented Apr 7, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kgabryje commented Apr 7, 2025

Uh oh!

kgabryje commented Apr 7, 2025

Uh oh!

sadpandajoe commented Apr 7, 2025

Uh oh!

fardin-developer commented Apr 10, 2025

Uh oh!

fardin-developer commented Apr 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

korbit-ai Bot left a comment •

edited

Loading