feat(plugin-chart-echarts): support horizontal bar chart

[stephenLYZ]

SUMMARY

This PR supports horizontal bar chart for the new bar EChart. Here we switch these two bar orients (vertical and horizontal) by adding a Bar Orient control.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Time series

Vertical

Horizontal

Caterical

Vertical

Horizontal

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue: Add Horizontal Bar Chart #15543 (comment)
• 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

[villebro]

I suspect this is one of the most anticipated PRs ever, love it! ❤️

[rusackas]

/testenv up

[github-actions]

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

[rusackas]

I think there are two little problems that need to be addressed in this PR.

The small nitpicky one:
I think having a whole section for Bar orientation is a bit much... it leads to having "Chart orientation" and "Bar orientation" right next to each other, which is redundant. I'm wondering if it makes more sense to move the "Bar orientation" control into the "Chart options" section, rather than creating a new section.

And the trickier one:
When you transpose the chart between row and column orientation, the other controls may now confuse people. We refer to some of the controls as "x axis" and "y axis" which is no longer the case. I think we need one of two possible solutions here:
• Update the terminology, like "Metric axis" and "Dimension axis" to be more specific
• Updating the labeling of the controls so that the X and Y labels update on the fly depending on chart orientation, and the controls remain "truthful"

Thoughts @stephenLYZ or @villebro ?

[rusackas]

/testenv up FEATURE_GENERIC_CHART_AXES=true

[github-actions]

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

[rusackas]

What my last comment didn't say is that this is AWESOME. Works great in GENERIC_CHART_AXES mode or the "normal" mode. I love that it even animates :D Pretty slick!

[villebro]

This is great work! A few small improvement proposals, other than that LGTM.

[stephenLYZ]

@rusackas Yeah. That makes sense! The reason that I prefer to make a whole section for Bar orientation is to have all the following x/y control swaps (include "Chart Title" section). Maybe we can implement it by dynamic control.

[codecov]

Codecov Report

Merging #19918 (fe5985f) into master (8531546) will increase coverage by 0.30%.
The diff coverage is 39.21%.

@@            Coverage Diff             @@
##           master   #19918      +/-   ##
==========================================
+ Coverage   66.22%   66.52%   +0.30%     
==========================================
  Files        1715     1716       +1     
  Lines       64179    65164     +985     
  Branches     6753     6775      +22     
==========================================
+ Hits        42501    43350     +849     
- Misses      19960    20091     +131     
- Partials     1718     1723       +5     

Flag	Coverage Δ
javascript	51.31% <39.21%> (-0.02%)	⬇️

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

Impacted Files	Coverage Δ
...ugins/plugin-chart-echarts/src/Timeseries/types.ts	100.00% <ø> (ø)
...gin-chart-echarts/src/Timeseries/transformProps.ts	56.86% <25.00%> (-1.04%)	⬇️
...lugin-chart-echarts/src/Timeseries/transformers.ts	50.40% <25.00%> (-1.24%)	⬇️
...charts/src/Timeseries/Regular/Bar/controlPanel.tsx	34.48% <32.00%> (-5.52%)	⬇️
...plugins/plugin-chart-echarts/src/utils/forecast.ts	93.22% <50.00%> (-1.61%)	⬇️
...d/plugins/plugin-chart-echarts/src/utils/series.ts	92.00% <83.33%> (-0.96%)	⬇️
...rset-ui-chart-controls/src/sections/chartTitle.tsx	100.00% <100.00%> (ø)
superset/views/datasource/views.py	90.21% <0.00%> (-6.45%)	⬇️
superset/examples/helpers.py	80.00% <0.00%> (-2.61%)	⬇️
superset/db_engine_specs/__init__.py	84.61% <0.00%> (-2.57%)	⬇️
... and 71 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8531546...fe5985f. Read the comment docs.

[stephenLYZ]

/testenv up FEATURE_GENERIC_CHART_AXES=true

[github-actions]

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

[stephenLYZ]

/testenv up FEATURE_GENERIC_CHART_AXES=true

[github-actions]

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

[zhaoyongjie]

The community has needed this feature for a long time, Thanks for addressing this!

[zhaoyongjie]

And the trickier one: When you transpose the chart between row and column orientation, the other controls may now confuse people. We refer to some of the controls as "x axis" and "y axis" which is no longer the case.
I think we need one of two possible solutions here:
• Update the terminology, like "Metric axis" and "Dimension axis" to be more specific
• Updating the labeling of the controls so that the X and Y labels update on the fly depending on chart orientation, and the controls remain "truthful"

I totally agree, the label name of x-axis looks a bit misleading after it is rotated. The issue may not come from this PR, but from the current control panel design.

• the purpose of the query panel design is to describe the query fragment.
• the purpose of the customize panel design is to describe the properties of visualization.

The Bar chart transposition is a circumstance that a mixed query fragment and viz definition.

