getDatasetAtEvent, getElementAtEvent, getElementsAtEvent support

Author: gor181

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:

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;