diff --git a/README.md b/README.md index c54ce993b..071973723 100644 --- a/README.md +++ b/README.md @@ -43,12 +43,15 @@ import {Doughnut} from 'react-chartjs-2'; ### Properties * data: PropTypes.object.isRequired, +* width: PropTypes.number, * height: PropTypes.number, * legend: PropTypes.object, -* onElementsClick: PropTypes.func, * options: PropTypes.object, * redraw: PropTypes.bool, -* width: PropTypes.number +* getDatasetAtEvent: PropTypes.func, +* getElementAtEvent: PropTypes.func, +* getElementsAtEvent: PropTypes.func +* onElementsClick: PropTypes.func, // alias for getElementsAtEvent (backward compatibility) ### Custom size In order for Chart.js to obey the custom size you need to set `maintainAspectRatio` to false, example: diff --git a/dist/react-chartjs-2.js b/dist/react-chartjs-2.js index ea86c4989..cbabbdc5a 100644 --- a/dist/react-chartjs-2.js +++ b/dist/react-chartjs-2.js @@ -41,6 +41,9 @@ var ChartComponent = _react2.default.createClass({ propTypes: { data: _react.PropTypes.object.isRequired, + getDatasetAtEvent: _react.PropTypes.func, + getElementAtEvent: _react.PropTypes.func, + getElementsAtEvent: _react.PropTypes.func, height: _react.PropTypes.number, legend: _react.PropTypes.object, onElementsClick: _react.PropTypes.func, @@ -89,6 +92,7 @@ var ChartComponent = _react2.default.createClass({ var ignoredProperties = ['id', 'width', 'height', 'onElementsClick']; var compareNext = this._objectWithoutProperties(nextProps, ignoredProperties); var compareNow = this._objectWithoutProperties(this.props, ignoredProperties); + return !(0, _deepEqual2.default)(compareNext, compareNow, { strict: true }); }, componentWillUnmount: function componentWillUnmount() { @@ -125,25 +129,32 @@ var ChartComponent = _react2.default.createClass({ options: options }); }, - handleOnClick: function handleOnClick(evt) { - var elems = this.chart_instance.getElementsAtEvent(evt); - if (elems.length) { - var onElementsClick = this.props.onElementsClick; + handleOnClick: function handleOnClick(event) { + var instance = this.chart_instance; - onElementsClick(elems); - } - }, - render: function render() { var _props3 = this.props; - var height = _props3.height; - var width = _props3.width; + var getDatasetAtEvent = _props3.getDatasetAtEvent; + var getElementAtEvent = _props3.getElementAtEvent; + var getElementsAtEvent = _props3.getElementsAtEvent; var onElementsClick = _props3.onElementsClick; + getDatasetAtEvent && getDatasetAtEvent(instance.getDatasetAtEvent(event)); + getElementAtEvent && getElementAtEvent(instance.getElementAtEvent(event)); + getElementsAtEvent && getElementsAtEvent(instance.getElementsAtEvent(event)); + onElementsClick && onElementsClick(instance.getElementsAtEvent(event)); // Backward compatibility + }, + render: function render() { + var _props4 = this.props; + var height = _props4.height; + var width = _props4.width; + var onElementsClick = _props4.onElementsClick; + + return _react2.default.createElement('canvas', { height: height, width: width, - onClick: typeof onElementsClick === 'function' ? this.handleOnClick : null + onClick: this.handleOnClick }); } }); @@ -368,7 +379,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; var hasOwnProperty = Object.prototype.hasOwnProperty; diff --git a/dist/react-chartjs-2.min.js b/dist/react-chartjs-2.min.js index 4f853c3cb..0888be214 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.index=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 f=new Error("Cannot find module '"+a+"'");throw f.code="MODULE_NOT_FOUND",f}var s=n[a]={exports:{}};e[a][0].call(s.exports,function(t){var n=e[a][1][t];return o(n?n:t)},s,s.exports,t,e,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},shouldComponentUpdate:function(t,e){var n=["id","width","height","onElementsClick"],r=this._objectWithoutProperties(t,n),o=this._objectWithoutProperties(this.props,n);return!(0,_["default"])(r,o,{strict:!0})},componentWillUnmount:function(){this.chart_instance.destroy()},updateChart:function(){var t=this.props,e=t.data,n=t.options;this.chart_instance&&(n&&(this.chart_instance.options=d["default"].helpers.configMerge(this.chart_instance.options,n)),this.chart_instance.config.data=c({},this.chart_instance.config.data,e),this.chart_instance.update())},renderChart:function(){var t=this.props,e=t.data,n=t.options,r=(t.legend,t.type),o=l["default"].findDOMNode(this);this.chart_instance=new d["default"](o,{type:r,data:e,options:n})},handleOnClick:function(t){var e=this.chart_instance.getElementsAtEvent(t);if(e.length){var n=this.props.onElementsClick;n(e)}},render:function(){var t=this.props,e=t.height,n=t.width,r=t.onElementsClick;return s["default"].createElement("canvas",{height:e,width:n,onClick:"function"==typeof r?this.handleOnClick:null})}});n["default"]=b;n.Doughnut=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"doughnut"}))}}]),e}(s["default"].Component),n.Pie=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"pie"}))}}]),e}(s["default"].Component),n.Line=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"line"}))}}]),e}(s["default"].Component),n.Bar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"bar"}))}}]),e}(s["default"].Component),n.HorizontalBar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"horizontalBar"}))}}]),e}(s["default"].Component),n.Radar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"radar"}))}}]),e}(s["default"].Component),n.Polar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"polarArea"}))}}]),e}(s["default"].Component),n.Bubble=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"bubble"}))}}]),e}(s["default"].Component),n.defaults=d["default"].defaults}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./utils/deepEqual":2,"chart.js":void 0,"react-dom":void 0}],2:[function(t,e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o=Object.prototype.hasOwnProperty,i=function(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e},a=function u(t,e){if(i(t,e))return!0;if("object"!==("undefined"==typeof t?"undefined":r(t))||null===t||"object"!==("undefined"==typeof e?"undefined":r(e))||null===e)return!1;for(var n=Object.keys(t),a=Object.keys(e),c=n.concat(a),f=0;f=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},shouldComponentUpdate:function(t,e){var n=["id","width","height","onElementsClick"],r=this._objectWithoutProperties(t,n),o=this._objectWithoutProperties(this.props,n);return!(0,_["default"])(r,o,{strict:!0})},componentWillUnmount:function(){this.chart_instance.destroy()},updateChart:function(){var t=this.props,e=t.data,n=t.options;this.chart_instance&&(n&&(this.chart_instance.options=d["default"].helpers.configMerge(this.chart_instance.options,n)),this.chart_instance.config.data=c({},this.chart_instance.config.data,e),this.chart_instance.update())},renderChart:function(){var t=this.props,e=t.data,n=t.options,r=(t.legend,t.type),o=l["default"].findDOMNode(this);this.chart_instance=new d["default"](o,{type:r,data:e,options:n})},handleOnClick:function(t){var e=this.chart_instance,n=this.props,r=n.getDatasetAtEvent,o=n.getElementAtEvent,i=n.getElementsAtEvent,a=n.onElementsClick;r&&r(e.getDatasetAtEvent(t)),o&&o(e.getElementAtEvent(t)),i&&i(e.getElementsAtEvent(t)),a&&a(e.getElementsAtEvent(t))},render:function(){var t=this.props,e=t.height,n=t.width;t.onElementsClick;return s["default"].createElement("canvas",{height:e,width:n,onClick:this.handleOnClick})}});n["default"]=b;n.Doughnut=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"doughnut"}))}}]),e}(s["default"].Component),n.Pie=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"pie"}))}}]),e}(s["default"].Component),n.Line=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"line"}))}}]),e}(s["default"].Component),n.Bar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"bar"}))}}]),e}(s["default"].Component),n.HorizontalBar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"horizontalBar"}))}}]),e}(s["default"].Component),n.Radar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"radar"}))}}]),e}(s["default"].Component),n.Polar=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"polarArea"}))}}]),e}(s["default"].Component),n.Bubble=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return a(e,t),u(e,[{key:"render",value:function(){var t=this;return s["default"].createElement(b,c({},this.props,{ref:function(e){return t.chart_instance=e&&e.chart_instance},type:"bubble"}))}}]),e}(s["default"].Component),n.defaults=d["default"].defaults}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./utils/deepEqual":2,"chart.js":void 0,"react-dom":void 0}],2:[function(t,e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},o=Object.prototype.hasOwnProperty,i=function(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e},a=function u(t,e){if(i(t,e))return!0;if("object"!==("undefined"==typeof t?"undefined":r(t))||null===t||"object"!==("undefined"==typeof e?"undefined":r(e))||null===e)return!1;for(var n=Object.keys(t),a=Object.keys(e),c=n.concat(a),f=0;f ); }