chartjs-chart-matrix 1.0.0 → 1.1.1

package/README.md

@@ -6,12 +6,12 @@
 [![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)
+[![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)
 [![documentation](https://img.shields.io/static/v1?message=Documentation&color=informational)](https://chartjs-chart-matrix.pages.dev)
 
 ## Documentation
 
-To create a matrix chart, include chartjs-chart-matrix.js after chart.js and then create the chart by setting the `type` attribute to `'matrix'`
+To create a matrix chart, include `chartjs-chart-matrix.js` after `chart.js` and then create the chart by setting the `type` attribute to `'matrix'`
 
 ```js
 const chart = new Chart(ctx, {

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

@@ -1,13 +1,13 @@
 /*!
- * chartjs-chart-matrix v1.0.0
+ * chartjs-chart-matrix v1.1.1
  * https://chartjs-chart-matrix.pages.dev/
  * (c) 2021 Jukka Kurkela
  * Released under the MIT license
  */
 import { DatasetController, Element } from 'chart.js';
-import { isObject } from 'chart.js/helpers';
+import { toTRBLCorners, addRoundedRectPath, isObject } from 'chart.js/helpers';
 
-var version = "1.0.0";
+var version = "1.1.1";
 
 class MatrixController extends DatasetController {
   initialize() {
@@ -36,8 +36,8 @@ class MatrixController extends DatasetController {
       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),
+        x: resolveX(anchorX, x, width),
+        y: resolveY(anchorY, y, height),
         width,
         height,
         options
@@ -59,6 +59,26 @@ class MatrixController extends DatasetController {
   }
 }
 
+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;
+}
+
 MatrixController.id = 'matrix';
 
 MatrixController.version = version;
@@ -179,21 +199,23 @@ 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();
-      ctx.rect(outer.x, outer.y, outer.w, outer.h);
-      ctx.clip();
-      ctx.rect(inner.x, inner.y, inner.w, inner.h);
+      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.fillRect(inner.x, inner.y, inner.w, inner.h);
+      ctx.fill();
     }
 
     ctx.restore();
@@ -233,6 +255,7 @@ MatrixElement.defaults = {
   backgroundColor: undefined,
   borderColor: undefined,
   borderWidth: undefined,
+  borderRadius: 0,
   anchorX: undefined,
   anchorY: undefined,
   width: 20,

package/dist/chartjs-chart-matrix.js

@@ -1,5 +1,5 @@
 /*!
- * chartjs-chart-matrix v1.0.0
+ * chartjs-chart-matrix v1.1.1
  * https://chartjs-chart-matrix.pages.dev/
  * (c) 2021 Jukka Kurkela
  * Released under the MIT license
@@ -8,13 +8,13 @@
 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';
+})(this, (function (Chart, helpers) { 'use strict';
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Chart__default = /*#__PURE__*/_interopDefaultLegacy(Chart);
 
-var version = "1.0.0";
+var version = "1.1.1";
 
 class MatrixController extends Chart.DatasetController {
   initialize() {
@@ -43,8 +43,8 @@ class MatrixController extends Chart.DatasetController {
       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),
+        x: resolveX(anchorX, x, width),
+        y: resolveY(anchorY, y, height),
         width,
         height,
         options
@@ -66,6 +66,26 @@ class MatrixController extends Chart.DatasetController {
   }
 }
 
+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;
+}
+
 MatrixController.id = 'matrix';
 
 MatrixController.version = version;
@@ -186,21 +206,23 @@ class MatrixElement extends Chart.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();
-      ctx.rect(outer.x, outer.y, outer.w, outer.h);
-      ctx.clip();
-      ctx.rect(inner.x, inner.y, inner.w, inner.h);
+      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.fillRect(inner.x, inner.y, inner.w, inner.h);
+      ctx.fill();
     }
 
     ctx.restore();
@@ -240,12 +262,13 @@ MatrixElement.defaults = {
   backgroundColor: undefined,
   borderColor: undefined,
   borderWidth: undefined,
+  borderRadius: 0,
   anchorX: undefined,
   anchorY: undefined,
   width: 20,
   height: 20
 };
 
-Chart__default['default'].register(MatrixController, MatrixElement);
+Chart__default["default"].register(MatrixController, MatrixElement);
 
-})));
+}));

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-chart-matrix",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Chart.js module for creating matrix charts",
   "main": "dist/chartjs-chart-matrix.js",
   "module": "dist/chartjs-chart-matrix.esm.js",
@@ -29,7 +29,8 @@
     "matrix"
   ],
   "files": [
-    "dist/*.js"
+    "dist/*.js",
+    "types/index.esm.d.ts"
   ],
   "author": "Jukka Kurkela",
   "license": "MIT",
@@ -38,18 +39,18 @@
   },
   "homepage": "https://chartjs-chart-matrix.pages.dev/",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
     "chart.js": "^3.0.0",
     "chartjs-adapter-date-fns": "^2.0.0",
-    "chartjs-test-utils": "^0.2.2",
+    "chartjs-test-utils": "^0.3.0",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
     "date-fns": "^2.19.0",
-    "eslint": "^7.22.0",
+    "eslint": "^8.4.1",
     "eslint-config-chartjs": "^0.3.0",
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-html": "^6.1.2",
@@ -68,9 +69,9 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.2.4",
+    "typescript": "^4.5.2",
     "vuepress": "^1.8.2",
-    "vuepress-plugin-flexsearch": "^0.1.0",
+    "vuepress-plugin-flexsearch": "^0.3.0",
     "vuepress-plugin-redirect": "^1.2.5",
     "vuepress-theme-chartjs": "^0.2.0"
   },

package/types/index.esm.d.ts

@@ -0,0 +1,72 @@
+import {
+  BorderRadius,
+  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<MatrixOptions, ScriptableContext<TType>>,
+  ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<TType>> {
+}
+
+export interface MatrixDataPoint {
+  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;
+    }
+  }
+}
+
+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;
+}
+
+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;
+};