chartjs-chart-matrix - npm Package Compare versions

Comparing version 1.0.0-beta to 1.0.0-beta.2

dist/chartjs-chart-matrix.esm.js

 /*!
- * chartjs-chart-matrix v1.0.0-beta
+ * chartjs-chart-matrix v1.0.0-beta.2
  * https://github.com/kurkle/chartjs-chart-matrix#readme
- * (c) 2020 Jukka Kurkela
+ * (c) 2021 Jukka Kurkela
  * Released under the MIT license
@@ -11,49 +11,49 @@ */
 class MatrixController extends DatasetController {
-	initialize() {
-		this.enableOptionSharing = true;
-		super.initialize();
-	}
+  initialize() {
+    this.enableOptionSharing = true;
+    super.initialize();
+  }
 
-	update(mode) {
-		const me = this;
-		const meta = me._cachedMeta;
+  update(mode) {
+    const me = this;
+    const meta = me._cachedMeta;
 
-		me.updateElements(meta.data, 0, meta.data.length, mode);
-	}
+    me.updateElements(meta.data, 0, meta.data.length, mode);
+  }
 
-	updateElements(rects, start, count, mode) {
-		const me = this;
-		const reset = mode === 'reset';
-		const {xScale, yScale} = me._cachedMeta;
-		const firstOpts = me.resolveDataElementOptions(start, mode);
-		const sharedOptions = me.getSharedOptions(mode, rects[start], firstOpts);
+  updateElements(rects, start, count, mode) {
+    const me = this;
+    const reset = mode === 'reset';
+    const {xScale, yScale} = me._cachedMeta;
+    const firstOpts = me.resolveDataElementOptions(start, mode);
+    const sharedOptions = me.getSharedOptions(mode, rects[start], firstOpts);
 
-		for (let i = start; i < start + count; i++) {
-			const parsed = !reset && me.getParsed(i);
-			const x = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x);
-			const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y);
-			const options = me.resolveDataElementOptions(i, mode);
-			const {width, height, anchorX, anchorY} = options;
-			const properties = {
-				x: anchorX === 'left' ? x : x - width / (anchorX === 'right' ? 1 : 2),
-				y: anchorY === 'top' ? y : y - height / (anchorY === 'bottom' ? 1 : 2),
-				width,
-				height,
-				options
-			};
-			me.updateElement(rects[i], i, properties, mode);
-		}
+    for (let i = start; i < start + count; i++) {
+      const parsed = !reset && me.getParsed(i);
+      const x = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x);
+      const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y);
+      const options = me.resolveDataElementOptions(i, mode);
+      const {width, height, anchorX, anchorY} = options;
+      const properties = {
+        x: anchorX === 'left' ? x : x - width / (anchorX === 'right' ? 1 : 2),
+        y: anchorY === 'top' ? y : y - height / (anchorY === 'bottom' ? 1 : 2),
+        width,
+        height,
+        options
+      };
+      me.updateElement(rects[i], i, properties, mode);
+    }
 
-		me.updateSharedOptions(sharedOptions, mode);
-	}
+    me.updateSharedOptions(sharedOptions, mode);
+  }
 
-	draw() {
-		const me = this;
-		const data = me.getMeta().data || [];
-		let i, ilen;
+  draw() {
+    const me = this;
+    const data = me.getMeta().data || [];
+    let i, ilen;
 
-		for (i = 0, ilen = data.length; i < ilen; ++i) {
-			data[i].draw(me._ctx);
-		}
-	}
+    for (i = 0, ilen = data.length; i < ilen; ++i) {
+      data[i].draw(me._ctx);
+    }
+  }
 }
@@ -63,41 +63,39 @@
 MatrixController.defaults = {
-	dataElementType: 'matrix',
-	dataElementOptions: [
-		'backgroundColor',
-		'borderColor',
-		'borderWidth',
-		'anchorX',
-		'anchorY',
-		'width',
-		'height'
-	],
+  dataElementType: 'matrix',
+  dataElementOptions: [
+    'backgroundColor',
+    'borderColor',
+    'borderWidth',
+    'anchorX',
+    'anchorY',
+    'width',
+    'height'
+  ],
 
-	hover: {
-		mode: 'nearest',
-		intersect: true
-	},
-	datasets: {
-		animation: {
-			numbers: {
-				type: 'number',
-				properties: ['x', 'y', 'width', 'height']
-			}
-		},
-		anchorX: 'center',
-		anchorY: 'center'
-	},
-	tooltips: {
-		mode: 'nearest',
-		intersect: true
-	},
-	scales: {
-		x: {
-			type: 'linear',
-			offset: true
-		},
-		y: {
-			type: 'linear',
-			reverse: true
-		}
-	},
+  datasets: {
+    animation: {
+      numbers: {
+        type: 'number',
+        properties: ['x', 'y', 'width', 'height']
+      }
+    },
+    anchorX: 'center',
+    anchorY: 'center'
+  },
+
+  interaction: {
+    mode: 'nearest',
+    intersect: true
+  },
+
+  scales: {
+    x: {
+      type: 'linear',
+      offset: true
+    },
+    y: {
+      type: 'linear',
+      reverse: true
+    }
+  },
 };
