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 cc3c1da

Browse files
fixing up examples
1 parent 484091f commit cc3c1da

File tree

7 files changed

+92
-209
lines changed

7 files changed

+92
-209
lines changed

‎examples/custom/src/App.js

Lines changed: 24 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, {Component} from 'react';
22
import plotly from 'plotly.js/dist/plotly';
3-
import createPlotComponent from 'react-plotly.js/factory';
43
import PlotlyEditor from 'react-chart-editor';
54
import CustomEditor from './CustomEditor';
65
import 'react-chart-editor/lib/react-chart-editor.css';
@@ -15,63 +14,40 @@ const dataSourceOptions = Object.keys(dataSources).map(name => ({
1514
label: name,
1615
}));
1716

18-
const Plot = createPlotComponent(plotly);
17+
const config = {editable: true};
1918

2019
class App extends Component {
2120
constructor() {
2221
super();
23-
24-
// The graphDiv object is passed to Plotly.js, which then causes it to be
25-
// overwritten with a full DOM node that contains data, layout, _fullData,
26-
// _fullLayout etc in handlePlotUpdate()
2722
this.state = {
28-
graphDiv: {
29-
data: [
30-
{
31-
type: 'scatter',
32-
x: dataSources.col1,
33-
y: dataSources.col2,
34-
marker: {color: dataSources.col3},
35-
},
36-
],
37-
},
38-
plotRevision: 0,
23+
data: [
24+
{
25+
type: 'scatter',
26+
x: dataSources.col1,
27+
y: dataSources.col2,
28+
marker: {color: dataSources.col3},
29+
},
30+
],
31+
layout: {},
3932
};
4033
}
4134

42-
handlePlotUpdate(graphDiv) {
43-
this.setState({graphDiv});
44-
}
45-
46-
handleEditorUpdate() {
47-
this.setState(({plotRevision: x}) => ({plotRevision: x + 1}));
48-
}
49-
5035
render() {
5136
return (
52-
<div className="app">
53-
<PlotlyEditor
54-
locale="en"
55-
graphDiv={this.state.graphDiv}
56-
onUpdate={this.handleEditorUpdate.bind(this)}
57-
plotly={plotly}
58-
dataSources={dataSources}
59-
dataSourceOptions={dataSourceOptions}
60-
>
61-
<CustomEditor />
62-
</PlotlyEditor>
63-
<div className="app__main">
64-
<Plot
65-
debug
66-
data={this.state.graphDiv.data}
67-
layout={this.state.graphDiv.layout}
68-
config={{editable: true}}
69-
onUpdate={this.handlePlotUpdate.bind(this)}
70-
onInitialized={this.handlePlotUpdate.bind(this)}
71-
revision={this.state.plotRevision}
72-
/>
73-
</div>
74-
</div>
37+
<PlotlyEditor
38+
data={this.state.data}
39+
layout={this.state.layout}
40+
config={config}
41+
dataSources={dataSources}
42+
dataSourceOptions={dataSourceOptions}
43+
plotly={plotly}
44+
onUpdate={(data, layout) => this.setState({data, layout})}
45+
useResizeHandler
46+
debug
47+
advancedTraceTypeSelector
48+
>
49+
<CustomEditor />
50+
</PlotlyEditor>
7551
);
7652
}
7753
}

‎examples/demo/src/App.js

Lines changed: 25 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
11
import React, {Component} from 'react';
22
import plotly from 'plotly.js/dist/plotly';
3-
import createPlotComponent from 'react-plotly.js/factory';
43
import PlotlyEditor from 'react-chart-editor';
54
import 'react-chart-editor/lib/react-chart-editor.css';
65
import Nav from './Nav';
76

87
const dataSources = {
9-
col1: [1, 2, 3], // eslint-disable-line no-magic-numbers
10-
col2: [4, 3, 2], // eslint-disable-line no-magic-numbers
11-
col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
8+
col1: ['Jan', 'Feb', 'Mar'], // eslint-disable-line no-magic-numbers
9+
col2: [1, 2, 3],
10+
col3: [4, 3, 2], // eslint-disable-line no-magic-numbers
11+
col4: [17, 13, 9], // eslint-disable-line no-magic-numbers
12+
col5: ['blue'],
13+
col6: ['yellow', 'green', 'yellow'],
1214
};
1315
const dataSourceOptions = Object.keys(dataSources).map(name => ({
1416
value: name,
1517
label: name,
1618
}));
1719

