chartjs-chart-matrix 2.1.0 → 3.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2021 Jukka Kurkela
+Copyright (c) 2019-2025 Jukka Kurkela
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -5,9 +5,10 @@
 [![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)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=kurkle_chartjs-chart-matrix&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-chart-matrix)
+[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=kurkle_chartjs-chart-matrix&metric=coverage)](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-chart-matrix)
 [![documentation](https://img.shields.io/static/v1?message=Documentation&color=informational)](https://chartjs-chart-matrix.pages.dev)
+![GitHub](https://img.shields.io/github/license/kurkle/chartjs-chart-matrix.svg)
 
 ## Example
 

package/dist/chartjs-chart-matrix.cjs

@@ -0,0 +1,259 @@
+/*!
+ * chartjs-chart-matrix v0.0.0-development
+ * https://chartjs-chart-matrix.pages.dev/
+ * (c) 2025 Jukka Kurkela
+ * Released under the MIT license
+ */
+(function (global, factory) {
+typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('chart.js'), require('chart.js/helpers')) :
+typeof define === 'function' && define.amd ? define(['exports', 'chart.js', 'chart.js/helpers'], factory) :
+(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["chartjs-chart-matrix"] = {}, global.Chart, global.Chart.helpers));
+})(this, (function (exports, chart_js, helpers) { 'use strict';
+
+var version = "0.0.0-development";
+
+class MatrixController extends chart_js.DatasetController {
+    initialize() {
+        this.enableOptionSharing = true;
+        super.initialize();
+    }
+    update(mode) {
+        const meta = this._cachedMeta;
+        this.updateElements(meta.data, 0, meta.data.length, mode);
+    }
+    updateElements(rects, start, count, mode) {
+        const reset = mode === 'reset';
+        const { xScale, yScale } = this._cachedMeta;
+        const firstOpts = this.resolveDataElementOptions(start, mode);
+        const sharedOptions = this.getSharedOptions(firstOpts);
+        for(let i = start; i < start + count; i++){
+            const parsed = !reset && this.getParsed(i);
+            const x = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x);
+            const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y);
+            const options = this.resolveDataElementOptions(i, mode);
+            const { width, height, anchorX, anchorY } = options;
+            const properties = {
+                x: resolveX(anchorX, x, width),
+                y: resolveY(anchorY, y, height),
+                width,
+                height,
+                options
+            };
+            this.updateElement(rects[i], i, properties, mode);
+        }
+        this.updateSharedOptions(sharedOptions, mode, firstOpts);
+    }
+    draw() {
+        const ctx = this.chart.ctx;
+        const data = this.getMeta().data || [];
+        let i, ilen;
+        for(i = 0, ilen = data.length; i < ilen; ++i){
+            data[i].draw(ctx);
+        }
+    }
+}
+MatrixController.id = 'matrix';
+MatrixController.version = version;
+MatrixController.defaults = {
+    dataElementType: 'matrix',
+    animations: {
+        numbers: {
+            type: 'number',
+            properties: [
+                'x',
+                'y',
+                'width',
+                'height'
+            ]
+        }
+    }
+};
+MatrixController.overrides = {
+    interaction: {
+        mode: 'nearest',
+        intersect: true
+    },
+    scales: {
+        x: {
+            type: 'linear',
+            offset: true
+        },
+        y: {
+            type: 'linear',
+            reverse: true
+        }
+    }
+};
+function resolveX(anchorX, x, width) {
+    if (anchorX === 'left' || anchorX === 'start') {
+        return x;
+    }
+    if (anchorX === 'right' || anchorX === 'end') {
+        return x - width;
+    }
+    return x - width / 2;
+}
+function resolveY(anchorY, y, height) {
+    if (anchorY === 'top' || anchorY === 'start') {
+        return y;
+    }
+    if (anchorY === 'bottom' || anchorY === 'end') {
+        return y - height;
+    }
+    return y - height / 2;
+}
+
+function getBounds(element, useFinalPosition) {
+    const { x, y, width, height } = element.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);
+}
+function parseBorderWidth(options, maxW, maxH) {
+    const value = options.borderWidth;
+    let t, r, b, l;
+    if (helpers.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)
+    };
+}
+function boundingRects(element) {
+    const bounds = getBounds(element, false);
+    const width = bounds.right - bounds.left;
+    const height = bounds.bottom - bounds.top;
+    const border = parseBorderWidth(element.options, 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
+        }
+    };
+}
+function inRange(element, x, y, useFinalPosition) {
+    const skipX = x === null;
+    const skipY = y === null;
+    const bounds = !element || skipX && skipY ? false : getBounds(element, useFinalPosition);
+    return bounds && (skipX || x >= bounds.left && x <= bounds.right) && (skipY || y >= bounds.top && y <= bounds.bottom);
+}
+
+class MatrixElement extends chart_js.Element {
+    draw(ctx) {
+        const options = this.options;
+        const { inner, outer } = boundingRects(this);
+        const radius = helpers.toTRBLCorners(options.borderRadius);
+        ctx.save();
+        if (outer.w !== inner.w || outer.h !== inner.h) {
+            ctx.beginPath();
+            helpers.addRoundedRectPath(ctx, {
+                x: outer.x,
+                y: outer.y,
+                w: outer.w,
+                h: outer.h,
+                radius
+            });
+            helpers.addRoundedRectPath(ctx, {
+                x: inner.x,
+                y: inner.y,
+                w: inner.w,
+                h: inner.h,
+                radius
+            });
+            ctx.fillStyle = options.backgroundColor;
+            ctx.fill();
+            ctx.fillStyle = options.borderColor;
+            ctx.fill('evenodd');
+        } else {
+            ctx.beginPath();
+            helpers.addRoundedRectPath(ctx, {
+                x: inner.x,
+                y: inner.y,
+                w: inner.w,
+                h: inner.h,
+                radius
+            });
+            ctx.fillStyle = options.backgroundColor;
+            ctx.fill();
+        }
+        ctx.restore();
+    }
+    inRange(mouseX, mouseY, useFinalPosition) {
+        return inRange(this, mouseX, mouseY, useFinalPosition);
+    }
+    inXRange(mouseX, useFinalPosition) {
+        return inRange(this, mouseX, null, 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
+        };
+    }
+    tooltipPosition() {
+        return this.getCenterPoint();
+    }
+    getRange(axis) {
+        return axis === 'x' ? this.width / 2 : this.height / 2;
+    }
+    constructor(cfg){
+        super();
+        if (cfg) {
+            Object.assign(this, cfg);
+        }
+    }
+}
+MatrixElement.id = 'matrix';
+MatrixElement.defaults = {
+    backgroundColor: undefined,
+    borderColor: undefined,
+    borderWidth: undefined,
+    borderRadius: 0,
+    anchorX: 'center',
+    anchorY: 'center',
+    width: 20,
+    height: 20
+};
+
+chart_js.Chart.register(MatrixController, MatrixElement);
+
+exports.MatrixController = MatrixController;
+exports.MatrixElement = MatrixElement;
+
+}));

