adding typings for Zoom analog to chartjs-plugin-annotation (#438)

Co-authored-by: Zeugner, Thomas <Thomas.Zeugner@kuka.com>

package.json

@@ -7,6 +7,7 @@
   "unpkg": "dist/chartjs-plugin-zoom.min.js",
   "main": "dist/chartjs-plugin-zoom.js",
   "module": "dist/chartjs-plugin-zoom.esm.js",
+  "types": "types/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/chartjs/chartjs-plugin-zoom.git"
@@ -17,10 +18,12 @@
     "lint": "eslint \"samples/**/*.html\" \"test/**/*.js\" \"src/**/*.js\"",
     "test": "cross-env NODE_ENV=test concurrently \"npm:test-*\"",
     "test-lint": "npm run lint",
-    "test-karma": "karma start --auto-watch --single-run --coverage"
+    "test-karma": "karma start --auto-watch --single-run --coverage",
+    "test-types": "tsc -p types/test/"
   },
   "files": [
-    "dist/*.js"
+    "dist/*.js",
+    "types/*.d.ts"
   ],
   "devDependencies": {
     "chart.js": "^3.0.0-beta.13",
@@ -47,7 +50,8 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.1.3"
   },
   "peerDependencies": {
     "chart.js": "^3.0.0-beta.13"

types/index.d.ts

@@ -0,0 +1,10 @@
+import { Plugin, ChartType } from 'chart.js';
+import { ZoomPluginOptions } from './options';
+
+declare module 'chart.js' {
+	interface PluginOptionsByType<TType extends ChartType> {
+	  zoom: ZoomPluginOptions;
+	}
+}
+
+export declare const Zoom: Plugin;

types/options.d.ts

@@ -0,0 +1,142 @@
+import { Chart } from 'chart.js';
+
+
+type Mode =  'x' | 'y' | 'xy' | 'xy';
+
+interface DragEffectOptions {
+	borderColor?: string;
+	borderWidth?: number;
+	backgroundColor?: string;
+	animationDuration?: number;
+}
+
+interface XyValue {
+	x?: number;
+	y?: number;
+}
+
+interface ZoomOptions {
+	/**
+	 * Boolean to enable zooming
+	 **/
+	enabled: boolean;
+
+	/**
+	 * Enable drag-to-zoom behavior
+	 **/
+	drag: boolean | DragEffectOptions;
+
+
+	// Zooming directions. Remove the appropriate direction to disable
+	// Eg. 'y' would only allow zooming in the y direction
+	// A function that is called as the user is zooming and returns the
+	// available directions can also be used:
+	//   mode: function({ chart }) {
+	//     return 'xy';
+	//   },
+	mode: Mode | { (char: Chart): Mode };
+
+	/**
+	  * Format of min zoom range depends on scale type
+	  */
+	rangeMin?: XyValue;
+
+	/**
+	 * Format of max zoom range depends on scale type
+	 */
+	rangeMax?: XyValue;
+
+	/** Speed of zoom via mouse wheel
+	 * (percentage of zoom on a wheel event)
+	 */
+	speed?: number;
+
+	/**
+	 * Minimal zoom distance required before actually applying zoom
+	 */		
+	threshold?: number;
+
+	/**
+	 * On category scale, minimal zoom level before actually applying zoom
+	 */	
+	sensitivity?: number;
+
+	/**
+	 * Function called while the user is zooming
+	 */
+	onZoom?: (chart: Chart) => void;
+
+	/**
+	 * Function called once zooming is completed
+	 */
+	onZoomComplete?: (chart: Chart) => void;
+
+	/**
+	 * Function called when wheel input occurs without modifier key
+	 */
+	onZoomRejected?: (chart: Chart, event: Event) => void;
+
+}
+
+// Container for pan options
+interface PanOptions {
+	/**
+	 * Boolean to enable panning
+	 */
+	enabled: boolean;
+
+
+	/**
+	 * Panning directions. Remove the appropriate direction to disable
+	 * Eg. 'y' would only allow panning in the y direction
+	 * A function that is called as the user is panning and returns the
+	 * available directions can also be used:
+	 *   mode: function({ chart }) {
+	 *     return 'xy';
+	 *   },
+	 */
+	mode: Mode | { (char: Chart): Mode };
+
+	/**
+	 * Format of min pan range depends on scale type
+	 */
+	rangeMin?: XyValue;
+
+	/**
+	 * Format of max pan range depends on scale type
+	 */
+	rangeMax?: XyValue;
+
+
+	/**
+	 * On category scale, factor of pan velocity
+	 */
+	speed?: number;
+
+	/**
+	 * Minimal pan distance required before actually applying pan
+	 */
+	threshold?: number;
+
+	/**
+	 * Function called while the user is panning
+	 */
+	onPan?: (chart: Chart) => void;
+
+	/**
+	 * Function called once panning is completed
+	 */
+	onPanComplete?: (chart: Chart) => void;
+
+	/**
+	 * Function called when pan fails because modifier key was not detected.
+	 * event is the a hammer event that failed - see https://hammerjs.github.io/api#event-object
+	 */
+	onPanRejected: (chart: Chart, event: Event) => void;
+}
+
+
+export interface ZoomPluginOptions {
+	pan?: PanOptions;
+	zoom?: ZoomOptions;
+}

types/test/exports.ts

@@ -0,0 +1,32 @@
+import { Chart } from 'chart.js';
+import { Zoom } from '../index';
+
+Chart.register(Zoom);
+Chart.unregister(Zoom);
+
+const chart = new Chart('id', {
+	type: 'bar',
+	data: {
+		labels: [],
+		datasets: [{
+			data: []
+		}]
+	},
+	options: {
+		plugins: {
+			zoom: {
+				pan: {
+					enabled: true,
+					mode: 'x'
+				},
+				zoom: {	
+					enabled: true,
+					sensitivity: 0.5,
+					mode: 'x',
+
+				}
+			},
+		}
+	},
+	plugins: [Zoom]
+});

types/test/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "moduleResolution": "Node",
+    "alwaysStrict": true,
+    "noEmit": true
+  },
+  "include": [
+    "*.ts",
+    "../*.d.ts"
+  ]
+}