Change and reorder the types definitions (#759)

* Reorder the types definitions

* Update types/label.d.ts

Co-authored-by: Jacco van den Berg <[email protected]>

* applied review

Co-authored-by: Jacco van den Berg <[email protected]>

Author: stockiNail

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.

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:[email protected]",
-    "typescript-3.9": "npm:[email protected]",
-    "typescript-4.0": "npm:[email protected]",
     "typescript-4.1": "npm:[email protected]",
     "typescript-4.2": "npm:[email protected]",
     "typescript-4.3": "npm:[email protected]",

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 = `${number}%`;
+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<DrawTime, PartialEventContext>,
   font?: FontSpec
@@ -107,22 +126,3 @@ export interface BoxLabelOptions extends CoreLabelOptions {
 export interface LabelTypeOptions extends ContainedLabelOptions {
   position?: Scriptable<LabelPosition | LabelPositionObject, PartialEventContext>,
 }
-
-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
-}

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<TYPE extends AnnotationType = AnnotationType> =
 	{ [key in TYPE]: { type: key } & AnnotationTypeRegistry[key] }[TYPE]
 
+export type Scriptable<T, TContext> = T | ((ctx: TContext, options: AnnotationOptions) => T);
+export type ScaleValue = number | string;
+
 interface ShadowOptions {
   backgroundShadowColor?: Scriptable<Color, PartialEventContext>,
   borderShadowColor?: Scriptable<Color, PartialEventContext>,
@@ -26,33 +30,25 @@ interface ShadowOptions {
   shadowOffsetY?: Scriptable<number, PartialEventContext>
 }
 
-export interface CoreAnnotationOptions extends AnnotationEvents, ShadowOptions {
-  id?: string,
-  display?: Scriptable<boolean, PartialEventContext>,
+export interface CoreAnnotationOptions extends AnnotationEvents, ShadowOptions{
   adjustScaleRange?: Scriptable<boolean, PartialEventContext>,
   borderColor?: Scriptable<Color, PartialEventContext>,
-  borderWidth?: Scriptable<number, PartialEventContext>,
   borderDash?: Scriptable<number[], PartialEventContext>,
   borderDashOffset?: Scriptable<number, PartialEventContext>,
+  borderWidth?: Scriptable<number, PartialEventContext>,
+  display?: Scriptable<boolean, PartialEventContext>,
   drawTime?: Scriptable<DrawTime, PartialEventContext>,
-  endValue?: Scriptable<number|string, PartialEventContext>,
-  scaleID?: Scriptable<string, PartialEventContext>,
-  value?: Scriptable<number|string, PartialEventContext>,
-  xScaleID?: Scriptable<string, PartialEventContext>,
-  yScaleID?: Scriptable<string, PartialEventContext>,
-  z?: Scriptable<number, PartialEventContext>
-}
-
-export type Scriptable<T, TContext> = T | ((ctx: TContext, options: AnnotationOptions) => T);
-export type ScaleValue = number | string;
-interface AnnotationCoordinates {
+  id?: string,
   xMax?: Scriptable<ScaleValue, PartialEventContext>,
   xMin?: Scriptable<ScaleValue, PartialEventContext>,
+  xScaleID?: Scriptable<string, PartialEventContext>,
   yMax?: Scriptable<ScaleValue, PartialEventContext>,
   yMin?: Scriptable<ScaleValue, PartialEventContext>,
+  yScaleID?: Scriptable<string, PartialEventContext>,
+  z?: Scriptable<number, PartialEventContext>
 }
 
-interface AnnotationPointCoordinates extends AnnotationCoordinates {
+interface AnnotationPointCoordinates {
   xValue?: Scriptable<ScaleValue, PartialEventContext>,
   yValue?: Scriptable<ScaleValue, PartialEventContext>,
 }
@@ -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<number|string, PartialEventContext>,
+  label?: LabelOptions,
+  scaleID?: Scriptable<string, PartialEventContext>,
+  value?: Scriptable<number|string, PartialEventContext>
 }
 
-export interface BoxAnnotationOptions extends CoreAnnotationOptions, AnnotationCoordinates {
+export interface BoxAnnotationOptions extends CoreAnnotationOptions {
   backgroundColor?: Scriptable<Color, PartialEventContext>,
   /**
    * Border line cap style. See MDN.
@@ -106,7 +105,7 @@ export interface BoxAnnotationOptions extends CoreAnnotationOptions, AnnotationC
   rotation?: Scriptable<number, PartialEventContext>
 }
 
-export interface EllipseAnnotationOptions extends CoreAnnotationOptions, AnnotationCoordinates {
+export interface EllipseAnnotationOptions extends CoreAnnotationOptions {
   backgroundColor?: Scriptable<Color, PartialEventContext>,
   rotation?: Scriptable<number, PartialEventContext>
 }
@@ -120,8 +119,6 @@ export interface PointAnnotationOptions extends CoreAnnotationOptions, Annotatio
   yAdjust?: Scriptable<number, PartialEventContext>,
 }
 
-export type CalloutPosition = 'left' | 'top' | 'bottom' | 'right' | 'auto';
-
 export interface CalloutOptions {
   borderCapStyle?: Scriptable<CanvasLineCap, PartialEventContext>,
   borderColor?: Scriptable<Color, PartialEventContext>,
@@ -153,14 +150,10 @@ interface PolygonAnnotationOptions extends CoreAnnotationOptions, AnnotationPoin
   yAdjust?: Scriptable<number, PartialEventContext>,
 }
 
-export interface AnnotationPluginCommonOptions {
-  drawTime?: Scriptable<DrawTime, PartialEventContext>
-}
-
 export interface AnnotationPluginOptions extends AnnotationEvents {
   animations?: Record<string, unknown>,
   annotations: AnnotationOptions[] | Record<string, AnnotationOptions>,
   clip?: boolean,
-  common?: AnnotationPluginCommonOptions,
+  common?: BoxAnnotationOptions | EllipseAnnotationOptions | LabelAnnotationOptions | LineAnnotationOptions | PointAnnotationOptions | PolygonAnnotationOptions,
   interaction?: CoreInteractionOptions
 }

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',