apache-superset/superset-roadmap

[Dashboard] make chart elements responsive on resize in dashboard

Closed this issue · 7 comments

junlincc commented

Ideally, the chart itself and all its elements should be responsive on resize in a dashboard.
to name a few- show or hide elements, scale, number of ticks, size of the labels, position and grouping of the legend....could even be the orientation of the chart(e.g. horizontal vs vertical bar).

ezgif-3-40947beb00be

We have two options

  1. migrate all legacy and customized charts to Echarts first, implement changes at chart type(composition, time series, distribution, relationship, geospatial) level.
    But it will likely take up to a year to finish the project.
  2. implement changes individually to all existing charts(40+ of them) now. but the enhancement will likely be a waste after Echarts migration.
    Alternative
    a. add min width and height (not an optimized UX but can stop some bleeding easily)
    b. allow user to configure at chart level (more work and more work going to be wasted)

Proposed solution: combination 1 & a

Adding some screenshots to explain why we need this change....

Screen Shot 2021-02-23 at 2 28 31 PM

Screen Shot 2021-02-23 at 2 28 10 PM

Screen Shot 2021-02-23 at 2 27 18 PM

Screen Shot 2021-02-23 at 2 29 08 PM

maloun96 commented

@junlincc @villebro In my opinion the best option is to let the user set min-width and min-height and save it to the database. I prepared a basic small demo in the video.

Screen.Recording.2021-02-24.at.13.01.59.mov
villebro commented

I think it would be nice to provide good defaults for charts where the wheels are known to fall of at some certain threshold. Those could be overridable, but I think the defaults should mostly just work.

maloun96 commented

We can't set default some width and height. If 1 chart has a longer label and other shorter but will have the same default width/height

villebro commented

I'm thinking more in terms of automatically moving/hiding legends if the charts gets too cramped etc, like in Junlin's Highcharts example. As an example, the same can be applied to labels being automatically hidden on Pie charts if the min(width, height) falls under some critical threshold to make sure the chart retains some minimum level of usefulness.

maloun96 commented

I got your point. It will take some time to try for each chart. For example, for the heatmap, we can hide y-axis labels.

Screen.Recording.2021-02-24.at.16.04.30.mov
junlincc commented

Thank you @maloun96 for prototyping. Our goal is to put less burden on users, setting height and width on Dashboard doesn't seem to be aligned ..😔
Let's break this epic down and tackle each case separately if we want to start this project now without echarts migration.

  1. labels size on sunburst, Sankey etc. - definitely responsive- resize & reposition to avoid overlapping. should be no need for users to set font size at all (TOP priority)
  2. number of ticks - prefer dynamic but allow user to set preference in Explore
  3. legend - should be first to hide on resize, or no show at all by default on dashboard.
  4. x tick label - rotate and truncated on resize, set max % in chart
    ....

I will need some time to come up with more cases