package/dist/chartjs-chart-matrix.esm.js

@@ -0,0 +1,251 @@
+/*!
+ * chartjs-chart-matrix v0.0.0-development
+ * https://chartjs-chart-matrix.pages.dev/
+ * (c) 2025 Jukka Kurkela
+ * Released under the MIT license
+ */
+import { DatasetController, Element } from 'chart.js';
+import { isObject, toTRBLCorners, addRoundedRectPath } from 'chart.js/helpers';
+
+var version = "0.0.0-development";
+
+class MatrixController extends DatasetController {
+    initialize() {
+        this.enableOptionSharing = true;
+        super.initialize();
+    }
+    update(mode) {
+        const meta = this._cachedMeta;
+        this.updateElements(meta.data, 0, meta.data.length, mode);
+    }
+    updateElements(rects, start, count, mode) {
+        const reset = mode === 'reset';
+        const { xScale, yScale } = this._cachedMeta;
+        const firstOpts = this.resolveDataElementOptions(start, mode);
+        const sharedOptions = this.getSharedOptions(firstOpts);
+        for(let i = start; i < start + count; i++){
+            const parsed = !reset && this.getParsed(i);
+            const x = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x);
+            const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y);
+            const options = this.resolveDataElementOptions(i, mode);
+            const { width, height, anchorX, anchorY } = options;
+            const properties = {
+                x: resolveX(anchorX, x, width),
+                y: resolveY(anchorY, y, height),
+                width,
+                height,
+                options
+            };
+            this.updateElement(rects[i], i, properties, mode);
+        }
+        this.updateSharedOptions(sharedOptions, mode, firstOpts);
+    }
+    draw() {
+        const ctx = this.chart.ctx;
+        const data = this.getMeta().data || [];
+        let i, ilen;
+        for(i = 0, ilen = data.length; i < ilen; ++i){
+            data[i].draw(ctx);
+        }
+    }
+}
+MatrixController.id = 'matrix';
+MatrixController.version = version;
+MatrixController.defaults = {
+    dataElementType: 'matrix',
+    animations: {
+        numbers: {
+            type: 'number',
+            properties: [
+                'x',
+                'y',
+                'width',
+                'height'
+            ]
+        }
+    }
+};
+MatrixController.overrides = {
+    interaction: {
+        mode: 'nearest',
+        intersect: true
+    },
+    scales: {
+        x: {
+            type: 'linear',
+            offset: true
+        },
+        y: {
+            type: 'linear',
+            reverse: true
+        }
+    }
+};
+function resolveX(anchorX, x, width) {
+    if (anchorX === 'left' || anchorX === 'start') {
+        return x;
+    }
+    if (anchorX === 'right' || anchorX === 'end') {
+        return x - width;
+    }
+    return x - width / 2;
+}
+function resolveY(anchorY, y, height) {
+    if (anchorY === 'top' || anchorY === 'start') {
+        return y;
+    }
+    if (anchorY === 'bottom' || anchorY === 'end') {
+        return y - height;
+    }
+    return y - height / 2;
+}
+
+function getBounds(element, useFinalPosition) {
+    const { x, y, width, height } = element.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);
+}
+function parseBorderWidth(options, maxW, maxH) {
+    const value = 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;
+    }
+    return {
+        t: limit(t, 0, maxH),
+        r: limit(r, 0, maxW),
+        b: limit(b, 0, maxH),
+        l: limit(l, 0, maxW)
+    };
+}
+function boundingRects(element) {
+    const bounds = getBounds(element, false);
+    const width = bounds.right - bounds.left;
+    const height = bounds.bottom - bounds.top;
+    const border = parseBorderWidth(element.options, 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
+        }
+    };
+}
+function inRange(element, x, y, useFinalPosition) {
+    const skipX = x === null;
+    const skipY = y === null;
+    const bounds = !element || skipX && skipY ? false : getBounds(element, useFinalPosition);
+    return bounds && (skipX || x >= bounds.left && x <= bounds.right) && (skipY || y >= bounds.top && y <= bounds.bottom);
+}
+
+class MatrixElement extends Element {
+    draw(ctx) {
+        const options = this.options;
+        const { inner, outer } = boundingRects(this);
+        const radius = toTRBLCorners(options.borderRadius);
+        ctx.save();
+        if (outer.w !== inner.w || outer.h !== inner.h) {
+            ctx.beginPath();
+            addRoundedRectPath(ctx, {
+                x: outer.x,
+                y: outer.y,
+                w: outer.w,
+                h: outer.h,
+                radius
+            });
+            addRoundedRectPath(ctx, {
+                x: inner.x,
+                y: inner.y,
+                w: inner.w,
+                h: inner.h,
+                radius
+            });
+            ctx.fillStyle = options.backgroundColor;
+            ctx.fill();
+            ctx.fillStyle = options.borderColor;
+            ctx.fill('evenodd');
+        } else {
+            ctx.beginPath();
+            addRoundedRectPath(ctx, {
+                x: inner.x,
+                y: inner.y,
+                w: inner.w,
+                h: inner.h,
+                radius
+            });
+            ctx.fillStyle = options.backgroundColor;
+            ctx.fill();
+        }
+        ctx.restore();
+    }
+    inRange(mouseX, mouseY, useFinalPosition) {
+        return inRange(this, mouseX, mouseY, useFinalPosition);
+    }
+    inXRange(mouseX, useFinalPosition) {
+        return inRange(this, mouseX, null, 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
+        };
+    }
+    tooltipPosition() {
+        return this.getCenterPoint();
+    }
+    getRange(axis) {
+        return axis === 'x' ? this.width / 2 : this.height / 2;
+    }
+    constructor(cfg){
+        super();
+        if (cfg) {
+            Object.assign(this, cfg);
+        }
+    }
+}
+MatrixElement.id = 'matrix';
+MatrixElement.defaults = {
+    backgroundColor: undefined,
+    borderColor: undefined,
+    borderWidth: undefined,
+    borderRadius: 0,
+    anchorX: 'center',
+    anchorY: 'center',
+    width: 20,
+    height: 20
+};
+
+export { MatrixController, MatrixElement };

