| 1 | var React = require('react');\r |
| 2 | var CanvasJS = require('./canvasjs.min');\r |
| 3 | CanvasJS = CanvasJS.Chart ? CanvasJS : window.CanvasJS;\r |
| 4 | \r |
| 5 | class CanvasJSChart extends React.Component {\r |
| 6 | static _cjsContainerId = 0\r |
| 7 | constructor(props) { \r |
| 8 | super(props); \r |
| 9 | this.options = props.options ? props.options : {}; \r |
| 10 | this.containerProps = props.containerProps ? props.containerProps : {width: "100%", position: "relative"};\r |
| 11 | this.containerProps.height = props.containerProps && props.containerProps.height ? props.containerProps.height : this.options.height ? this.options.height + "px" : "400px";\r |
| 12 | this.chartContainerId = "canvasjs-react-chart-container-" + CanvasJSChart._cjsContainerId++;\r |
| 13 | } \r |
| 14 | componentDidMount() {\r |
| 15 | //Create Chart and Render \r |
| 16 | this.chart = new CanvasJS.Chart(this.chartContainerId, this.options);\r |
| 17 | this.chart.render();\r |
| 18 | \r |
| 19 | if(this.props.onRef)\r |
| 20 | this.props.onRef(this.chart);\r |
| 21 | } \r |
| 22 | shouldComponentUpdate(nextProps, nextState){\r |
| 23 | //Check if Chart-options has changed and determine if component has to be updated\r |
| 24 | return !(nextProps.options === this.options);\r |
| 25 | }\r |
| 26 | componentDidUpdate() {\r |
| 27 | //Update Chart Options & Render\r |
| 28 | this.chart.options = this.props.options;\r |
| 29 | this.chart.render();\r |
| 30 | }\r |
| 31 | componentWillUnmount() {\r |
| 32 | //Destroy chart and remove reference\r |
| 33 | this.chart.destroy();\r |
| 34 | if(this.props.onRef)\r |
| 35 | this.props.onRef(undefined);\r |
| 36 | } \r |
| 37 | render() { \r |
| 38 | //return React.createElement('div', { id: this.chartContainerId, style: this.containerProps }); \r |
| 39 | return <div id = {this.chartContainerId} style = {this.containerProps}/> \r |
| 40 | } \r |
| 41 | }\r |
| 42 | \r |
| 43 | var CanvasJSReact = {\r |
| 44 | CanvasJSChart: CanvasJSChart,\r |
| 45 | CanvasJS: CanvasJS\r |
| 46 | };\r |
| 47 | \r |
| 48 | export default CanvasJSReact; |