files/canvasjs.react.js

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