package/dist/chartjs-chart-matrix.min.js

@@ -0,0 +1,8 @@
+/*!
+ * chartjs-chart-matrix v0.0.0-development
+ * https://chartjs-chart-matrix.pages.dev/
+ * (c) 2025 Jukka Kurkela
+ * Released under the MIT license
+ */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("chart.js"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["exports","chart.js","chart.js/helpers"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["chartjs-chart-matrix"]={},t.Chart,t.Chart.helpers)}(this,(function(t,e,r){"use strict";class i extends e.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,r,i){const s="reset"===i,{xScale:a,yScale:h}=this._cachedMeta,l=this.resolveDataElementOptions(e,i),d=this.getSharedOptions(l);for(let l=e;l<e+r;l++){const e=!s&&this.getParsed(l),r=s?a.getBasePixel():a.getPixelForValue(e.x),d=s?h.getBasePixel():h.getPixelForValue(e.y),u=this.resolveDataElementOptions(l,i),{width:c,height:g,anchorX:p,anchorY:f}=u,x={x:n(p,r,c),y:o(f,d,g),width:c,height:g,options:u};this.updateElement(t[l],l,x,i)}this.updateSharedOptions(d,i,l)}draw(){const t=this.chart.ctx,e=this.getMeta().data||[];let r,i;for(r=0,i=e.length;r<i;++r)e[r].draw(t)}}function n(t,e,r){return"left"===t||"start"===t?e:"right"===t||"end"===t?e-r:e-r/2}function o(t,e,r){return"top"===t||"start"===t?e:"bottom"===t||"end"===t?e-r:e-r/2}function s(t,e){const{x:r,y:i,width:n,height:o}=t.getProps(["x","y","width","height"],e);return{left:r,top:i,right:r+n,bottom:i+o}}function a(t,e,r){return Math.max(Math.min(t,r),e)}function h(t){const e=s(t,!1),i=e.right-e.left,n=e.bottom-e.top,o=function(t,e,i){const n=t.borderWidth;let o,s,h,l;return r.isObject(n)?(o=+n.top||0,s=+n.right||0,h=+n.bottom||0,l=+n.left||0):o=s=h=l=+n||0,{t:a(o,0,i),r:a(s,0,e),b:a(h,0,i),l:a(l,0,e)}}(t.options,i/2,n/2);return{outer:{x:e.left,y:e.top,w:i,h:n},inner:{x:e.left+o.l,y:e.top+o.t,w:i-o.l-o.r,h:n-o.t-o.b}}}function l(t,e,r,i){const n=null===e,o=null===r,a=!(!t||n&&o)&&s(t,i);return a&&(n||e>=a.left&&e<=a.right)&&(o||r>=a.top&&r<=a.bottom)}i.id="matrix",i.version="0.0.0-development",i.defaults={dataElementType:"matrix",animations:{numbers:{type:"number",properties:["x","y","width","height"]}}},i.overrides={interaction:{mode:"nearest",intersect:!0},scales:{x:{type:"linear",offset:!0},y:{type:"linear",reverse:!0}}};class d extends e.Element{draw(t){const e=this.options,{inner:i,outer:n}=h(this),o=r.toTRBLCorners(e.borderRadius);t.save(),n.w!==i.w||n.h!==i.h?(t.beginPath(),r.addRoundedRectPath(t,{x:n.x,y:n.y,w:n.w,h:n.h,radius:o}),r.addRoundedRectPath(t,{x:i.x,y:i.y,w:i.w,h:i.h,radius:o}),t.fillStyle=e.backgroundColor,t.fill(),t.fillStyle=e.borderColor,t.fill("evenodd")):(t.beginPath(),r.addRoundedRectPath(t,{x:i.x,y:i.y,w:i.w,h:i.h,radius:o}),t.fillStyle=e.backgroundColor,t.fill()),t.restore()}inRange(t,e,r){return l(this,t,e,r)}inXRange(t,e){return l(this,t,null,e)}inYRange(t,e){return l(this,null,t,e)}getCenterPoint(t){const{x:e,y:r,width:i,height:n}=this.getProps(["x","y","width","height"],t);return{x:e+i/2,y:r+n/2}}tooltipPosition(){return this.getCenterPoint()}getRange(t){return"x"===t?this.width/2:this.height/2}constructor(t){super(),t&&Object.assign(this,t)}}d.id="matrix",d.defaults={backgroundColor:void 0,borderColor:void 0,borderWidth:void 0,borderRadius:0,anchorX:"center",anchorY:"center",width:20,height:20},e.Chart.register(i,d),t.MatrixController=i,t.MatrixElement=d}));
+//# sourceMappingURL=chartjs-chart-matrix.min.js.map

