chartjs-chart-wordcloud - npm Package Compare versions

Comparing version 3.0.0-beta.11 to 3.0.0-rc.3

build/index.d.ts

@@ -8,3 +8,3 @@ /**
 
-import { FontSpec, Element, VisualElement, ScriptableAndArrayOptions, ScriptableContext, DatasetController, UpdateMode, ControllerDatasetOptions, CommonHoverOptions, CoreChartOptions, CartesianScaleTypeRegistry, Chart, ChartItem, ChartConfiguration } from 'chart.js';
+import { FontSpec, Element, VisualElement, DatasetController, UpdateMode, ControllerDatasetOptions, ScriptableAndArrayOptions, ScriptableContext, CommonHoverOptions, CoreChartOptions, CartesianScaleTypeRegistry, Chart, ChartItem, ChartConfiguration } from 'chart.js';
 
@@ -56,3 +56,3 @@ interface IWordElementOptions extends FontSpec {
     static readonly id = "word";
-    static readonly defaults: Partial<ScriptableAndArrayOptions<IWordElementOptions, ScriptableContext>>;
+    static readonly defaults: any;
     static readonly defaultRoutes: {
@@ -77,5 +77,20 @@ color: string;
 
-declare class WordCloudController extends DatasetController<WordElement> {
+declare class WordCloudController extends DatasetController<'wordCloud', WordElement> {
     static readonly id = "wordCloud";
     static readonly defaults: {
+        datasets: {
+            fit: boolean;
+            animation: {
+                colors: {
+                    properties: string[];
+                };
+                numbers: {
+                    properties: string[];
+                };
+            };
+        };
+        maintainAspectRatio: boolean;
+        dataElementType: string;
+    };
+    static readonly overrides: {
         scales: {
@@ -95,16 +110,2 @@ x: {
         };
-        datasets: {
-            fit: boolean;
-            animation: {
-                colors: {
-                    properties: string[];
-                };
-                numbers: {
-                    properties: string[];
-                };
-            };
-        };
-        maintainAspectRatio: boolean;
-        dataElementType: string;
-        dataElementOptions: string[];
     };
@@ -121,3 +122,3 @@ private readonly wordLayout;
 }
-interface IWordCloudControllerDatasetOptions extends ControllerDatasetOptions, ScriptableAndArrayOptions<IWordElementOptions, ScriptableContext>, ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext> {
+interface IWordCloudControllerDatasetOptions extends ControllerDatasetOptions, ScriptableAndArrayOptions<IWordElementOptions, ScriptableContext<'wordCloud'>>, ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'wordCloud'>> {
     /**
@@ -132,5 +133,8 @@ * whether to fit the word cloud to the map, by scaling to the actual bounds
         wordCloud: {
-            chartOptions: CoreChartOptions;
+            chartOptions: CoreChartOptions<'wordCloud'>;
             datasetOptions: IWordCloudControllerDatasetOptions;
             defaultDataPoint: number[];
+            parsedDataType: {
+                x: number;
+            };
             scales: keyof CartesianScaleTypeRegistry;
@@ -137,0 +141,0 @@ };

build/index.js

@@ -8,15 +8,7 @@ /**
 
-'use strict';
+import { Element, registry, DatasetController, Chart } from 'chart.js';
+import { toFont } from 'chart.js/helpers';
+import layout from 'd3-cloud';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var chart_js = require('chart.js');
-var helpers = require('chart.js/helpers');
-var layout = require('d3-cloud');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var layout__default = /*#__PURE__*/_interopDefaultLegacy(layout);
-
-class WordElement extends chart_js.Element {
+class WordElement extends Element {
     static computeRotation(o, rnd) {
@@ -55,3 +47,3 @@ if (o.rotationSteps <= 1) {
     draw(ctx) {
-        const options = this.options;
+        const { options } = this;
         const props = this.getProps(['x', 'y', 'width', 'height', 'text', 'scale']);
@@ -62,5 +54,3 @@ if (props.scale <= 0) {
         ctx.save();
-        const f = helpers.toFont(Object.assign({}, options, {
-            size: options.size * props.scale,
-        }));
+        const f = toFont({ ...options, size: options.size * props.scale });
         ctx.font = f.string;
@@ -98,14 +88,14 @@ ctx.fillStyle = options.color;
 function patchController(type, config, controller, elements = [], scales = []) {
-    chart_js.registry.addControllers(controller);
+    registry.addControllers(controller);
     if (Array.isArray(elements)) {
-        chart_js.registry.addElements(...elements);
+        registry.addElements(...elements);
     }
     else {
-        chart_js.registry.addElements(elements);
+        registry.addElements(elements);
     }
     if (Array.isArray(scales)) {
-        chart_js.registry.addScales(...scales);
+        registry.addScales(...scales);
     }
     else {
-        chart_js.registry.addScales(scales);
+        registry.addScales(scales);
     }
@@ -124,6 +114,6 @@ const c = config;
 }
-class WordCloudController extends chart_js.DatasetController {
+class WordCloudController extends DatasetController {
     constructor() {
         super(...arguments);
-        this.wordLayout = layout__default['default']()
+        this.wordLayout = layout()
             .text((d) => d.text)
@@ -135,3 +125,3 @@ .padding((d) => d.options.padding)
             .fontStyle((d) => d.options.style)
-            .fontWeight((d) => d.options.weight);
+            .fontWeight((d) => d.options.weight ?? 1);
         this.rand = Math.random;
@@ -154,3 +144,3 @@ }
         const words = [];
-        for (let i = start; i < start + count; i++) {
+        for (let i = start; i < start + count; i += 1) {
             const o = this.resolveDataElementOptions(i, mode);
@@ -161,5 +151,5 @@ if (o.rotate == null) {
             const properties = {
-                options: Object.assign({}, helpers.toFont(o), o),
-                x: this._cachedMeta.xScale.getPixelForDecimal(0.5),
-                y: this._cachedMeta.yScale.getPixelForDecimal(0.5),
+                options: { ...toFont(o), ...o },
+                x: this._cachedMeta.xScale?.getPixelForDecimal(0.5) ?? 0,
+                y: this._cachedMeta.yScale?.getPixelForDecimal(0.5) ?? 0,
                 width: 10,
@@ -186,7 +176,6 @@ height: 10,
                     if (tries > 0) {
-                        return run(factor * 1.2, tries - 1);
+                        run(factor * 1.2, tries - 1);
+                        return;
                     }
-                    else {
-                        console.warn('cannot fit all text elements in three tries');
-                    }
+                    console.warn('cannot fit all text elements in three tries');
                 }
@@ -218,3 +207,3 @@ const wb = bounds[1].x - bounds[0].x;
         const elements = this._cachedMeta.data;
-        const ctx = this.chart.ctx;
+        const { ctx } = this.chart;
         elements.forEach((elem) => elem.draw(ctx));
@@ -231,2 +220,17 @@ }
 WordCloudController.defaults = {
+    datasets: {
+        fit: true,
+        animation: {
+            colors: {
+                properties: ['color', 'strokeStyle'],
+            },
+            numbers: {
+                properties: ['x', 'y', 'size', 'rotate'],
+            },
+        },
+    },
+    maintainAspectRatio: false,
+    dataElementType: WordElement.id,
+};
+WordCloudController.overrides = {
     scales: {
@@ -246,33 +250,4 @@ x: {
     },
-    datasets: {
-        fit: true,
-        animation: {
-            colors: {
-                properties: ['color', 'strokeStyle'],
-            },
-            numbers: {
-                properties: ['x', 'y', 'size', 'rotate'],
-            },
-        },
-    },
-    maintainAspectRatio: false,
-    dataElementType: WordElement.id,
-    dataElementOptions: [
-        'color',
-        'family',
-        'size',
-        'style',
-        'weight',
-        'strokeStyle',
-        'rotate',
-        'minRotation',
-        'maxRotation',
-        'rotationSteps',
-        'hoverColor',
-        'hoverSize',
-        'hoverWeight',
-        'hoverStyle',
-    ],
 };
-class WordCloudChart extends chart_js.Chart {
+class WordCloudChart extends Chart {
     constructor(item, config) {
@@ -284,5 +259,3 @@ super(item, patchController('wordCloud', config, WordCloudController, WordElement));
 
-exports.WordCloudChart = WordCloudChart;
-exports.WordCloudController = WordCloudController;
-exports.WordElement = WordElement;
+export { WordCloudChart, WordCloudController, WordElement };
 //# sourceMappingURL=index.js.map

build/index.umd.js

@@ -550,3 +550,3 @@ /**
 	    draw(ctx) {
-	        const options = this.options;
+	        const { options } = this;
 	        const props = this.getProps(['x', 'y', 'width', 'height', 'text', 'scale']);
@@ -557,5 +557,3 @@ if (props.scale <= 0) {
 	        ctx.save();
-	        const f = helpers.toFont(Object.assign({}, options, {
-	            size: options.size * props.scale,
-	        }));
+	        const f = helpers.toFont({ ...options, size: options.size * props.scale });
 	        ctx.font = f.string;
@@ -628,3 +626,3 @@ ctx.fillStyle = options.color;
 	            .fontStyle((d) => d.options.style)
-	            .fontWeight((d) => d.options.weight);
+	            .fontWeight((d) => d.options.weight ?? 1);
 	        this.rand = Math.random;
@@ -647,3 +645,3 @@ }
 	        const words = [];
-	        for (let i = start; i < start + count; i++) {
+	        for (let i = start; i < start + count; i += 1) {
 	            const o = this.resolveDataElementOptions(i, mode);
@@ -654,5 +652,5 @@ if (o.rotate == null) {
 	            const properties = {
-	                options: Object.assign({}, helpers.toFont(o), o),
-	                x: this._cachedMeta.xScale.getPixelForDecimal(0.5),
-	                y: this._cachedMeta.yScale.getPixelForDecimal(0.5),
+	                options: { ...helpers.toFont(o), ...o },
+	                x: this._cachedMeta.xScale?.getPixelForDecimal(0.5) ?? 0,
+	                y: this._cachedMeta.yScale?.getPixelForDecimal(0.5) ?? 0,
 	                width: 10,
@@ -679,7 +677,6 @@ height: 10,
 	                    if (tries > 0) {
-	                        return run(factor * 1.2, tries - 1);
+	                        run(factor * 1.2, tries - 1);
+	                        return;
 	                    }
-	                    else {
-	                        console.warn('cannot fit all text elements in three tries');
-	                    }
+	                    console.warn('cannot fit all text elements in three tries');
 	                }
@@ -711,3 +708,3 @@ const wb = bounds[1].x - bounds[0].x;
 	        const elements = this._cachedMeta.data;
-	        const ctx = this.chart.ctx;
+	        const { ctx } = this.chart;
 	        elements.forEach((elem) => elem.draw(ctx));
@@ -724,2 +721,17 @@ }
 	WordCloudController.defaults = {
+	    datasets: {
+	        fit: true,
+	        animation: {
+	            colors: {
+	                properties: ['color', 'strokeStyle'],
+	            },
+	            numbers: {
+	                properties: ['x', 'y', 'size', 'rotate'],
+	            },
+	        },
+	    },
+	    maintainAspectRatio: false,
+	    dataElementType: WordElement.id,
+	};
+	WordCloudController.overrides = {
 	    scales: {
@@ -739,31 +751,2 @@ x: {
 	    },
-	    datasets: {
-	        fit: true,
-	        animation: {
-	            colors: {
-	                properties: ['color', 'strokeStyle'],
-	            },
-	            numbers: {
-	                properties: ['x', 'y', 'size', 'rotate'],
-	            },
-	        },
-	    },
-	    maintainAspectRatio: false,
-	    dataElementType: WordElement.id,
-	    dataElementOptions: [
-	        'color',
-	        'family',
-	        'size',
-	        'style',
-	        'weight',
-	        'strokeStyle',
-	        'rotate',
-	        'minRotation',
-	        'maxRotation',
-	        'rotationSteps',
-	        'hoverColor',
-	        'hoverSize',
-	        'hoverWeight',
-	        'hoverStyle',
-	    ],
 	};
@@ -770,0 +753,0 @@ class WordCloudChart extends chart_js.Chart {

build/index.umd.min.js

@@ -1,2 +0,2 @@
-!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).ChartWordCloud={},t.Chart,t.Chart.helpers)}(this,(function(t,e,n){"use strict";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var r=function(t){var e={exports:{}};return t(e,e.exports),e.exports}((function(t,e){!function(t){var e={value:function(){}};function n(){for(var t,e=0,n=arguments.length,o={};e<n;++e){if(!(t=arguments[e]+"")||t in o||/[\s.]/.test(t))throw new Error("illegal type: "+t);o[t]=[]}return new r(o)}function r(t){this._=t}function o(t,e){return t.trim().split(/^|\s+/).map((function(t){var n="",r=t.indexOf(".");if(r>=0&&(n=t.slice(r+1),t=t.slice(0,r)),t&&!e.hasOwnProperty(t))throw new Error("unknown type: "+t);return{type:t,name:n}}))}function a(t,e){for(var n,r=0,o=t.length;r<o;++r)if((n=t[r]).name===e)return n.value}function i(t,n,r){for(var o=0,a=t.length;o<a;++o)if(t[o].name===n){t[o]=e,t=t.slice(0,o).concat(t.slice(o+1));break}return null!=r&&t.push({name:n,value:r}),t}r.prototype=n.prototype={constructor:r,on:function(t,e){var n,r=this._,s=o(t+"",r),l=-1,u=s.length;if(!(arguments.length<2)){if(null!=e&&"function"!=typeof e)throw new Error("invalid callback: "+e);for(;++l<u;)if(n=(t=s[l]).type)r[n]=i(r[n],t.name,e);else if(null==e)for(n in r)r[n]=i(r[n],t.name,null);return this}for(;++l<u;)if((n=(t=s[l]).type)&&(n=a(r[n],t.name)))return n},copy:function(){var t={},e=this._;for(var n in e)t[n]=e[n].slice();return new r(t)},call:function(t,e){if((n=arguments.length-2)>0)for(var n,r,o=new Array(n),a=0;a<n;++a)o[a]=arguments[a+2];if(!this._.hasOwnProperty(t))throw new Error("unknown type: "+t);for(a=0,n=(r=this._[t]).length;a<n;++a)r[a].value.apply(e,o)},apply:function(t,e,n){if(!this._.hasOwnProperty(t))throw new Error("unknown type: "+t);for(var r=this._[t],o=0,a=r.length;o<a;++o)r[o].value.apply(e,n)}},t.dispatch=n,Object.defineProperty(t,"__esModule",{value:!0})}(e)})).dispatch,o=Math.PI/180,a=2048,i=function(){var t=[256,256],e=s,n=l,o=h,i=u,w=u,b=c,M=f,S=x,E=[],C=1/0,R=r("word","end"),k=null,_=Math.random,z={},P=g;function T(e,n,r){t[0],t[1];for(var o,a,i,s,l,u=n.x,h=n.y,c=Math.sqrt(t[0]*t[0]+t[1]*t[1]),f=S(t),d=_()<.5?1:-1,p=-d;(o=f(p+=d))&&(a=~~o[0],i=~~o[1],!(Math.min(Math.abs(a),Math.abs(i))>=c));)if(n.x=u+a,n.y=h+i,!(n.x+n.x0<0||n.y+n.y0<0||n.x+n.x1>t[0]||n.y+n.y1>t[1]||r&&y(n,e,t[0])||r&&(l=r,!((s=n).x+s.x1>l[0].x&&s.x+s.x0<l[1].x&&s.y+s.y1>l[0].y&&s.y+s.y0<l[1].y)))){for(var x,g=n.sprite,m=n.width>>5,v=t[0]>>5,w=n.x-(m<<4),b=127&w,M=32-b,E=n.y1-n.y0,C=(n.y+n.y0)*v+(w>>5),R=0;R<E;R++){x=0;for(var k=0;k<=m;k++)e[C+k]|=x<<M|(k<m?(x=g[R*m+k])>>>b:0);C+=v}return delete n.sprite,!0}return!1}return z.canvas=function(t){return arguments.length?(P=m(t),z):P},z.start=function(){var r=function(t){t.width=t.height=1;var e=Math.sqrt(t.getContext("2d").getImageData(0,0,1,1).data.length>>2);t.width=2048/e,t.height=a/e;var n=t.getContext("2d");return n.fillStyle=n.strokeStyle="red",n.textAlign="center",{context:n,ratio:e}}(P()),s=function(t){var e=[],n=-1;for(;++n<t;)e[n]=0;return e}((t[0]>>5)*t[1]),l=null,u=E.length,h=-1,c=[],f=E.map((function(t,r){return t.text=e.call(this,t,r),t.font=n.call(this,t,r),t.style=i.call(this,t,r),t.weight=w.call(this,t,r),t.rotate=b.call(this,t,r),t.size=~~o.call(this,t,r),t.padding=M.call(this,t,r),t})).sort((function(t,e){return e.size-t.size}));return k&&clearInterval(k),k=setInterval(y,0),y(),z;function y(){for(var e=Date.now();Date.now()-e<C&&++h<u&&k;){var n=f[h];n.x=t[0]*(_()+.5)>>1,n.y=t[1]*(_()+.5)>>1,d(r,n,f,h),n.hasText&&T(s,n,l)&&(c.push(n),R.call("word",z,n),l?p(l,n):l=[{x:n.x+n.x0,y:n.y+n.y0},{x:n.x+n.x1,y:n.y+n.y1}],n.x-=t[0]>>1,n.y-=t[1]>>1)}h>=u&&(z.stop(),R.call("end",z,c,l))}},z.stop=function(){return k&&(clearInterval(k),k=null),z},z.timeInterval=function(t){return arguments.length?(C=null==t?1/0:t,z):C},z.words=function(t){return arguments.length?(E=t,z):E},z.size=function(e){return arguments.length?(t=[+e[0],+e[1]],z):t},z.font=function(t){return arguments.length?(n=m(t),z):n},z.fontStyle=function(t){return arguments.length?(i=m(t),z):i},z.fontWeight=function(t){return arguments.length?(w=m(t),z):w},z.rotate=function(t){return arguments.length?(b=m(t),z):b},z.text=function(t){return arguments.length?(e=m(t),z):e},z.spiral=function(t){return arguments.length?(S=v[t]||t,z):S},z.fontSize=function(t){return arguments.length?(o=m(t),z):o},z.padding=function(t){return arguments.length?(M=m(t),z):M},z.random=function(t){return arguments.length?(_=t,z):_},z.on=function(){var t=R.on.apply(R,arguments);return t===R?z:t},z};function s(t){return t.text}function l(){return"serif"}function u(){return"normal"}function h(t){return Math.sqrt(t.value)}function c(){return 30*(~~(6*Math.random())-3)}function f(){return 1}function d(t,e,n,r){if(!e.sprite){var i=t.context,s=t.ratio;i.clearRect(0,0,2048/s,a/s);var l=0,u=0,h=0,c=n.length;for(--r;++r<c;){e=n[r],i.save(),i.font=e.style+" "+e.weight+" "+~~((e.size+1)/s)+"px "+e.font;var f=i.measureText(e.text+"m").width*s,d=e.size<<1;if(e.rotate){var y=Math.sin(e.rotate*o),p=Math.cos(e.rotate*o),x=f*p,g=f*y,m=d*p,v=d*y;f=Math.max(Math.abs(x+v),Math.abs(x-v))+31>>5<<5,d=~~Math.max(Math.abs(g+m),Math.abs(g-m))}else f=f+31>>5<<5;if(d>h&&(h=d),l+f>=2048&&(l=0,u+=h,h=0),u+d>=a)break;i.translate((l+(f>>1))/s,(u+(d>>1))/s),e.rotate&&i.rotate(e.rotate*o),i.fillText(e.text,0,0),e.padding&&(i.lineWidth=2*e.padding,i.strokeText(e.text,0,0)),i.restore(),e.width=f,e.height=d,e.xoff=l,e.yoff=u,e.x1=f>>1,e.y1=d>>1,e.x0=-e.x1,e.y0=-e.y1,e.hasText=!0,l+=f}for(var w=i.getImageData(0,0,2048/s,a/s).data,b=[];--r>=0;)if((e=n[r]).hasText){for(var M=(f=e.width)>>5,S=(d=e.y1-e.y0,0);S<d*M;S++)b[S]=0;if(null==(l=e.xoff))return;u=e.yoff;for(var E=0,C=-1,R=0;R<d;R++){for(S=0;S<f;S++){var k=M*R+(S>>5),_=w[2048*(u+R)+(l+S)<<2]?1<<31-S%32:0;b[k]|=_,E|=_}E?C=R:(e.y0++,d--,R--,u++)}e.y1=e.y0+C,e.sprite=b.slice(0,(e.y1-e.y0)*M)}}}function y(t,e,n){n>>=5;for(var r,o=t.sprite,a=t.width>>5,i=t.x-(a<<4),s=127&i,l=32-s,u=t.y1-t.y0,h=(t.y+t.y0)*n+(i>>5),c=0;c<u;c++){r=0;for(var f=0;f<=a;f++)if((r<<l|(f<a?(r=o[c*a+f])>>>s:0))&e[h+f])return!0;h+=n}return!1}function p(t,e){var n=t[0],r=t[1];e.x+e.x0<n.x&&(n.x=e.x+e.x0),e.y+e.y0<n.y&&(n.y=e.y+e.y0),e.x+e.x1>r.x&&(r.x=e.x+e.x1),e.y+e.y1>r.y&&(r.y=e.y+e.y1)}function x(t){var e=t[0]/t[1];return function(t){return[e*(t*=.1)*Math.cos(t),t*Math.sin(t)]}}function g(){return document.createElement("canvas")}function m(t){return"function"==typeof t?t:function(){return t}}var v={archimedean:x,rectangular:function(t){var e=4*t[0]/t[1],n=0,r=0;return function(t){var o=t<0?-1:1;switch(Math.sqrt(1+4*o*t)-o&3){case 0:n+=e;break;case 1:r+=4;break;case 2:n-=e;break;default:r-=4}return[n,r]}}};class w extends e.Element{static computeRotation(t,e){if(t.rotationSteps<=1)return 0;if(t.minRotation===t.maxRotation)return t.minRotation;const n=Math.min(t.rotationSteps,Math.floor(e()*t.rotationSteps))/(t.rotationSteps-1),r=t.maxRotation-t.minRotation;return t.minRotation+n*r}inRange(t,e){const n=this.getProps(["x","y","width","height","scale"]);if(n.scale<=0)return!1;const r=Number.isNaN(t)?n.x:t,o=Number.isNaN(e)?n.y:e;return r>=n.x-n.width/2&&r<=n.x+n.width/2&&o>=n.y-n.height/2&&o<=n.y+n.height/2}inXRange(t){return this.inRange(t,Number.NaN)}inYRange(t){return this.inRange(Number.NaN,t)}getCenterPoint(){return this.getProps(["x","y"])}tooltipPosition(){return this.getCenterPoint()}draw(t){const e=this.options,r=this.getProps(["x","y","width","height","text","scale"]);if(r.scale<=0)return;t.save();const o=n.toFont(Object.assign({},e,{size:e.size*r.scale}));t.font=o.string,t.fillStyle=e.color,t.textAlign="center",t.translate(r.x,r.y),t.rotate(e.rotate/180*Math.PI),e.strokeStyle&&(t.strokeStyle=e.strokeStyle,t.strokeText(r.text,0,0)),t.fillText(r.text,0,0),t.restore()}}w.id="word",w.defaults={minRotation:-90,maxRotation:0,rotationSteps:2,padding:1,weight:"normal",size:t=>t.parsed.y,hoverColor:"#ababab"},w.defaultRoutes={color:"color",family:"font.family"};class b extends e.DatasetController{constructor(){super(...arguments),this.wordLayout=i().text((t=>t.text)).padding((t=>t.options.padding)).rotate((t=>t.options.rotate)).font((t=>t.options.family)).fontSize((t=>t.options.size)).fontStyle((t=>t.options.style)).fontWeight((t=>t.options.weight)),this.rand=Math.random}update(t){super.update(t),this.rand=function(t=Date.now()){let e="number"==typeof t?t:Array.from(t).reduce(((t,e)=>t+e.charCodeAt(0)),0);return()=>(e=(9301*e+49297)%233280,e/233280)}(this.chart.id);const e=this._cachedMeta.data||[];this.updateElements(e,0,e.length,t)}updateElements(t,e,r,o){this.wordLayout.stop();const a=this._cachedMeta.xScale,i=this._cachedMeta.yScale,s=a.right-a.left,l=i.bottom-i.top,u=this.chart.data.labels,h=[];for(let t=e;t<e+r;t++){const e=this.resolveDataElementOptions(t,o);null==e.rotate&&(e.rotate=w.computeRotation(e,this.rand));const r={options:Object.assign({},n.toFont(e),e),x:this._cachedMeta.xScale.getPixelForDecimal(.5),y:this._cachedMeta.yScale.getPixelForDecimal(.5),width:10,height:10,scale:1,index:t,text:u[t]};h.push(r)}if("reset"===o)return void h.forEach((e=>{this.updateElement(t[e.index],e.index,e,o)}));this.wordLayout.random(this.rand).words(h);const c=(e=1,n=3)=>{this.wordLayout.size([s*e,l*e]).on("end",((r,h)=>{if(r.length<u.length){if(n>0)return c(1.2*e,n-1);console.warn("cannot fit all text elements in three tries")}const f=h[1].x-h[0].x,d=h[1].y-h[0].y,y=this.options.fit?Math.min(s/f,l/d):1,p=new Set(u.map(((t,e)=>e)));r.forEach((e=>{p.delete(e.index),this.updateElement(t[e.index],e.index,{options:e.options,scale:y,x:a.left+y*e.x+s/2,y:i.top+y*e.y+l/2,width:y*e.width,height:y*e.height,text:e.text},o)})),p.forEach((e=>this.updateElement(t[e],e,{scale:0},o)))})).start()};c()}draw(){const t=this._cachedMeta.data,e=this.chart.ctx;t.forEach((t=>t.draw(e)))}getLabelAndValue(t){const e=super.getLabelAndValue(t),n=this.chart.data.labels;return e.label=n[t],e}}b.id="wordCloud",b.defaults={scales:{x:{type:"linear",min:-1,max:1,display:!1},y:{type:"linear",min:-1,max:1,display:!1}},datasets:{fit:!0,animation:{colors:{properties:["color","strokeStyle"]},numbers:{properties:["x","y","size","rotate"]}}},maintainAspectRatio:!1,dataElementType:w.id,dataElementOptions:["color","family","size","style","weight","strokeStyle","rotate","minRotation","maxRotation","rotationSteps","hoverColor","hoverSize","hoverWeight","hoverStyle"]};class M extends e.Chart{constructor(t,n){super(t,function(t,n,r,o=[],a=[]){e.registry.addControllers(r),Array.isArray(o)?e.registry.addElements(...o):e.registry.addElements(o),Array.isArray(a)?e.registry.addScales(...a):e.registry.addScales(a);const i=n;return i.type=t,i}("wordCloud",n,b,w))}}M.id=b.id,e.registry.addControllers(b),e.registry.addElements(w),t.WordCloudChart=M,t.WordCloudController=b,t.WordElement=w,Object.defineProperty(t,"__esModule",{value:!0})}));
+!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).ChartWordCloud={},t.Chart,t.Chart.helpers)}(this,(function(t,e,n){"use strict";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var r=function(t){var e={exports:{}};return t(e,e.exports),e.exports}((function(t,e){!function(t){var e={value:function(){}};function n(){for(var t,e=0,n=arguments.length,o={};e<n;++e){if(!(t=arguments[e]+"")||t in o||/[\s.]/.test(t))throw new Error("illegal type: "+t);o[t]=[]}return new r(o)}function r(t){this._=t}function o(t,e){return t.trim().split(/^|\s+/).map((function(t){var n="",r=t.indexOf(".");if(r>=0&&(n=t.slice(r+1),t=t.slice(0,r)),t&&!e.hasOwnProperty(t))throw new Error("unknown type: "+t);return{type:t,name:n}}))}function a(t,e){for(var n,r=0,o=t.length;r<o;++r)if((n=t[r]).name===e)return n.value}function i(t,n,r){for(var o=0,a=t.length;o<a;++o)if(t[o].name===n){t[o]=e,t=t.slice(0,o).concat(t.slice(o+1));break}return null!=r&&t.push({name:n,value:r}),t}r.prototype=n.prototype={constructor:r,on:function(t,e){var n,r=this._,s=o(t+"",r),l=-1,u=s.length;if(!(arguments.length<2)){if(null!=e&&"function"!=typeof e)throw new Error("invalid callback: "+e);for(;++l<u;)if(n=(t=s[l]).type)r[n]=i(r[n],t.name,e);else if(null==e)for(n in r)r[n]=i(r[n],t.name,null);return this}for(;++l<u;)if((n=(t=s[l]).type)&&(n=a(r[n],t.name)))return n},copy:function(){var t={},e=this._;for(var n in e)t[n]=e[n].slice();return new r(t)},call:function(t,e){if((n=arguments.length-2)>0)for(var n,r,o=new Array(n),a=0;a<n;++a)o[a]=arguments[a+2];if(!this._.hasOwnProperty(t))throw new Error("unknown type: "+t);for(a=0,n=(r=this._[t]).length;a<n;++a)r[a].value.apply(e,o)},apply:function(t,e,n){if(!this._.hasOwnProperty(t))throw new Error("unknown type: "+t);for(var r=this._[t],o=0,a=r.length;o<a;++o)r[o].value.apply(e,n)}},t.dispatch=n,Object.defineProperty(t,"__esModule",{value:!0})}(e)})).dispatch,o=Math.PI/180,a=2048,i=function(){var t=[256,256],e=s,n=l,o=h,i=u,v=u,b=c,M=f,S=x,E=[],C=1/0,R=r("word","end"),_=null,k=Math.random,P={},z=g;function T(e,n,r){t[0],t[1];for(var o,a,i,s,l,u=n.x,h=n.y,c=Math.sqrt(t[0]*t[0]+t[1]*t[1]),f=S(t),d=k()<.5?1:-1,p=-d;(o=f(p+=d))&&(a=~~o[0],i=~~o[1],!(Math.min(Math.abs(a),Math.abs(i))>=c));)if(n.x=u+a,n.y=h+i,!(n.x+n.x0<0||n.y+n.y0<0||n.x+n.x1>t[0]||n.y+n.y1>t[1]||r&&y(n,e,t[0])||r&&(l=r,!((s=n).x+s.x1>l[0].x&&s.x+s.x0<l[1].x&&s.y+s.y1>l[0].y&&s.y+s.y0<l[1].y)))){for(var x,g=n.sprite,m=n.width>>5,w=t[0]>>5,v=n.x-(m<<4),b=127&v,M=32-b,E=n.y1-n.y0,C=(n.y+n.y0)*w+(v>>5),R=0;R<E;R++){x=0;for(var _=0;_<=m;_++)e[C+_]|=x<<M|(_<m?(x=g[R*m+_])>>>b:0);C+=w}return delete n.sprite,!0}return!1}return P.canvas=function(t){return arguments.length?(z=m(t),P):z},P.start=function(){var r=function(t){t.width=t.height=1;var e=Math.sqrt(t.getContext("2d").getImageData(0,0,1,1).data.length>>2);t.width=2048/e,t.height=a/e;var n=t.getContext("2d");return n.fillStyle=n.strokeStyle="red",n.textAlign="center",{context:n,ratio:e}}(z()),s=function(t){var e=[],n=-1;for(;++n<t;)e[n]=0;return e}((t[0]>>5)*t[1]),l=null,u=E.length,h=-1,c=[],f=E.map((function(t,r){return t.text=e.call(this,t,r),t.font=n.call(this,t,r),t.style=i.call(this,t,r),t.weight=v.call(this,t,r),t.rotate=b.call(this,t,r),t.size=~~o.call(this,t,r),t.padding=M.call(this,t,r),t})).sort((function(t,e){return e.size-t.size}));return _&&clearInterval(_),_=setInterval(y,0),y(),P;function y(){for(var e=Date.now();Date.now()-e<C&&++h<u&&_;){var n=f[h];n.x=t[0]*(k()+.5)>>1,n.y=t[1]*(k()+.5)>>1,d(r,n,f,h),n.hasText&&T(s,n,l)&&(c.push(n),R.call("word",P,n),l?p(l,n):l=[{x:n.x+n.x0,y:n.y+n.y0},{x:n.x+n.x1,y:n.y+n.y1}],n.x-=t[0]>>1,n.y-=t[1]>>1)}h>=u&&(P.stop(),R.call("end",P,c,l))}},P.stop=function(){return _&&(clearInterval(_),_=null),P},P.timeInterval=function(t){return arguments.length?(C=null==t?1/0:t,P):C},P.words=function(t){return arguments.length?(E=t,P):E},P.size=function(e){return arguments.length?(t=[+e[0],+e[1]],P):t},P.font=function(t){return arguments.length?(n=m(t),P):n},P.fontStyle=function(t){return arguments.length?(i=m(t),P):i},P.fontWeight=function(t){return arguments.length?(v=m(t),P):v},P.rotate=function(t){return arguments.length?(b=m(t),P):b},P.text=function(t){return arguments.length?(e=m(t),P):e},P.spiral=function(t){return arguments.length?(S=w[t]||t,P):S},P.fontSize=function(t){return arguments.length?(o=m(t),P):o},P.padding=function(t){return arguments.length?(M=m(t),P):M},P.random=function(t){return arguments.length?(k=t,P):k},P.on=function(){var t=R.on.apply(R,arguments);return t===R?P:t},P};function s(t){return t.text}function l(){return"serif"}function u(){return"normal"}function h(t){return Math.sqrt(t.value)}function c(){return 30*(~~(6*Math.random())-3)}function f(){return 1}function d(t,e,n,r){if(!e.sprite){var i=t.context,s=t.ratio;i.clearRect(0,0,2048/s,a/s);var l=0,u=0,h=0,c=n.length;for(--r;++r<c;){e=n[r],i.save(),i.font=e.style+" "+e.weight+" "+~~((e.size+1)/s)+"px "+e.font;var f=i.measureText(e.text+"m").width*s,d=e.size<<1;if(e.rotate){var y=Math.sin(e.rotate*o),p=Math.cos(e.rotate*o),x=f*p,g=f*y,m=d*p,w=d*y;f=Math.max(Math.abs(x+w),Math.abs(x-w))+31>>5<<5,d=~~Math.max(Math.abs(g+m),Math.abs(g-m))}else f=f+31>>5<<5;if(d>h&&(h=d),l+f>=2048&&(l=0,u+=h,h=0),u+d>=a)break;i.translate((l+(f>>1))/s,(u+(d>>1))/s),e.rotate&&i.rotate(e.rotate*o),i.fillText(e.text,0,0),e.padding&&(i.lineWidth=2*e.padding,i.strokeText(e.text,0,0)),i.restore(),e.width=f,e.height=d,e.xoff=l,e.yoff=u,e.x1=f>>1,e.y1=d>>1,e.x0=-e.x1,e.y0=-e.y1,e.hasText=!0,l+=f}for(var v=i.getImageData(0,0,2048/s,a/s).data,b=[];--r>=0;)if((e=n[r]).hasText){for(var M=(f=e.width)>>5,S=(d=e.y1-e.y0,0);S<d*M;S++)b[S]=0;if(null==(l=e.xoff))return;u=e.yoff;for(var E=0,C=-1,R=0;R<d;R++){for(S=0;S<f;S++){var _=M*R+(S>>5),k=v[2048*(u+R)+(l+S)<<2]?1<<31-S%32:0;b[_]|=k,E|=k}E?C=R:(e.y0++,d--,R--,u++)}e.y1=e.y0+C,e.sprite=b.slice(0,(e.y1-e.y0)*M)}}}function y(t,e,n){n>>=5;for(var r,o=t.sprite,a=t.width>>5,i=t.x-(a<<4),s=127&i,l=32-s,u=t.y1-t.y0,h=(t.y+t.y0)*n+(i>>5),c=0;c<u;c++){r=0;for(var f=0;f<=a;f++)if((r<<l|(f<a?(r=o[c*a+f])>>>s:0))&e[h+f])return!0;h+=n}return!1}function p(t,e){var n=t[0],r=t[1];e.x+e.x0<n.x&&(n.x=e.x+e.x0),e.y+e.y0<n.y&&(n.y=e.y+e.y0),e.x+e.x1>r.x&&(r.x=e.x+e.x1),e.y+e.y1>r.y&&(r.y=e.y+e.y1)}function x(t){var e=t[0]/t[1];return function(t){return[e*(t*=.1)*Math.cos(t),t*Math.sin(t)]}}function g(){return document.createElement("canvas")}function m(t){return"function"==typeof t?t:function(){return t}}var w={archimedean:x,rectangular:function(t){var e=4*t[0]/t[1],n=0,r=0;return function(t){var o=t<0?-1:1;switch(Math.sqrt(1+4*o*t)-o&3){case 0:n+=e;break;case 1:r+=4;break;case 2:n-=e;break;default:r-=4}return[n,r]}}};class v extends e.Element{static computeRotation(t,e){if(t.rotationSteps<=1)return 0;if(t.minRotation===t.maxRotation)return t.minRotation;const n=Math.min(t.rotationSteps,Math.floor(e()*t.rotationSteps))/(t.rotationSteps-1),r=t.maxRotation-t.minRotation;return t.minRotation+n*r}inRange(t,e){const n=this.getProps(["x","y","width","height","scale"]);if(n.scale<=0)return!1;const r=Number.isNaN(t)?n.x:t,o=Number.isNaN(e)?n.y:e;return r>=n.x-n.width/2&&r<=n.x+n.width/2&&o>=n.y-n.height/2&&o<=n.y+n.height/2}inXRange(t){return this.inRange(t,Number.NaN)}inYRange(t){return this.inRange(Number.NaN,t)}getCenterPoint(){return this.getProps(["x","y"])}tooltipPosition(){return this.getCenterPoint()}draw(t){const{options:e}=this,r=this.getProps(["x","y","width","height","text","scale"]);if(r.scale<=0)return;t.save();const o=n.toFont({...e,size:e.size*r.scale});t.font=o.string,t.fillStyle=e.color,t.textAlign="center",t.translate(r.x,r.y),t.rotate(e.rotate/180*Math.PI),e.strokeStyle&&(t.strokeStyle=e.strokeStyle,t.strokeText(r.text,0,0)),t.fillText(r.text,0,0),t.restore()}}v.id="word",v.defaults={minRotation:-90,maxRotation:0,rotationSteps:2,padding:1,weight:"normal",size:t=>t.parsed.y,hoverColor:"#ababab"},v.defaultRoutes={color:"color",family:"font.family"};class b extends e.DatasetController{constructor(){super(...arguments),this.wordLayout=i().text((t=>t.text)).padding((t=>t.options.padding)).rotate((t=>t.options.rotate)).font((t=>t.options.family)).fontSize((t=>t.options.size)).fontStyle((t=>t.options.style)).fontWeight((t=>t.options.weight??1)),this.rand=Math.random}update(t){super.update(t),this.rand=function(t=Date.now()){let e="number"==typeof t?t:Array.from(t).reduce(((t,e)=>t+e.charCodeAt(0)),0);return()=>(e=(9301*e+49297)%233280,e/233280)}(this.chart.id);const e=this._cachedMeta.data||[];this.updateElements(e,0,e.length,t)}updateElements(t,e,r,o){this.wordLayout.stop();const a=this._cachedMeta.xScale,i=this._cachedMeta.yScale,s=a.right-a.left,l=i.bottom-i.top,u=this.chart.data.labels,h=[];for(let t=e;t<e+r;t+=1){const e=this.resolveDataElementOptions(t,o);null==e.rotate&&(e.rotate=v.computeRotation(e,this.rand));const r={options:{...n.toFont(e),...e},x:this._cachedMeta.xScale?.getPixelForDecimal(.5)??0,y:this._cachedMeta.yScale?.getPixelForDecimal(.5)??0,width:10,height:10,scale:1,index:t,text:u[t]};h.push(r)}if("reset"===o)return void h.forEach((e=>{this.updateElement(t[e.index],e.index,e,o)}));this.wordLayout.random(this.rand).words(h);const c=(e=1,n=3)=>{this.wordLayout.size([s*e,l*e]).on("end",((r,h)=>{if(r.length<u.length){if(n>0)return void c(1.2*e,n-1);console.warn("cannot fit all text elements in three tries")}const f=h[1].x-h[0].x,d=h[1].y-h[0].y,y=this.options.fit?Math.min(s/f,l/d):1,p=new Set(u.map(((t,e)=>e)));r.forEach((e=>{p.delete(e.index),this.updateElement(t[e.index],e.index,{options:e.options,scale:y,x:a.left+y*e.x+s/2,y:i.top+y*e.y+l/2,width:y*e.width,height:y*e.height,text:e.text},o)})),p.forEach((e=>this.updateElement(t[e],e,{scale:0},o)))})).start()};c()}draw(){const t=this._cachedMeta.data,{ctx:e}=this.chart;t.forEach((t=>t.draw(e)))}getLabelAndValue(t){const e=super.getLabelAndValue(t),n=this.chart.data.labels;return e.label=n[t],e}}b.id="wordCloud",b.defaults={datasets:{fit:!0,animation:{colors:{properties:["color","strokeStyle"]},numbers:{properties:["x","y","size","rotate"]}}},maintainAspectRatio:!1,dataElementType:v.id},b.overrides={scales:{x:{type:"linear",min:-1,max:1,display:!1},y:{type:"linear",min:-1,max:1,display:!1}}};class M extends e.Chart{constructor(t,n){super(t,function(t,n,r,o=[],a=[]){e.registry.addControllers(r),Array.isArray(o)?e.registry.addElements(...o):e.registry.addElements(o),Array.isArray(a)?e.registry.addScales(...a):e.registry.addScales(a);const i=n;return i.type=t,i}("wordCloud",n,b,v))}}M.id=b.id,e.registry.addControllers(b),e.registry.addElements(v),t.WordCloudChart=M,t.WordCloudController=b,t.WordElement=v,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "chartjs-chart-wordcloud",
   "description": "Chart.js module for word clouds",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-rc.3",
   "author": {
@@ -25,4 +25,5 @@ "name": "Samuel Gratzl",
   "global": "ChartWordCloud",
-  "module": "build/index.esm.js",
-  "main": "build/index.js",
+  "module": "build/index.js",
+  "main": "build/index.cjs.js",
+  "browser": "build/index.umd.js",
   "unpkg": "build/index.umd.min.js",
@@ -37,3 +38,3 @@ "jsdelivr": "build/index.umd.min.js",
   "peerDependencies": {
-    "chart.js": "^3.0.0-beta.11"
+    "chart.js": "^3.0.0-rc"
   },
@@ -50,35 +51,36 @@ "browserslist": [
     "@rollup/plugin-typescript": "^8.2.0",
-    "@types/jest": "^26.0.20",
-    "@types/jest-image-snapshot": "^4.1.3",
-    "@types/node": "^14.14.31",
-    "@types/seedrandom": "^2.4.28",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
+    "@types/jest": "^26.0.22",
+    "@types/jest-image-snapshot": "^4.3.0",
+    "@types/node": "^14.14.36",
+    "@types/seedrandom": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "@typescript-eslint/parser": "^4.19.0",
     "@yarnpkg/pnpify": "^2.4.0",
-    "canvas": "^2.6.1",
+    "canvas": "^2.7.0",
     "canvas-5-polyfill": "^0.1.5",
-    "chart.js": "^3.0.0-beta.9",
-    "eslint": "^7.20.0",
+    "chart.js": "^3.0.0-rc.3",
+    "eslint": "^7.22.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.1.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.3.1",
+    "eslint-plugin-flowtype": "^5.4.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.23.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
-    "jest-image-snapshot": "^4.3.0",
+    "jest-image-snapshot": "^4.4.0",
     "prettier": "^2.2.1",
-    "release-it": "^14.4.1",
+    "release-it": "^14.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.40.0",
+    "rollup": "^2.42.4",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-dts": "^2.0.1",
+    "rollup-plugin-dts": "^3.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "seedrandom": "^3.0.5",
-    "ts-jest": "^26.5.2",
+    "ts-jest": "^26.5.4",
     "tslib": "^2.1.0",
-    "typedoc": "^0.20.28",
-    "typescript": "~4.1.5",
+    "typedoc": "^0.20.34",
+    "typescript": "^4.2.3",
     "us-atlas": "^3.0.0",
@@ -88,4 +90,5 @@ "world-atlas": "^2.0.2"
   "scripts": {
-    "clean": "rimraf build node_modules \"*.tgz\"",
-    "compile": "tsc -p tsconfig.json --noEmit",
+    "clean": "rimraf build docs node_modules \"*.tgz\" \"*.tsbuildinfo\"",
+    "compile": "tsc -b tsconfig.c.json",
+    "compile:types": "tsc -p tsconfig.c.json --emitDeclarationOnly",
     "start": "yarn run watch",
@@ -99,11 +102,10 @@ "watch": "rollup -c -w",
     "fix": "yarn run eslint:fix && yarn run prettier:write",
-    "prettier:write": "prettier \"*/**\" --write",
-    "prettier": "prettier \"*/**\" --check",
+    "prettier:write": "prettier \"*\" \"*/**\" --write",
+    "prettier": "prettier \"*\" \"*/**\" --check",
     "eslint": "eslint src --ext .ts,.tsx",
     "eslint:fix": "yarn run eslint --fix",
-    "docs": "typedoc",
+    "docs": "typedoc src/index.ts",
     "prepare": "yarn run build",
     "release": "release-it --disable-metrics --npm.skipChecks",
-    "release:pre": "release-it --disable-metrics --npm.skipChecks --preRelease=alpha --npm.tag=next",
-    "release:beta": "release-it --disable-metrics --npm.skipChecks --preRelease=beta --npm.tag=next"
+    "release:pre": "release-it --disable-metrics --npm.skipChecks --preRelease=alpha --npm.tag=next"
   },
@@ -110,0 +112,0 @@ "dependencies": {

src/__tests__/createChart.ts

@@ -6,2 +6,3 @@ /// <reference types="jest" />
 import { toMatchImageSnapshot, MatchImageSnapshotOptions } from 'jest-image-snapshot';
+import 'canvas-5-polyfill';
 
@@ -15,2 +16,3 @@ expect.extend({ toMatchImageSnapshot });
       file.onload = () => resolve(Buffer.from(file.result as ArrayBuffer));
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       file.readAsArrayBuffer(b!);
@@ -26,3 +28,9 @@ });
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export interface ChartHelper<TYPE extends ChartType, DATA extends unknown[] = DefaultDataPoint<TYPE>, LABEL = string> {
+  chart: Chart<TYPE, DATA, LABEL>;
+  canvas: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D;
+  toMatchImageSnapshot(options?: MatchImageSnapshotOptions): Promise<void>;
+}
+
 export default function createChart<
@@ -32,3 +40,3 @@ TYPE extends ChartType,
   LABEL = string
->(config: ChartConfiguration<TYPE, DATA, LABEL>, width = 800, height = 600) {
+>(config: ChartConfiguration<TYPE, DATA, LABEL>, width = 300, height = 300): ChartHelper<TYPE, DATA, LABEL> {
   const canvas = document.createElement('canvas');
@@ -39,17 +47,19 @@ canvas.width = width;
   defaults.color = 'transparent';
-  config.options = Object.assign(
-    {
-      responsive: false,
-      animation: false,
-      plugins: {
-        legend: {
-          display: false,
-        },
-        title: {
-          display: false,
-        },
+  // eslint-disable-next-line no-param-reassign
+  config.options = {
+    responsive: false,
+    animation: {
+      duration: 1,
+    },
+    plugins: {
+      legend: {
+        display: false,
       },
+      title: {
+        display: false,
+      },
     },
-    config.options || {}
-  ) as any;
+    ...(config.options || {}),
+  } as any;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const ctx = canvas.getContext('2d')!;
@@ -56,0 +66,0 @@

src/controllers/WordCloudController.spec.ts

 /// <reference types="jest" />
+import { registry } from 'chart.js';
 import { WordCloudController } from './WordCloudController';
-import { registry } from 'chart.js';
 import { WordElement } from '../elements';
@@ -5,0 +5,0 @@ import createChart from '../__tests__/createChart';

src/controllers/WordCloudController.ts

@@ -13,2 +13,3 @@ import {
   ScriptableContext,
+  VisualElement,
 } from 'chart.js';
@@ -34,6 +35,22 @@ import { toFont } from 'chart.js/helpers';
 
-export class WordCloudController extends DatasetController<WordElement> {
+export class WordCloudController extends DatasetController<'wordCloud', WordElement> {
   static readonly id = 'wordCloud';
 
   static readonly defaults = {
+    datasets: {
+      fit: true,
+      animation: {
+        colors: {
+          properties: ['color', 'strokeStyle'],
+        },
+        numbers: {
+          properties: ['x', 'y', 'size', 'rotate'],
+        },
+      },
+    },
+    maintainAspectRatio: false,
+    dataElementType: WordElement.id,
+  };
+
+  static readonly overrides = {
     scales: {
@@ -53,31 +70,2 @@ x: {
     },
-    datasets: {
-      fit: true,
-      animation: {
-        colors: {
-          properties: ['color', 'strokeStyle'],
-        },
-        numbers: {
-          properties: ['x', 'y', 'size', 'rotate'],
-        },
-      },
-    },
-    maintainAspectRatio: false,
-    dataElementType: WordElement.id,
-    dataElementOptions: [
-      'color',
-      'family',
-      'size',
-      'style',
-      'weight',
-      'strokeStyle',
-      'rotate',
-      'minRotation',
-      'maxRotation',
-      'rotationSteps',
-      'hoverColor',
-      'hoverSize',
-      'hoverWeight',
-      'hoverStyle',
-    ],
   };
@@ -92,3 +80,3 @@
     .fontStyle((d) => d.options.style)
-    .fontWeight((d) => d.options.weight!);
+    .fontWeight((d) => d.options.weight ?? 1);
 
@@ -116,3 +104,3 @@ rand: () => number = Math.random;
     const words: (ICloudWord & Record<string, unknown>)[] = [];
-    for (let i = start; i < start + count; i++) {
+    for (let i = start; i < start + count; i += 1) {
       const o = (this.resolveDataElementOptions(i, mode) as unknown) as IWordElementOptions;
@@ -123,5 +111,5 @@ if (o.rotate == null) {
       const properties: ICloudWord & Record<string, unknown> = {
-        options: Object.assign({}, toFont(o), o),
-        x: this._cachedMeta.xScale!.getPixelForDecimal(0.5)!,
-        y: this._cachedMeta.yScale!.getPixelForDecimal(0.5)!,
+        options: { ...toFont(o), ...o },
+        x: this._cachedMeta.xScale?.getPixelForDecimal(0.5) ?? 0,
+        y: this._cachedMeta.yScale?.getPixelForDecimal(0.5) ?? 0,
         width: 10,
@@ -151,6 +139,7 @@ height: 10,
               // try again with a factor of 1.2
-              return run(factor * 1.2, tries - 1);
-            } else {
-              console.warn('cannot fit all text elements in three tries');
+              run(factor * 1.2, tries - 1);
+              return;
             }
+            // eslint-disable-next-line no-console
+            console.warn('cannot fit all text elements in three tries');
           }
@@ -189,4 +178,4 @@ const wb = bounds[1].x - bounds[0].x;
   draw(): void {
-    const elements = this._cachedMeta.data;
-    const ctx = this.chart.ctx;
+    const elements = (this._cachedMeta.data as unknown) as VisualElement[];
+    const { ctx } = this.chart;
     elements.forEach((elem) => elem.draw(ctx));
@@ -205,4 +194,4 @@ }
   extends ControllerDatasetOptions,
-    ScriptableAndArrayOptions<IWordElementOptions, ScriptableContext>,
-    ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext> {
+    ScriptableAndArrayOptions<IWordElementOptions, ScriptableContext<'wordCloud'>>,
+    ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'wordCloud'>> {
   /**
@@ -218,5 +207,6 @@ * whether to fit the word cloud to the map, by scaling to the actual bounds
     wordCloud: {
-      chartOptions: CoreChartOptions;
+      chartOptions: CoreChartOptions<'wordCloud'>;
       datasetOptions: IWordCloudControllerDatasetOptions;
       defaultDataPoint: number[];
+      parsedDataType: { x: number };
       scales: keyof CartesianScaleTypeRegistry;
@@ -223,0 +213,0 @@ };

src/elements/WordElement.ts

@@ -52,3 +52,4 @@ import { Element, FontSpec, VisualElement, ScriptableAndArrayOptions, ScriptableContext } from 'chart.js';
   static readonly id = 'word';
-  static readonly defaults = /* #__PURE__ */ {
+
+  static readonly defaults: any = /* #__PURE__ */ {
     // rotate: 0,
@@ -65,3 +66,3 @@ minRotation: -90,
     hoverColor: '#ababab',
-  } as Partial<ScriptableAndArrayOptions<IWordElementOptions, ScriptableContext>>;
+  } as Partial<ScriptableAndArrayOptions<IWordElementOptions, ScriptableContext<'wordCloud'>>>;
 
@@ -112,3 +113,3 @@ static readonly defaultRoutes = {
   draw(ctx: CanvasRenderingContext2D): void {
-    const options = this.options;
+    const { options } = this;
     const props = this.getProps(['x', 'y', 'width', 'height', 'text', 'scale']);
@@ -119,7 +120,3 @@ if (props.scale <= 0) {
     ctx.save();
-    const f = toFont(
-      Object.assign({}, options, {
-        size: options.size * props.scale,
-      })
-    );
+    const f = toFont({ ...options, size: options.size * props.scale });
     ctx.font = f.string;
@@ -126,0 +123,0 @@ ctx.fillStyle = options.color;

src/index.umd.ts

@@ -0,3 +1,3 @@
+import { registry } from 'chart.js';
 import { WordCloudController } from './controllers';
-import { registry } from 'chart.js';
 import { WordElement } from './elements';
@@ -4,0 +4,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

173204

decreased by-0.74%

Dev dependency count

40

increased by2.56%

Lines of code

1809

decreased by-2.85%

No dependency changes