search

plotly / react-chart-editor

Customizable React-based editor panel for Plotly charts
https://plotly.github.io/react-chart-editor/
MIT License
505 stars 105 forks source link

Async update data #449

Open skellystudios opened 6 years ago

skellystudios commented 6 years ago

I'm trying to use this to define a chart setup that will then update when the source data is updated (without having to manually re-create it in the editor!).

Is this possible with the current iteration? I saw that some of the older releases had a manual revision control – would that functionality do what I'm after, and does it have an analogue in later releases?

skellystudios commented 6 years ago

OK so digging a little deeper, I think I understand a bit more about how this library works: the data is sliced and diced as you're building the chart, so it's not currently possible to allow a live update of the data source – that's really not the model.

It seems like the functionality I'm looking for current exists a bit better in https://github.com/plotly/react-pivottable, although that's definitely substantially more limited in terms of options for customising the visualisation.

I'm thinking of, maybe, modifying this library to allow each component (i.e. the DataSelector) to emit a composable function for what it's done, so that upon a change to the DataSource, you could run each of those functions to get the new iteration of Data, in the way it's meant to look.

Has anybody looked into doing anything like this before, or has any tips/warnings about doing something like this.

nicolaskruchten commented 6 years ago

This should be possible with the current iteration if you change the identity of dataSources but not if you just mutate its contents.

We used to have an example that showed how to do the second thing you're asking for as well (i.e. changing dataSources in response to changes in the values of the DataSelector widgets) but we deprecated it. I should resurrect it :)

nicolaskruchten commented 4 years ago

I dug into this a bit this afternoon... The short answer is that indeed, updating dataSources and dataSourceOptions doesn't actually update the chart. It updates the data sources that are available to the editor for injection into the figure but not the figure itself. This is outside the responsibility of the editor proper. Every time your code updates the dataSources, it must then walk the figure object yourself and update the data vectors therein. The code that used to do this in the async example we had before was here: https://github.com/plotly/react-chart-editor/commit/71323da3dd48ee35609bb234f3fff72de640fb80#diff-15689f7c88897123f86b341be3c30311L105

This example worked for a while and then we made some change that broke it and because we didn't have time to fix it, we just removed it. Most of the action happens in the dereference function which lives here https://github.com/plotly/react-chart-editor/blob/master/src/lib/dereference.js

Hopefully this is enough of a thread to pull on to unravel things! This pattern does work, as it's what powers https://chart-studio.plot.ly/create (wherein you can definitely edit the data in the grid and have the figure update) but that specific part of the code isn't open-source at the moment.

nicolaskruchten commented 4 years ago

(sorry, I think I pasted this response into the wrong issue... I was aiming at #948 actually but they seem related!)

alexmojaki commented 1 year ago

I think these are duplicate issues.