feat(options): Pass instance arg to callbacks

Pass instance argument for callback options to facilitate the usage.

Fix #989

Author: netil

spec/internals/bb-spec.js

@@ -279,4 +279,62 @@ describe("Interface & initialization", () => {
 			});
 		});
 	});
+
+	describe("check for callbacks if instance param is passed", () => {
+		let chart;
+		const spy = sinon.spy();
+
+		before(() => {
+			const args = {
+				data: {
+					columns: [
+						["data1", 300, 350, 300]
+					]
+				}
+			};
+
+			["beforeinit", "init", "rendered", "afterinit", "resize", "resized", "over", "out"]
+				.forEach(v => {
+					args[`on${v}`] = ctx => spy(v, ctx);
+				});
+
+			chart = util.generate(args);
+		});
+
+		beforeEach(() => spy.resetHistory());
+
+		it("check for the init callbacks", () => {
+			const expected = ["beforeinit", "init", "rendered", "afterinit"];
+
+			spy.args.forEach((v, i) => {
+				expect(v[0]).to.be.equal(expected[i]);
+				expect(v[1]).to.be.equal(chart);
+			});
+		});
+
+		it("check for the resize callbacks", () => {
+			const expected = ["resize", "resized"];
+
+			// when
+			chart.internal.resizeFunction();
+
+			spy.args.forEach((v, i) => {
+				expect(v[0]).to.be.equal(expected[i]);
+				expect(v[1]).to.be.equal(chart);
+			});
+		});
+
+		it("check for the onover/out callbacks", () => {
+			const expected = ["over", "out"];
+
+			// when
+			chart.$.svg.on("mouseenter")();
+			chart.$.svg.on("mouseleave")();
+
+			spy.args.forEach((v, i) => {
+				expect(v[0]).to.be.equal(expected[i]);
+				expect(v[1]).to.be.equal(chart);
+			});
+		});
+	});
 });

spec/plugin/stanford/stanford-spec.js

