[Chart]Gauge chart enhancement request and bug fix

[junlincc]

We recently added new Gauge chart(Echarts) to our library, which is great as MVP. Thanks to @krsnik93
Here are some enhancement requests to make the chart more robust. we can either make the improvement in Superset or Echarts.

Request

1. Add tooltips to 'needles' - p1
2. Add (dynamic)time range filter, not the entire time section - p1 (4/17/2021 Time section is added, need to make it dynamic)
3. Percentage on scale p2
4. Detect the scale range if there are more than one series. right now default is set [0,100], and user have to change MAX for the chart the make sense

5. Allow user to adjust label position 5. Click event and X-filtering support

Bug

1. Only up to four labels can be displayed when group-by is added, see the second screenshot above, we have the data of 7 regions from the query, but only showing 4.
2. After changing VALUE FORMAT in Custom tab, there's no way to restore the original value on the chart label. - p1
3. All changes made in the CUSTOMIZE tab seems re-trigger query in the south data table which may affect perf - p2
4. When SHOW PROGRESS box is checked in Customize, and there are multiple series after group-by, user is only able to see up to 2 values.

5. Changing dataset should reset control panel to default, and set chart to the original state, only leaves COUNT(*) in metric.

Cosmetic issue
Overlapping here and there

1. in Show Progress and Round Cap

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[junlincc]

@krsnik93 @EBoisseauSierra
Do you think we can address some of the issues above? happy to share the load. 🙏

[krsnik93]

@junlincc what do you think about moving the detail (value + text in the center) into the legend? With enough rows/series, there will always be overlap...

[junlincc]

@krsnik93 you are right! I think changing the default scale to START 180 and END 0 angle could help.

[junlincc]

@junlincc what do you think about moving the detail (value + text in the center) into the legend?

We probably want to keep the legend simple.I wonder if we can show the labels dynamically?

• when there's only one series, display number in the middle below with text.
• when group-by is added, move this section from center below to the right of the chart?
• Tooltip(num + text) on hover is a must have in this case
• Showing the all series after group-by is also must have

@mihir174 @villebro wdyt?

[krsnik93]

@junlincc should this PR be merged first: apache-superset/superset-ui#1056 ?

[krsnik93]

1. Add tooltips to 'needles' **- p1**

added in apache-superset/superset-ui@62be208

2. Add (dynamic)time range filter, not the entire time section **- p1** (4/17/2021 Time section is added, need to make it dynamic)

All the other charts seem to use the entire time section, should we try to stay consistent?

3. Percentage on scale p2

Due to the way echarts overlaps multiple series:

by not showing the full length of each progress line, I think displaying percentages does not make sense. The changes for this should be done in echarts and I don't know if the use case is strong enough. For percentages, I would say using the pie chart makes more sense.

4. Detect the scale range if there are more than one series. right now default is set [0,100], and user have to change MAX for the chart the make sense

I have made it so that both min and max are now dynamically determined. Max on the axis becomes 2 * max data value, min on the axis is smaller of 0 and 2 * min data value (this is useful for negatives). It's still possible for the user to pass these two explicitly, but they are now optional control panel args.

1. Only up to four labels can be displayed when group-by is added, see the second screenshot above, we have the data of 7 regions from the query, but only showing 4.

This depends on the font size. By reducing it to the smallest value on the slider, I was able to display 7 data points. One way would be to decrease space between two different titles/values, but I don't think it should be decreased further. If you look at the image the spacing is already quite compact:

2. After changing VALUE FORMAT in Custom tab, there's no way to restore the original value on the chart label.  **- p1**

I don't understand this argument completely. I actually don't like this control and think it should be replaced, perhaps with separate prefix and suffix fields, just to avoid having this template value in the input field. Maybe even dropped completely as manipulating the query can be used to achieve similar results and the other charts don't have this type of formatter. What do you think?

3. All changes made in the CUSTOMIZE tab seems re-trigger query in the south data table which may affect perf **- p2**

Currently all changes need to trigger, otherwise it's not possible to have a separate CUSTOMIZE tab and everything gets moved back to DATA tab:

superset/superset-frontend/src/explore/components/ControlPanelsContainer.tsx

Line 277 in 77a9cc7

(!control.config.renderTrigger ||

4. When SHOW PROGRESS box is checked in Customize, and there are multiple series after group-by, user is only able to see up to 2 values.

Those 2 should not be related. Control splitNumber should be used to set number of splits/labels. If there is an overlap this could be fixed in apache-superset/superset-ui#1056

1. Changing dataset should reset control panel to default, and set chart to the original state, only leaves COUNT(*) in metric.

Isn't this constant for all chart types?

Cosmetic issue
Overlapping here and there

1. in Show Progress and Round Cap

Regarding labels, this is fixed in apache-superset/superset-ui#1056 as well. Regarding values in the middle, I don't know if anything can be done besides reducing the font size and perhaps utilizing row limit and adhoc filters. Giving the chart more space on the dashboard might help as well.

[krsnik93]

@junlincc wdyt?

[rosemarie-chiu]

I'd like to be able to hide the column title on gauge chart or be able to customize what to show.

Another application is: if it is a boolean column, instead of showing automated:True vs automated:False, I'd like the option to able to customize what is showing on the chart.

[PowerPlop]

@junlincc I have read in #14472 that the bullet graph will be replaced by the gauge one.
In my opinion the gauge visualisation uses too much screen estate compared to the bullet variant, but that may be personal taste.
Will there be a 'smaller' gauge variant? (such as the option in the timeseries chart (line, steps, scatter, bar, ...)

Will it be possible to define a query value for the MIN/MAX value and the intervalbounds (or one datapoint as marker on the gauge)? In the current design you have to use fixed values which limits the possibilities of this chart.

[junlincc]

@PowerPlop hi! yes, bullet will soon be replaced but we do wanna make sure gauge offer more not less.
what do you mean by "smaller" ? i believe you can resize the chart on the dashboard right? we do have to fix the overlapping issue on resize though........

i do believe you can set the min/max in gauge, i'm thinking adding % too...

[PowerPlop]

@junlincc With 'smaller' I would mean, a straight line instead of the curved gauge which takes up quite some space, only to mimic a speedometer design (which imo is not an ideal visualisation)

https://www.tableau.com/about/blog/2015/2/bullet-graphs-beat-gauge-charts
The bullet graph was developed to replace the meters and gauges that are often used on dashboards. Its linear and no-frills design provides a rich display of data in a small space, which is essential on a dashboard.

You can indeed set a min and max value, but the value cannot be linked to a query, which limits its use.
I would think that in most scenarios the min/max value are dynamic compared to the actual measurement value that is visualized (e.g. I have an expected sales amount, a minimum sales amount and the actual sales amount that are different depending on the selected region/producttype). In the current viz you have to set a fixed min/max while you should be able to define it with a query.

[kamalkeshavani-aiinside]

I think this is expected behavior but should be improved.
When the guage is set to only semi circle(angles 180-0), then there is a lot of whitespace seen in dashboard chart. If possible, the guage should be expanded in the chart area when such angles are set.

[junlincc]

#16433
one more in the list!

[junlincc]

@kamalkeshavani-aiinside make sense! it does take up too much unnecessary real estate. @stephenLYZ we can slowly get down to these.

@PowerPlop

I would think that in most scenarios the min/max value are dynamic compared to the actual measurement value that is visualized

agreed. what about there are multiple metrics? i have a hard time visualizing having different dynamic min/max on same scale. please advise 🙏

[PowerPlop]

@junlincc I don't know if the gauge chart will be used with different metrics that have a different scale. If you would do this, I would expect you convert them to ratios so you can compare them and then 1 min/max can be used.