2016-11-03 16:06:25 +02:00
|
|
|
const React = require('react');
|
|
|
|
const Plotly = require('plotly.js');
|
|
|
|
|
|
|
|
const Plot = React.createClass({
|
|
|
|
propTypes: {
|
|
|
|
name: React.PropTypes.string.isRequired,
|
|
|
|
xdata: React.PropTypes.object,
|
|
|
|
ydata: React.PropTypes.object,
|
|
|
|
type: React.PropTypes.string,
|
|
|
|
mode: React.PropTypes.string,
|
|
|
|
},
|
|
|
|
componentDidMount: function() {
|
|
|
|
const {
|
|
|
|
name,
|
|
|
|
xData,
|
|
|
|
yData,
|
|
|
|
type = 'scatter',
|
|
|
|
mode = 'markers'
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
Plotly.newPlot(name, [{
|
|
|
|
x: xData,
|
|
|
|
y: yData,
|
|
|
|
mode,
|
|
|
|
type
|
|
|
|
}], {
|
|
|
|
margin: {
|
|
|
|
t: 0, r: 0, l: 30
|
|
|
|
},
|
|
|
|
xaxis: {
|
|
|
|
gridcolor: 'transparent'
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
displayModeBar: false
|
|
|
|
});
|
|
|
|
},
|
|
|
|
render: function() {
|
|
|
|
const {
|
|
|
|
name
|
|
|
|
} = this.props
|
|
|
|
|
|
|
|
return (
|
2016-11-07 16:35:58 +02:00
|
|
|
<div id={name} />
|
2016-11-03 16:06:25 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = Plot;
|