feat: Improves waterfall chart #33146

anantaoutlook · 2025-04-16T07:59:34Z

SUMMARY

This PR includes the following improvements:

1.) Horizontal waterfall in addition to vertical.

2.) Axis label fixes to word-wrap longer labels instead of hiding them. This is extremely important for readability/usability.
For example. Prior to these fixes, roughly half of the following labels in this chart were hidden:

3.) Sorting of Waterfall: It is now possible to sort the waterfall by a field other than the field indicated in the waterfall column headers. Again, extremely important. As an example, in the following chart, we are bridging from gross revenue to Profit. It's vital that these grouping appear in the correct order:

4.) Added option to use first value as subtotal, and bold first value as subtotal. These are important optional settings for the waterfall. In the example, these allow the Gross Revenue bar to be presented as a subtotal (full bar and grey), and the label for Gross Revenue is bold.
Before:

After:

5.) Cross-filtering is now feasible for the waterfall chart.

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
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

Review by Korbit AI

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

Category	Issue	Status
	Deeply nested complex function ▹ view	✅ Fix detected
	Scattered series transformation logic ▹ view	✅ Fix detected
	Suspicious file suffix in types import ▹ view	✅ Fix detected
	Inaccurate Text Wrapping Calculation ▹ view	✅ Fix detected
	Order Direction Control Not Dependent on Column Selection ▹ view	✅ Fix detected
	Remove or implement commented validators ▹ view	✅ Fix detected
	Type inconsistency in default value ▹ view	✅ Fix detected
	Inadequate Error Handling for Invalid Label Distance ▹ view	✅ Fix detected
	Inconsistent Mixed-Type Data Sorting ▹ view	✅ Fix detected
	Missing documentation for complex click handler ▹ view

Files scanned

File Path	Reviewed
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx	✅

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

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

Loving Korbit!? Share us on LinkedIn Reddit and X

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx

rusackas · 2025-04-16T16:57:07Z

Can you add some details to the Description so we know the intent of the change? Thanks!

anantaoutlook · 2025-04-21T11:14:14Z

Can you add some details to the Description so we know the intent of the change? Thanks!

Details are attached. Please let me know if you need more info.
waterfall-changes doc.pdf

rea725 · 2025-04-24T12:13:28Z

The work performed on Superset by @anantaoutlook in this PR includes the following improvements:

1.) Horizontal waterfall in addition to vertical.

2.) Axis label fixes to word-wrap longer labels instead of hiding them. This is extremely important for readability/usability.
For example. Prior to these fixes, roughly half of the following labels in this chart were hidden:

3.) Sorting of Waterfall: It is now possible to sort the waterfall by a field other than the field indicated in the waterfall column headers. Again, extremely important. As an example, in the following chart, we are bridging from gross revenue to Profit. It's vital that these grouping appear in the correct order:

4.) Added option to use first value as subtotal, and bold first value as subtotal. These are important optional settings for the waterfall. In the example, these allow the Gross Revenue bar to be presented as a subtotal (full bar and grey), and the label for Gross Revenue is bold.
Before:

After:

5.) Cross-filtering is now feasible for the waterfall chart.

michael-s-molina · 2025-04-24T15:08:42Z

Thanks @anantaoutlook @rea725 for the great improvements! I updated the PR description with @rea725's comment.

2.) Axis label fixes to word-wrap longer labels instead of hiding them.

ECharts automatically calculates what labels will be displayed to avoid label overlaps when the number of bars is high. I think the solution here would be to provide a checkbox to show all labels (disabled by default). The same feature is currently being discussed in #33191 so please check the comments of that PR.

4.) Added option to use first value as subtotal, and bold first value as subtotal.

Can we assume that if the first value is used as a subtotal, it's always displayed with bold? It's good to avoid additional controls if possible.

michael-s-molina · 2025-04-24T15:10:23Z

@anantaoutlook Could you also fill the Testing Instructions part of the PR description?

michael-s-molina

First-pass comments. Great work!

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx

michael-s-molina

@anantaoutlook Could you make sure all labels of all controls and select values follow the sentence case which capitalizes only the first letter of the first word in a sentence?

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx

michael-s-molina · 2025-05-02T18:54:01Z

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx

