Access to echarts setOption args

[mq-evan]

With the existing implementation of echarts, I don't believe it is possible to access args for setOption, which is the echarts API command that is run when changing the options of an existing echart and calling .update().

Access to the args for setOption would allow manipulation of notMerge and replaceMerge, which are described in the echarts documentation here.

Without access to these args, it is impossible to clear existing series of data in a plot without replacing it with a new series. This results in unwanted plots remaining when wanting to plot different things at different times using the same ui.echarts() element.

Below is some code to highlight the issue. Pressing "Add to chart 1" then "Add to chart 2" causes "Add to chart 1"s second data series to remain. Two attempts at clearing the existing data series given, however the first option leaves the legend behind and the second does not clear the chart.

Similarly, it may also be useful to have access to the .clear method of the echarts object, described in the documentation here.

Please let me know if I am missing anything obvious!

Thanks

from nicegui import ui

chart = ui.echart({
        "xAxis": {"type": "category"},
        "yAxis": {"type": "value"},
        "series": [{"type": "line", 
                    "data": [1, 2, 3, 4, 5]}],
        "legend": {"left": "left"}})


def add_to_chart1():
    chart.options["series"] = [
        {"type": "line", 
         "data": [6, 7, 8, 9, 10],
         "name": "Data 1"},
        {"type": "line", 
         "data": [11, 12, 13, 14, 15],
         "name": "Data 2"}]
    chart.update()


def add_to_chart2():
    chart.options["series"] = [
        {"type": "line", 
         "data": [16, 17, 18, 19, 20],
         "name": "Data 3"}]
    chart.update()


def clear_chart1():
    chart.options["series"] = [
        {"type": "line", 
         "data": []},
        {"type": "line", 
         "data": []},
        {"type": "line", 
         "data": []}]
    chart.update()


def clear_chart2():
    chart.options["series"] = []
    chart.update()


ui.button("Add to chart 1", on_click=add_to_chart1)
ui.button("Add to chart 2", on_click=add_to_chart2)
ui.button("Clear 1", on_click=clear_chart1)
ui.button("Clear 2", on_click=clear_chart2)

ui.run()

[natankeddem]

Adding support for all methods might get out of hand. Does it maybe make sense to add a more generic method similar tocall_api_method from ui.aggrid?

[falkoschindler]

Oh wow, this is a serious bug I think. I didn't expect such problems with updating the chart options. It seems related to #1789 where we have similar problems with Highcharts.

We could set notMerge to true in order to redraw the chart with every update. But this doesn't look good for small changes. Or should we use notMerge only if the number of series has changed?

Sure, we could also provide access to setOption's arguments, or maybe even implement a generic call_api_method like @natankeddem suggested. But the default behavior should be as simple and correct (i.e. "nice") as possible.

[mq-evan]

Having notMerge true for every chart update could work, it would just require the user to always provide all the previous series data along with the new data to be displayed. From what I understand Echarts will find the difference between any two sets of series and animate the transition between them, so visually it should still look ok.

A generic call_api_method of course would allow for the most flexibility in choosing how different plots are displayed, based on the use case.

Thanks for your replies!

[falkoschindler]

I just experimented with this more compact reproduction:

chart = ui.echart({
    'xAxis': {'type': 'category'},
    'yAxis': {'type': 'value'},
    'series': [{'type': 'line', 'data': [0]}],
})

ui.button('Set two', on_click=lambda: (
    chart.options.update(series=[{'type': 'line', 'data': [1]}, {'type': 'line', 'data': [2]}]),
    chart.update(),
))
ui.button('Set one', on_click=lambda: (
    chart.options.update(series=[{'type': 'line', 'data': [3]}]),
    chart.update(),
))

Updating with

this.chart.setOption(this.options, { notMerge: true });

seems to help.

So what do you think, should we use this option by default?
For better performance we might use something like this instead:

this.chart.setOption(this.options, { notMerge: this.chart.options.series.length != this.options.series.length });

[mq-evan]

Glad to hear setting notMerge helps!

I think having this default makes the most sense & leads to the most intuitive use of the function. Can't speak to whether having that condition will lead to better performance or not, but I don't think there is a downside to it.

[falkoschindler]

Ok, I implemented and merged PR #2068 with notMerge depending on the number of series.

[falkoschindler]

@mq-evan Do you think we can close this feature request after PR #2068 has been released? Or do we still need a more flexible solution?

[mq-evan]

The current implementation is now sufficient for my use case, thank you for your help! In my opinion this makes it much more intuitive and easy to use.

There definitely could be benefit to having access to a generic call_api_method in future, but the implemented solution addresses the original issue raised here.

[falkoschindler]

We just merged PR #2232, which introduces run_chart_method (like call_api_method, but following a new naming scheme). It allows calling setOption with arbitrary arguments.