1. In a vertical bar chart: the x-axis should be dimensions, it is represented by x-axis control and dimension control, y-axis should be metric(s).
2. In a horizontal bar chart: the x-axis should be metric(s). The y-axis should be dimensions, it is represented by x-axis control and dimension control.

Due to this confusing reason, lots of BI tools use columns and rows to represent x-axis and y-axis and provide many settings on each dimension/metric control.

[stephenLYZ]

@rusackas @zhaoyongjie That's a good input and currently it's based on the ability of the dynamic control to rotate - you can see that after setting the chart orientation, all x/y controls swap. Let's merge this one and improve this in the next PR.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[Vicinius]

Will this also work without time-series? Just with the regular bar chart? I just want to do a horizontal bar chart without time column... I'm asking here because I don't have acess to the superset version or upgrading it right now, with Superset 2.0 will I be able to do this?

[ECCKaka]

Will this also work without time-series? Just with the regular bar chart? I just want to do a horizontal bar chart without time column... I'm asking here because I don't have acess to the superset version or upgrading it right now, with Superset 2.0 will I be able to do this?

I also wondered the same. I am trying to do it without time-series now

[stephenLYZ]

@Vicinius Yeah. You can see this PR supports both Time-series and Caterical bar chart.

[redwards101]

Maybe I'm dense (entirely possible), but I can't get it to work. I have the GENERIC_CHART_AXES feature set in superset_config.py. I'm using docker compose from near top of master, built the docker image to incorporate some other changes. Can't get the v2 bar to function any differently. What am I missing?

[Vicinius]

@redwards101 see if this helps you #5059 (comment)

[redwards101]

@redwards101 see if this helps you #5059 (comment)

Thanks, but that's how I got here. There's clearly something I'm not doing right. Just don't know what it is yet. Looking for anyone who has it working in a docker environment.

[redwards101]

Ok, it's working now. I don't know why. I brought up the container again and suddenly I am now seeing the X-AXIS field that wasn't there before. The only notable recent difference is I decided to just set the DEFAULT_FEATURE_FLAGS in config.py and rebuild the image. I really can't see that as a reason, though. Maybe something was cached? Anyway, it's working great now.
Thanks for the feature.

[Vicinius]

@redwards101 were you able to sort the bars? that was a complaint on the comment that I pointed above

[redwards101]

@redwards101 were you able to sort the bars? that was a complaint on the comment that I pointed above

No. Can't control the axis sorting.

[didia]

@Vicinius Yeah. You can see this PR supports both Time-series and Caterical bar chart.

@stephenLYZ Thank you so much for this feature. I can see the feature for the new V2 time series but the "normal" bar doesn't give option to switch orientation. Also, I'm not seeing a "normal" bar chart v2 in the latest superset version. Am I missing something ?

No orientation option in existing bar chart

No normal "V2" Bar chart

[Hugh-Guan]

@Vicinius Yeah. You can see this PR supports both Time-series and Caterical bar chart.
@stephenLYZ Thank you so much for this feature. I may have a problem with this PR-supported feature. I have upgraded superset to tag 2.0.0 version, and the horizontal control option has appeared in Time-series Bar Chart. But Bar Chart does not have this control, do I need to do any additional configuration?
caption：Time-series Bar Chart

caption：Bar Chart

[Hugh-Guan]

Will this also work without time-series? Just with the regular bar chart? I just want to do a horizontal bar chart without time column... I'm asking here because I don't have acess to the superset version or upgrading it right now, with Superset 2.0 will I be able to do this?

I also wondered the same. I am trying to do it without time-series now

@Vicinius I saw your question, and I thought the same thing.
By the way, after superset was upgraded to TAG 2.0.0, did you implement horizontal function on your normal Bar Chart?

[villebro]

Hey @Hugh-Guan and @Vicinius , I'm not sure if you've been following the "generic x-axis" development work recently, but the "Time-series line/bar/scatter" etc charts from the ECharts chart plugin nowadays support using any x-axis type if you enable the GENERIC_CHART_AXES feature flag. With that flag enabled, I believe the ECharts bar chart already has feature parity with the old NVD3 based bar chart, and will soon hopefully deprecate the old one. If you are able to test master branch, please give it a spin and see if it fits your use cases.

[Hugh-Guan]

Hey @Hugh-Guan and @Vicinius , I'm not sure if you've been following the "generic x-axis" development work recently, but the "Time-series line/bar/scatter" etc charts from the ECharts chart plugin nowadays support using any x-axis type if you enable the GENERIC_CHART_AXES feature flag. With that flag enabled, I believe the ECharts bar chart already has feature parity with the old NVD3 based bar chart, and will soon hopefully deprecate the old one. If you are able to test master branch, please give it a spin and see if it fits your use cases.

@villebro First of all, I am very sorry for taking so long to reply. Then, thank you very much for your advice and help.
The GENERIC_CHART_AXES feature solved my problem perfectly.


Also, I noticed that Metrics are sorted in the natural order, not the order of choice. So far I've prefixed Metrics to show them in the order I want them to. I don't know if there is a function to configure it accordingly.
Thanks again for your help!