@@ -6,7 +6,7 @@ import {compareEpochs, getCentroid, getRegionArea, pointInRegion} from "../../..
 describe("STANFORD", () => {
 	let chart;
 	let stanford = new Stanford({ epochs: [30, 35] });
-	const args = {
+	let args = {
 		data: {
 			x: "x",
 			columns: [

src/config/Options.js

@@ -222,61 +222,66 @@ export default class Options {
 			 * @name onover
 			 * @memberof Options
 			 * @type {Function}
-			 * @default function(){}
+			 * @default undefined
 			 * @example
-			 * onover: function() {
+			 * // @param {Chart} ctx - Instance itself
+			 * onover: function(ctx) {
 			 *   ...
 			 * }
 			 */
-			onover: () => {},
+			onover: undefined,
 
 			/**
 			 * Set a callback to execute when mouse/touch leaves the chart.
 			 * @name onout
 			 * @memberof Options
 			 * @type {Function}
-			 * @default function(){}
+			 * @default undefined
 			 * @example
-			 * onout: function() {
+			 * // @param {Chart} ctx - Instance itself
+			 * onout: function(ctx) {
 			 *   ...
 			 * }
 			 */
-			onout: () => {},
+			onout: undefined,
 
 			/**
 			 * Set a callback to execute when user resizes the screen.
 			 * @name onresize
 			 * @memberof Options
 			 * @type {Function}
-			 * @default function(){}
+			 * @default undefined
 			 * @example
-			 * onresize: function() {
+			 * // @param {Chart} ctx - Instance itself
+			 * onresize: function(ctx) {
 			 *   ...
 			 * }
 			 */
-			onresize: () => {},
+			onresize: undefined,
 
 			/**
 			 * SSet a callback to execute when screen resize finished.
 			 * @name onresized
 			 * @memberof Options
 			 * @type {Function}
-			 * @default function(){}
+			 * @default undefined
 			 * @example
-			 * onresized: function() {
+			 * // @param {Chart} ctx - Instance itself
+			 * onresized: function(ctx) {
 			 *   ...
 			 * }
 			 */
-			onresized: () => {},
+			onresized: undefined,
 
 			/**
 			 * Set a callback to execute before the chart is initialized
 			 * @name onbeforeinit
 			 * @memberof Options
 			 * @type {Function}
-			 * @default function(){}
+			 * @default undefined
 			 * @example
-			 * onbeforeinit: function() {
+			 * // @param {Chart} ctx - Instance itself
+			 * onbeforeinit: function(ctx) {
 			 *   ...
 			 * }
 			 */
@@ -287,22 +292,24 @@ export default class Options {
 			 * @name oninit
 			 * @memberof Options
 			 * @type {Function}
-			 * @default function(){}
+			 * @default undefined
 			 * @example
-			 * oninit: function() {
+			 * // @param {Chart} ctx - Instance itself
+			 * oninit: function(ctx) {
 			 *   ...
 			 * }
 			 */
-			oninit: () => {},
+			oninit: undefined,
 
 			/**
 			 * Set a callback to execute after the chart is initialized
 			 * @name onafterinit
 			 * @memberof Options
 			 * @type {Function}
-			 * @default function(){}
+			 * @default undefined
 			 * @example
-			 * onafterinit: function() {
+			 * // @param {Chart} ctx - Instance itself
+			 * onafterinit: function(ctx) {
 			 *   ...
 			 * }
 			 */
@@ -315,7 +322,8 @@ export default class Options {
 			 * @type {Function}
 			 * @default undefined
 			 * @example
-			 * onrendered: function() {
+			 * // @param {Chart} ctx - Instance itself
+			 * onrendered: function(ctx) {
 			 *   ...
 			 * }
 			 */

src/internals/ChartInternal.js

@@ -43,7 +43,7 @@ export default class ChartInternal {
 		$$.callPluginHook("$beforeInit");
 
 		// can do something
-		callFn($$.config.onbeforeinit, $$);
+		callFn($$.config.onbeforeinit, $$, $$.api);
 	}
 
 	afterInit() {
@@ -52,7 +52,7 @@ export default class ChartInternal {
 		$$.callPluginHook("$afterInit");
 
 		// can do something
-		callFn($$.config.onafterinit, $$);
+		callFn($$.config.onafterinit, $$, $$.api);
 	}
 
 	init() {
@@ -229,8 +229,8 @@ export default class ChartInternal {
 			const isTouch = $$.inputType === "touch";
 
 			$$.svg
-				.on(isTouch ? "touchstart" : "mouseenter", () => callFn(config.onover, $$))
-				.on(isTouch ? "touchend" : "mouseleave", () => callFn(config.onout, $$));
+				.on(isTouch ? "touchstart" : "mouseenter", () => callFn(config.onover, $$, $$.api))
+				.on(isTouch ? "touchend" : "mouseleave", () => callFn(config.onout, $$, $$.api));
 		}
 
 		config.svg_classname && $$.svg.attr("class", config.svg_classname);
@@ -312,7 +312,7 @@ export default class ChartInternal {
 		$$.updateDimension();
 
 		// oninit callback
-		config.oninit.call($$);
+		callFn(config.oninit, $$, $$.api);
 
 		$$.redraw({
 			withTransition: false,
@@ -782,7 +782,7 @@ export default class ChartInternal {
 		// callback function after redraw ends
 		const afterRedraw = flow || config.onrendered ? () => {
 			flowFn && flowFn();
-			callFn(config.onrendered, $$);
+			callFn(config.onrendered, $$, $$.api);
 		} : null;
 
 		if (afterRedraw) {
@@ -1175,7 +1175,7 @@ export default class ChartInternal {
 		const config = $$.config;
 
 		$$.resizeFunction = $$.generateResize();
-		$$.resizeFunction.add(config.onresize.bind($$));
+		$$.resizeFunction.add(() => callFn(config.onresize, $$, $$.api));
 
 		if (config.resize_auto) {
 			$$.resizeFunction.add(() => {
@@ -1190,7 +1190,7 @@ export default class ChartInternal {
 			});
 		}
 
-		$$.resizeFunction.add(config.onresized.bind($$));
+		$$.resizeFunction.add(() => callFn(config.onresized, $$, $$.api));
 
 		// attach resize event
 		window.addEventListener("resize", $$.resizeFunction);

types/options.d.ts

@@ -5,6 +5,7 @@
 import { Axis } from "./axis";
 import { ChartTypes, d3Selection, DataItem, PrimitiveArray } from "./types";
 import Stanford from "./plugin/stanford/index";
+import { Chart } from "./chart";
 
 export interface ChartOptions {
 	/**
@@ -513,42 +514,42 @@ export interface ChartOptions {
 	/**
 	 * Set a callback to execute when the chart is initialized.
 	 */
-	oninit?(): void;
+	oninit?(ctx: Chart): void;
 
 	/**
 	 * Set a callback to execute after the chart is initialized
 	 */
-	onafterinit?(): void;
+	onafterinit?(ctx: Chart): void;
 
 	/**
 	 * Set a callback to execute before the chart is initialized
 	 */
-	onbeforeinit?(): void;
+	onbeforeinit?(ctx: Chart): void;
 
 	/**
 	 * Set a callback which is executed when the chart is rendered. Basically, this callback will be called in each time when the chart is redrawed.
 	 */
-	onrendered?(): void;
+	onrendered?(ctx: Chart): void;
 
 	/**
 	 * Set a callback to execute when mouse/touch enters the chart.
 	 */
-	onover?(): void;
+	onover?(ctx: Chart): void;
 
 	/**
 	 * Set a callback to execute when mouse/touch leaves the chart.
 	 */
-	onout?(): void;
+	onout?(ctx: Chart): void;
 
 	/**
 	 * Set a callback to execute when user resizes the screen.
 	 */
-	onresize?(): void;
+	onresize?(ctx: Chart): void;
 
 	/**
 	 * Set a callback to execute when screen resize finished.
 	 */
-	onresized?(): void;
+	onresized?(ctx: Chart): void;
 
 	/**
 	 * Set 'clip-path' attribute for chart element.