From 26272fc3b5d53a8676597cc3370ff6340faa443d Mon Sep 17 00:00:00 2001 From: stockiNail Date: Mon, 6 Jun 2022 11:51:03 +0200 Subject: [PATCH 1/3] Reorder the types definitions --- types/label.d.ts | 38 ++++++++++++++++---------------- types/options.d.ts | 49 ++++++++++++++++++------------------------ types/tests/exports.ts | 6 +++++- 3 files changed, 45 insertions(+), 48 deletions(-) diff --git a/types/label.d.ts b/types/label.d.ts index 0766bcbf5..836c74571 100644 --- a/types/label.d.ts +++ b/types/label.d.ts @@ -2,6 +2,25 @@ import { Color, FontSpec, BorderRadius } from 'chart.js'; import { PartialEventContext } from './events'; import { DrawTime, Scriptable, ShadowOptions } from './options'; +type percentString = string; +export type LabelPosition = 'start' | 'center' | 'end' | percentString; + +export type LabelTextAlign = 'left' | 'start' | 'center' | 'right' | 'end'; + +export interface LabelPositionObject { + x?: LabelPosition, + y?: LabelPosition +} + +export interface LabelPadding { + top?: number, + left?: number, + right?: number, + bottom?: number, + x?: number, + y?: number +} + export interface CoreLabelOptions { drawTime?: Scriptable, font?: FontSpec @@ -107,22 +126,3 @@ export interface BoxLabelOptions extends CoreLabelOptions { export interface LabelTypeOptions extends ContainedLabelOptions { position?: Scriptable, } - -type percentString = string; -export type LabelPosition = 'start' | 'center' | 'end' | percentString; - -export type LabelTextAlign = 'left' | 'start' | 'center' | 'right' | 'end'; - -interface LabelPositionObject { - x?: LabelPosition, - y?: LabelPosition -} - -interface LabelPadding { - top?: number, - left?: number, - right?: number, - bottom?: number, - x?: number, - y?: number -} diff --git a/types/options.d.ts b/types/options.d.ts index fc55257d7..ed3671c4b 100644 --- a/types/options.d.ts +++ b/types/options.d.ts @@ -4,6 +4,8 @@ import { LabelOptions, BoxLabelOptions, LabelTypeOptions } from './label'; export type DrawTime = 'afterDraw' | 'afterDatasetsDraw' | 'beforeDraw' | 'beforeDatasetsDraw'; +export type CalloutPosition = 'left' | 'top' | 'bottom' | 'right' | 'auto'; + export interface AnnotationTypeRegistry { box: BoxAnnotationOptions ellipse: EllipseAnnotationOptions @@ -14,10 +16,12 @@ export interface AnnotationTypeRegistry { } export type AnnotationType = keyof AnnotationTypeRegistry; - export type AnnotationOptions = { [key in TYPE]: { type: key } & AnnotationTypeRegistry[key] }[TYPE] +export type Scriptable = T | ((ctx: TContext, options: AnnotationOptions) => T); +export type ScaleValue = number | string; + interface ShadowOptions { backgroundShadowColor?: Scriptable, borderShadowColor?: Scriptable, @@ -26,33 +30,25 @@ interface ShadowOptions { shadowOffsetY?: Scriptable } -export interface CoreAnnotationOptions extends AnnotationEvents, ShadowOptions { - id?: string, - display?: Scriptable, +export interface CoreAnnotationOptions extends AnnotationEvents, ShadowOptions{ adjustScaleRange?: Scriptable, borderColor?: Scriptable, - borderWidth?: Scriptable, borderDash?: Scriptable, borderDashOffset?: Scriptable, + borderWidth?: Scriptable, + display?: Scriptable, drawTime?: Scriptable, - endValue?: Scriptable, - scaleID?: Scriptable, - value?: Scriptable, - xScaleID?: Scriptable, - yScaleID?: Scriptable, - z?: Scriptable -} - -export type Scriptable = T | ((ctx: TContext, options: AnnotationOptions) => T); -export type ScaleValue = number | string; -interface AnnotationCoordinates { + id?: string, xMax?: Scriptable, xMin?: Scriptable, + xScaleID?: Scriptable, yMax?: Scriptable, yMin?: Scriptable, + yScaleID?: Scriptable, + z?: Scriptable } -interface AnnotationPointCoordinates extends AnnotationCoordinates { +interface AnnotationPointCoordinates { xValue?: Scriptable, yValue?: Scriptable, } @@ -74,12 +70,15 @@ export interface ArrowHeadsOptions extends ArrowHeadOptions{ start?: ArrowHeadOptions, } -export interface LineAnnotationOptions extends CoreAnnotationOptions, AnnotationCoordinates { +export interface LineAnnotationOptions extends CoreAnnotationOptions { arrowHeads?: ArrowHeadsOptions, - label?: LabelOptions + endValue?: Scriptable, + label?: LabelOptions, + scaleID?: Scriptable, + value?: Scriptable } -export interface BoxAnnotationOptions extends CoreAnnotationOptions, AnnotationCoordinates { +export interface BoxAnnotationOptions extends CoreAnnotationOptions { backgroundColor?: Scriptable, /** * Border line cap style. See MDN. @@ -106,7 +105,7 @@ export interface BoxAnnotationOptions extends CoreAnnotationOptions, AnnotationC rotation?: Scriptable } -export interface EllipseAnnotationOptions extends CoreAnnotationOptions, AnnotationCoordinates { +export interface EllipseAnnotationOptions extends CoreAnnotationOptions { backgroundColor?: Scriptable, rotation?: Scriptable } @@ -120,8 +119,6 @@ export interface PointAnnotationOptions extends CoreAnnotationOptions, Annotatio yAdjust?: Scriptable, } -export type CalloutPosition = 'left' | 'top' | 'bottom' | 'right' | 'auto'; - export interface CalloutOptions { borderCapStyle?: Scriptable, borderColor?: Scriptable, @@ -153,14 +150,10 @@ interface PolygonAnnotationOptions extends CoreAnnotationOptions, AnnotationPoin yAdjust?: Scriptable, } -export interface AnnotationPluginCommonOptions { - drawTime?: Scriptable -} - export interface AnnotationPluginOptions extends AnnotationEvents { animations?: Record, annotations: AnnotationOptions[] | Record, clip?: boolean, - common?: AnnotationPluginCommonOptions, + common?: BoxAnnotationOptions | EllipseAnnotationOptions | LabelAnnotationOptions | LineAnnotationOptions | PointAnnotationOptions | PolygonAnnotationOptions, interaction?: CoreInteractionOptions } diff --git a/types/tests/exports.ts b/types/tests/exports.ts index d146524f0..2f1508689 100644 --- a/types/tests/exports.ts +++ b/types/tests/exports.ts @@ -22,7 +22,11 @@ const chart = new Chart('id', { intersect: true }, common: { - drawTime: 'afterDraw' + drawTime: 'afterDraw', + borderColor: 'red', + label: { + display: true + } }, annotations: [{ type: 'line', From 983fe3deb8b7db3cc9579d42d3935832c146786e Mon Sep 17 00:00:00 2001 From: stockiNail Date: Wed, 8 Jun 2022 14:08:52 +0200 Subject: [PATCH 2/3] Update types/label.d.ts Co-authored-by: Jacco van den Berg <39033624+LeeLenaleee@users.noreply.github.com> --- types/label.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/label.d.ts b/types/label.d.ts index 836c74571..2ca78db30 100644 --- a/types/label.d.ts +++ b/types/label.d.ts @@ -2,7 +2,7 @@ import { Color, FontSpec, BorderRadius } from 'chart.js'; import { PartialEventContext } from './events'; import { DrawTime, Scriptable, ShadowOptions } from './options'; -type percentString = string; +type percentString = `${number}%`; export type LabelPosition = 'start' | 'center' | 'end' | percentString; export type LabelTextAlign = 'left' | 'start' | 'center' | 'right' | 'end'; From b7a476aa77edff8c39e7fff6fb246f89ed7d132b Mon Sep 17 00:00:00 2001 From: stockiNail Date: Wed, 8 Jun 2022 15:12:54 +0200 Subject: [PATCH 3/3] applied review --- docs/guide/migrationV2.md | 4 ++++ test/integration/ts/package.json | 3 --- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/guide/migrationV2.md b/docs/guide/migrationV2.md index a4223a9de..37471a52b 100644 --- a/docs/guide/migrationV2.md +++ b/docs/guide/migrationV2.md @@ -102,3 +102,7 @@ The following diagram is showing the element properties about a `'polygon'` anno * When [scatter charts](https://www.chartjs.org/docs/latest/charts/scatter.html) are used, the interaction default `mode` in Chart.js is `point`, while, in the previous plugin version, the default was `nearest`. The `dblclick` event hook was removed from annotations options because, being executed asynchronously, it can not enable the chart re-rendering, automatically after processing the event completely. This is important when the user requires re-draws. It gets slow and messy if every event hook does the draw (or update!). + +## Types + +`chartjs-plugin-annotation` plugin version 2 removes the compatibility with TypeScript versions less than 4.1 which is the minimum supported one. diff --git a/test/integration/ts/package.json b/test/integration/ts/package.json index 2da894a08..39b929587 100644 --- a/test/integration/ts/package.json +++ b/test/integration/ts/package.json @@ -7,9 +7,6 @@ "dependencies": { "chart.js": "^3.1.0", "chartjs-plugin-annotation": "file:../plugin.tgz", - "typescript-3.8": "npm:typescript@3.8.x", - "typescript-3.9": "npm:typescript@3.9.x", - "typescript-4.0": "npm:typescript@4.0.x", "typescript-4.1": "npm:typescript@4.1.x", "typescript-4.2": "npm:typescript@4.2.x", "typescript-4.3": "npm:typescript@4.3.x",