feat(plugin-chart-echarts): Echarts Waterfall

[stephenLYZ]

SUMMARY

Waterfall charts are useful for understanding how an initial value (like net income) is affected by a series of positive and negative changes.

For example, we can see the trend of personal annual income. Here we use the year as the series.

Moreover, we can use the value in breakdowns to add additional data to the chart. It adds the contributors to increases or decreases for each series.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

1. Create a virtual dataset

Click me

SELECT * FROM 
(SELECT 'Facebook' as due_to_group, 2020 as period, 1945565 as value
UNION 
SELECT 'Competitor TV Advertising', 2019, 1213252
UNION 
SELECT 'Online Advertising', 2018, 999990
UNION 
SELECT 'COREBASE', 2017, 852094
UNION 
SELECT 'COREBASE', 2018, 736576
UNION
SELECT 'DISPLAY', 2017, 621608
UNION 
SELECT 'DISPLAY', 2018, 388904
UNION 
SELECT 'Facebook', 2019, 94909
UNION 
SELECT 'Online Advertising', 2017, 81334
UNION
SELECT 'Halo TV', 2018, 66828
UNION 
SELECT 'Halo TV', 2017, 46818
UNION 
SELECT 'Competitor TV Advertising', 2017, 25252
UNION 
SELECT 'Facebook', 2017, 23932
UNION
SELECT 'DFSI', 2017, 21466
UNION 
SELECT 'Coupons', 2017, 11160
UNION 
SELECT 'Facebook', 2018, 9444
UNION 
SELECT 'DFSI', 2019, 8785
UNION
SELECT 'Competitive Coupons', 2017, 8724
UNION 
SELECT 'Competitive Coupons', 2019, 8724
UNION 
SELECT 'Coupons', 2019, 2950
UNION 
SELECT 'BB Display', 2019, 1844
UNION
SELECT 'BB Display', 2017, 1844
UNION
SELECT 'Email', 2017, 810
UNION 
SELECT 'OTHER', 2017, 78
UNION 
SELECT 'Email', 2019, -987000
UNION 
SELECT 'Email', 2020, -998988
UNION 
SELECT 'Online Advertising', 2020, -1500000
UNION 
SELECT 'Online Advertising', 2019, -1671652
) as _view

3. Create a new chart by the dataset
4. Select "period" as "dimensions"
5. Select 'Sum(value)' as metric

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

[codecov]

Codecov Report

Merging #17906 (c899918) into master (e13ebb6) will increase coverage by 1.23%.
The diff coverage is 60.74%.

❗ Current head c899918 differs from pull request most recent head bac5cd1. Consider uploading reports for the commit bac5cd1 to get more accurate results

@@            Coverage Diff             @@
##           master   #17906      +/-   ##
==========================================
+ Coverage   65.81%   67.05%   +1.23%     
==========================================
  Files        1876     1823      -53     
  Lines       72084    69657    -2427     
  Branches     7857     7528     -329     
==========================================
- Hits        47444    46706     -738     
+ Misses      22626    21003    -1623     
+ Partials     2014     1948      -66     

Flag	Coverage Δ
javascript	53.73% <60.74%> (-0.04%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...n-chart-echarts/src/Waterfall/EchartsWaterfall.tsx	0.00% <0.00%> (ø)
...lugins/plugin-chart-echarts/src/Waterfall/types.ts	0.00% <0.00%> (ø)
...-frontend/src/visualizations/presets/MainPreset.js	100.00% <ø> (ø)
...lugin-chart-echarts/src/Waterfall/controlPanel.tsx	25.00% <25.00%> (ø)
...lugins/plugin-chart-echarts/src/Waterfall/index.ts	50.00% <50.00%> (ø)
...s/plugin-chart-echarts/src/Waterfall/buildQuery.ts	66.66% <66.66%> (ø)
...ugin-chart-echarts/src/Waterfall/transformProps.ts	68.51% <68.51%> (ø)
...ns/plugin-chart-echarts/src/Waterfall/constants.ts	100.00% <100.00%> (ø)
...t-controls/src/sections/echartsTimeSeriesQuery.tsx	33.33% <0.00%> (-66.67%)	⬇️
superset/views/database/views.py	31.36% <0.00%> (-61.23%)	⬇️
... and 592 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[cbuffevant]

👋 Is there any current effort in this PR? I'm really interested in this feature, and I'm more than happy to help

[rusackas]

I'm not sure if @stephenLYZ is still interested/willing to usher this through, so perhaps @yousoph might know someone who has the bandwidth to take it up?

[rusackas]

If you're volunteering to help finish this up, @cbuffevant, that would be more than welcome!!! The easiest way might be to start a new branch, cherry-pick these commits in (so @stephenLYZ gets credit for those) and keep piling on as needed. We could then close this PR in favor of the new one.

[stephenLYZ]

Sorry for being late. I think we can merge it first and then add some improvement plans. Let me fix conflicts.

[cbuffevant]

Thanks @stephenLYZ ! I will be more than happy to help, but I've never contributed to Superset so I'm still not entirely familiar with the code...

[rusackas]

@cbuffevant if you're still able/willing to carry this forward, feel free to ping me on slack about getting that ball rolling :)

[michael-s-molina]

PR rebased

[rusackas]

OK, I got it working, but realized a few things along the way:

1. Storybook isn't running (not the fault of this PR, but just sayin'...)
2. This doesn't seem to really support a temporal X Axis via the "Dimension" input, which sure would be nice.
3. If the first values in a series are negative, they're still above the 0 line, and lead to a non-waterfall chart like so

That said, I was still able to get a reasonable working example.

I say we merge this thing and then debug it on new PRs. I'll give the code a quick review...

[rusackas]

We might want to flesh this out in a subsequent PR.

Also, while I'm naming random follow-ups, I'll bet the farm that people will want conditional coloring, (e.g. upward is green, downward is red) but that's another non-blocking thing.

[rusackas]

There are improvements to make and things to fix, but I think we should merge this PR and "fix it in the mix" as they say.

[michael-s-molina]

I say we merge this thing and then debug it on new PRs.

Will do! Thanks for the review!