Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f8472af

Browse files
first stab at combined component
1 parent 6ada44d commit f8472af

File tree

4 files changed

+86
-57
lines changed

4 files changed

+86
-57
lines changed

‎dev/App.js

Lines changed: 19 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React, {Component} from 'react';
22
import {hot} from 'react-hot-loader';
33
import plotly from 'plotly.js/dist/plotly';
4-
import createPlotComponent from 'react-plotly.js/factory';
5-
import PlotlyEditor from '../src';
64
import '../src/styles/main.scss';
75
import Nav from './Nav';
6+
import {PlotlyEditorWithPlot} from '../src';
87

98
// https://github.com/plotly/react-chart-editor#mapbox-access-tokens
109
import ACCESS_TOKENS from '../accessTokens';
@@ -22,18 +21,13 @@ const dataSourceOptions = Object.keys(dataSources).map(name => ({
2221
label: name,
2322
}));
2423

25-
const Plot = createPlotComponent(plotly);
26-
2724
class App extends Component {
2825
constructor() {
2926
super();
3027

31-
// The graphDiv object is passed to Plotly.js, which then causes it to be
32-
// overwritten with a full DOM node that contains data, layout, _fullData,
33-
// _fullLayout etc in handlePlotUpdate()
3428
this.state = {
35-
graphDiv: {},
36-
plotRevision: 0,
29+
data: [],
30+
layout: {},
3731
currentMockIndex: -1,
3832
mocks: [],
3933
};
@@ -49,61 +43,36 @@ class App extends Component {
4943
.then(mocks => this.setState({mocks}));
5044
}
5145

52-
handlePlotUpdate(graphDiv) {
53-
this.setState({graphDiv});
54-
}
55-
56-
handleEditorUpdate() {
57-
this.setState(({plotRevision: x}) => ({plotRevision: x + 1}));
58-
}
59-
6046
loadMock(mockIndex) {
6147
const mock = this.state.mocks[mockIndex];
6248
fetch(mock.url, {
6349
headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
6450
})
6551
.then(response => response.json())
6652
.then(figure => {
67-
const graphDiv = this.state.graphDiv;
68-
graphDiv.layout = figure.layout;
69-
graphDiv.data = figure.data;
70-
this.setState(({plotRevision: x}) => ({
53+
this.setState({
7154
currentMockIndex: mockIndex,
72-
plotRevision: x + 1,
73-
}));
55+
data: figure.data,
56+
layout: figure.layout,
57+
});
7458
});
7559
}
7660

7761
render() {
7862
return (
7963
<div className="app__container plotly-editor--theme-provider">
80-
<div className="app">
81-
<PlotlyEditor
82-
graphDiv={this.state.graphDiv}
83-
onUpdate={this.handleEditorUpdate.bind(this)}
84-
dataSources={dataSources}
85-
dataSourceOptions={dataSourceOptions}
86-
plotly={plotly}
87-
advancedTraceTypeSelector
88-
/>
89-
<div className="app__main" style={{width: '100%', height: '100%'}}>
90-
<Plot
91-
config={{mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true}}
92-
data={this.state.graphDiv.data}
93-
debug
94-
layout={this.state.graphDiv.layout}
95-
onInitialized={this.handlePlotUpdate.bind(this)}
96-
onUpdate={this.handlePlotUpdate.bind(this)}
97-
revision={this.state.plotRevision}
98-
useResizeHandler
99-
style={{
100-
width: '100%',
101-
height: '100%',
102-
minHeight: 'calc(100vh - 50px)',
103-
}}
104-
/>
105-
</div>
106-
</div>
64+
<PlotlyEditorWithPlot
65+
data={this.state.data}
66+
layout={this.state.layout}
67+
config={{mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true}}
68+
dataSources={dataSources}
69+
dataSourceOptions={dataSourceOptions}
70+
plotly={plotly}
71+
onUpdate={(data, layout) => this.setState({data, layout})}
72+
useResizeHandler
73+
debug
74+
advancedTraceTypeSelector
75+
/>
10776
<Nav
10877
currentMockIndex={this.state.currentMockIndex}
10978
loadMock={this.loadMock}

‎src/PlotlyEditor.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ class PlotlyEditor extends Component {
6969
this.props.afterUpdateTraces(payload);
7070
}
7171
if (this.props.onUpdate) {
72-
this.props.onUpdate();
72+
this.props.onUpdate(graphDiv.data,graphDiv.layout);
7373
}
7474
break;
7575

@@ -88,7 +88,7 @@ class PlotlyEditor extends Component {
8888
this.props.afterUpdateLayout(payload);
8989
}
9090
if (this.props.onUpdate) {
91-
this.props.onUpdate();
91+
this.props.onUpdate(graphDiv.data,graphDiv.layout);
9292
}
9393
break;
9494

@@ -126,7 +126,7 @@ class PlotlyEditor extends Component {
126126
this.props.afterAddTrace(payload);
127127
}
128128
if (this.props.onUpdate) {
129-
this.props.onUpdate();
129+
this.props.onUpdate(graphDiv.data,graphDiv.layout);
130130
}
131131
break;
132132

@@ -140,7 +140,7 @@ class PlotlyEditor extends Component {
140140
this.props.afterDeleteTrace(payload);
141141
}
142142
if (this.props.onUpdate) {
143-
this.props.onUpdate();
143+
this.props.onUpdate(graphDiv.data,graphDiv.layout);
144144
}
145145
}
146146
break;
@@ -155,7 +155,7 @@ class PlotlyEditor extends Component {
155155
this.props.afterDeleteAnnotation(payload);
156156
}
157157
if (this.props.onUpdate) {
158-
this.props.onUpdate();
158+
this.props.onUpdate(graphDiv.data,graphDiv.layout);
159159
}
160160
}
161161
break;
@@ -170,7 +170,7 @@ class PlotlyEditor extends Component {
170170
this.props.afterDeleteShape(payload);
171171
}
172172
if (this.props.onUpdate) {
173-
this.props.onUpdate();
173+
this.props.onUpdate(graphDiv.data,graphDiv.layout);
174174
}
175175
}
176176
break;
@@ -185,7 +185,7 @@ class PlotlyEditor extends Component {
185185
this.props.afterDeleteImage(payload);
186186
}
187187
if (this.props.onUpdate) {
188-
this.props.onUpdate();
188+
this.props.onUpdate(graphDiv.data,graphDiv.layout);
189189
}
190190
}
191191
break;

