Overcome react-echart limitations

[lebaudantoine]

Expected behavior

Support all kind of series' updates in echart plots:

• Series addition.
• Series updates.
• Series deletion.

Actual behavior

Supported series' updates in echart plots:

• Series addition.
• Series updates.

Problem description

Series deletion is not supported due to react-echart third-party limitations. An issue is opened since 2022. For details, see here.

Partial echartInstances.setOption method's parameters are supported in react-echart mapping. Refer to the method documentation for more details.

echartInstances.setOption accepts either :
parameters

(option: Object, notMerge?: boolean, lazyUpdate?: boolean)

or

(option: Object, opts?: {
    notMerge?: boolean;
    replaceMerge?: string | string[];
    lazyUpdate?: boolean;
})

As the official documentation explains :

There are two ways to remove components:
Totally removal: use notMerge: true, all of the components will be removed.
Partially removal: use replaceMerge: [...], the specified types of components will be removed if no id matched. This mode is useful to keep the state (e.g., highlight / animation / selected area) of the other components while make removal.

Unfortunately, the react-echart library currently lacks support for the replaceMerge parameter. You can check the component internal logic and component props for further details.

This means that when updating options in react-echart, there won't be a merging of the new options with the existing ones. Instead, the update will occur without merging, which could trigger animations and color changes.

Proposal

To overcome react-echart limitations, a better approach is creating a custom echart mapping. This empowers us to address specific needs, enhance flexibility, and gain greater control over the chart functionalities in our application.

[jmaupetit]

I think we can give it a try if you think you can quickly develop a POC that we iterate on.