Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overcome react-echart limitations #43

Open
lebaudantoine opened this issue Jul 20, 2023 · 1 comment
Open

Overcome react-echart limitations #43

lebaudantoine opened this issue Jul 20, 2023 · 1 comment
Assignees
Labels

Comments

@lebaudantoine
Copy link
Contributor

lebaudantoine commented Jul 20, 2023

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Todo
Development

No branches or pull requests

2 participants