76 lines
1.8 KiB
JavaScript
76 lines
1.8 KiB
JavaScript
|
/** @jsx React.DOM */
|
||
|
|
|
||
|
|
var Graph = React.createClass({
|
||
|
|
componentDidMount: function() {
|
||
|
|
var config = {
|
||
|
|
type: this.props.type,
|
||
|
|
data: this.props.data,
|
||
|
|
options: this.props.options || {},
|
||
|
|
};
|
||
|
|
this.chart_instance = new Chart(this.element, config);
|
||
|
|
},
|
||
|
|
|
||
|
|
componentWillUnmount: function() {
|
||
|
|
this.chart_instance.destroy();
|
||
|
|
},
|
||
|
|
|
||
|
|
componentWillReceiveProps: function(nextProps) {
|
||
|
|
const dataChanged = this.props.data !== nextProps.data;
|
||
|
|
const optionsChanged = this.props.options !== nextProps.options;
|
||
|
|
if (optionsChanged || dataChanged) {
|
||
|
|
this.chart_instance.destroy();
|
||
|
|
var config = {
|
||
|
|
type: this.props.type,
|
||
|
|
data: nextProps.data,
|
||
|
|
options: nextProps.options || {},
|
||
|
|
};
|
||
|
|
this.chart_instance = new Chart(this.element, config);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
ref: function(element) {
|
||
|
|
this.element = element;
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
return (
|
||
|
|
<canvas
|
||
|
|
ref={this.ref}
|
||
|
|
height={this.props.height}
|
||
|
|
width={this.props.width}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
var LineGraph = React.createClass({
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
return (
|
||
|
|
<Graph
|
||
|
|
type="line"
|
||
|
|
data={this.props.data}
|
||
|
|
options={this.props.options}
|
||
|
|
width={this.props.width}
|
||
|
|
height={this.props.height}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
var RadarGraph = React.createClass({
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
return (
|
||
|
|
<Graph
|
||
|
|
type="radar"
|
||
|
|
data={this.props.data}
|
||
|
|
options={this.props.options}
|
||
|
|
width={this.props.width}
|
||
|
|
height={this.props.height}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|