18-
const Plot = createPlotComponent(plotly);
20+
const config = {editable: true};
1921

2022
class App extends Component {
2123
constructor() {
2224
super();
2325

24-
// The graphDiv object is passed to Plotly.js, which then causes it to be
25-
// overwritten with a full DOM node that contains data, layout, _fullData,
26-
// _fullLayout etc in handlePlotUpdate()
2726
this.state = {
28-
graphDiv: {},
29-
plotRevision: 0,
27+
data: [],
28+
layout: {},
3029
currentMockIndex: -1,
3130
mocks: [],
3231
};
@@ -42,61 +41,36 @@ class App extends Component {
4241
.then(mocks => this.setState({mocks}));
4342
}
4443

45-
handlePlotUpdate(graphDiv) {
46-
this.setState({graphDiv});
47-
}
48-
49-
handleEditorUpdate() {
50-
this.setState(({plotRevision: x}) => ({plotRevision: x + 1}));
51-
}
52-
5344
loadMock(mockIndex) {
5445
const mock = this.state.mocks[mockIndex];
5546
fetch(mock.url, {
5647
headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
5748
})
5849
.then(response => response.json())
5950
.then(figure => {
60-
const graphDiv = this.state.graphDiv;
61-
graphDiv.layout = figure.layout;
62-
graphDiv.data = figure.data;
63-
this.setState(({plotRevision: x}) => ({
51+
this.setState({
6452
currentMockIndex: mockIndex,
65-
plotRevision: x + 1,
66-
}));
53+
data: figure.data,
54+
layout: figure.layout,
55+
});
6756
});
6857
}
6958

7059
render() {
7160
return (
7261
<div className="app__container plotly-editor--theme-provider">
73-
<div className="app">
74-
<PlotlyEditor
75-
config={{editable: true}}
76-
graphDiv={this.state.graphDiv}
77-
onUpdate={this.handleEditorUpdate.bind(this)}
78-
dataSources={dataSources}
79-
dataSourceOptions={dataSourceOptions}
80-
plotly={plotly}
81-
advancedTraceTypeSelector
82-
/>
83-
<div className="app__main" style={{width: '100%', height: '100%'}}>
84-
<Plot
85-
data={this.state.graphDiv.data}
86-
debug
87-
layout={this.state.graphDiv.layout}
88-
onInitialized={this.handlePlotUpdate.bind(this)}
89-
onUpdate={this.handlePlotUpdate.bind(this)}
90-
revision={this.state.plotRevision}
91-
useResizeHandler
92-
style={{
93-
width: '100%',
94-
height: '100%',
95-
minHeight: 'calc(100vh - 50px)',
96-
}}
97-
/>
98-
</div>
99-
</div>
62+
<PlotlyEditor
63+
data={this.state.data}
64+
layout={this.state.layout}
65+
config={config}
66+
dataSources={dataSources}
67+
dataSourceOptions={dataSourceOptions}
68+
plotly={plotly}
69+
onUpdate={(data, layout) => this.setState({data, layout})}
70+
useResizeHandler
71+
debug
72+
advancedTraceTypeSelector
73+
/>
10074
<Nav
10175
currentMockIndex={this.state.currentMockIndex}
10276
loadMock={this.loadMock}

‎examples/redux/src/App.js

Lines changed: 18 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import 'react-chart-editor/lib/react-chart-editor.css';
22
import PlotlyEditor from 'react-chart-editor';
33
import PropTypes from 'prop-types';
44
import React, {Component} from 'react';
5-
import createPlotComponent from 'react-plotly.js/factory';
65
import plotly from 'plotly.js/dist/plotly';
76
import {bindActionCreators} from 'redux';
87
import {connect} from 'react-redux';
@@ -18,53 +17,33 @@ const dataSourceOptions = Object.keys(dataSources).map(name => ({
1817
label: name,
1918
}));
2019

21-
const Plot = createPlotComponent(plotly);
20+
const config = {editable: true};
2221

2322
class App extends Component {
2423
constructor(props) {
2524
super(props);
2625
const {actions} = props;
2726

28-
const graphDiv = {data: [], layout: {}};
29-
3027
actions.sourcesUpdate(dataSources);
3128
actions.dataSourceOptionsUpdate(dataSourceOptions);
32-
actions.initializePlot({data: graphDiv.data, layout: graphDiv.layout});
3329
}
3430

3531
render() {
36-
const {
37-
actions,
38-
dataSources,
39-
dataSourceOptions,
40-
graphDiv,
41-
plotRevision,
42-
} = this.props;
32+
const {actions, dataSources, dataSourceOptions, data, layout} = this.props;
4333

4434
return (
45-
<div className="app">
46-
<aside className="app__aside">
47-
<PlotlyEditor
48-
locale="en"
49-
dataSources={dataSources}
50-
dataSourceOptions={dataSourceOptions}
51-
graphDiv={graphDiv}
52-
onUpdate={actions.editorUpdate}
53-
plotly={plotly}
54-
/>
55-
</aside>
56-
<div className="app__main">
57-
<Plot
58-
debug
59-
data={graphDiv.data}
60-
layout={graphDiv.layout}
61-
config={{editable: true}}
62-
onUpdate={actions.plotUpdate}
63-
onInitialized={actions.plotUpdate}
64-
revision={plotRevision}
65-
/>
66-
</div>
67-
</div>
35+
<PlotlyEditor
36+
data={data}
37+
layout={layout}
38+
config={config}
39+
dataSources={dataSources}
40+
dataSourceOptions={dataSourceOptions}
41+
plotly={plotly}
42+
onUpdate={actions.editorUpdate}
43+
useResizeHandler
44+
debug
45+
advancedTraceTypeSelector
46+
/>
6847
);
6948
}
7049
}
@@ -73,17 +52,15 @@ App.propTypes = {
7352
actions: PropTypes.object,
7453
dataSourceOptions: PropTypes.array,
7554
dataSources: PropTypes.object,
76-
editorRevision: PropTypes.number,
77-
graphDiv: PropTypes.object,
78-
plotRevision: PropTypes.number,
55+
data: PropTypes.array,
56+
layout: PropTypes.object,
7957
};
8058

8159
const mapStateToProps = state => ({
8260
dataSourceOptions: state.dataSourceOptions,
8361
dataSources: state.dataSources,
84-
editorRevision: state.editorRevision,
85-
graphDiv: state.graphDiv,
86-
plotRevision: state.plotRevision,
62+
data: state.data,
63+
layout: state.layout,
8764
});
8865

8966
const mapDispatchToProps = dispatch => ({

‎examples/redux/src/actions.js

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,9 @@ export function dataSourceOptionsUpdate(payload) {
1414
};
1515
}
1616

17-
export function editorUpdate() {
17+
export function editorUpdate(data,layout) {
1818
return {
1919
type: ACTIONS.EDITOR_UPDATE,
20-
};
21-
}
22-
23-
export function plotUpdate(payload) {
24-
return {
25-
type: ACTIONS.PLOT_UPDATE,
26-
payload,
27-
};
28-
}
29-
30-
export function initializePlot(payload) {
31-
return {
32-
type: ACTIONS.INITIALIZE_PLOT,
33-
payload,
20+
payload: {data, layout},
3421
};
3522
}

‎examples/redux/src/reducer.js

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import ACTIONS from './constants';
33
const initialState = {
44
dataSources: {},
55
dataSourceOptions: [],
6-
graphDiv: {},
7-
plotRevision: 0,
6+
data: [],
7+
layout: {},
88
};
99

1010
export default (state = initialState, action) => {
@@ -16,17 +16,8 @@ export default (state = initialState, action) => {
1616
case ACTIONS.EDITOR_UPDATE:
1717
return {
1818
...state,
19-
plotRevision: state.plotRevision + 1,
20-
};
21-
case ACTIONS.PLOT_UPDATE:
22-
return {
23-
...state,
24-
graphDiv: action.payload,
25-
};
26-
case ACTIONS.INITIALIZE_PLOT:
27-
return {
28-
...state,
29-
graphDiv: action.payload,
19+
data: action.payload.data,
20+
layout: action.payload.layout,
3021
};
3122
default:
3223
return state;

0 commit comments

Comments
(0)

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