From df223b7ead6377b3ed29817213f9dd1bb4ebc86a Mon Sep 17 00:00:00 2001 From: Lucca Miranda Date: Wed, 5 Oct 2022 20:11:43 -0300 Subject: [PATCH 1/2] refactor: migrate helpers.options to typescript --- ...{helpers.options.js => helpers.options.ts} | 108 ++++++++++-------- src/helpers/types.ts | 1 + types/helpers/helpers.canvas.d.ts | 2 +- types/helpers/helpers.options.d.ts | 61 ---------- types/helpers/index.d.ts | 1 - types/tests/helpers/options.ts | 2 +- 6 files changed, 61 insertions(+), 114 deletions(-) rename src/helpers/{helpers.options.js => helpers.options.ts} (53%) delete mode 100644 types/helpers/helpers.options.d.ts diff --git a/src/helpers/helpers.options.js b/src/helpers/helpers.options.ts similarity index 53% rename from src/helpers/helpers.options.js rename to src/helpers/helpers.options.ts index 67afade08e5..8319e16ff21 100644 --- a/src/helpers/helpers.options.js +++ b/src/helpers/helpers.options.ts @@ -1,9 +1,11 @@ import defaults from '../core/core.defaults'; import {isArray, isObject, toDimension, valueOrDefault} from './helpers.core'; -import {toFontString} from './helpers.canvas'; +import {Point, toFontString} from './helpers.canvas'; +import type {ChartArea, FontSpec} from '../../types'; +import type {TRBL, TRBLCorners} from '../../types/geometric'; -const LINE_HEIGHT = new RegExp(/^(normal|(\d+(?:\.\d+)?)(px|em|%)?)$/); -const FONT_STYLE = new RegExp(/^(normal|italic|initial|inherit|unset|(oblique( -?[0-9]?[0-9]deg)?))$/); +const LINE_HEIGHT = /^(normal|(\d+(?:\.\d+)?)(px|em|%)?)$/; +const FONT_STYLE = /^(normal|italic|initial|inherit|unset|(oblique( -?[0-9]?[0-9]deg)?))$/; /** * @alias Chart.helpers.options @@ -11,13 +13,13 @@ const FONT_STYLE = new RegExp(/^(normal|italic|initial|inherit|unset|(oblique( - */ /** * Converts the given line height `value` in pixels for a specific font `size`. - * @param {number|string} value - The lineHeight to parse (eg. 1.6, '14px', '75%', '1.6em'). - * @param {number} size - The font size (in pixels) used to resolve relative `value`. - * @returns {number} The effective line height in pixels (size * 1.2 if value is invalid). + * @param value - The lineHeight to parse (eg. 1.6, '14px', '75%', '1.6em'). + * @param size - The font size (in pixels) used to resolve relative `value`. + * @returns The effective line height in pixels (size * 1.2 if value is invalid). * @see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height * @since 2.7.0 */ -export function toLineHeight(value, size) { +export function toLineHeight(value: number | string, size: number): number { const matches = ('' + value).match(LINE_HEIGHT); if (!matches || matches[1] === 'normal') { return size * 1.2; @@ -26,25 +28,27 @@ export function toLineHeight(value, size) { value = +matches[2]; switch (matches[3]) { - case 'px': - return value; - case '%': - value /= 100; - break; - default: - break; + case 'px': + return value; + case '%': + value /= 100; + break; + default: + break; } return size * value; } -const numberOrZero = v => +v || 0; +const numberOrZero = (v: number) => +v || 0; /** - * @param {any} value - * @param {string[] | Record} props + * @param value + * @param props */ -export function _readValueToProps(value, props) { +export function _readValueToProps(value: number | Record, props: K[]): Record; +export function _readValueToProps(value: number | Record, props: Record): Record; +export function _readValueToProps(value: number | Record, props: string[] | Record) { const ret = {}; const objProps = isObject(props); const keys = objProps ? Object.keys(props) : props; @@ -62,37 +66,37 @@ export function _readValueToProps(value, props) { /** * Converts the given value into a TRBL object. - * @param {number|object} value - If a number, set the value to all TRBL component, + * @param value - If a number, set the value to all TRBL component, * else, if an object, use defined properties and sets undefined ones to 0. * x / y are shorthands for same value for left/right and top/bottom. - * @returns {object} The padding values (top, right, bottom, left) + * @returns The padding values (top, right, bottom, left) * @since 3.0.0 */ -export function toTRBL(value) { +export function toTRBL(value: number | TRBL | Point) { return _readValueToProps(value, {top: 'y', right: 'x', bottom: 'y', left: 'x'}); } /** * Converts the given value into a TRBL corners object (similar with css border-radius). - * @param {number|object} value - If a number, set the value to all TRBL corner components, + * @param value - If a number, set the value to all TRBL corner components, * else, if an object, use defined properties and sets undefined ones to 0. - * @returns {object} The TRBL corner values (topLeft, topRight, bottomLeft, bottomRight) + * @returns The TRBL corner values (topLeft, topRight, bottomLeft, bottomRight) * @since 3.0.0 */ -export function toTRBLCorners(value) { +export function toTRBLCorners(value: number | TRBLCorners) { return _readValueToProps(value, ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']); } /** * Converts the given value into a padding object with pre-computed width/height. - * @param {number|object} value - If a number, set the value to all TRBL component, + * @param value - If a number, set the value to all TRBL component, * else, if an object, use defined properties and sets undefined ones to 0. * x / y are shorthands for same value for left/right and top/bottom. - * @returns {object} The padding values (top, right, bottom, left, width, height) + * @returns The padding values (top, right, bottom, left, width, height) * @since 2.7.0 */ -export function toPadding(value) { - const obj = toTRBL(value); +export function toPadding(value?: number | TRBL): ChartArea { + const obj: ChartArea = {...toTRBL(value), width: 0, height: 0}; obj.width = obj.left + obj.right; obj.height = obj.top + obj.bottom; @@ -100,17 +104,21 @@ export function toPadding(value) { return obj; } +export interface CanvasFontSpec extends FontSpec { + string: string; +} /** * Parses font options and returns the font object. - * @param {object} options - A object that contains font options to be parsed. - * @param {object} [fallback] - A object that contains fallback font options. - * @return {object} The font object. + * @param options - A object that contains font options to be parsed. + * @param fallback - A object that contains fallback font options. + * @return The font object. * @private */ -export function toFont(options, fallback) { + +export function toFont(options: Partial, fallback?: Partial) { options = options || {}; - fallback = fallback || defaults.font; + fallback = fallback || defaults.font as FontSpec; let size = valueOrDefault(options.size, fallback.size); @@ -120,7 +128,7 @@ export function toFont(options, fallback) { let style = valueOrDefault(options.style, fallback.style); if (style && !('' + style).match(FONT_STYLE)) { console.warn('Invalid font style specified: "' + style + '"'); - style = ''; + style = undefined; } const font = { @@ -138,18 +146,18 @@ export function toFont(options, fallback) { /** * Evaluates the given `inputs` sequentially and returns the first defined value. - * @param {Array} inputs - An array of values, falling back to the last value. - * @param {object} [context] - If defined and the current value is a function, the value + * @param inputs - An array of values, falling back to the last value. + * @param context - If defined and the current value is a function, the value * is called with `context` as first argument and the result becomes the new input. - * @param {number} [index] - If defined and the current value is an array, the value + * @param index - If defined and the current value is an array, the value * at `index` become the new input. - * @param {object} [info] - object to return information about resolution in - * @param {boolean} [info.cacheable] - Will be set to `false` if option is not cacheable. + * @param info - object to return information about resolution in + * @param info.cacheable - Will be set to `false` if option is not cacheable. * @since 2.7.0 */ -export function resolve(inputs, context, index, info) { +export function resolve(inputs: Array, context?: object, index?: number, info?: { cacheable: boolean }) { let cacheable = true; - let i, ilen, value; + let i: number, ilen: number, value: unknown; for (i = 0, ilen = inputs.length; i < ilen; ++i) { value = inputs[i]; @@ -174,15 +182,15 @@ export function resolve(inputs, context, index, info) { } /** - * @param {{min: number, max: number}} minmax - * @param {number|string} grace - * @param {boolean} beginAtZero + * @param minmax + * @param grace + * @param beginAtZero * @private */ -export function _addGrace(minmax, grace, beginAtZero) { +export function _addGrace(minmax: { min: number; max: number; }, grace: number | string, beginAtZero: boolean) { const {min, max} = minmax; const change = toDimension(grace, (max - min) / 2); - const keepZero = (value, add) => beginAtZero && value === 0 ? 0 : value + add; + const keepZero = (value: number, add: number) => beginAtZero && value === 0 ? 0 : value + add; return { min: keepZero(min, -Math.abs(change)), max: keepZero(max, change) @@ -191,10 +199,10 @@ export function _addGrace(minmax, grace, beginAtZero) { /** * Create a context inheriting parentContext - * @param {object|null} parentContext - * @param {object} context - * @returns {object} + * @param parentContext + * @param context + * @returns */ -export function createContext(parentContext, context) { +export function createContext

(parentContext: P, context: T): P extends null ? T : P & T { return Object.assign(Object.create(parentContext), context); } diff --git a/src/helpers/types.ts b/src/helpers/types.ts index 690e8a0c737..cc13d581801 100644 --- a/src/helpers/types.ts +++ b/src/helpers/types.ts @@ -14,5 +14,6 @@ export * from './helpers.extras'; export * from './helpers.interpolation'; export * from './helpers.intl'; export * from './helpers.math'; +export * from './helpers.options'; export * from './helpers.rtl'; export * from '../../types/helpers'; diff --git a/types/helpers/helpers.canvas.d.ts b/types/helpers/helpers.canvas.d.ts index 4adb7ee63f2..58129dba6a9 100644 --- a/types/helpers/helpers.canvas.d.ts +++ b/types/helpers/helpers.canvas.d.ts @@ -1,7 +1,7 @@ import { PointStyle } from '..'; import { Color } from '../color'; import { ChartArea, RoundedRect } from '../geometric'; -import { CanvasFontSpec } from './helpers.options'; +import { CanvasFontSpec } from '../../src/helpers/helpers.options'; export function clearCanvas(canvas: HTMLCanvasElement, ctx?: CanvasRenderingContext2D): void; diff --git a/types/helpers/helpers.options.d.ts b/types/helpers/helpers.options.d.ts deleted file mode 100644 index b622e71e86a..00000000000 --- a/types/helpers/helpers.options.d.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { TRBL, TRBLCorners } from '../geometric'; -import { FontSpec } from '..'; - -export interface CanvasFontSpec extends FontSpec { - string: string; -} -/** - * Parses font options and returns the font object. - * @param {object} options - A object that contains font options to be parsed. - * @return {object} The font object. - */ -export function toFont(options: Partial): CanvasFontSpec; - -/** - * Converts the given line height `value` in pixels for a specific font `size`. - * @param {number|string} value - The lineHeight to parse (eg. 1.6, '14px', '75%', '1.6em'). - * @param {number} size - The font size (in pixels) used to resolve relative `value`. - * @returns {number} The effective line height in pixels (size * 1.2 if value is invalid). - * @see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height - * @since 2.7.0 - */ -export function toLineHeight(value: string, size: number): number; - -export function toTRBL(value: number | Partial): TRBL; -export function toTRBLCorners(value: number | Partial): TRBLCorners; - -/** - * Converts the given value into a padding object with pre-computed width/height. - * @param {number|object} value - If a number, set the value to all TRBL component; - * else, if an object, use defined properties and sets undefined ones to 0. - * @returns {object} The padding values (top, right, bottom, left, width, height) - * @since 2.7.0 - */ -export function toPadding( - value?: number | { top?: number; left?: number; right?: number; bottom?: number; x?:number, y?: number } -): { top: number; left: number; right: number; bottom: number; width: number; height: number }; - -/** - * Evaluates the given `inputs` sequentially and returns the first defined value. - * @param inputs - An array of values, falling back to the last value. - * @param [context] - If defined and the current value is a function, the value - * is called with `context` as first argument and the result becomes the new input. - * @param [index] - If defined and the current value is an array, the value - * at `index` become the new input. - * @param [info] - object to return information about resolution in - * @param [info.cacheable] - Will be set to `false` if option is not cacheable. - * @since 2.7.0 - */ -export function resolve( - inputs: undefined | T | ((c: C) => T) | readonly T[], - context?: C, - index?: number, - info?: { cacheable?: boolean } -): T | undefined; - - -/** - * Create a context inheriting parentContext - * @since 3.6.0 - */ -export function createContext(parentContext: P, context: T): P extends null ? T : P & T; diff --git a/types/helpers/index.d.ts b/types/helpers/index.d.ts index 591a6f2beaa..303ee1e0767 100644 --- a/types/helpers/index.d.ts +++ b/types/helpers/index.d.ts @@ -1,4 +1,3 @@ export * from './helpers.canvas'; -export * from './helpers.options'; export * from './helpers.canvas'; export * from './helpers.segment'; diff --git a/types/tests/helpers/options.ts b/types/tests/helpers/options.ts index 9fa22225ca6..bb57312a81b 100644 --- a/types/tests/helpers/options.ts +++ b/types/tests/helpers/options.ts @@ -1,4 +1,4 @@ -import { createContext } from '../../helpers/helpers.options'; +import { createContext } from '../../../src/helpers/helpers.options'; const context1 = createContext(null, { type: 'test1', parent: true }); const context2 = createContext(context1, { type: 'test2' }); From a5e1d42ae513cb65ccd5584b73a9ad88631e7d87 Mon Sep 17 00:00:00 2001 From: Lucca Miranda Date: Thu, 3 Nov 2022 13:31:03 -0300 Subject: [PATCH 2/2] chore: nitpicks --- src/helpers/helpers.options.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/helpers/helpers.options.ts b/src/helpers/helpers.options.ts index 8319e16ff21..ce411647047 100644 --- a/src/helpers/helpers.options.ts +++ b/src/helpers/helpers.options.ts @@ -40,7 +40,7 @@ export function toLineHeight(value: number | string, size: number): number { return size * value; } -const numberOrZero = (v: number) => +v || 0; +const numberOrZero = (v: unknown) => +v || 0; /** * @param value @@ -96,7 +96,7 @@ export function toTRBLCorners(value: number | TRBLCorners) { * @since 2.7.0 */ export function toPadding(value?: number | TRBL): ChartArea { - const obj: ChartArea = {...toTRBL(value), width: 0, height: 0}; + const obj = toTRBL(value) as ChartArea; obj.width = obj.left + obj.right; obj.height = obj.top + obj.bottom;