feat(charts): add subtitle option and metric customization controls #32975

LevisNgigi · 2025-04-02T09:44:03Z

feat(charts): add subtitle option and metric customization controls

SUMMARY

This PR adds two key improvements to visualization controls:

Added subtitle functionality to big number charts visualizations.Moved subheader input previously in BigNumber to subtitle under customize tab.
Enhanced the explore view with controls that allow users to:
- Rename comparison metrics (main, #, and delta values) in both big number with time comparison chart and table chart.
- Toggle visibility of specific metric icon and columns
- Persist these customizations when the visualization is saved

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

metric_rename.mp4

TESTING INSTRUCTIONS

Big Number with Trendline:
- Create a new chart using the "Big Number with Trendline" visualization
- Verify the subtitle option appears in the customize section.
- Add text to the subtitle and confirm it displays correctly.
**Big Number **:
- Create a new chart using the "Big Number" visualization
- Verify the subtitle option appears in the customize section.
- Add text to the subtitle and confirm it displays correctly.
Big Number with Time Comparisons (requires CHART_PLUGINS_EXPERIMENTAL flag):
- Enable the CHART_PLUGINS_EXPERIMENTAL feature flag
- Create a chart using the "Big Number with Time Comparisons" visualization
- Verify the subtitle option appears and functions correctly
Metric Customization:
- Create a chart using "Table" and create a time comparison.
- In the explore view, locate the new controls for renaming comparison metrics
- Test renaming the main, #, and delta metrics
- Test toggling visibility of specific columns
- Save the chart and verify the customizations persist when reopened

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
[ x] Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

korbit-ai · 2025-04-02T09:44:07Z

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

korbit-ai

Review by Korbit AI

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

Category	Issue	Status
	Unexplained Magic Number in Styles ▹ view	🧠 Not in standard
	Unsafe DOM cleanup in renderSubtitle ▹ view	✅ Fix detected
	Inconsistent Debounce Delays ▹ view

Files scanned

File Path	Reviewed
superset-frontend/src/explore/components/controls/ColumnConfigControl/types.ts	✅
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/sharedControls.ts	✅
superset-frontend/plugins/plugin-chart-table/src/types.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts	✅
superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts	✅
superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts	✅
superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx	✅
superset-frontend/plugins/plugin-chart-table/src/transformProps.ts	✅
superset-frontend/plugins/plugin-chart-table/src/TableChart.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

superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx

...set-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx

+  const SubtitleText = styled.div`
+    ${({ theme }) => `
+    font-family: ${theme.typography.families.sansSerif};
+    font-weight: ${theme.typography.weights.medium};
+    text-align: center;
+    margin-top: -10px;
+    margin-bottom: ${theme.gridUnit * 4}px;
+  `}
+  `;


superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

geido

Some first-pass comments. This seems great so far!

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx

github-actions · 2025-04-08T10:38:21Z

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

github-actions · 2025-04-08T10:47:42Z

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

kgabryje · 2025-04-09T11:53:58Z

@LevisNgigi Thanks for the contribution, it's looking good!
'm not sure about is reverting to the metric name if the label is left empty and display type icon is unchecked.
Also, if we use a saved metric with a label, the metric name displayed in time comparison when display type is unchecked is the metric's name (not "user friendly") instead of the label (see COUNT(*) metric displayed as count).

1 more thing - I think that the metric item is unnecessarily indented in the Customize columns control (see on the recording).

Screen.Recording.2025-04-09.at.13.49.11.mov

kgabryje · 2025-04-09T11:55:37Z

Oh and 1 more thing, not sure if related to your PR - the changes in Customize columns applied to the columns generated by time comparison (e.g. # count__1 month ago) have no effect on the table

superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx

LevisNgigi · 2025-04-09T16:18:06Z

@LevisNgigi Thanks for the contribution, it's looking good! 'm not sure about is reverting to the metric name if the label is left empty and display type icon is unchecked. Also, if we use a saved metric with a label, the metric name displayed in time comparison when display type is unchecked is the metric's name (not "user friendly") instead of the label (see COUNT(*) metric displayed as count).

1 more thing - I think that the metric item is unnecessarily indented in the Customize columns control (see on the recording).

Screen.Recording.2025-04-09.at.13.49.11.mov

@kgabryje About the not user friendly being displayed, I fixed that in my last commit such that if label is left empty(unchecked) and no custom column name,column name remains empty(as suggested in design) instead of displaying metric name.

github-actions · 2025-04-09T18:26:49Z

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

github-actions · 2025-04-09T18:37:44Z

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

LevisNgigi and others added 10 commits December 12, 2024 18:24

(refactor)Fix saved query access for SQL Lab users

0702ac1

Merge remote-tracking branch 'upstream/master'

9125aba

Merge branch 'apache:master' into master

9de7b1b

Merge branch 'apache:master' into master

e630b87

Merge branch 'apache:master' into master

824f097

Merge branch 'apache:master' into master

5751c81

Merge branch 'apache:master' into master

fd6b083

Merge branch 'apache:master' into master

e827801

Merge branch 'apache:master' into master

c3ce0c5

Merge branch 'apache:master' into master

7731fb7

pull-request-size bot added the size/L label Apr 2, 2025

github-actions bot added api Related to the REST API plugins labels Apr 2, 2025

LevisNgigi and others added 3 commits April 2, 2025 12:54

Merge branch 'apache:master' into master

f23d780

feat:add subheaders to big number charts

6345323

feat:add subheaders to big number charts

dddd052

LevisNgigi force-pushed the add-subheaders branch from 04cbbcf to dddd052 Compare April 2, 2025 10:06

github-actions bot removed the api Related to the REST API label Apr 2, 2025

LevisNgigi added 4 commits April 2, 2025 13:51

fix:test

5a58ac0

fix:small nits

5fcee79

fix:small nits

48644d7

fix:small nits

f401002

sadpandajoe added the review:draft label Apr 2, 2025

LevisNgigi changed the title ~~feat(charts): add subheader option and metric customization controls~~ feat(charts): add subtitle option and metric customization controls Apr 4, 2025

LevisNgigi added 5 commits April 4, 2025 21:36

feat:add subtitle option to bignumber charts

c888455

feat:add subtitle option to bignumber charts

563119a

feat:add display icon functionality

da4c820

feat:add rename metric in bignumberperiodoverperiod

5f56622

fix:fix test to align with removed Main label

0f07309

pull-request-size bot added size/XXL and removed size/L labels Apr 7, 2025

fix:small nit

8157869

LevisNgigi marked this pull request as ready for review April 7, 2025 12:15

dosubot bot added viz:charts:bignumber Related to BigNumber charts viz:charts:table Related to the Table chart labels Apr 7, 2025

korbit-ai bot reviewed Apr 7, 2025

View reviewed changes

fix:small nit

14e9c01

geido reviewed Apr 8, 2025

View reviewed changes

geido added the testenv-up label Apr 8, 2025

fix:apply changes from feedback

1f72a29

kgabryje reviewed Apr 9, 2025

View reviewed changes

superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx Outdated Show resolved Hide resolved

kgabryje reviewed Apr 9, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx Outdated Show resolved Hide resolved

kgabryje reviewed Apr 9, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx Outdated Show resolved Hide resolved

kgabryje reviewed Apr 9, 2025

View reviewed changes

superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx Outdated Show resolved Hide resolved

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

LevisNgigi added 3 commits April 10, 2025 00:14

fix:apply changes from feedback

489d748

fix:remove use of prefix

5db8d28

fix:remove use of prefix

310fd80

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(charts): add subtitle option and metric customization controls #32975

feat(charts): add subtitle option and metric customization controls #32975

LevisNgigi commented Apr 2, 2025 •

edited

Loading

korbit-ai bot commented Apr 2, 2025

korbit-ai bot left a comment •

edited

Loading

This comment was marked as resolved.

geido left a comment

github-actions bot commented Apr 8, 2025

github-actions bot commented Apr 8, 2025

kgabryje commented Apr 9, 2025

kgabryje commented Apr 9, 2025

LevisNgigi commented Apr 9, 2025

github-actions bot commented Apr 9, 2025

github-actions bot commented Apr 9, 2025

feat(charts): add subtitle option and metric customization controls #32975

Are you sure you want to change the base?

feat(charts): add subtitle option and metric customization controls #32975

Conversation

LevisNgigi commented Apr 2, 2025 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

korbit-ai bot commented Apr 2, 2025

korbit-ai bot left a comment • edited Loading

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

This comment was marked as resolved.

geido left a comment

Choose a reason for hiding this comment

github-actions bot commented Apr 8, 2025

github-actions bot commented Apr 8, 2025

kgabryje commented Apr 9, 2025

kgabryje commented Apr 9, 2025

LevisNgigi commented Apr 9, 2025

github-actions bot commented Apr 9, 2025

github-actions bot commented Apr 9, 2025

LevisNgigi commented Apr 2, 2025 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading