Time-Series Chart Showing Min/Max X-Axis Values Even Though Disabled

[jamesrayoub]

Screenshot

Description

By default, the min & max x-axis values appear to be showing despite the fact that they are disabled. I am able to remove by enabling then disabling again using the checkboxes. I'd imagine the default behavior is to not show those values but if it is, then perhaps the checkboxes should be marked by default...

[junlincc]

thanks for reporting!
please see video for more context. @xiezhongfu can you take this on? 🙏
Expected behavior: when user first interact with Timeseries echarts, Min and Max on x-axis should show by default, 2 checkboxes should be checked by default/

Screen.Recording.2021-06-08.at.10.11.08.AM.mov

[xiezhongfu]

superset

• firstly, rendered the table chart which has not xAxisShowMinLabel control.

• when we chose Time-series Chart, and rendered it. Time-series Chart has a xAxisShowMinLabel control. But the value property is undefined
  
  

• we can set value by mapStateToProps or default function
  

superset-ui

default is false refer: https://github.com/apache-superset/superset-ui/blob/master/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx#L343
default value of xAxisShowMinLabel is false refer: https://github.com/apache-superset/superset-ui/blob/master/plugins/plugin-chart-echarts/src/Timeseries/types.ts#L93

solution

All in total, we can set value to false by mapStateToProps.

[zhaoyongjie]

I can not reproduce in the latest master and Time-series Chart

screen recoding.(since file size over 100M, I uploaded to youtube)
https://www.youtube.com/watch?v=dpLtbZUiDRU

[junlincc]

@villebro can you clarify what's the expected behavior?

[xiezhongfu]

document

https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMinLabel.
The options of showMinLabel are true, false, null. I think undefine is auto according to Echarts Source Code.

Echarts Source Code

axisLabel: {
    show: true,
    // Whether axisLabel is inside the grid or outside the grid.
    inside: false,
    rotate: 0,
    // true | false | null/undefined (auto)
    showMinLabel: null,
    // true | false | null/undefined (auto)
    showMaxLabel: null,
    margin: 8,
    // formatter: null,
    fontSize: 12
},

and

// If min or max are user set, we need to check
// If the tick on min(max) are overlap on their neighbour tick
// If they are overlapped, we need to hide the min(max) tick label
const showMinLabel = axisModel.get(['axisLabel', 'showMinLabel']);
const showMaxLabel = axisModel.get(['axisLabel', 'showMaxLabel']);

UI Problem

So, the problem is "UI is not a controlled state. CheckBox will diff showMinLabel"

@junlincc @youngyjd @villebro