refactor: move batch of helpers to ts (#10722)

* refactor: move batch of helpers to ts

* refactor: review fixes

Author: dangreen

src/core/core.animation.js

@@ -7,6 +7,11 @@ const interpolators = {
   boolean(from, to, factor) {
     return factor > 0.5 ? to : from;
   },
+  /**
+   * @param {string} from
+   * @param {string} to
+   * @param {number} factor
+   */
   color(from, to, factor) {
     const c0 = helpersColor(from || transparent);
     const c1 = c0.valid && helpersColor(to || transparent);

src/core/core.datasetController.js

@@ -1030,31 +1030,19 @@ export default class DatasetController {
     this.chart._dataChanges.push([this.index, ...args]);
   }
 
-  /**
-	 * @private
-	 */
   _onDataPush() {
     const count = arguments.length;
     this._sync(['_insertElements', this.getDataset().data.length - count, count]);
   }
 
-  /**
-	 * @private
-	 */
   _onDataPop() {
     this._sync(['_removeElements', this._cachedMeta.data.length - 1, 1]);
   }
 
-  /**
-	 * @private
-	 */
   _onDataShift() {
     this._sync(['_removeElements', 0, 1]);
   }
 
-  /**
-	 * @private
-	 */
   _onDataSplice(start, count) {
     if (count) {
       this._sync(['_removeElements', start, count]);
@@ -1065,9 +1053,6 @@ export default class DatasetController {
     }
   }
 
-  /**
-	 * @private
-	 */
   _onDataUnshift() {
     this._sync(['_insertElements', 0, arguments.length]);
   }

src/elements/element.arc.js

@@ -4,6 +4,7 @@ import {PI, _isBetween, _limitValue} from '../helpers/helpers.math';
 import {_readValueToProps} from '../helpers/helpers.options';
 
 /** @typedef {{ x: number, y: number, startAngle: number, endAngle: number, innerRadius: number, outerRadius: number, circumference: number }} ArcProps */
+/** @typedef {import('../../types/geometric').Point} Point */
 
 function clipArc(ctx, element, endAngle) {
   const {startAngle, pixelMargin, x, y, outerRadius, innerRadius} = element;
@@ -310,7 +311,7 @@ export default class ArcElement extends Element {
 	 * @param {boolean} [useFinalPosition]
 	 */
   inRange(chartX, chartY, useFinalPosition) {
-    const point = this.getProps(['x', 'y'], useFinalPosition);
+    const point = /** @type {Point} */ (this.getProps(['x', 'y'], useFinalPosition));
     const {angle, distance} = getAngleFromPoint(point, {x: chartX, y: chartY});
     const {startAngle, endAngle, innerRadius, outerRadius, circumference} = /** @type {ArcProps} */ (this.getProps([
       'startAngle',

src/helpers/helpers.collection.js renamed to src/helpers/helpers.collection.ts

@@ -2,16 +2,30 @@ import {_capitalize} from './helpers.core';
 
 /**
  * Binary search
- * @param {array} table - the table search. must be sorted!
- * @param {number} value - value to find
- * @param {function} [cmp]
+ * @param table - the table search. must be sorted!
+ * @param value - value to find
+ * @param cmp
  * @private
  */
-export function _lookup(table, value, cmp) {
+export function _lookup(
+  table: number[],
+  value: number,
+  cmp?: (value: number) => boolean
+): {lo: number, hi: number};
+export function _lookup<T>(
+  table: T[],
+  value: number,
+  cmp: (value: number) => boolean
+): {lo: number, hi: number};
+export function _lookup(
+  table: unknown[],
+  value: number,
+  cmp?: (value: number) => boolean
+) {
   cmp = cmp || ((index) => table[index] < value);
   let hi = table.length - 1;
   let lo = 0;
-  let mid;
+  let mid: number;
 
   while (hi - lo > 1) {
     mid = (lo + hi) >> 1;
@@ -27,13 +41,18 @@ export function _lookup(table, value, cmp) {
 
 /**
  * Binary search
- * @param {array} table - the table search. must be sorted!
- * @param {string} key - property name for the value in each entry
- * @param {number} value - value to find
- * @param {boolean} [last] - lookup last index
+ * @param table - the table search. must be sorted!
+ * @param key - property name for the value in each entry
+ * @param value - value to find
+ * @param last - lookup last index
  * @private
  */
-export const _lookupByKey = (table, key, value, last) =>
+export const _lookupByKey = (
+  table: Record<string, number>[],
+  key: string,
+  value: number,
+  last?: boolean
+) =>
   _lookup(table, value, last
     ? index => {
       const ti = table[index][key];
@@ -43,22 +62,26 @@ export const _lookupByKey = (table, key, value, last) =>
 
 /**
  * Reverse binary search
- * @param {array} table - the table search. must be sorted!
- * @param {string} key - property name for the value in each entry
- * @param {number} value - value to find
+ * @param table - the table search. must be sorted!
+ * @param key - property name for the value in each entry
+ * @param value - value to find
  * @private
  */
-export const _rlookupByKey = (table, key, value) =>
+export const _rlookupByKey = (
+  table: Record<string, number>[],
+  key: string,
+  value: number
+) =>
   _lookup(table, value, index => table[index][key] >= value);
 
 /**
  * Return subset of `values` between `min` and `max` inclusive.
  * Values are assumed to be in sorted order.
- * @param {number[]} values - sorted array of values
- * @param {number} min - min value
- * @param {number} max - max value
+ * @param values - sorted array of values
+ * @param min - min value
+ * @param max - max value
  */
-export function _filterBetween(values, min, max) {
+export function _filterBetween(values: number[], min: number, max: number) {
   let start = 0;
   let end = values.length;
 
@@ -74,13 +97,22 @@ export function _filterBetween(values, min, max) {
     : values;
 }
 
-const arrayEvents = ['push', 'pop', 'shift', 'splice', 'unshift'];
+const arrayEvents = ['push', 'pop', 'shift', 'splice', 'unshift'] as const;
+
+export interface ArrayListener<T> {
+  _onDataPush?(...item: T[]): void;
+  _onDataPop?(): void;
+  _onDataShift?(): void;
+  _onDataSplice?(index: number, deleteCount: number, ...items: T[]): void;
+  _onDataUnshift?(...item: T[]): void;
+}
 
 /**
  * Hooks the array methods that add or remove values ('push', pop', 'shift', 'splice',
  * 'unshift') and notify the listener AFTER the array has been altered. Listeners are
  * called on the '_onData*' callbacks (e.g. _onDataPush, etc.) with same arguments.
  */
+export function listenArrayEvents<T>(array: T[], listener: ArrayListener<T>): void;
 export function listenArrayEvents(array, listener) {
   if (array._chartjs) {
     array._chartjs.listeners.push(listener);
@@ -122,6 +154,7 @@ export function listenArrayEvents(array, listener) {
  * Removes the given array event listener and cleanup extra attached properties (such as
  * the _chartjs stub and overridden methods) if array doesn't have any more listeners.
  */
+export function unlistenArrayEvents<T>(array: T[], listener: ArrayListener<T>): void;
 export function unlistenArrayEvents(array, listener) {
   const stub = array._chartjs;
   if (!stub) {
@@ -146,11 +179,11 @@ export function unlistenArrayEvents(array, listener) {
 }
 
 /**
- * @param {Array} items
+ * @param items
  */
-export function _arrayUnique(items) {
-  const set = new Set();
-  let i, ilen;
+export function _arrayUnique<T>(items: T[]) {
+  const set = new Set<T>();
+  let i: number, ilen: number;
 
   for (i = 0, ilen = items.length; i < ilen; ++i) {
     set.add(items[i]);

src/helpers/helpers.color.js

@@ -0,0 +1,32 @@
+import colorLib, {Color} from '@kurkle/color';
+
+export function isPatternOrGradient(value: unknown): value is CanvasPattern | CanvasGradient {
+  if (value && typeof value === 'object') {
+    const type = value.toString();
+    return type === '[object CanvasPattern]' || type === '[object CanvasGradient]';
+  }
+
+  return false;
+}
+
+export function color(value: CanvasGradient): CanvasGradient;
+export function color(value: CanvasPattern): CanvasPattern;
+export function color(
+  value:
+  | string
+  | { r: number; g: number; b: number; a: number }
+  | [number, number, number]
+  | [number, number, number, number]
+): Color;
+export function color(value) {
+  return isPatternOrGradient(value) ? value : colorLib(value);
+}
+
+export function getHoverColor(value: CanvasGradient): CanvasGradient;
+export function getHoverColor(value: CanvasPattern): CanvasPattern;
+export function getHoverColor(value: string): string;
+export function getHoverColor(value) {
+  return isPatternOrGradient(value)
+    ? value
+    : colorLib(value).saturate(0.5).darken(0.1).hexString();
+}

src/helpers/helpers.color.ts

@@ -0,0 +1,42 @@
+import type {Point} from '../../types/geometric';
+import type {MonotoneSplinePoint} from '../../types/helpers';
+
+/**
+ * @private
+ */
+export function _pointInLine(p1: Point, p2: Point, t: number, mode?) { // eslint-disable-line @typescript-eslint/no-unused-vars
+  return {
+    x: p1.x + t * (p2.x - p1.x),
+    y: p1.y + t * (p2.y - p1.y)
+  };
+}
+
+/**
+ * @private
+ */
+export function _steppedInterpolation(
+  p1: Point,
+  p2: Point,
+  t: number, mode: 'middle' | 'after' | unknown
+) {
+  return {
+    x: p1.x + t * (p2.x - p1.x),
+    y: mode === 'middle' ? t < 0.5 ? p1.y : p2.y
+      : mode === 'after' ? t < 1 ? p1.y : p2.y
+        : t > 0 ? p2.y : p1.y
+  };
+}
+
+/**
+ * @private
+ */
+export function _bezierInterpolation(p1: MonotoneSplinePoint, p2: MonotoneSplinePoint, t: number, mode?) { // eslint-disable-line @typescript-eslint/no-unused-vars
+  const cp1 = {x: p1.cp2x, y: p1.cp2y};
+  const cp2 = {x: p2.cp1x, y: p2.cp1y};
+  const a = _pointInLine(p1, cp1, t);
+  const b = _pointInLine(cp1, cp2, t);
+  const c = _pointInLine(cp2, p2, t);
+  const d = _pointInLine(a, b, t);
+  const e = _pointInLine(b, c, t);
+  return _pointInLine(d, e, t);
+}

src/helpers/helpers.interpolation.js

@@ -1,7 +1,7 @@
 
-const intlCache = new Map();
+const intlCache = new Map<string, Intl.NumberFormat>();
 
-function getNumberFormat(locale, options) {
+function getNumberFormat(locale: string, options?: Intl.NumberFormatOptions) {
   options = options || {};
   const cacheKey = locale + JSON.stringify(options);
   let formatter = intlCache.get(cacheKey);
@@ -12,6 +12,6 @@ function getNumberFormat(locale, options) {
   return formatter;
 }
 
-export function formatNumber(num, locale, options) {
+export function formatNumber(num: number, locale: string, options?: Intl.NumberFormatOptions) {
   return getNumberFormat(locale, options).format(num);
 }