diff --git a/dist/react-chartjs-2.js b/dist/react-chartjs-2.js index 7978f114f..609cabf27 100644 --- a/dist/react-chartjs-2.js +++ b/dist/react-chartjs-2.js @@ -2918,6 +2918,8 @@ var ChartComponent = function (_React$Component) { getElementAtEvent && getElementAtEvent(instance.getElementAtEvent(event), event); getElementsAtEvent && getElementsAtEvent(instance.getElementsAtEvent(event), event); onElementsClick && onElementsClick(instance.getElementsAtEvent(event), event); // Backward compatibility + }, _this.ref = function (element) { + _this.element = element; }, _temp), _possibleConstructorReturn(_this, _ret); } @@ -2994,7 +2996,7 @@ var ChartComponent = function (_React$Component) { var data = props.data; if (typeof data == 'function') { - var node = _reactDom2.default.findDOMNode(this); + var node = this.element; return data(node); } else { return data; @@ -3104,7 +3106,7 @@ var ChartComponent = function (_React$Component) { redraw = _props2.redraw, plugins = _props2.plugins; - var node = _reactDom2.default.findDOMNode(this); + var node = this.element; var data = this.memoizeDataProps(); this.chart_instance = new _chart2.default(node, { @@ -3124,6 +3126,7 @@ var ChartComponent = function (_React$Component) { return _react2.default.createElement('canvas', { + ref: this.ref, height: height, width: width, onClick: this.handleOnClick diff --git a/dist/react-chartjs-2.min.js b/dist/react-chartjs-2.min.js index 710d1f3b9..9d7610443 100644 --- a/dist/react-chartjs-2.min.js +++ b/dist/react-chartjs-2.min.js @@ -1 +1 @@ -!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.reactChartjs2=t()}}(function(){return function t(e,n,r){function o(a,u){if(!n[a]){if(!e[a]){var c="function"==typeof require&&require;if(!u&&c)return c(a,!0);if(i)return i(a,!0);var s=new Error("Cannot find module '"+a+"'");throw s.code="MODULE_NOT_FOUND",s}var f=n[a]={exports:{}};e[a][0].call(f.exports,function(t){var n=e[a][1][t];return o(n?n:t)},f,f.exports,t,e,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a-1}function E(t,e){var n=this.__data__,r=U(n,t);return r<0?(++this.size,n.push([t,e])):n[r][1]=e,this}function P(t){var e=-1,n=null==t?0:t.length;for(this.clear();++es))return!1;var l=a.get(t);if(l&&a.get(e))return l==e;var p=-1,d=!0,h=n&jt?new C:void 0;for(a.set(t,e),a.set(e,t);++p-1&&t%1==0&&t-1&&t%1==0&&t<=Ot}function ht(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}function yt(t){return null!=t&&"object"==typeof t}function vt(t){return ft(t)?B(t):G(t)}function bt(){return[]}function _t(){return!1}var gt=200,mt="__lodash_hash_undefined__",wt=1,jt=2,Ot=9007199254740991,Et="[object Arguments]",Pt="[object Array]",Tt="[object AsyncFunction]",kt="[object Boolean]",At="[object Date]",xt="[object Error]",Rt="[object Function]",Ct="[object GeneratorFunction]",Dt="[object Map]",St="[object Number]",zt="[object Null]",Nt="[object Object]",It="[object Promise]",Ft="[object Proxy]",Lt="[object RegExp]",Mt="[object Set]",Bt="[object String]",Ut="[object Symbol]",qt="[object Undefined]",Vt="[object WeakMap]",Kt="[object ArrayBuffer]",Wt="[object DataView]",$t="[object Float32Array]",Yt="[object Float64Array]",Ht="[object Int8Array]",Gt="[object Int16Array]",Jt="[object Int32Array]",Qt="[object Uint8Array]",Xt="[object Uint8ClampedArray]",Zt="[object Uint16Array]",te="[object Uint32Array]",ee=/[\\^$.*+?()[\]{}|]/g,ne=/^\[object .+?Constructor\]$/,re=/^(?:0|[1-9]\d*)$/,oe={};oe[$t]=oe[Yt]=oe[Ht]=oe[Gt]=oe[Jt]=oe[Qt]=oe[Xt]=oe[Zt]=oe[te]=!0,oe[Et]=oe[Pt]=oe[Kt]=oe[kt]=oe[Wt]=oe[At]=oe[xt]=oe[Rt]=oe[Dt]=oe[St]=oe[Nt]=oe[Lt]=oe[Mt]=oe[Bt]=oe[Vt]=!1;var ie="object"==typeof t&&t&&t.Object===Object&&t,ae="object"==typeof self&&self&&self.Object===Object&&self,ue=ie||ae||Function("return this")(),ce="object"==typeof n&&n&&!n.nodeType&&n,se=ce&&"object"==typeof e&&e&&!e.nodeType&&e,fe=se&&se.exports===ce,le=fe&&ie.process,pe=function(){try{return le&&le.binding&&le.binding("util")}catch(t){}}(),de=pe&&pe.isTypedArray,he=Array.prototype,ye=Function.prototype,ve=Object.prototype,be=ue["__core-js_shared__"],_e=ye.toString,ge=ve.hasOwnProperty,me=function(){var t=/[^.]+$/.exec(be&&be.keys&&be.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),we=ve.toString,je=RegExp("^"+_e.call(ge).replace(ee,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),Oe=fe?ue.Buffer:void 0,Ee=ue.Symbol,Pe=ue.Uint8Array,Te=ve.propertyIsEnumerable,ke=he.splice,Ae=Ee?Ee.toStringTag:void 0,xe=Object.getOwnPropertySymbols,Re=Oe?Oe.isBuffer:void 0,Ce=l(Object.keys,Object),De=et(ue,"DataView"),Se=et(ue,"Map"),ze=et(ue,"Promise"),Ne=et(ue,"Set"),Ie=et(ue,"WeakMap"),Fe=et(Object,"create"),Le=ct(De),Me=ct(Se),Be=ct(ze),Ue=ct(Ne),qe=ct(Ie),Ve=Ee?Ee.prototype:void 0,Ke=Ve?Ve.valueOf:void 0;d.prototype.clear=h,d.prototype["delete"]=y,d.prototype.get=v,d.prototype.has=b,d.prototype.set=_,g.prototype.clear=m,g.prototype["delete"]=w,g.prototype.get=j,g.prototype.has=O,g.prototype.set=E,P.prototype.clear=T,P.prototype["delete"]=k,P.prototype.get=A,P.prototype.has=x,P.prototype.set=R,C.prototype.add=C.prototype.push=D,C.prototype.has=S,z.prototype.clear=N,z.prototype["delete"]=I,z.prototype.get=F,z.prototype.has=L,z.prototype.set=M;var We=xe?function(t){return null==t?[]:(t=Object(t),r(xe(t),function(e){return Te.call(t,e)}))}:bt,$e=V;(De&&$e(new De(new ArrayBuffer(1)))!=Wt||Se&&$e(new Se)!=Dt||ze&&$e(ze.resolve())!=It||Ne&&$e(new Ne)!=Mt||Ie&&$e(new Ie)!=Vt)&&($e=function(t){var e=V(t),n=e==Nt?t.constructor:void 0,r=n?ct(n):"";if(r)switch(r){case Le:return Wt;case Me:return Dt;case Be:return It;case Ue:return Mt;case qe:return Vt}return e});var Ye=K(function(){return arguments}())?K:function(t){return yt(t)&&ge.call(t,"callee")&&!Te.call(t,"callee")},He=Array.isArray,Ge=Re||_t,Je=de?u(de):H;e.exports=lt}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],5:[function(t,e,n){function r(){throw new Error("setTimeout has not been defined")}function o(){throw new Error("clearTimeout has not been defined")}function i(t){if(l===setTimeout)return setTimeout(t,0);if((l===r||!l)&&setTimeout)return l=setTimeout,setTimeout(t,0);try{return l(t,0)}catch(e){try{return l.call(null,t,0)}catch(e){return l.call(this,t,0)}}}function a(t){if(p===clearTimeout)return clearTimeout(t);if((p===o||!p)&&clearTimeout)return p=clearTimeout,clearTimeout(t);try{return p(t)}catch(e){try{return p.call(null,t)}catch(e){return p.call(this,t)}}}function u(){v&&h&&(v=!1,h.length?y=h.concat(y):b=-1,y.length&&c())}function c(){if(!v){var t=i(u);v=!0;for(var e=y.length;e;){for(h=y,y=[];++b1)for(var n=1;n=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(n,"__esModule",{value:!0}),n.Chart=n.defaults=n.Bubble=n.Polar=n.Radar=n.HorizontalBar=n.Bar=n.Line=n.Pie=n.Doughnut=void 0;var c=Object.assign||function(t){for(var e=1;e=0;l-=1)f(l);s.forEach(function(t){return r.push(t)});var p=(n.datasets,o(n,["datasets"]));this.chart_instance.config.data=c({},this.chart_instance.config.data,p),this.chart_instance.update()}}},{key:"renderChart",value:function(){var t=this.props,e=t.options,n=(t.legend,t.type),r=(t.redraw,t.plugins),o=y["default"].findDOMNode(this),i=this.memoizeDataProps();this.chart_instance=new b["default"](o,{type:n,data:i,options:e,plugins:r})}},{key:"render",value:function(){var t=this.props,e=t.height,n=t.width;t.onElementsClick;return l["default"].createElement("canvas",{height:e,width:n,onClick:this.handleOnClick})}}]),e}(l["default"].Component);m.getLabelAsKey=function(t){return t.label},m.propTypes={data:d["default"].oneOfType([d["default"].object,d["default"].func]).isRequired,getDatasetAtEvent:d["default"].func,getElementAtEvent:d["default"].func,getElementsAtEvent:d["default"].func,height:d["default"].number,legend:d["default"].object,onElementsClick:d["default"].func,options:d["default"].object,plugins:d["default"].arrayOf(d["default"].object),redraw:d["default"].bool,type:d["default"].oneOf(["doughnut","pie","line","bar","horizontalBar","radar","polarArea","bubble"]),width:d["default"].number,datasetKeyProvider:d["default"].func},m.defaultProps={legend:{display:!0,position:"bottom"},type:"doughnut",height:150,width:300,redraw:!1,options:{},datasetKeyProvider:m.getLabelAsKey},n["default"]=m;n.Doughnut=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(m,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"doughnut"}))}}]),e}(l["default"].Component),n.Pie=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(m,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"pie"}))}}]),e}(l["default"].Component),n.Line=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(m,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"line"}))}}]),e}(l["default"].Component),n.Bar=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(m,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"bar"}))}}]),e}(l["default"].Component),n.HorizontalBar=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(m,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"horizontalBar"}))}}]),e}(l["default"].Component),n.Radar=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(m,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"radar"}))}}]),e}(l["default"].Component),n.Polar=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(m,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"polarArea"}))}}]),e}(l["default"].Component),n.Bubble=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(m,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"bubble"}))}}]),e}(l["default"].Component),n.defaults=b["default"].defaults;n.Chart=b["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"lodash.isequal":4,"prop-types":9}]},{},[11])(11)}); \ No newline at end of file +!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.reactChartjs2=t()}}(function(){return function t(e,n,r){function o(a,u){if(!n[a]){if(!e[a]){var c="function"==typeof require&&require;if(!u&&c)return c(a,!0);if(i)return i(a,!0);var s=new Error("Cannot find module '"+a+"'");throw s.code="MODULE_NOT_FOUND",s}var f=n[a]={exports:{}};e[a][0].call(f.exports,function(t){var n=e[a][1][t];return o(n?n:t)},f,f.exports,t,e,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a-1}function E(t,e){var n=this.__data__,r=M(n,t);return r<0?(++this.size,n.push([t,e])):n[r][1]=e,this}function P(t){var e=-1,n=null==t?0:t.length;for(this.clear();++es))return!1;var l=a.get(t);if(l&&a.get(e))return l==e;var p=-1,d=!0,h=n&jt?new C:void 0;for(a.set(t,e),a.set(e,t);++p-1&&t%1==0&&t-1&&t%1==0&&t<=Ot}function ht(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}function yt(t){return null!=t&&"object"==typeof t}function vt(t){return ft(t)?U(t):G(t)}function bt(){return[]}function _t(){return!1}var gt=200,mt="__lodash_hash_undefined__",wt=1,jt=2,Ot=9007199254740991,Et="[object Arguments]",Pt="[object Array]",Tt="[object AsyncFunction]",kt="[object Boolean]",At="[object Date]",xt="[object Error]",Rt="[object Function]",Ct="[object GeneratorFunction]",St="[object Map]",Dt="[object Number]",zt="[object Null]",Nt="[object Object]",It="[object Promise]",Ft="[object Proxy]",Lt="[object RegExp]",Bt="[object Set]",Ut="[object String]",Mt="[object Symbol]",qt="[object Undefined]",Vt="[object WeakMap]",Kt="[object ArrayBuffer]",Wt="[object DataView]",$t="[object Float32Array]",Yt="[object Float64Array]",Ht="[object Int8Array]",Gt="[object Int16Array]",Jt="[object Int32Array]",Qt="[object Uint8Array]",Xt="[object Uint8ClampedArray]",Zt="[object Uint16Array]",te="[object Uint32Array]",ee=/[\\^$.*+?()[\]{}|]/g,ne=/^\[object .+?Constructor\]$/,re=/^(?:0|[1-9]\d*)$/,oe={};oe[$t]=oe[Yt]=oe[Ht]=oe[Gt]=oe[Jt]=oe[Qt]=oe[Xt]=oe[Zt]=oe[te]=!0,oe[Et]=oe[Pt]=oe[Kt]=oe[kt]=oe[Wt]=oe[At]=oe[xt]=oe[Rt]=oe[St]=oe[Dt]=oe[Nt]=oe[Lt]=oe[Bt]=oe[Ut]=oe[Vt]=!1;var ie="object"==typeof t&&t&&t.Object===Object&&t,ae="object"==typeof self&&self&&self.Object===Object&&self,ue=ie||ae||Function("return this")(),ce="object"==typeof n&&n&&!n.nodeType&&n,se=ce&&"object"==typeof e&&e&&!e.nodeType&&e,fe=se&&se.exports===ce,le=fe&&ie.process,pe=function(){try{return le&&le.binding&&le.binding("util")}catch(t){}}(),de=pe&&pe.isTypedArray,he=Array.prototype,ye=Function.prototype,ve=Object.prototype,be=ue["__core-js_shared__"],_e=ye.toString,ge=ve.hasOwnProperty,me=function(){var t=/[^.]+$/.exec(be&&be.keys&&be.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),we=ve.toString,je=RegExp("^"+_e.call(ge).replace(ee,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),Oe=fe?ue.Buffer:void 0,Ee=ue.Symbol,Pe=ue.Uint8Array,Te=ve.propertyIsEnumerable,ke=he.splice,Ae=Ee?Ee.toStringTag:void 0,xe=Object.getOwnPropertySymbols,Re=Oe?Oe.isBuffer:void 0,Ce=l(Object.keys,Object),Se=et(ue,"DataView"),De=et(ue,"Map"),ze=et(ue,"Promise"),Ne=et(ue,"Set"),Ie=et(ue,"WeakMap"),Fe=et(Object,"create"),Le=ct(Se),Be=ct(De),Ue=ct(ze),Me=ct(Ne),qe=ct(Ie),Ve=Ee?Ee.prototype:void 0,Ke=Ve?Ve.valueOf:void 0;d.prototype.clear=h,d.prototype["delete"]=y,d.prototype.get=v,d.prototype.has=b,d.prototype.set=_,g.prototype.clear=m,g.prototype["delete"]=w,g.prototype.get=j,g.prototype.has=O,g.prototype.set=E,P.prototype.clear=T,P.prototype["delete"]=k,P.prototype.get=A,P.prototype.has=x,P.prototype.set=R,C.prototype.add=C.prototype.push=S,C.prototype.has=D,z.prototype.clear=N,z.prototype["delete"]=I,z.prototype.get=F,z.prototype.has=L,z.prototype.set=B;var We=xe?function(t){return null==t?[]:(t=Object(t),r(xe(t),function(e){return Te.call(t,e)}))}:bt,$e=V;(Se&&$e(new Se(new ArrayBuffer(1)))!=Wt||De&&$e(new De)!=St||ze&&$e(ze.resolve())!=It||Ne&&$e(new Ne)!=Bt||Ie&&$e(new Ie)!=Vt)&&($e=function(t){var e=V(t),n=e==Nt?t.constructor:void 0,r=n?ct(n):"";if(r)switch(r){case Le:return Wt;case Be:return St;case Ue:return It;case Me:return Bt;case qe:return Vt}return e});var Ye=K(function(){return arguments}())?K:function(t){return yt(t)&&ge.call(t,"callee")&&!Te.call(t,"callee")},He=Array.isArray,Ge=Re||_t,Je=de?u(de):H;e.exports=lt}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],5:[function(t,e,n){function r(){throw new Error("setTimeout has not been defined")}function o(){throw new Error("clearTimeout has not been defined")}function i(t){if(l===setTimeout)return setTimeout(t,0);if((l===r||!l)&&setTimeout)return l=setTimeout,setTimeout(t,0);try{return l(t,0)}catch(e){try{return l.call(null,t,0)}catch(e){return l.call(this,t,0)}}}function a(t){if(p===clearTimeout)return clearTimeout(t);if((p===o||!p)&&clearTimeout)return p=clearTimeout,clearTimeout(t);try{return p(t)}catch(e){try{return p.call(null,t)}catch(e){return p.call(this,t)}}}function u(){v&&h&&(v=!1,h.length?y=h.concat(y):b=-1,y.length&&c())}function c(){if(!v){var t=i(u);v=!0;for(var e=y.length;e;){for(h=y,y=[];++b1)for(var n=1;n=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(n,"__esModule",{value:!0}),n.Chart=n.defaults=n.Bubble=n.Polar=n.Radar=n.HorizontalBar=n.Bar=n.Line=n.Pie=n.Doughnut=void 0;var c=Object.assign||function(t){for(var e=1;e=0;l-=1)f(l);s.forEach(function(t){return r.push(t)});var p=(n.datasets,o(n,["datasets"]));this.chart_instance.config.data=c({},this.chart_instance.config.data,p),this.chart_instance.update()}}},{key:"renderChart",value:function(){var t=this.props,e=t.options,n=(t.legend,t.type),r=(t.redraw,t.plugins),o=this.element,i=this.memoizeDataProps();this.chart_instance=new v["default"](o,{type:n,data:i,options:e,plugins:r})}},{key:"render",value:function(){var t=this.props,e=t.height,n=t.width;t.onElementsClick;return l["default"].createElement("canvas",{ref:this.ref,height:e,width:n,onClick:this.handleOnClick})}}]),e}(l["default"].Component);g.getLabelAsKey=function(t){return t.label},g.propTypes={data:d["default"].oneOfType([d["default"].object,d["default"].func]).isRequired,getDatasetAtEvent:d["default"].func,getElementAtEvent:d["default"].func,getElementsAtEvent:d["default"].func,height:d["default"].number,legend:d["default"].object,onElementsClick:d["default"].func,options:d["default"].object,plugins:d["default"].arrayOf(d["default"].object),redraw:d["default"].bool,type:d["default"].oneOf(["doughnut","pie","line","bar","horizontalBar","radar","polarArea","bubble"]),width:d["default"].number,datasetKeyProvider:d["default"].func},g.defaultProps={legend:{display:!0,position:"bottom"},type:"doughnut",height:150,width:300,redraw:!1,options:{},datasetKeyProvider:g.getLabelAsKey},n["default"]=g;n.Doughnut=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(g,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"doughnut"}))}}]),e}(l["default"].Component),n.Pie=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(g,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"pie"}))}}]),e}(l["default"].Component),n.Line=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(g,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"line"}))}}]),e}(l["default"].Component),n.Bar=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(g,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"bar"}))}}]),e}(l["default"].Component),n.HorizontalBar=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(g,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"horizontalBar"}))}}]),e}(l["default"].Component),n.Radar=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(g,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"radar"}))}}]),e}(l["default"].Component),n.Polar=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(g,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"polarArea"}))}}]),e}(l["default"].Component),n.Bubble=function(t){function e(){return i(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),s(e,[{key:"render",value:function(){var t=this;return l["default"].createElement(g,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"bubble"}))}}]),e}(l["default"].Component),n.defaults=v["default"].defaults;n.Chart=v["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"lodash.isequal":4,"prop-types":9}]},{},[11])(11)}); \ No newline at end of file diff --git a/lib/index.js b/lib/index.js index 791bad5bf..06cb21b6f 100644 --- a/lib/index.js +++ b/lib/index.js @@ -67,6 +67,8 @@ var ChartComponent = function (_React$Component) { getElementAtEvent && getElementAtEvent(instance.getElementAtEvent(event), event); getElementsAtEvent && getElementsAtEvent(instance.getElementsAtEvent(event), event); onElementsClick && onElementsClick(instance.getElementsAtEvent(event), event); // Backward compatibility + }, _this.ref = function (element) { + _this.element = element; }, _temp), _possibleConstructorReturn(_this, _ret); } @@ -143,7 +145,7 @@ var ChartComponent = function (_React$Component) { var data = props.data; if (typeof data == 'function') { - var node = _reactDom2.default.findDOMNode(this); + var node = this.element; return data(node); } else { return data; @@ -253,7 +255,7 @@ var ChartComponent = function (_React$Component) { redraw = _props2.redraw, plugins = _props2.plugins; - var node = _reactDom2.default.findDOMNode(this); + var node = this.element; var data = this.memoizeDataProps(); this.chart_instance = new _chart2.default(node, { @@ -273,6 +275,7 @@ var ChartComponent = function (_React$Component) { return _react2.default.createElement('canvas', { + ref: this.ref, height: height, width: width, onClick: this.handleOnClick diff --git a/package.json b/package.json index 4641d3740..3a9e72921 100644 --- a/package.json +++ b/package.json @@ -26,9 +26,10 @@ "babel-register": "^6.18.0", "babelify": "^7.3.0", "brfs": "^1.4.3", - "canvas": "^1.6.2", + "canvas-prebuilt": "^1.6.5-prerelease.1", "chai": "^3.5.0", "chart.js": "^2.3.0", + "cross-env": "^5.0.0", "debug": "^2.4.1", "enzyme": "^2.6.0", "eslint": "^1.6.0", @@ -43,6 +44,9 @@ "react-dom": "^0.14 || ^15.0.0-rc || ^15.0", "sinon": "^1.17.6" }, + "optionalDependencies": { + "canvas": "^1.6.2" + }, "peerDependencies": { "chart.js": "^2.3", "react": "^0.14 || ^15.0.0-rc || ^15.0", @@ -54,11 +58,11 @@ "chart.js": "global:Chart" }, "scripts": { - "build": "gulp clean && NODE_ENV=production gulp build", + "build": "gulp clean && cross-env NODE_ENV=production gulp build", "examples": "gulp dev:server", "lint": "eslint ./; true", - "publish:site": "NODE_ENV=production gulp publish:examples", - "release": "NODE_ENV=production gulp release", + "publish:site": "cross-env NODE_ENV=production gulp publish:examples", + "release": "cross-env NODE_ENV=production gulp release", "start": "gulp dev", "test": "mocha test/config/setup.js test/__tests__/**/*", "watch": "gulp watch:lib", diff --git a/src/index.js b/src/index.js index ad7d68e42..0f9417711 100644 --- a/src/index.js +++ b/src/index.js @@ -106,7 +106,7 @@ class ChartComponent extends React.Component { transformDataProp(props) { const { data } = props; if (typeof(data) == 'function') { - const node = ReactDOM.findDOMNode(this); + const node = this.element; return data(node); } else { return data; @@ -194,7 +194,7 @@ class ChartComponent extends React.Component { renderChart() { const {options, legend, type, redraw, plugins} = this.props; - const node = ReactDOM.findDOMNode(this); + const node = this.element; const data = this.memoizeDataProps(); this.chart_instance = new Chart(node, { @@ -221,11 +221,16 @@ class ChartComponent extends React.Component { onElementsClick && onElementsClick(instance.getElementsAtEvent(event), event); // Backward compatibility } + ref = (element) => { + this.element = element + } + render() { const {height, width, onElementsClick} = this.props; return (