Add typescript support (#31)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-chart-matrix",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Chart.js module for creating matrix charts",
   "main": "dist/chartjs-chart-matrix.js",
   "module": "dist/chartjs-chart-matrix.esm.js",

types/index.esm.d.ts

@@ -1,12 +1,22 @@
-import { ControllerDatasetOptions, PointHoverOptions, PointOptions, ScriptableAndArrayOptions, ScriptableContext, ChartType, Scriptable } from 'chart.js';
+import {
+  Chart,
+  ChartType,
+  ChartComponent,
+  CommonElementOptions,
+  CommonHoverOptions,
+  ControllerDatasetOptions,
+  DatasetController,
+  Element,
+  ScriptableAndArrayOptions,
+  ScriptableContext,
+  VisualElement
+} from 'chart.js';
+import { AnyObject } from 'chart.js/types/basic';
 
 export interface MatrixControllerDatasetOptions<TType extends ChartType>
   extends ControllerDatasetOptions,
-  ScriptableAndArrayOptions<PointOptions, ScriptableContext<TType>>,
-  ScriptableAndArrayOptions<PointHoverOptions, ScriptableContext<TType>> {
-
-  width: Scriptable<number, ScriptableContext<TType>>,
-  height: Scriptable<number, ScriptableContext<TType>>,
+  ScriptableAndArrayOptions<MatrixOptions, ScriptableContext<TType>>,
+  ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<TType>> {
 }
 
 export interface MatrixDataPoint {
@@ -25,3 +35,35 @@ declare module 'chart.js' {
     }
   }
 }
+
+export interface MatrixProps {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export type AnchorX = 'left' | 'center' | 'right';
+export type AnchorY = 'top' | 'center' | 'bottom';
+export interface MatrixOptions extends CommonElementOptions {
+  anchorX: AnchorX;
+  anchorY: AnchorY;
+  width: number;
+  height: number;
+}
+
+export type MatrixController = DatasetController;
+export const MatrixController: ChartComponent & {
+  prototype: MatrixController;
+  new (chart: Chart, datasetIndex: number): MatrixController;
+};
+
+export interface MatrixElement<
+  T extends MatrixProps = MatrixProps,
+  O extends MatrixOptions = MatrixOptions
+> extends Element<T, O>, VisualElement {}
+
+export const MatrixElement: ChartComponent & {
+  prototype: MatrixElement;
+  new (cfg: AnyObject): MatrixElement;
+};

types/tests/options.ts

@@ -1,12 +1,20 @@
-import '../index.esm';
 import { Chart } from 'chart.js';
+import { MatrixController, MatrixElement } from '../index.esm';
+
+Chart.register(MatrixController, MatrixElement);
 
 const chart = new Chart('test', {
   type: 'matrix',
   data: {
     datasets: [{
       label: 'Matrix',
       data: [{ x: 1, y: 1, v: 10 }],
+      anchorX: 'center',
+      anchorY: 'top',
+      width: 10,
+      height: 10,
+      borderWidth: 1,
+      hoverBorderWidth: () => 2,
     }]
   },
 });