package/dist/chartjs-chart-matrix.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartjs-chart-matrix.min.js","sources":["../src/controller.ts","../src/helpers.ts","../src/element.ts","../src/index.ts"],"sourcesContent":["import { DatasetController, UpdateMode } from 'chart.js'\nimport { AnchorX, AnchorY, MatrixControllerDatasetOptions, MatrixDataPoint } from 'types/index.esm'\n\nimport { version } from '../package.json'\n\nimport MatrixElement from './element'\n\nexport default class MatrixController extends DatasetController<\n  'matrix',\n  MatrixElement,\n  MatrixElement,\n  MatrixDataPoint\n> {\n  static readonly id = 'matrix'\n  static readonly version = version\n\n  static readonly defaults = {\n    dataElementType: 'matrix',\n\n    animations: {\n      numbers: {\n        type: 'number',\n        properties: ['x', 'y', 'width', 'height'],\n      },\n    },\n  }\n\n  static readonly overrides = {\n    interaction: {\n      mode: 'nearest',\n      intersect: true,\n    },\n    scales: {\n      x: {\n        type: 'linear',\n        offset: true,\n      },\n      y: {\n        type: 'linear',\n        reverse: true,\n      },\n    },\n  }\n\n  options: MatrixControllerDatasetOptions\n\n  override initialize() {\n    this.enableOptionSharing = true\n    super.initialize()\n  }\n\n  override update(mode: UpdateMode) {\n    const meta = this._cachedMeta\n\n    this.updateElements(meta.data, 0, meta.data.length, mode)\n  }\n\n  override updateElements(rects: MatrixElement[], start: number, count: number, mode: UpdateMode) {\n    const reset = mode === 'reset'\n    const { xScale, yScale } = this._cachedMeta\n    const firstOpts = this.resolveDataElementOptions(start, mode)\n    const sharedOptions = this.getSharedOptions(firstOpts)\n\n    for (let i = start; i < start + count; i++) {\n      const parsed = !reset && this.getParsed(i)\n      const x = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x)\n      const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y)\n      const options = this.resolveDataElementOptions(i, mode)\n      const { width, height, anchorX, anchorY } = options\n      const properties = {\n        x: resolveX(anchorX, x, width),\n        y: resolveY(anchorY, y, height),\n        width,\n        height,\n        options,\n      }\n      this.updateElement(rects[i], i, properties, mode)\n    }\n\n    this.updateSharedOptions(sharedOptions, mode, firstOpts)\n  }\n\n  override draw() {\n    const ctx = this.chart.ctx\n    const data = this.getMeta().data || []\n    let i: number, ilen: number\n\n    for (i = 0, ilen = data.length; i < ilen; ++i) {\n      data[i].draw(ctx)\n    }\n  }\n}\n\nfunction resolveX(anchorX: AnchorX, x: number, width: number) {\n  if (anchorX === 'left' || anchorX === 'start') {\n    return x\n  }\n  if (anchorX === 'right' || anchorX === 'end') {\n    return x - width\n  }\n  return x - width / 2\n}\n\nfunction resolveY(anchorY: AnchorY, y: number, height: number) {\n  if (anchorY === 'top' || anchorY === 'start') {\n    return y\n  }\n  if (anchorY === 'bottom' || anchorY === 'end') {\n    return y - height\n  }\n  return y - height / 2\n}\n","import { isObject } from 'chart.js/helpers'\nimport { MatrixOptions } from 'types/index.esm'\n\nimport MatrixElement from './element'\n\ntype Bounds = { left: number; top: number; right: number; bottom: number }\n\nfunction getBounds(element: MatrixElement, useFinalPosition: boolean): Bounds {\n  const { x, y, width, height } = element.getProps(['x', 'y', 'width', 'height'], useFinalPosition)\n  return { left: x, top: y, right: x + width, bottom: y + height }\n}\n\nfunction limit(value: number, min: number, max: number) {\n  return Math.max(Math.min(value, max), min)\n}\n\nexport function parseBorderWidth(options: Pick<MatrixOptions, 'borderWidth'>, maxW: number, maxH: number) {\n  const value = options.borderWidth\n  let t: number, r: number, b: number, l: number\n\n  if (isObject(value)) {\n    t = +value.top || 0\n    r = +value.right || 0\n    b = +value.bottom || 0\n    l = +value.left || 0\n  } else {\n    t = r = b = l = +value || 0\n  }\n\n  return {\n    t: limit(t, 0, maxH),\n    r: limit(r, 0, maxW),\n    b: limit(b, 0, maxH),\n    l: limit(l, 0, maxW),\n  }\n}\n\nexport function boundingRects(element: MatrixElement) {\n  const bounds = getBounds(element, false)\n  const width = bounds.right - bounds.left\n  const height = bounds.bottom - bounds.top\n  const border = parseBorderWidth(element.options, width / 2, height / 2)\n\n  return {\n    outer: {\n      x: bounds.left,\n      y: bounds.top,\n      w: width,\n      h: height,\n    },\n    inner: {\n      x: bounds.left + border.l,\n      y: bounds.top + border.t,\n      w: width - border.l - border.r,\n      h: height - border.t - border.b,\n    },\n  }\n}\n\nexport function inRange(element: MatrixElement, x: number, y: number, useFinalPosition: boolean) {\n  const skipX = x === null\n  const skipY = y === null\n  const bounds = !element || (skipX && skipY) ? false : getBounds(element, useFinalPosition)\n\n  return (\n    bounds && (skipX || (x >= bounds.left && x <= bounds.right)) && (skipY || (y >= bounds.top && y <= bounds.bottom))\n  )\n}\n","import { Element } from 'chart.js'\nimport { addRoundedRectPath, toTRBLCorners } from 'chart.js/helpers'\nimport { MatrixOptions, MatrixProps } from 'types/index.esm'\n\nimport { boundingRects, inRange } from './helpers'\n\nexport default class MatrixElement extends Element<MatrixProps, MatrixOptions> {\n  static readonly id = 'matrix'\n\n  static override readonly defaults = {\n    backgroundColor: undefined,\n    borderColor: undefined,\n    borderWidth: undefined,\n    borderRadius: 0,\n    anchorX: 'center',\n    anchorY: 'center',\n    width: 20,\n    height: 20,\n  }\n\n  width: number\n  height: number\n\n  constructor(cfg: MatrixProps) {\n    super()\n\n    if (cfg) {\n      Object.assign(this, cfg)\n    }\n  }\n\n  draw(ctx: CanvasRenderingContext2D) {\n    const options = this.options\n    const { inner, outer } = boundingRects(this)\n    const radius = toTRBLCorners(options.borderRadius)\n\n    ctx.save()\n\n    if (outer.w !== inner.w || outer.h !== inner.h) {\n      ctx.beginPath()\n      addRoundedRectPath(ctx, { x: outer.x, y: outer.y, w: outer.w, h: outer.h, radius })\n      addRoundedRectPath(ctx, { x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius })\n      ctx.fillStyle = options.backgroundColor\n      ctx.fill()\n      ctx.fillStyle = options.borderColor\n      ctx.fill('evenodd')\n    } else {\n      ctx.beginPath()\n      addRoundedRectPath(ctx, { x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius })\n      ctx.fillStyle = options.backgroundColor\n      ctx.fill()\n    }\n\n    ctx.restore()\n  }\n\n  inRange(mouseX: number, mouseY: number, useFinalPosition?: boolean) {\n    return inRange(this, mouseX, mouseY, useFinalPosition)\n  }\n\n  inXRange(mouseX: number, useFinalPosition?: boolean) {\n    return inRange(this, mouseX, null, useFinalPosition)\n  }\n\n  inYRange(mouseY: number, useFinalPosition?: boolean) {\n    return inRange(this, null, mouseY, useFinalPosition)\n  }\n\n  getCenterPoint(useFinalPosition?: boolean) {\n    const { x, y, width, height } = this.getProps(['x', 'y', 'width', 'height'], useFinalPosition)\n    return {\n      x: x + width / 2,\n      y: y + height / 2,\n    }\n  }\n\n  override tooltipPosition() {\n    return this.getCenterPoint()\n  }\n\n  getRange(axis: 'x' | 'y') {\n    return axis === 'x' ? this.width / 2 : this.height / 2\n  }\n}\n","import { Chart } from 'chart.js'\n\nimport MatrixController from './controller.js'\nimport MatrixElement from './element.js'\n\nChart.register(MatrixController, MatrixElement)\n\nexport { MatrixController, MatrixElement }\n"],"names":["MatrixController","DatasetController","initialize","this","enableOptionSharing","super","update","mode","meta","_cachedMeta","updateElements","data","length","rects","start","count","reset","xScale","yScale","firstOpts","resolveDataElementOptions","sharedOptions","getSharedOptions","i","parsed","getParsed","x","getBasePixel","getPixelForValue","y","options","width","height","anchorX","anchorY","properties","resolveX","resolveY","updateElement","updateSharedOptions","draw","ctx","chart","getMeta","ilen","getBounds","element","useFinalPosition","getProps","left","top","right","bottom","limit","value","min","max","Math","boundingRects","bounds","border","maxW","maxH","borderWidth","t","r","b","l","isObject","parseBorderWidth","outer","w","h","inner","inRange","skipX","skipY","id","version","defaults","dataElementType","animations","numbers","type","overrides","interaction","intersect","scales","offset","reverse","MatrixElement","Element","radius","toTRBLCorners","borderRadius","save","beginPath","addRoundedRectPath","fillStyle","backgroundColor","fill","borderColor","restore","mouseX","mouseY","inXRange","inYRange","getCenterPoint","tooltipPosition","getRange","axis","constructor","cfg","Object","assign","undefined","Chart","register"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-chart-matrix",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Chart.js module for creating matrix charts",
   "type": "module",
   "main": "dist/chartjs-chart-matrix.cjs",