‎src/PlotlyEditorWithPlot.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, {Component} from 'react';
2+
import createPlotComponent from 'react-plotly.js/factory';
3+
import PlotlyEditor from '../src';
4+
import PropTypes from 'prop-types';
5+
6+
class PlotlyEditorWithPlot extends Component {
7+
constructor(props) {
8+
super();
9+
this.state = {graphDiv: {}};
10+
this.PlotComponent = createPlotComponent(props.plotly);
11+
}
12+
13+
render() {
14+
return (
15+
<div className="app">
16+
<PlotlyEditor
17+
graphDiv={this.state.graphDiv}
18+
dataSources={this.props.dataSources}
19+
dataSourceOptions={this.props.dataSourceOptions}
20+
plotly={this.props.plotly}
21+
onUpdate={this.props.onUpdate}
22+
advancedTraceTypeSelector={this.props.advancedTraceTypeSelector}
23+
/>
24+
<div className="app__main" style={{width: '100%', height: '100%'}}>
25+
<this.PlotComponent
26+
data={this.props.data}
27+
layout={this.props.layout}
28+
config={this.props.config}
29+
useResizeHandler={this.props.useResizeHandler}
30+
debug={this.props.debug}
31+
onInitialized={graphDiv => this.setState({graphDiv})}
32+
onUpdate={graphDiv => this.setState({graphDiv})}
33+
style={{
34+
width: '100%',
35+
height: '100%',
36+
minHeight: 'calc(100vh - 50px)',
37+
}}
38+
/>
39+
</div>
40+
</div>
41+
);
42+
}
43+
}
44+
45+
PlotlyEditorWithPlot.propTypes = {
46+
layout: PropTypes.object,
47+
data: PropTypes.array,
48+
config: PropTypes.object,
49+
dataSourceOptions: PropTypes.array,
50+
dataSources: PropTypes.object,
51+
onUpdate: PropTypes.func,
52+
plotly: PropTypes.object,
53+
useResizeHandler: PropTypes.bool,
54+
debug: PropTypes.bool,
55+
advancedTraceTypeSelector: PropTypes.bool,
56+
};
57+
58+
export default PlotlyEditorWithPlot;

‎src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import PlotlyEditor from './PlotlyEditor';
2+
import PlotlyEditorWithPlot from './PlotlyEditorWithPlot';
23
import {
34
connectAnnotationToLayout,
45
connectShapeToLayout,
@@ -139,6 +140,7 @@ export {
139140
localize,
140141
localizeString,
141142
walkObject,
143+
PlotlyEditorWithPlot,
142144
};
143145

144146
export default PlotlyEditor;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /