fix(types): Specify context for callbacks

- Specify explicitly this context for all callbacks - Remove ctx params from examples docs Fix #1551
naver · Jul 27, 2020 · f3b9f26 · f3b9f26
1 parent fe315dc
commit f3b9f26
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 102 deletions.
diff --git a/src/config/Options/common/main.ts b/src/config/Options/common/main.ts
@@ -148,8 +148,8 @@ export default {
 	 * @type {Function}
 	 * @default undefined
 	 * @example
-	 * // @param {Chart} ctx - Instance itself
-	 * onover: function(ctx) {
+	 * onover: function() {
+	 *   this; // chart instance itself
 	 *   ...
 	 * }
 	 */
@@ -162,8 +162,8 @@ export default {
 	 * @type {Function}
 	 * @default undefined
 	 * @example
-	 * // @param {Chart} ctx - Instance itself
-	 * onout: function(ctx) {
+	 * onout: function() {
+	 *   this; // chart instance itself
 	 *   ...
 	 * }
 	 */
@@ -176,8 +176,8 @@ export default {
 	 * @type {Function}
 	 * @default undefined
 	 * @example
-	 * // @param {Chart} ctx - Instance itself
-	 * onresize: function(ctx) {
+	 * onresize: function() {
+	 *   this; // chart instance itself
 	 *   ...
 	 * }
 	 */
@@ -190,8 +190,8 @@ export default {
 	 * @type {Function}
 	 * @default undefined
 	 * @example
-	 * // @param {Chart} ctx - Instance itself
-	 * onresized: function(ctx) {
+	 * onresized: function() {
+	 *   this; // chart instance itself
 	 *   ...
 	 * }
 	 */
@@ -204,8 +204,8 @@ export default {
 	 * @type {Function}
 	 * @default undefined
 	 * @example
-	 * // @param {Chart} ctx - Instance itself
-	 * onbeforeinit: function(ctx) {
+	 * onbeforeinit: function() {
+	 *   this; // chart instance itself
 	 *   ...
 	 * }
 	 */
@@ -218,8 +218,8 @@ export default {
 	 * @type {Function}
 	 * @default undefined
 	 * @example
-	 * // @param {Chart} ctx - Instance itself
-	 * oninit: function(ctx) {
+	 * oninit: function() {
+	 *   this; // chart instance itself
 	 *   ...
 	 * }
 	 */
@@ -232,8 +232,8 @@ export default {
 	 * @type {Function}
 	 * @default undefined
 	 * @example
-	 * // @param {Chart} ctx - Instance itself
-	 * onafterinit: function(ctx) {
+	 * onafterinit: function() {
+	 *   this; // chart instance itself
 	 *   ...
 	 * }
 	 */
@@ -246,8 +246,8 @@ export default {
 	 * @type {Function}
 	 * @default undefined
 	 * @example
-	 * // @param {Chart} ctx - Instance itself
-	 * onrendered: function(ctx) {
+	 * onrendered: function() {
+	 *   this; // chart instance itself
 	 *   ...
 	 * }
 	 */

diff --git a/src/config/Options/common/tooltip.ts b/src/config/Options/common/tooltip.ts
@@ -136,36 +136,28 @@ export default {
 	 *      },
 	 *
 	 *      // fires prior tooltip is shown
-	 *      onshow: function(ctx, selectedData) {
-	 *      	ctx; // current chart instance
-	 *
+	 *      onshow: function(selectedData) {
 	 *      	// current dataset selected
 	 *      	// ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
 	 *      	selectedData;
 	 *      },
 	 *
 	 *      // fires prior tooltip is hidden
-	 *      onhide: function(ctx, selectedData) {
-	 *      	ctx; // current chart instance
-	 *
+	 *      onhide: function(selectedData) {
 	 *      	// current dataset selected
 	 *      	// ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
 	 *      	selectedData;
 	 *      },
 	 *
 	 *      // fires after tooltip is shown
-	 *      onshown: function(ctx, selectedData) {
-	 *      	ctx; // current chart instance
-	 *
+	 *      onshown: function(selectedData) {
 	 *      	// current dataset selected
 	 *      	// ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
 	 *      	selectedData;
 	 *      },
 	 *
 	 *      // fires after tooltip is hidden
-	 *      onhidden: function(ctx, selectedData) {
-	 *      	ctx; // current chart instance
-	 *
+	 *      onhidden: function(selectedData) {
 	 *      	// current dataset selected
 	 *      	// ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
 	 *      	selectedData;

diff --git a/types/axis.d.ts b/types/axis.d.ts
@@ -1,3 +1,5 @@
+import {Chart} from "./chart";
+
 /**
  * Copyright (c) 2017 ~ present NAVER Corp.
  * billboard.js project is licensed under the MIT license
@@ -94,6 +96,7 @@ export interface xAxisConfiguration extends AxisConfigurationBase {
 	 */
 	extent?: number[] | string[] | (
 		(
+			this: Chart,
 			domain: Date|string|number[],
 			scale: (value: any) => number
 		) => number[]
@@ -202,8 +205,8 @@ export interface XTickConfiguration {
 	 * A function to format tick value. Format string is also available for timeseries data.
 	 */
 	format?: string
-		| ((x: number | Date) => string | number)
-		| ((index: number, categoryName: string) => string);
+		| ((this: Chart, x: number | Date) => string | number)
+		| ((this: Chart, index: number, categoryName: string) => string);
 
 	/**
 	 * Setting for culling ticks.
@@ -236,7 +239,7 @@ export interface XTickConfiguration {
 	 * If this option is provided, the position of the ticks will be determined based on those values.
 	 * This option works with timeseries data and the x values will be parsed accoding to the type of the value and data.xFormat option.
 	 */
-	values?: number[] | string[];
+	values?: number[] | string[] | ((this: Chart) => number[]);
 
 	/**
 	 * Rotate x axis tick text.
@@ -308,7 +311,7 @@ export interface YTickConfiguration {
 	/**
 	 * Set the y values of ticks manually.
 	 */
-	values?: number[];
+	values?: number[] | ((this: Chart) => number[]);
 
 	/**
 	 * Rotate y(or y2) axis tick text.
@@ -328,7 +331,7 @@ export interface YTickConfiguration {
 	 * Set formatter for y axis tick text.
 	 * This option accepts d3.format object as well as a function you define.
 	 */
-	format?(x: number): string;
+	format?(this: Chart, x: number): string;
 
 	/**
 	 * Setting for culling ticks.
@@ -383,7 +386,7 @@ export interface AxesConfiguration {
 		/**
 		 * Set formatter for tick text
 		 */
-		format?: (x: string) => string;
+		format?: (this: Chart, x: string) => string;
 
 		/**
 		 * Set the number of y axis ticks

diff --git a/types/chart.d.ts b/types/chart.d.ts
@@ -319,7 +319,7 @@ export interface Chart {
 	 *   - done will be called after data loaded, but it's not after rendering.
 	 *     It's because rendering will finish after some transition and there is some time lag between loading and rendering
 	 */
-	load(args: {
+	load(this: Chart, args: {
 		url?: string;
 		json?: [{ [key: string]: string }];
 		rows?: PrimitiveArray[];
@@ -352,7 +352,7 @@ export interface Chart {
 	 *   - If you call load API soon after/before unload, unload param of load should be used. Otherwise chart will not be rendered properly because of cancel of animation.
 	 *   - done will be called after data loaded, but it's not after rendering. It's because rendering will finish after some transition and there is some time lag between loading and rendering.
 	 */
-	unload(targetIds?: TargetIds, done?: () => any): any;
+	unload(this: Chart, targetIds?: TargetIds, done?: () => any): any;
 
 	/**
 	 * Flow data to the chart. By this API, you can append new data points to the chart.
@@ -383,7 +383,7 @@ export interface Chart {
 		to?: any;
 		length?: number;
 		duration?: number;
-		done?(): any;
+		done?(this: Chart): any;
 	}): void;
 
 	/**
@@ -482,7 +482,7 @@ export interface Chart {
 	 * @param mimeType The desired output image format. (ex. 'image/png' for png, 'image/jpeg' for jpeg format)
 	 * @param callback The callback to be invoked when export is ready.
 	 */
-	export(mimeType?: string, callback?: (dataUrl: string) => string): string;
+	export(this: Chart, mimeType?: string, callback?: (dataUrl: string) => string): string;
 
 	/**
 	 * Get or set single config option value.