@@ -22,14 +22,14 @@
     "autobuild": "rollup -c -w",
     "build": "rollup -c",
     "dev": "karma start ./karma.conf.cjs --no-single-run --auto-watch --browsers chrome",
+    "dev:ff": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers firefox",
     "docs": "npm run build && vuepress build docs --no-cache",
     "docs:dev": "npm run build && vuepress dev docs --no-cache",
-    "lint": "concurrently -r \"npm:lint-*\"",
-    "lint-js": "eslint \"src/**/*.js\" \"test/**/*.js\" \"docs/**/*.js\"",
-    "lint-md": "eslint \"**/*.md\"",
-    "lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p types/tests/",
     "test": "cross-env NODE_ENV=test concurrently \"npm:test-*\"",
-    "test-lint": "npm run lint",
+    "pretest-unit": "swc --config-file .swcrc-spec src -d build",
+    "test-unit": "cross-env JASMINE_CONFIG_PATH=jasmine.json c8 --src=src --reporter=text --reporter=lcov -o=coverage/unit jasmine",
     "test-karma": "karma start ./karma.conf.cjs --no-auto-watch --single-run",
     "test-integration:node-commonjs": "npm run test --prefix test/integration/node-commonjs",
     "test-integration:node-module": "npm run test --prefix test/integration/node-module"
