You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+2-50Lines changed: 2 additions & 50 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,55 +28,7 @@ See more examples
28
28
29
29
## Overview
30
30
31
-
This module's entry point is a React component called `<PlotlyEditor />` which connects to a [plotly.js](https://plot.ly/javascript/)-powered `<Plot />` component care of [`react-plotly.js`](https://github.com/plotly/react-plotly.js). A plotly.js plot is defined by a JSON-serializable object called a _figure_. `<PlotlyEditor />` accepts as children React components whose descendents are input elements wrapped via `connectToContainer()` calls so as to bind them to the `<Plot />`'s figure's values. If no children are passed to the `<PlotlyEditor />`, the `<DefaultEditor />` is used. This module also exposes the [building block components](#Built-in-Components) that comprise the `<DefaultEditor />` so that developers can create their own customized editors.
32
-
33
-
## Connecting `<PlotlyEditor />` to `<Plot />`
34
-
35
-
The binding between `<PlotlyEditor />` and `<Plot />` works a little differently that in most React apps because plotly.js mutates its properties. This is mapped onto React's one-way dataflow model via event handlers and shared revision numbers which trigger re-renders of mutated state. The following subset of the [simple example](https://github.com/plotly/react-chart-editor/tree/master/examples/simple) shows how this works using a parent component to store state, but the principle is the same with a different state-manage approach, as shown in the [redux example](https://github.com/plotly/react-chart-editor/tree/master/examples/redux):
this.setState(({editorRevision: x}) => ({editorRevision: x +1, graphDiv}));
49
-
}
50
-
51
-
handleEditorUpdate() {
52
-
this.setState(({plotRevision: x}) => ({plotRevision: x +1}));
53
-
}
54
-
55
-
render() {
56
-
return (
57
-
<div>
58
-
<PlotlyEditor
59
-
graphDiv={this.state.graphDiv}
60
-
onUpdate={this.handleEditorUpdate.bind(this)}
61
-
revision={this.state.editorRevision}
62
-
{...snip}
63
-
/>
64
-
<Plot
65
-
data={this.state.graphDiv.data}
66
-
layout={this.state.graphDiv.layout}
67
-
onUpdate={this.handlePlotUpdate.bind(this)}
68
-
revision={this.state.plotRevision}
69
-
{...snip}
70
-
/>
71
-
</div>
72
-
);
73
-
}
74
-
}
75
-
```
76
-
77
-
## Data Management
78
-
79
-
`<PlotlyEditor />` accepts a `dataSources` property which is an object of arrays of data, as well as a `dataSourceOptions` property which contains metadata about the `dataSources`, such as human-readable labels used to populate input elements like dropdown menus. `<PlotlyEditor />` treats these properties as immutable so any changes to them will trigger a rerender, and accepts an `onUpdateTraces` event handler property which is called whenever it needs to access a column from `dataSources`, enabling asynchronous data loading e.g. from remote APIs. The [async-data example](https://github.com/plotly/react-chart-editor/tree/master/examples/async-data) shows how this is done using a dummy asynchronous back-end proxy.
31
+
This module's entry point is a React component called `<PlotlyEditor />` which connects an instance of `<EditorControls />` to a [plotly.js](https://plot.ly/javascript/)-powered `<Plot />` component care of [`react-plotly.js`](https://github.com/plotly/react-plotly.js). `<PlotlyEditor />` accepts as children React components whose descendents are input elements wrapped via `connectToContainer()` calls so as to bind them to the `<Plot />`'s figure's values. If no children are passed to the `<PlotlyEditor />`, the `<DefaultEditor />` is used. This module also exposes the [building block components](#Built-in-Components) that comprise the `<DefaultEditor />` so that developers can create their own customized editors.
80
32
81
33
## Styling the `<DefaultEditor />` and the built-in components
82
34
@@ -197,7 +149,7 @@ For use in containers bound to annotations e.g. as children of `<AnnotationAccor
197
149
198
150
To use Satellite Maps in the Editor, [Mapbox access tokens](https://www.mapbox.com/help/how-access-tokens-work/) are required.
199
151
200
-
Once you have your tokens, you can provide it as a config prop to the `react-plotly.js` generated `Plot` component: `<Plot config={{mapboxAccessToken: 'your token'}}/>`
152
+
Once you have your tokens, you can provide it as a config prop to the `<PlotlyEditor />` component: `<PlotlyEditor config={{mapboxAccessToken: 'your token'}}/>`
0 commit comments