+      }
+
+      // get the width of xAxis to calculate the maxCharsPerLine
+      const getAxisRange = (options: EChartsCoreOption) => {


I'm still trying to understand why all these calculations are needed given that ECharts makes most of them already. There is even an option to force all labels to be rendered. What use case is not covered by ECharts? Can you create an example using their code editor?

For example, using a combination of interval, overflow, and width, I can have something like:

axisLabel.interval = 0; axisLabel.overflow = 'break'; axisLabel.width = 25;

Here's a live editor where you can play with the settings.

I'm still trying to understand why all these calculations are needed given that ECharts makes most of them already. There is even an option to force all labels to be rendered. What use case is not covered by ECharts? Can you create an example using their code editor?

Here the label break arbitrarily on any point
https://echarts.apache.org/examples/en/editor.html?c=bar-waterfall2&code=PYBwLglsB2AEC[…]JlyPLW3bNv630Olm2jzlmrnpc52jfR47A2oI5jsCvDp2rygkHmwM3qiNEAA
but the current change supports breaking at the end of word

@villebro As one of maintainers of ECharts, are we missing some configuration here or ECharts doesn't support this? I'm just worried that this problem affects all charts and it's not an exclusivity of the Waterfall.

I fixed this issue now, used a combination of overflow, width and interval

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx

rusackas · 2025-05-14T17:40:39Z

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx

@@ -16,16 +16,46 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+import React from 'react';


You shoudn't need a React import... there are two linting errors caused by this.

rusackas · 2025-05-14T17:40:52Z

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx

@@ -25,6 +25,7 @@ import {
  formatSelectOptions,
  sharedControls,
 } from '@superset-ui/chart-controls';
+import React from 'react';


Here's the other one. You shouldn't need it.

michael-s-molina

Thanks for the changes @anantaoutlook. Second-pass review below.

michael-s-molina · 2025-05-15T14:39:38Z

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx

+          },
+        ],
+        [
+          {


I noticed that when interacting with the bold control, the x-axis labels are getting misaligned.

michael-s-molina · 2025-05-15T14:45:46Z

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx

+        [
+          {
+            name: 'sort_x_axis',
+            config: {
+              type: 'SelectControl',
+              label: t('Sort x axis'),
+              default: 'none',
+              choices: [
+                ['none', t('None')],
+                ['asc', t('Ascending')],
+                ['desc', t('Descending')],
+              ],
+              renderTrigger: true,
+              description: t('Sort X axis in ascending or descending order'),
+            },
+          },
+        ],


Isn't this the same as Order direction?

Suggested change

[

{

name: 'sort_x_axis',

config: {

type: 'SelectControl',

label: t('Sort x axis'),

default: 'none',

choices: [

['none', t('None')],

['asc', t('Ascending')],

['desc', t('Descending')],

],

renderTrigger: true,

description: t('Sort X axis in ascending or descending order'),

},

},

],

michael-s-molina · 2025-05-15T15:03:00Z

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts

@@ -28,6 +28,25 @@ export default function buildQuery(formData: QueryFormData) {
    ...ensureIsArray(x_axis || granularity_sqla),
    ...ensureIsArray(groupby),
  ];
+
+  if (columns.indexOf(formData.seriesOrderByColumn) === -1) {


I noticed that you're adding the Order series by column to the GROUP BY clause which will produce incorrect results. Take this chart as an example where we have year broke down by product_line.

If we set Order series by column to status the chart will be further broke down splitting Classic Cars into multiple values.

This control should not affect the original breakdown. If your intention is to allow more than one breakdown, we would need to change the Breakdown control to support multiple values.

This one I need some time to figure out (edited)

improve waterfall

fa81979

pull-request-size bot added the size/XL label Apr 16, 2025

github-actions bot added plugins and removed size/XL labels Apr 16, 2025

korbit-ai bot reviewed Apr 16, 2025

View reviewed changes

fix: fix imports

a295aea

pull-request-size bot added the size/XL label Apr 16, 2025

rusackas requested a review from michael-s-molina April 16, 2025 17:18

prettier fix

de789d0

michael-s-molina changed the title ~~improve waterfall~~ feat: Improves waterfall chart Apr 24, 2025

michael-s-molina requested changes Apr 24, 2025

View reviewed changes

fix review comments

fd44030

michael-s-molina reviewed May 2, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx Outdated Show resolved Hide resolved

michael-s-molina reviewed May 2, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx Outdated Show resolved Hide resolved

michael-s-molina reviewed May 2, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx Outdated Show resolved Hide resolved

michael-s-molina reviewed May 2, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx Outdated Show resolved Hide resolved

anantaoutlook added 4 commits May 6, 2025 18:54

fix review comments

f3f65d8

remove commented code

60e4a33

fix letter case

1ea4909

fix typo

76ac476

rusackas reviewed May 14, 2025

View reviewed changes

michael-s-molina reviewed May 15, 2025

View reviewed changes

fix review comments

4e75974

pull-request-size bot added size/L and removed size/XL labels May 16, 2025

michael-s-molina requested review from justinpark and kgabryje May 16, 2025 13:13

fix prettier

3c52cb1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Improves waterfall chart #33146

feat: Improves waterfall chart #33146

anantaoutlook commented Apr 16, 2025 •

edited by michael-s-molina

Loading

korbit-ai bot left a comment •

edited

Loading

rusackas commented Apr 16, 2025

anantaoutlook commented Apr 21, 2025 •

edited

Loading

rea725 commented Apr 24, 2025

michael-s-molina commented Apr 24, 2025

michael-s-molina commented Apr 24, 2025

michael-s-molina left a comment

michael-s-molina left a comment

michael-s-molina May 2, 2025

michael-s-molina May 2, 2025 •

edited

Loading

anantaoutlook May 7, 2025

michael-s-molina May 15, 2025

anantaoutlook May 16, 2025

rusackas May 14, 2025

anantaoutlook May 16, 2025

rusackas May 14, 2025

anantaoutlook May 16, 2025

michael-s-molina left a comment

michael-s-molina May 15, 2025

anantaoutlook May 16, 2025

michael-s-molina May 15, 2025

anantaoutlook May 16, 2025

michael-s-molina May 15, 2025

anantaoutlook May 16, 2025

feat: Improves waterfall chart #33146

Are you sure you want to change the base?

feat: Improves waterfall chart #33146

Conversation

anantaoutlook commented Apr 16, 2025 • edited by michael-s-molina Loading

SUMMARY

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

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.

rusackas commented Apr 16, 2025

anantaoutlook commented Apr 21, 2025 • edited Loading

rea725 commented Apr 24, 2025

michael-s-molina commented Apr 24, 2025

michael-s-molina commented Apr 24, 2025

michael-s-molina left a comment

Choose a reason for hiding this comment

michael-s-molina left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michael-s-molina May 2, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michael-s-molina left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anantaoutlook commented Apr 16, 2025 •

edited by michael-s-molina

Loading

korbit-ai bot left a comment •

edited

Loading

anantaoutlook commented Apr 21, 2025 •

edited

Loading

michael-s-molina May 2, 2025 •

edited

Loading