@@ -55,24 +55,35 @@
   },
   "homepage": "https://chartjs-chart-matrix.pages.dev/",
   "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@eslint/markdown": "^6.3.0",
     "@napi-rs/canvas": "^0.1.30",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "@typescript-eslint/parser": "^5.6.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-swc": "^0.4.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@swc/cli": "^0.6.0",
+    "@swc/core": "^1.11.9",
+    "@types/jasmine": "^5.1.7",
+    "@types/node": "^22.13.10",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
+    "c8": "^10.1.3",
     "chart.js": "^4.0.1",
     "chartjs-adapter-date-fns": "^3.0.0",
     "chartjs-test-utils": "^0.5.0",
     "concurrently": "^9.0.1",
     "cross-env": "^7.0.3",
     "date-fns": "^2.19.0",
-    "eslint": "^8.4.1",
+    "eslint": "^9.22.0",
     "eslint-config-chartjs": "^0.3.0",
-    "eslint-plugin-es": "^4.1.0",
-    "eslint-plugin-html": "^8.1.2",
-    "eslint-plugin-markdown": "^3.0.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^16.0.0",
+    "jasmine": "^5.6.0",
     "jasmine-core": "^5.1.2",
     "karma": "^6.2.0",
     "karma-chrome-launcher": "^3.1.0",
