feat(option): Intent to ship onclick

Implement onclick option

Fix #2587

src/ChartInternal/ChartInternal.ts

@@ -251,7 +251,7 @@ export default class ChartInternal {
 
 	initParams(): void {
 		const $$ = <any> this;
-		const {config, format, state} = <any> $$;
+		const {config, format, state} = $$;
 		const isRotated = config.axis_rotated;
 
 		// datetime to be used for uniqueness
@@ -378,9 +378,12 @@ export default class ChartInternal {
 
 		if (hasInteraction && state.inputType) {
 			const isTouch = state.inputType === "touch";
+			const {onclick, onover, onout} = config;
 
-			$el.svg.on(isTouch ? "touchstart" : "mouseenter", () => callFn(config.onover, $$.api))
-				.on(isTouch ? "touchend" : "mouseleave", () => callFn(config.onout, $$.api));
+			$el.svg
+				.on("click", onclick?.bind($$.api) || null)
+				.on(isTouch ? "touchstart" : "mouseenter", onover?.bind($$.api) || null)
+				.on(isTouch ? "touchend" : "mouseleave", onout?.bind($$.api) || null);
 		}
 
 		config.svg_classname && $el.svg.attr("class", config.svg_classname);

src/config/Options/common/main.ts

@@ -151,15 +151,31 @@ export default {
 	 */
 	resize_auto: true,
 
+	/**
+	 * Set a callback to execute when the chart is clicked.
+	 * @name onclick
+	 * @memberof Options
+	 * @type {Function}
+	 * @default undefined
+	 * @example
+	 * onclick: function(event) {
+	 *   this; // chart instance itself
+	 *   event; // native event object
+	 *   ...
+	 * }
+	 */
+	onclick: <(() => void)|undefined> undefined,
+
 	/**
 	 * Set a callback to execute when mouse/touch enters the chart.
 	 * @name onover
 	 * @memberof Options
 	 * @type {Function}
 	 * @default undefined
 	 * @example
-	 * onover: function() {
+	 * onover: function(event) {
 	 *   this; // chart instance itself
+	 *   event; // native event object
 	 *   ...
 	 * }
 	 */
@@ -172,8 +188,9 @@ export default {
 	 * @type {Function}
 	 * @default undefined
 	 * @example
-	 * onout: function() {
+	 * onout: function(event) {
 	 *   this; // chart instance itself
+	 *   event; // native event object
 	 *   ...
 	 * }
 	 */

test/internals/bb-spec.ts

@@ -378,7 +378,7 @@ describe("Interface & initialization", () => {
 				}
 			};
 
-			["beforeinit", "init", "rendered", "afterinit", "resize", "resized", "over", "out"]
+			["beforeinit", "init", "rendered", "afterinit", "resize", "resized", "click", "over", "out"]
 				.forEach(v => {
 					args[`on${v}`] = function() {
 						spy(v, this);
@@ -411,10 +411,11 @@ describe("Interface & initialization", () => {
 			});
 		});
 
-		it("check for the onover/out callbacks", () => {
-			const expected = ["over", "out"];
+		it("check for the onclick/over/out callbacks", () => {
+			const expected = ["click", "over", "out"];
 
 			// when
+			chart.$.svg.on("click")();
 			chart.$.svg.on("mouseenter")();
 			chart.$.svg.on("mouseleave")();
 

types/options.d.ts

@@ -804,15 +804,20 @@ export interface ChartOptions {
 	 */
 	onrendered?(this: Chart): void;
 
+	/**
+	 * Set a callback to execute when the chart is clicked.
+	 */
+	onclick?(this: Chart, event: Event): void;
+
 	/**
 	 * Set a callback to execute when mouse/touch enters the chart.
 	 */
-	onover?(this: Chart): void;
+	onover?(this: Chart, event: Event): void;
 
 	/**
 	 * Set a callback to execute when mouse/touch leaves the chart.
 	 */
-	onout?(this: Chart): void;
+	onout?(this: Chart, event: Event): void;
 
 	/**
 	 * Set a callback to execute when user resizes the screen.