@@ -107,3 +105,3 @@
  * Helper function to get the bounds of the rect
- * @param {Matrix} rect the rect
+ * @param {MatrixElement} rect the rect
  * @param {boolean} [useFinalPosition]
@@ -114,59 +112,59 @@ * @return {object} bounds of the rect
 function getBounds(rect, useFinalPosition) {
-	const {x, y, width, height} = rect.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
-	return {left: x, top: y, right: x + width, bottom: y + height};
+  const {x, y, width, height} = rect.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
+  return {left: x, top: y, right: x + width, bottom: y + height};
 }
 
 function limit(value, min, max) {
-	return Math.max(Math.min(value, max), min);
+  return Math.max(Math.min(value, max), min);
 }
 
 function parseBorderWidth(rect, maxW, maxH) {
-	const value = rect.options.borderWidth;
-	let t, r, b, l;
+  const value = rect.options.borderWidth;
+  let t, r, b, l;
 
-	if (isObject(value)) {
-		t = +value.top || 0;
-		r = +value.right || 0;
-		b = +value.bottom || 0;
-		l = +value.left || 0;
-	} else {
-		t = r = b = l = +value || 0;
-	}
+  if (isObject(value)) {
+    t = +value.top || 0;
+    r = +value.right || 0;
+    b = +value.bottom || 0;
+    l = +value.left || 0;
+  } else {
+    t = r = b = l = +value || 0;
+  }
 
-	return {
-		t: limit(t, 0, maxH),
-		r: limit(r, 0, maxW),
-		b: limit(b, 0, maxH),
-		l: limit(l, 0, maxW)
-	};
+  return {
+    t: limit(t, 0, maxH),
+    r: limit(r, 0, maxW),
+    b: limit(b, 0, maxH),
+    l: limit(l, 0, maxW)
+  };
 }
 
 function boundingRects(rect) {
-	const bounds = getBounds(rect);
-	const width = bounds.right - bounds.left;
-	const height = bounds.bottom - bounds.top;
-	const border = parseBorderWidth(rect, width / 2, height / 2);
+  const bounds = getBounds(rect);
+  const width = bounds.right - bounds.left;
+  const height = bounds.bottom - bounds.top;
+  const border = parseBorderWidth(rect, width / 2, height / 2);
 
-	return {
-		outer: {
-			x: bounds.left,
-			y: bounds.top,
-			w: width,
-			h: height
-		},
-		inner: {
-			x: bounds.left + border.l,
-			y: bounds.top + border.t,
-			w: width - border.l - border.r,
-			h: height - border.t - border.b
-		}
-	};
+  return {
+    outer: {
+      x: bounds.left,
+      y: bounds.top,
+      w: width,
+      h: height
+    },
+    inner: {
+      x: bounds.left + border.l,
+      y: bounds.top + border.t,
+      w: width - border.l - border.r,
+      h: height - border.t - border.b
+    }
+  };
 }
 
 function inRange(rect, x, y, useFinalPosition) {
-	const skipX = x === null;
-	const skipY = y === null;
-	const bounds = !rect || (skipX && skipY) ? false : getBounds(rect, useFinalPosition);
+  const skipX = x === null;
+  const skipY = y === null;
+  const bounds = !rect || (skipX && skipY) ? false : getBounds(rect, useFinalPosition);
 
-	return bounds
+  return bounds
 		&& (skipX || x >= bounds.left && x <= bounds.right)
@@ -176,73 +174,73 @@ && (skipY || y >= bounds.top && y <= bounds.bottom);
 
-class Matrix extends Element {
-	constructor(cfg) {
-		super();
+class MatrixElement extends Element {
+  constructor(cfg) {
+    super();
 
-		this.options = undefined;
-		this.width = undefined;
-		this.height = undefined;
+    this.options = undefined;
+    this.width = undefined;
+    this.height = undefined;
 
-		if (cfg) {
-			Object.assign(this, cfg);
-		}
-	}
+    if (cfg) {
+      Object.assign(this, cfg);
+    }
+  }
 
-	draw(ctx) {
-		const options = this.options;
-		const {inner, outer} = boundingRects(this);
+  draw(ctx) {
+    const options = this.options;
+    const {inner, outer} = boundingRects(this);
 
-		ctx.save();
+    ctx.save();
 
-		if (outer.w !== inner.w || outer.h !== inner.h) {
-			ctx.beginPath();
-			ctx.rect(outer.x, outer.y, outer.w, outer.h);
-			ctx.clip();
-			ctx.rect(inner.x, inner.y, inner.w, inner.h);
-			ctx.fillStyle = options.backgroundColor;
-			ctx.fill();
-			ctx.fillStyle = options.borderColor;
-			ctx.fill('evenodd');
-		} else {
-			ctx.fillStyle = options.backgroundColor;
-			ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
-		}
+    if (outer.w !== inner.w || outer.h !== inner.h) {
+      ctx.beginPath();
+      ctx.rect(outer.x, outer.y, outer.w, outer.h);
+      ctx.clip();
+      ctx.rect(inner.x, inner.y, inner.w, inner.h);
+      ctx.fillStyle = options.backgroundColor;
+      ctx.fill();
+      ctx.fillStyle = options.borderColor;
+      ctx.fill('evenodd');
+    } else {
+      ctx.fillStyle = options.backgroundColor;
+      ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
+    }
 
-		ctx.restore();
-	}
+    ctx.restore();
+  }
 
-	inRange(mouseX, mouseY, useFinalPosition) {
-		return inRange(this, mouseX, mouseY, useFinalPosition);
-	}
+  inRange(mouseX, mouseY, useFinalPosition) {
+    return inRange(this, mouseX, mouseY, useFinalPosition);
+  }
 
-	inXRange(mouseX, useFinalPosition) {
-		return inRange(this, mouseX, null, useFinalPosition);
-	}
+  inXRange(mouseX, useFinalPosition) {
+    return inRange(this, mouseX, null, useFinalPosition);
+  }
 
-	inYRange(mouseY, useFinalPosition) {
-		return inRange(this, null, mouseY, useFinalPosition);
-	}
+  inYRange(mouseY, useFinalPosition) {
+    return inRange(this, null, mouseY, useFinalPosition);
+  }
 
-	getCenterPoint(useFinalPosition) {
-		const {x, y, width, height} = this.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
-		return {
-			x: x + width / 2,
-			y: y + height / 2
-		};
-	}
+  getCenterPoint(useFinalPosition) {
+    const {x, y, width, height} = this.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
+    return {
+      x: x + width / 2,
+      y: y + height / 2
+    };
+  }
 
-	tooltipPosition() {
-		return this.getCenterPoint();
-	}
+  tooltipPosition() {
+    return this.getCenterPoint();
+  }
 
-	getRange(axis) {
-		return axis === 'x' ? this.width / 2 : this.height / 2;
-	}
+  getRange(axis) {
+    return axis === 'x' ? this.width / 2 : this.height / 2;
+  }
 }
 
-Matrix.id = 'matrix';
-Matrix.defaults = {
-	width: 20,
-	height: 20
+MatrixElement.id = 'matrix';
+MatrixElement.defaults = {
+  width: 20,
+  height: 20
 };
 
-export { Matrix, MatrixController };
+export { MatrixController, MatrixElement };

dist/chartjs-chart-matrix.js

 /*!
- * chartjs-chart-matrix v1.0.0-beta
+ * chartjs-chart-matrix v1.0.0-beta.2
  * https://github.com/kurkle/chartjs-chart-matrix#readme
- * (c) 2020 Jukka Kurkela
+ * (c) 2021 Jukka Kurkela
  * Released under the MIT license
  */
 (function (global, factory) {
-typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('chart.js')) :
-typeof define === 'function' && define.amd ? define(['chart.js'], factory) :
-(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Chart));
-}(this, (function (Chart) { 'use strict';
+typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('chart.js'), require('chart.js/helpers')) :
+typeof define === 'function' && define.amd ? define(['chart.js', 'chart.js/helpers'], factory) :
+(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Chart, global.Chart.helpers));
+}(this, (function (Chart, helpers) { 'use strict';
 
@@ -17,79 +17,34 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+class MatrixController extends Chart.DatasetController {
+  initialize() {
+    this.enableOptionSharing = true;
+    super.initialize();
   }
 
-  return self;
-}
+  update(mode) {
+    const me = this;
+    const meta = me._cachedMeta;
 
-var MatrixController = /*#__PURE__*/function (_DatasetController) {
-  _inheritsLoose(MatrixController, _DatasetController);
-
-  function MatrixController() {
-    return _DatasetController.apply(this, arguments) || this;
+    me.updateElements(meta.data, 0, meta.data.length, mode);
   }
 
-  var _proto = MatrixController.prototype;
+  updateElements(rects, start, count, mode) {
+    const me = this;
+    const reset = mode === 'reset';
+    const {xScale, yScale} = me._cachedMeta;
+    const firstOpts = me.resolveDataElementOptions(start, mode);
+    const sharedOptions = me.getSharedOptions(mode, rects[start], firstOpts);
 
-  _proto.initialize = function initialize() {
-    this.enableOptionSharing = true;
-
-    _DatasetController.prototype.initialize.call(this);
-  };
-
-  _proto.update = function update(mode) {
-    var me = this;
-    var meta = me._cachedMeta;
-    me.updateElements(meta.data, 0, meta.data.length, mode);
-  };
-
-  _proto.updateElements = function updateElements(rects, start, count, mode) {
-    var me = this;
-    var reset = mode === 'reset';
-    var _me$_cachedMeta = me._cachedMeta,
-        xScale = _me$_cachedMeta.xScale,
-        yScale = _me$_cachedMeta.yScale;
-    var firstOpts = me.resolveDataElementOptions(start, mode);
-    var sharedOptions = me.getSharedOptions(mode, rects[start], firstOpts);
-
-    for (var i = start; i < start + count; i++) {
-      var parsed = !reset && me.getParsed(i);
-      var x = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x);
-      var y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y);
-      var options = me.resolveDataElementOptions(i, mode);
-      var width = options.width,
-          height = options.height,
-          anchorX = options.anchorX,
-          anchorY = options.anchorY;
-      var properties = {
+    for (let i = start; i < start + count; i++) {
+      const parsed = !reset && me.getParsed(i);
+      const x = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x);
+      const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y);
+      const options = me.resolveDataElementOptions(i, mode);
+      const {width, height, anchorX, anchorY} = options;
+      const properties = {
         x: anchorX === 'left' ? x : x - width / (anchorX === 'right' ? 1 : 2),
         y: anchorY === 'top' ? y : y - height / (anchorY === 'bottom' ? 1 : 2),
-        width: width,
-        height: height,
-        options: options
+        width,
+        height,
+        options
       };
@@ -100,8 +55,8 @@ me.updateElement(rects[i], i, properties, mode);
     me.updateSharedOptions(sharedOptions, mode);
-  };
+  }
 
-  _proto.draw = function draw() {
-    var me = this;
-    var data = me.getMeta().data || [];
-    var i, ilen;
+  draw() {
+    const me = this;
+    const data = me.getMeta().data || [];
+    let i, ilen;
 
@@ -111,14 +66,18 @@ for (i = 0, ilen = data.length; i < ilen; ++i) {
     }
-  };
+  }
+}
 
-  return MatrixController;
-}(Chart.DatasetController);
 MatrixController.id = 'matrix';
 MatrixController.defaults = {
   dataElementType: 'matrix',
-  dataElementOptions: ['backgroundColor', 'borderColor', 'borderWidth', 'anchorX', 'anchorY', 'width', 'height'],
-  hover: {
-    mode: 'nearest',
-    intersect: true
-  },
+  dataElementOptions: [
+    'backgroundColor',
+    'borderColor',
+    'borderWidth',
+    'anchorX',
+    'anchorY',
+    'width',
+    'height'
+  ],
+
   datasets: {
@@ -134,6 +93,8 @@ animation: {
   },
-  tooltips: {
+
+  interaction: {
     mode: 'nearest',
     intersect: true
   },
+
   scales: {
@@ -148,30 +109,8 @@ x: {
     }
-  }
+  },
 };
 
-function isObject(value) {
-  return value !== null && Object.prototype.toString.call(value) === '[object Object]';
-}
-
-var supportsEventListenerOptions = function () {
-  var passiveSupported = false;
-
-  try {
-    var options = {
-      get passive() {
-        passiveSupported = true;
-        return false;
-      }
-
-    };
-    window.addEventListener('test', null, options);
-    window.removeEventListener('test', null, options);
-  } catch (e) {}
-
-  return passiveSupported;
-}();
-
 /**
  * Helper function to get the bounds of the rect
- * @param {Matrix} rect the rect
+ * @param {MatrixElement} rect the rect
  * @param {boolean} [useFinalPosition]
@@ -181,16 +120,5 @@ * @return {object} bounds of the rect
  */
-
 function getBounds(rect, useFinalPosition) {
-  var _rect$getProps = rect.getProps(['x', 'y', 'width', 'height'], useFinalPosition),
-      x = _rect$getProps.x,
-      y = _rect$getProps.y,
-      width = _rect$getProps.width,
-      height = _rect$getProps.height;
-
-  return {
-    left: x,
-    top: y,
-    right: x + width,
-    bottom: y + height
-  };
+  const {x, y, width, height} = rect.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
+  return {left: x, top: y, right: x + width, bottom: y + height};
 }
@@ -203,6 +131,6 @@
 function parseBorderWidth(rect, maxW, maxH) {
-  var value = rect.options.borderWidth;
-  var t, r, b, l;
+  const value = rect.options.borderWidth;
+  let t, r, b, l;
 
-  if (isObject(value)) {
+  if (helpers.isObject(value)) {
     t = +value.top || 0;
@@ -225,6 +153,7 @@ r = +value.right || 0;
 function boundingRects(rect) {
-  var bounds = getBounds(rect);
-  var width = bounds.right - bounds.left;
-  var height = bounds.bottom - bounds.top;
-  var border = parseBorderWidth(rect, width / 2, height / 2);
+  const bounds = getBounds(rect);
+  const width = bounds.right - bounds.left;
+  const height = bounds.bottom - bounds.top;
+  const border = parseBorderWidth(rect, width / 2, height / 2);
+
   return {
@@ -246,36 +175,29 @@ outer: {
 
-function _inRange(rect, x, y, useFinalPosition) {
-  var skipX = x === null;
-  var skipY = y === null;
-  var bounds = !rect || skipX && skipY ? false : getBounds(rect, useFinalPosition);
-  return bounds && (skipX || x >= bounds.left && x <= bounds.right) && (skipY || y >= bounds.top && y <= bounds.bottom);
+function inRange(rect, x, y, useFinalPosition) {
+  const skipX = x === null;
+  const skipY = y === null;
+  const bounds = !rect || (skipX && skipY) ? false : getBounds(rect, useFinalPosition);
+
+  return bounds
+		&& (skipX || x >= bounds.left && x <= bounds.right)
+		&& (skipY || y >= bounds.top && y <= bounds.bottom);
 }
 
-var Matrix = /*#__PURE__*/function (_Element) {
-  _inheritsLoose(Matrix, _Element);
+class MatrixElement extends Chart.Element {
+  constructor(cfg) {
+    super();
 
-  function Matrix(cfg) {
-    var _this;
+    this.options = undefined;
+    this.width = undefined;
+    this.height = undefined;
 
-    _this = _Element.call(this) || this;
-    _this.options = undefined;
-    _this.width = undefined;
-    _this.height = undefined;
-
     if (cfg) {
-      _extends(_assertThisInitialized(_this), cfg);
+      Object.assign(this, cfg);
     }
-
-    return _this;
   }
 
-  var _proto = Matrix.prototype;
+  draw(ctx) {
+    const options = this.options;
+    const {inner, outer} = boundingRects(this);
 
-  _proto.draw = function draw(ctx) {
-    var options = this.options;
-
-    var _boundingRects = boundingRects(this),
-        inner = _boundingRects.inner,
-        outer = _boundingRects.outer;
-
     ctx.save();
@@ -298,23 +220,18 @@
     ctx.restore();
-  };
+  }
 
-  _proto.inRange = function inRange(mouseX, mouseY, useFinalPosition) {
-    return _inRange(this, mouseX, mouseY, useFinalPosition);
-  };
+  inRange(mouseX, mouseY, useFinalPosition) {
+    return inRange(this, mouseX, mouseY, useFinalPosition);
+  }
 
-  _proto.inXRange = function inXRange(mouseX, useFinalPosition) {
-    return _inRange(this, mouseX, null, useFinalPosition);
-  };
+  inXRange(mouseX, useFinalPosition) {
+    return inRange(this, mouseX, null, useFinalPosition);
+  }
 
-  _proto.inYRange = function inYRange(mouseY, useFinalPosition) {
-    return _inRange(this, null, mouseY, useFinalPosition);
-  };
+  inYRange(mouseY, useFinalPosition) {
+    return inRange(this, null, mouseY, useFinalPosition);
+  }
 
-  _proto.getCenterPoint = function getCenterPoint(useFinalPosition) {
-    var _this$getProps = this.getProps(['x', 'y', 'width', 'height'], useFinalPosition),
-        x = _this$getProps.x,
-        y = _this$getProps.y,
-        width = _this$getProps.width,
-        height = _this$getProps.height;
-
+  getCenterPoint(useFinalPosition) {
+    const {x, y, width, height} = this.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
     return {
@@ -324,16 +241,15 @@ x: x + width / 2,
     };
-  };
+  }
 
-  _proto.tooltipPosition = function tooltipPosition() {
+  tooltipPosition() {
     return this.getCenterPoint();
-  };
+  }
 
-  _proto.getRange = function getRange(axis) {
+  getRange(axis) {
     return axis === 'x' ? this.width / 2 : this.height / 2;
-  };
+  }
+}
 
-  return Matrix;
-}(Chart.Element);
-Matrix.id = 'matrix';
-Matrix.defaults = {
+MatrixElement.id = 'matrix';
+MatrixElement.defaults = {
   width: 20,
@@ -343,4 +259,4 @@ height: 20
 
-Chart__default['default'].register(MatrixController, Matrix);
+Chart__default['default'].register(MatrixController, MatrixElement);
 
 })));

dist/chartjs-chart-matrix.min.js

 /*!
- * chartjs-chart-matrix v1.0.0-beta
+ * chartjs-chart-matrix v1.0.0-beta.2
  * https://github.com/kurkle/chartjs-chart-matrix#readme
- * (c) 2020 Jukka Kurkela
+ * (c) 2021 Jukka Kurkela
  * Released under the MIT license
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("chart.js")):"function"==typeof define&&define.amd?define(["chart.js"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Chart)}(this,(function(t){"use strict";function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t);function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}function i(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}var o=function(t){function e(){return t.apply(this,arguments)||this}i(e,t);var n=e.prototype;return n.initialize=function(){this.enableOptionSharing=!0,t.prototype.initialize.call(this)},n.update=function(t){var e=this._cachedMeta;this.updateElements(e.data,0,e.data.length,t)},n.updateElements=function(t,e,n,r){for(var i=this,o="reset"===r,a=i._cachedMeta,l=a.xScale,h=a.yScale,s=i.resolveDataElementOptions(e,r),u=i.getSharedOptions(r,t[e],s),c=e;c<e+n;c++){var d=!o&&i.getParsed(c),f=o?l.getBasePixel():l.getPixelForValue(d.x),p=o?h.getBasePixel():h.getPixelForValue(d.y),g=i.resolveDataElementOptions(c,r),y=g.width,v=g.height,b=g.anchorX,w=g.anchorY,m={x:"left"===b?f:f-y/("right"===b?1:2),y:"top"===w?p:p-v/("bottom"===w?1:2),width:y,height:v,options:g};i.updateElement(t[c],c,m,r)}i.updateSharedOptions(u,r)},n.draw=function(){var t,e,n=this.getMeta().data||[];for(t=0,e=n.length;t<e;++t)n[t].draw(this._ctx)},e}(t.DatasetController);o.id="matrix",o.defaults={dataElementType:"matrix",dataElementOptions:["backgroundColor","borderColor","borderWidth","anchorX","anchorY","width","height"],hover:{mode:"nearest",intersect:!0},datasets:{animation:{numbers:{type:"number",properties:["x","y","width","height"]}},anchorX:"center",anchorY:"center"},tooltips:{mode:"nearest",intersect:!0},scales:{x:{type:"linear",offset:!0},y:{type:"linear",reverse:!0}}};!function(){var t=!1;try{var e={get passive(){return t=!0,!1}};window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(t){}}();function a(t,e){var n=t.getProps(["x","y","width","height"],e),r=n.x,i=n.y;return{left:r,top:i,right:r+n.width,bottom:i+n.height}}function l(t,e,n){return Math.max(Math.min(t,n),e)}function h(t,e,n){var r,i,o,a,h=t.options.borderWidth;return!function(t){return null!==t&&"[object Object]"===Object.prototype.toString.call(t)}(h)?r=i=o=a=+h||0:(r=+h.top||0,i=+h.right||0,o=+h.bottom||0,a=+h.left||0),{t:l(r,0,n),r:l(i,0,e),b:l(o,0,n),l:l(a,0,e)}}function s(t,e,n,r){var i=null===e,o=null===n,l=!(!t||i&&o)&&a(t,r);return l&&(i||e>=l.left&&e<=l.right)&&(o||n>=l.top&&n<=l.bottom)}var u=function(t){function e(e){var n;return(n=t.call(this)||this).options=void 0,n.width=void 0,n.height=void 0,e&&r(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(n),e),n}i(e,t);var n=e.prototype;return n.draw=function(t){var e,n,r,i,o,l=this.options,s=(n=a(e=this),r=n.right-n.left,i=n.bottom-n.top,o=h(e,r/2,i/2),{outer:{x:n.left,y:n.top,w:r,h:i},inner:{x:n.left+o.l,y:n.top+o.t,w:r-o.l-o.r,h:i-o.t-o.b}}),u=s.inner,c=s.outer;t.save(),c.w!==u.w||c.h!==u.h?(t.beginPath(),t.rect(c.x,c.y,c.w,c.h),t.clip(),t.rect(u.x,u.y,u.w,u.h),t.fillStyle=l.backgroundColor,t.fill(),t.fillStyle=l.borderColor,t.fill("evenodd")):(t.fillStyle=l.backgroundColor,t.fillRect(u.x,u.y,u.w,u.h)),t.restore()},n.inRange=function(t,e,n){return s(this,t,e,n)},n.inXRange=function(t,e){return s(this,t,null,e)},n.inYRange=function(t,e){return s(this,null,t,e)},n.getCenterPoint=function(t){var e=this.getProps(["x","y","width","height"],t),n=e.x,r=e.y;return{x:n+e.width/2,y:r+e.height/2}},n.tooltipPosition=function(){return this.getCenterPoint()},n.getRange=function(t){return"x"===t?this.width/2:this.height/2},e}(t.Element);u.id="matrix",u.defaults={width:20,height:20},n.default.register(o,u)}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("chart.js"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["chart.js","chart.js/helpers"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Chart,t.Chart.helpers)}(this,(function(t,e){"use strict";function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=i(t);class r extends t.DatasetController{initialize(){this.enableOptionSharing=!0,super.initialize()}update(t){const e=this._cachedMeta;this.updateElements(e.data,0,e.data.length,t)}updateElements(t,e,i,n){const r=this,o="reset"===n,{xScale:h,yScale:a}=r._cachedMeta,s=r.resolveDataElementOptions(e,n),l=r.getSharedOptions(n,t[e],s);for(let s=e;s<e+i;s++){const e=!o&&r.getParsed(s),i=o?h.getBasePixel():h.getPixelForValue(e.x),l=o?a.getBasePixel():a.getPixelForValue(e.y),d=r.resolveDataElementOptions(s,n),{width:c,height:u,anchorX:g,anchorY:p}=d,f={x:"left"===g?i:i-c/("right"===g?1:2),y:"top"===p?l:l-u/("bottom"===p?1:2),width:c,height:u,options:d};r.updateElement(t[s],s,f,n)}r.updateSharedOptions(l,n)}draw(){const t=this,e=t.getMeta().data||[];let i,n;for(i=0,n=e.length;i<n;++i)e[i].draw(t._ctx)}}function o(t,e){const{x:i,y:n,width:r,height:o}=t.getProps(["x","y","width","height"],e);return{left:i,top:n,right:i+r,bottom:n+o}}function h(t,e,i){return Math.max(Math.min(t,i),e)}function a(t){const i=o(t),n=i.right-i.left,r=i.bottom-i.top,a=function(t,i,n){const r=t.options.borderWidth;let o,a,s,l;return e.isObject(r)?(o=+r.top||0,a=+r.right||0,s=+r.bottom||0,l=+r.left||0):o=a=s=l=+r||0,{t:h(o,0,n),r:h(a,0,i),b:h(s,0,n),l:h(l,0,i)}}(t,n/2,r/2);return{outer:{x:i.left,y:i.top,w:n,h:r},inner:{x:i.left+a.l,y:i.top+a.t,w:n-a.l-a.r,h:r-a.t-a.b}}}function s(t,e,i,n){const r=null===e,h=null===i,a=!(!t||r&&h)&&o(t,n);return a&&(r||e>=a.left&&e<=a.right)&&(h||i>=a.top&&i<=a.bottom)}r.id="matrix",r.defaults={dataElementType:"matrix",dataElementOptions:["backgroundColor","borderColor","borderWidth","anchorX","anchorY","width","height"],datasets:{animation:{numbers:{type:"number",properties:["x","y","width","height"]}},anchorX:"center",anchorY:"center"},interaction:{mode:"nearest",intersect:!0},scales:{x:{type:"linear",offset:!0},y:{type:"linear",reverse:!0}}};class l extends t.Element{constructor(t){super(),this.options=void 0,this.width=void 0,this.height=void 0,t&&Object.assign(this,t)}draw(t){const e=this.options,{inner:i,outer:n}=a(this);t.save(),n.w!==i.w||n.h!==i.h?(t.beginPath(),t.rect(n.x,n.y,n.w,n.h),t.clip(),t.rect(i.x,i.y,i.w,i.h),t.fillStyle=e.backgroundColor,t.fill(),t.fillStyle=e.borderColor,t.fill("evenodd")):(t.fillStyle=e.backgroundColor,t.fillRect(i.x,i.y,i.w,i.h)),t.restore()}inRange(t,e,i){return s(this,t,e,i)}inXRange(t,e){return s(this,t,null,e)}inYRange(t,e){return s(this,null,t,e)}getCenterPoint(t){const{x:e,y:i,width:n,height:r}=this.getProps(["x","y","width","height"],t);return{x:e+n/2,y:i+r/2}}tooltipPosition(){return this.getCenterPoint()}getRange(t){return"x"===t?this.width/2:this.height/2}}l.id="matrix",l.defaults={width:20,height:20},n.default.register(r,l)}));
+//# sourceMappingURL=chartjs-chart-matrix.min.js.map

package.json

 {
   "name": "chartjs-chart-matrix",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta.2",
   "description": "Chart.js module for creating matrix charts",
@@ -10,5 +10,8 @@ "main": "dist/chartjs-chart-matrix.js",
     "build": "rollup -c",
-    "dev": "karma start karma.config.js --no-signle-run --auto-watch",
+    "dev": "karma start --no-signle-run --auto-watch --browsers chrome",
     "lint": "eslint --ignore-path .gitignore .",
-    "test": "cross-env NODE_ENV=test karma start karma.config.js --single-run --coverage"
+    "lint-fix": "eslint --ignore-path .gitignore --fix .",
+    "test": "cross-env NODE_ENV=test concurrently \"npm:test-*\"",
+    "test-lint": "npm run lint",
+    "test-karma": "karma start --auto-watch --single-run"
   },
@@ -34,21 +37,19 @@ "repository": {
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-transform-object-assign": "^7.10.4",
-    "@babel/preset-env": "^7.11.5",
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-istanbul": "^6.0.0",
-    "chart.js": "^3.0.0-beta.3",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "chart.js": "^3.0.0-beta.10",
     "chartjs-adapter-date-fns": "^1.1.0-alpha.3",
-    "cross-env": "^7.0.2",
+    "chartjs-test-utils": "^0.1.2",
+    "concurrently": "^5.3.0",
+    "cross-env": "^7.0.3",
     "date-fns": "^2.16.1",
-    "eslint": "^7.10.0",
-    "eslint-config-chartjs": "^0.2.0",
-    "eslint-config-esnext": "^4.1.0",
-    "eslint-plugin-html": "^6.1.0",
+    "eslint": "^7.19.0",
+    "eslint-config-chartjs": "^0.3.0",
+    "eslint-plugin-es": "^4.1.0",
+    "eslint-plugin-html": "^6.1.1",
     "jasmine-core": "^3.6.0",
-    "karma": "^5.2.3",
+    "karma": "^6.1.0",
+    "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
-    "karma-firefox-launcher": "^1.3.0",
+    "karma-firefox-launcher": "^2.1.0",
     "karma-jasmine": "^4.0.1",
@@ -59,4 +60,5 @@ "karma-jasmine-html-reporter": "^1.5.4",
     "pixelmatch": "^5.2.1",
-    "rollup": "^2.28.2",
+    "rollup": "^2.38.4",
     "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-istanbul": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2"
@@ -63,0 +65,0 @@ },

README.md

 # chartjs-chart-matrix
 
-[Chart.js](https://www.chartjs.org/) **v3.0.0-beta.3** module for creating matrix charts
+[Chart.js](https://www.chartjs.org/) **v3.0.0-beta.10** module for creating matrix charts
 
-![npm](https://img.shields.io/npm/v/chartjs-chart-matrix.svg) [![release](https://img.shields.io/github/release/kurkle/chartjs-chart-matrix.svg?style=flat-square)](https://github.com/kurkle/chartjs-chart-matrix/releases/latest) [![travis](https://img.shields.io/travis/kurkle/chartjs-chart-matrix.svg?style=flat-square&maxAge=60)](https://travis-ci.org/kurkle/chartjs-chart-matrix) ![npm bundle size](https://img.shields.io/bundlephobia/min/chartjs-chart-matrix.svg) ![GitHub](https://img.shields.io/github/license/kurkle/chartjs-chart-matrix.svg)
+[![npm](https://img.shields.io/npm/v/chartjs-chart-matrix.svg)](https://www.npmjs.com/package/chartjs-chart-matrix)
+[![release](https://img.shields.io/github/release/kurkle/chartjs-chart-matrix.svg?style=flat-square)](https://github.com/kurkle/chartjs-chart-matrix/releases/latest)
+![npm bundle size](https://img.shields.io/bundlephobia/min/chartjs-chart-matrix.svg)
+![GitHub](https://img.shields.io/github/license/kurkle/chartjs-chart-matrix.svg)
+[![Coverage Status](https://coveralls.io/repos/github/kurkle/chartjs-chart-matrix/badge.svg?branch=next)](https://coveralls.io/github/kurkle/chartjs-chart-matrix?branch=next)
 
@@ -7,0 +11,0 @@ ## Documentation

No alert changes

Improved metrics

Dev dependency count

26

decreased by-3.7%

Number of lines in readme file

78

increased by5.41%

Worsened metrics

Total package byte prevSize

20926

decreased by-11.67%

Lines of code

435

decreased by-14.54%

No dependency changes