@@ -80,11 +91,11 @@
     "karma-firefox-launcher": "^2.1.0",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "karma-rollup-preprocessor": "7.0.8",
+    "karma-rollup-preprocessor": "^7.0.7",
     "karma-spec-reporter": "^0.0.36",
-    "pixelmatch": "^6.0.0",
     "rollup": "^4.21.2",
     "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-istanbul": "^5.0.0",
     "typescript": "^5.3.3",
     "vuepress": "^1.9.7",

package/types/index.esm.d.ts

@@ -3,7 +3,6 @@ import {
   CartesianScaleTypeRegistry,
   Chart,
   ChartComponent,
-  ChartType,
   CommonElementOptions,
   CommonHoverOptions,
   ControllerDatasetOptions,
@@ -12,64 +11,63 @@ import {
   Element,
   ScriptableAndArrayOptions,
   ScriptableContext,
-  VisualElement
-} from 'chart.js';
+  VisualElement,
+} from 'chart.js'
 
-type AnyObject = Record<string, unknown>;
+type AnyObject = Record<string, unknown>
 
-export interface MatrixControllerDatasetOptions<TType extends ChartType>
-  extends ControllerDatasetOptions,
-  ScriptableAndArrayOptions<MatrixOptions, ScriptableContext<TType>>,
-  ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<TType>> {
+export type AnchorX = 'left' | 'center' | 'right' | 'start' | 'end'
+export type AnchorY = 'top' | 'center' | 'bottom' | 'start' | 'end'
+export interface MatrixOptions extends Omit<CommonElementOptions, 'borderWidth'> {
+  borderRadius: number | BorderRadius
+  borderWidth: number | { top?: number; right?: number; bottom?: number; left?: number }
+  anchorX: AnchorX
+  anchorY: AnchorY
+  width: number
+  height: number
 }
+export interface MatrixControllerDatasetOptions
+  extends ControllerDatasetOptions,
+    ScriptableAndArrayOptions<MatrixOptions, ScriptableContext<'matrix'>>,
+    ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'matrix'>> {}
 
 export interface MatrixDataPoint {
-  x: number,
-  y: number,
+  x: number
+  y: number
 }
 
 declare module 'chart.js' {
   export interface ChartTypeRegistry {
     matrix: {
-      chartOptions: CoreChartOptions<'matrix'>;
-      datasetOptions: MatrixControllerDatasetOptions<'matrix'>;
-      defaultDataPoint: MatrixDataPoint;
-      parsedDataType: MatrixDataPoint;
-      metaExtensions: AnyObject;
-      scales: keyof CartesianScaleTypeRegistry;
+      chartOptions: CoreChartOptions<'matrix'>
+      datasetOptions: MatrixControllerDatasetOptions
+      defaultDataPoint: MatrixDataPoint
+      parsedDataType: MatrixDataPoint
+      metaExtensions: AnyObject
+      scales: keyof CartesianScaleTypeRegistry
     }
   }
 }
 
 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 {
-  borderRadius: number | BorderRadius;
-  anchorX: AnchorX;
-  anchorY: AnchorY;
-  width: number;
-  height: number;
+  x: number
+  y: number
+  width: number
+  height: number
+  options?: Partial<MatrixOptions>
 }
 
-export type MatrixController = DatasetController;
+export type MatrixController = DatasetController
 export const MatrixController: ChartComponent & {
-  prototype: MatrixController;
-  new (chart: Chart, datasetIndex: number): MatrixController;
-};
+  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 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;
-};
+  prototype: MatrixElement
+  new (cfg: AnyObject): MatrixElement
+}