chartjs-plugin-annotation - npm Package Compare versions

Comparing version 1.0.0-rc to 1.0.0

dist/chartjs-plugin-annotation.esm.js

 /*!
-* chartjs-plugin-annotation v1.0.0-rc
+* chartjs-plugin-annotation v1.0.0
 * https://www.chartjs.org/chartjs-plugin-annotation/index
@@ -147,5 +147,13 @@ * (c) 2021 chartjs-plugin-annotation Contributors
 
+function inArea(scale, pixel) {
+  const area = scale.chart.chartArea;
+  return scale.isHorizontal()
+    ? pixel >= area.left && pixel <= area.right
+    : pixel >= area.top && pixel <= area.bottom;
+}
+
 function scaleValue(scale, value, fallback) {
   value = typeof value === 'number' ? value : scale.parse(value);
-  return isFinite$1(value) ? scale.getPixelForValue(value) : fallback;
+  value = isFinite$1(value) ? scale.getPixelForValue(value) : fallback;
+  return inArea(scale, value) ? value : fallback;
 }
@@ -453,2 +461,3 @@
     yAdjust: 0,
+    textAlign: 'center',
     enabled: false,
@@ -483,3 +492,2 @@ content: null
   ctx.font = toFontString(label.font);
-  ctx.textAlign = 'center';
 
@@ -498,2 +506,4 @@ const {width, height} = measureLabel(ctx, label);
   if (isArray(label.content)) {
+    ctx.textAlign = label.textAlign;
+    const x = calculateLabelXAlignment(label, width);
     let textYPosition = -(height / 2) + label.yPadding;
@@ -504,3 +514,3 @@ for (let i = 0; i < label.content.length; i++) {
         label.content[i],
-        -(width / 2) + (width / 2),
+        x,
         textYPosition
@@ -515,2 +525,3 @@ );
   } else {
+    ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
@@ -521,2 +532,12 @@ ctx.fillText(label.content, 0, 0);
 
+function calculateLabelXAlignment(label, width) {
+  const {textAlign, xPadding} = label;
+  if (textAlign === 'start') {
+    return -(width / 2) + xPadding;
+  } else if (textAlign === 'end') {
+    return +(width / 2) - xPadding;
+  }
+  return 0;
+}
+
 function getImageSize(size, value) {
@@ -651,3 +672,3 @@ if (typeof value === 'number') {
     const {width, height, options} = this;
-    const center = this.getCenterPoint(true);
+    const center = this.getCenterPoint();
 
@@ -789,2 +810,4 @@ ctx.save();
 
+var version = "1.0.0";
+
 const chartStates = new Map();
@@ -808,2 +831,4 @@
 
+  version,
+
   afterRegister() {
@@ -937,2 +962,3 @@ Chart.register(annotationTypes);
     const properties = el.resolveElementProperties(chart, opts);
+    properties.skip = isNaN(properties.x) || isNaN(properties.y);
     properties.options = opts;
@@ -947,3 +973,3 @@ animations.update(el, properties);
   result.id = resolver.id;
-  result.type = elType.id;
+  result.type = resolver.type;
   result.drawTime = resolver.drawTime;
@@ -991,3 +1017,3 @@ Object.assign(result, resolveObj(resolver, elType.defaults), resolveObj(resolver, elType.defaultRoutes));
   const state = chartStates.get(chart);
-  const elements = state.elements.filter(el => el.options.display);
+  const elements = state.elements.filter(el => !el.skip && el.options.display);
 
@@ -994,0 +1020,0 @@ clipArea(ctx, chartArea);

dist/chartjs-plugin-annotation.js

 /*!
-* chartjs-plugin-annotation v1.0.0-rc
+* chartjs-plugin-annotation v1.0.0
 * https://www.chartjs.org/chartjs-plugin-annotation/index
@@ -150,5 +150,13 @@ * (c) 2021 chartjs-plugin-annotation Contributors
 
+function inArea(scale, pixel) {
+  const area = scale.chart.chartArea;
+  return scale.isHorizontal()
+    ? pixel >= area.left && pixel <= area.right
+    : pixel >= area.top && pixel <= area.bottom;
+}
+
 function scaleValue(scale, value, fallback) {
   value = typeof value === 'number' ? value : scale.parse(value);
-  return helpers.isFinite(value) ? scale.getPixelForValue(value) : fallback;
+  value = helpers.isFinite(value) ? scale.getPixelForValue(value) : fallback;
+  return inArea(scale, value) ? value : fallback;
 }
@@ -456,2 +464,3 @@
     yAdjust: 0,
+    textAlign: 'center',
     enabled: false,
@@ -486,3 +495,2 @@ content: null
   ctx.font = helpers.toFontString(label.font);
-  ctx.textAlign = 'center';
 
@@ -501,2 +509,4 @@ const {width, height} = measureLabel(ctx, label);
   if (helpers.isArray(label.content)) {
+    ctx.textAlign = label.textAlign;
+    const x = calculateLabelXAlignment(label, width);
     let textYPosition = -(height / 2) + label.yPadding;
@@ -507,3 +517,3 @@ for (let i = 0; i < label.content.length; i++) {
         label.content[i],
-        -(width / 2) + (width / 2),
+        x,
         textYPosition
@@ -518,2 +528,3 @@ );
   } else {
+    ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
@@ -524,2 +535,12 @@ ctx.fillText(label.content, 0, 0);
 
+function calculateLabelXAlignment(label, width) {
+  const {textAlign, xPadding} = label;
+  if (textAlign === 'start') {
+    return -(width / 2) + xPadding;
+  } else if (textAlign === 'end') {
+    return +(width / 2) - xPadding;
+  }
+  return 0;
+}
+
 function getImageSize(size, value) {
@@ -654,3 +675,3 @@ if (typeof value === 'number') {
     const {width, height, options} = this;
-    const center = this.getCenterPoint(true);
+    const center = this.getCenterPoint();
 
@@ -792,2 +813,4 @@ ctx.save();
 
+var version = "1.0.0";
+
 const chartStates = new Map();
@@ -811,2 +834,4 @@
 
+  version,
+
   afterRegister() {
@@ -940,2 +965,3 @@ chart_js.Chart.register(annotationTypes);
     const properties = el.resolveElementProperties(chart, opts);
+    properties.skip = isNaN(properties.x) || isNaN(properties.y);
     properties.options = opts;
@@ -950,3 +976,3 @@ animations.update(el, properties);
   result.id = resolver.id;
-  result.type = elType.id;
+  result.type = resolver.type;
   result.drawTime = resolver.drawTime;
@@ -994,3 +1020,3 @@ Object.assign(result, resolveObj(resolver, elType.defaults), resolveObj(resolver, elType.defaultRoutes));
   const state = chartStates.get(chart);
-  const elements = state.elements.filter(el => el.options.display);
+  const elements = state.elements.filter(el => !el.skip && el.options.display);
 
@@ -997,0 +1023,0 @@ helpers.clipArea(ctx, chartArea);

dist/chartjs-plugin-annotation.min.js

 /*!
-* chartjs-plugin-annotation v1.0.0-rc
+* chartjs-plugin-annotation v1.0.0
 * https://www.chartjs.org/chartjs-plugin-annotation/index
@@ -7,3 +7,3 @@ * (c) 2021 chartjs-plugin-annotation Contributors
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("chart.js"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["chart.js","chart.js/helpers"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["chartjs-plugin-annotation"]=t(e.Chart,e.Chart.helpers)}(this,(function(e,t){"use strict";const n=["click","dblclick"],o=["enter","leave"],i=n.concat(o);function a(e,t,n,o){if(t.listened)switch(n.type){case"mousemove":case"mouseout":!function(e,t,n){if(!t.moveListened)return;let o;"mousemove"===n.type&&(o=r(t.elements,n));const i=t.hovered;t.hovered=o,function(e,t,n,o){n&&n!==o&&s(e,t,n.options.leave||t.listeners.leave,n);o&&o!==n&&s(e,t,o.options.enter||t.listeners.enter,o)}(e,t,i,o)}(e,t,n);break;case"click":!function(e,t,n,o){const i=t.listeners,a=r(t.elements,n);if(a){const n=a.options,r=n.dblclick||i.dblclick,l=n.click||i.click;a.clickTimeout?(clearTimeout(a.clickTimeout),delete a.clickTimeout,s(e,t,r,a)):r?a.clickTimeout=setTimeout((()=>{delete a.clickTimeout,s(e,t,l,a)}),o.dblClickSpeed):s(e,t,l,a)}}(e,t,n,o)}}function s(e,n,o,i){t.callback(o,[{chart:e,element:i}])}function r(e,n){let o=Number.POSITIVE_INFINITY;return e.filter((e=>e.options.display&&e.inRange(n.x,n.y))).reduce(((e,i)=>{const a=i.getCenterPoint(),s=t.distanceBetweenPoints(n,a);return s<o?(e=[i],o=s):s===o&&e.push(i),e}),[]).sort(((e,t)=>e._index-t._index)).slice(0,1)[0]}const l=Math.PI,d=l/2;function c(e,n,o){return n="number"==typeof n?n:e.parse(n),t.isFinite(n)?e.getPixelForValue(n):o}function h(e,t,n,o,i,a){if(e.beginPath(),a){const s=Math.min(a,i/2,o/2),r=t+s,c=n+s,h=t+o-s,f=n+i-s;e.moveTo(t,c),r<h&&c<f?(e.arc(r,c,s,-l,-d),e.arc(h,c,s,-d,0),e.arc(h,f,s,0,d),e.arc(r,f,s,d,l)):r<h?(e.moveTo(r,n),e.arc(h,c,s,-d,d),e.arc(r,c,s,d,l+d)):c<f?(e.arc(r,c,s,-l,0),e.arc(r,f,s,0,l)):e.arc(r,c,s,-l,l),e.closePath(),e.moveTo(t,n)}else e.rect(t,n,o,i)}class f extends e.Element{inRange(e,t,n){const{x:o,y:i,width:a,height:s}=this.getProps(["x","y","width","height"],n);return e>=o&&e<=o+a&&t>=i&&t<=i+s}getCenterPoint(e){const{x:t,y:n,width:o,height:i}=this.getProps(["x","y","width","height"],e);return{x:t+o/2,y:n+i/2}}draw(e){const{x:t,y:n,width:o,height:i,options:a}=this;e.save(),e.lineWidth=a.borderWidth,e.strokeStyle=a.borderColor,e.fillStyle=a.backgroundColor,e.setLineDash(a.borderDash),e.lineDashOffset=a.borderDashOffset,h(e,t,n,o,i,a.cornerRadius),e.fill(),a.borderWidth&&e.stroke(),e.restore()}resolveElementProperties(e,t){const n=e.scales[t.xScaleID],o=e.scales[t.yScaleID];let i,a,{top:s,left:r,bottom:l,right:d}=e.chartArea;return n||o?(n&&(i=c(n,t.xMin,r),a=c(n,t.xMax,d),r=Math.min(i,a),d=Math.max(i,a)),o&&(i=c(o,t.yMin,l),a=c(o,t.yMax,s),s=Math.min(i,a),l=Math.max(i,a)),{x:r,y:s,x2:d,y2:l,width:d-r,height:l-s}):{options:{}}}}f.id="boxAnnotation",f.defaults={display:!0,borderDash:[],borderDashOffset:0,borderWidth:1,cornerRadius:0,xScaleID:"x",xMin:void 0,xMax:void 0,yScaleID:"y",yMin:void 0,yMax:void 0},f.defaultRoutes={borderColor:"color",backgroundColor:"color"};const u=Math.PI,x=(e,t,n)=>({x:e.x+n*(t.x-e.x),y:e.y+n*(t.y-e.y)});class y extends e.Element{intersects(e,t,n){n=n||.001;const o=this,i={x:o.x,y:o.y},a={x:o.x2,y:o.y2},s=((e,t,n)=>x(t,n,Math.abs((e-t.x)/(n.x-t.x))).y)(e,i,a),r=((e,t,n)=>x(t,n,Math.abs((e-t.y)/(n.y-t.y))).x)(t,i,a);return(!isFinite(s)||Math.abs(t-s)<n)&&(!isFinite(r)||Math.abs(e-r)<n)}labelIsVisible(){const e=this.options.label;return e&&e.enabled&&e.content}isOnLabel(e,t){const{labelRect:n}=this;if(!n)return!1;const{x:o,y:i}=(a={x:e,y:t},s=n,r=-n.rotation,l=Math.cos(r),d=Math.sin(r),c=s.x,h=s.y,{x:c+l*(a.x-c)-d*(a.y-h),y:h+d*(a.x-c)+l*(a.y-h)});var a,s,r,l,d,c,h;const f=n.width/2,u=n.height/2;return o>=n.x-f&&o<=n.x+f&&i>=n.y-u&&i<=n.y+u}inRange(e,t){const n=this.options.borderWidth||1;return this.intersects(e,t,n)||this.isOnLabel(e,t)}getCenterPoint(){return{x:(this.x2+this.x)/2,y:(this.y2+this.y)/2}}draw(e){const{x:t,y:n,x2:o,y2:i,options:a}=this;e.save(),e.lineWidth=a.borderWidth,e.strokeStyle=a.borderColor,e.setLineDash(a.borderDash),e.lineDashOffset=a.borderDashOffset,e.beginPath(),e.moveTo(t,n),e.lineTo(o,i),e.stroke(),e.restore()}drawLabel(e,n){this.labelIsVisible()&&(e.save(),function(e,n,o){const i=n.options.label;e.font=t.toFontString(i.font),e.textAlign="center";const{width:a,height:s}=function(e,n){const o=n.content;if(o instanceof Image)return{width:b(o.width,n.width)+2*n.xPadding,height:b(o.height,n.height)+2*n.yPadding};const i=t.isArray(o)?o:[o],a=i.length;let s=0;for(let t=0;t<a;t++){const n=i[t];p.has(n)||p.set(n,e.measureText(n).width),s=Math.max(s,p.get(n))}return s+=2*n.xPadding,{width:s,height:a*n.font.size+(a+1)*n.yPadding}}(e,i),r=n.labelRect=function(e,n,o,i){const a=e.options.label,{xAdjust:s,yAdjust:r,xPadding:l,yPadding:d,position:c}=a,h={x:e.x,y:e.y},f={x:e.x2,y:e.y2},y="auto"===a.rotation?function(e){const{x:t,y:n,x2:o,y2:i}=e,a=Math.atan2(i-n,o-t);return a>u/2?a-u:a<u/-2?a+u:a}(e):t.toRadians(a.rotation),b=function(e,t,n){const o=Math.cos(n),i=Math.sin(n);return{w:Math.abs(e*o)+Math.abs(t*i),h:Math.abs(e*i)+Math.abs(t*o)}}(n,o,y),p=function(e,t,n,o){let i=.5;const a=function(e,t){const{x:n,x2:o,y:i,y2:a}=e,s=Math.min(i,a)-t.top,r=Math.min(n,o)-t.left,l=t.bottom-Math.max(i,a),d=t.right-Math.max(n,o);return{x:Math.min(r,d),y:Math.min(s,l),dx:r<d?1:-1,dy:s<l?1:-1}}(e,o),s=e.options.label;"start"===t?i=m({w:e.x2-e.x,h:e.y2-e.y},n,s,a):"end"===t&&(i=1-m({w:e.x-e.x2,h:e.y-e.y2},n,s,a));return i}(e,c,b,i),M=x(h,f,p),w={size:b.w,min:i.left,max:i.right,padding:l},v={size:b.h,min:i.top,max:i.bottom,padding:d};return{x:g(M.x,w)+s,y:g(M.y,v)+r,width:n,height:o,rotation:y}}(n,a,s,o);if(e.translate(r.x,r.y),e.rotate(r.rotation),e.fillStyle=i.backgroundColor,h(e,-a/2,-s/2,a,s,i.cornerRadius),e.fill(),e.fillStyle=i.color,t.isArray(i.content)){let t=-s/2+i.yPadding;for(let n=0;n<i.content.length;n++)e.textBaseline="top",e.fillText(i.content[n],-a/2+a/2,t),t+=i.font.size+i.yPadding}else if(i.content instanceof Image){const t=-a/2+i.xPadding,n=-s/2+i.yPadding;e.drawImage(i.content,t,n,a-2*i.xPadding,s-2*i.yPadding)}else e.textBaseline="middle",e.fillText(i.content,0,0)}(e,this,n),e.restore())}resolveElementProperties(e,t){const n=e.scales[t.scaleID];let o,i,{top:a,left:s,bottom:r,right:l}=e.chartArea;if(n)o=c(n,t.value,NaN),i=c(n,t.endValue,o),n.isHorizontal()?(s=o,l=i):(a=o,r=i);else{const n=e.scales[t.xScaleID],o=e.scales[t.yScaleID];n&&(s=c(n,t.xMin,s),l=c(n,t.xMax,l)),o&&(a=c(o,t.yMin,a),r=c(o,t.yMax,r))}return{x:s,y:a,x2:l,y2:r,width:l-s,height:r-a}}}function b(e,t){return"number"==typeof t?t:"string"==typeof t?("string"==typeof(n=t)&&n.endsWith("%")&&parseFloat(n)/100)*e:e;var n}y.id="lineAnnotation",y.defaults={display:!0,borderWidth:2,borderDash:[],borderDashOffset:0,label:{backgroundColor:"rgba(0,0,0,0.8)",drawTime:void 0,font:{family:void 0,lineHeight:void 0,size:void 0,style:"bold",weight:void 0},color:"#fff",xPadding:6,yPadding:6,rotation:0,cornerRadius:6,position:"center",xAdjust:0,yAdjust:0,enabled:!1,content:null},value:void 0,endValue:void 0,scaleID:void 0,xScaleID:"x",xMin:void 0,xMax:void 0,yScaleID:"y",yMin:void 0,yMax:void 0},y.defaultRoutes={borderColor:"color"};const p=new Map;function m(e,t,n,o){const{xPadding:i,yPadding:a}=n,s=e.w*o.dx,r=e.h*o.dy,l=s>0&&(t.w/2+i-o.x)/s,d=r>0&&(t.h/2+a-o.y)/r;return Math.max(Math.min(Math.max(l,d),.25),0)}function g(e,t){const{size:n,min:o,max:i,padding:a}=t,s=n/2;return n>i-o?(i+o)/2:(o>=e-a-s&&(e=o+a+s),i<=e+a+s&&(e=i-a-s),e)}class M extends f{inRange(e,t){return function(e,t){const{width:n,height:o}=t,i=t.getCenterPoint(!0),a=n/2,s=o/2;if(a<=0||s<=0)return!1;return Math.pow(e.x-i.x,2)/Math.pow(a,2)+Math.pow(e.y-i.y,2)/Math.pow(s,2)<=1}({x:e,y:t},this)}draw(e){const{width:t,height:n,options:o}=this,i=this.getCenterPoint(!0);e.save(),e.beginPath(),e.lineWidth=o.borderWidth,e.strokeStyle=o.borderColor,e.fillStyle=o.backgroundColor,e.setLineDash(o.borderDash),e.lineDashOffset=o.borderDashOffset,e.ellipse(i.x,i.y,n/2,t/2,Math.PI/2,0,2*Math.PI),e.fill(),e.stroke(),e.restore()}}M.id="ellipseAnnotation",M.defaults={display:!0,borderDash:[],borderDashOffset:0,borderWidth:1,xScaleID:"x",xMin:void 0,xMax:void 0,yScaleID:"y",yMin:void 0,yMax:void 0},M.defaultRoutes={borderColor:"color",backgroundColor:"color"};class w extends e.Element{inRange(e,t){const{width:n,options:o}=this,i=this.getCenterPoint(!0),a=n/2+o.borderWidth;return!(a<=0)&&Math.pow(e-i.x,2)+Math.pow(t-i.y,2)<=Math.pow(a,2)}getCenterPoint(e){const{x:t,y:n}=this.getProps(["x","y"],e);return{x:t,y:n}}draw(e){const{x:t,y:n,width:o,options:i}=this;e.save(),e.lineWidth=i.borderWidth,e.strokeStyle=i.borderColor,e.fillStyle=i.backgroundColor,e.setLineDash(i.borderDash),e.lineDashOffset=i.borderDashOffset,e.beginPath(),e.arc(t,n,o/2,0,2*Math.PI),e.fill(),e.stroke(),e.restore()}resolveElementProperties(e,t){const{chartArea:n,scales:o}=e,i=o[t.xScaleID],a=o[t.yScaleID];let s=n.width/2,r=n.height/2;return i&&(s=c(i,t.xValue,s)),a&&(r=c(a,t.yValue,r)),{x:s,y:r,width:2*t.radius,height:2*t.radius}}}w.id="pointAnnotation",w.defaults={display:!0,borderDash:[],borderDashOffset:0,borderWidth:1,radius:10,xScaleID:"x",xValue:void 0,yScaleID:"y",yValue:void 0},w.defaultRoutes={borderColor:"color",backgroundColor:"color"};const v=new Map,D={box:f,line:y,ellipse:M,point:w};Object.keys(D).forEach((t=>{e.defaults.describe("elements."+D[t].id,{_fallback:"plugins.annotation"})}));var P={id:"annotation",afterRegister(){e.Chart.register(D)},afterUnregister(){e.Chart.unregister(D)},beforeInit(e){v.set(e,{annotations:[],elements:[],listeners:{},listened:!1,moveListened:!1})},beforeUpdate(e,n,o){const i=v.get(e).annotations=[];let a=o.annotations;t.isObject(a)?Object.keys(a).forEach((e=>{const n=a[e];t.isObject(n)&&(n.id=e,i.push(n))})):t.isArray(a)&&i.push(...a)},afterDataLimits(e,n){const o=v.get(e);!function(e,n,o){const i=function(e,n){const o=e.axis,i=e.id,a=o+"ScaleID";let s=t.valueOrDefault(e.min,Number.NEGATIVE_INFINITY),r=t.valueOrDefault(e.max,Number.POSITIVE_INFINITY);for(const t of n)if(t.scaleID===i)for(const n of["value","endValue"]){const o=t[n];if(o){const t=e.parse(o);s=Math.min(s,t),r=Math.max(r,t)}}else if(t[a]===i)for(const n of[o+"Min",o+"Max",o+"Value"]){const o=t[n];if(o){const t=e.parse(o);s=Math.min(s,t),r=Math.max(r,t)}}return{min:s,max:r}}(n,o);let a=!1;t.isFinite(i.min)&&void 0===n.options.min&&void 0===n.options.suggestedMin&&(a=n.min!==i.min,n.min=i.min);t.isFinite(i.max)&&void 0===n.options.max&&void 0===n.options.suggestedMax&&(a=n.max!==i.max,n.max=i.max);a&&"function"==typeof n.handleTickRangeOptions&&n.handleTickRangeOptions()}(0,n.scale,o.annotations.filter((e=>e.display)))},afterUpdate(t,a,s){const r=v.get(t);!function(e,t,a){const s=t.annotations||[];t.listened=!1,t.moveListened=!1,i.forEach((e=>{"function"==typeof a[e]&&(t.listened=!0,t.listeners[e]=a[e])})),o.forEach((e=>{"function"==typeof a[e]&&(t.moveListened=!0)})),t.listened&&t.moveListened||s.forEach((e=>{t.listened||n.forEach((n=>{"function"==typeof e[n]&&(t.listened=!0)})),t.moveListened||o.forEach((n=>{"function"==typeof e[n]&&(t.listened=!0,t.moveListened=!0)}))}))}(0,r,s),function(t,n,o,i){const a=function(t,n,o){if("reset"===o||"none"===o||"resize"===o)return I;return new e.Animations(t,n)}(t,o.animations,i),s=n.annotations,r=function(e,t){const n=t.length,o=e.length;if(o<n){const t=n-o;e.splice(o,0,...new Array(t))}else o>n&&e.splice(n,o-n);return e}(n.elements,s);for(let e=0;e<s.length;e++){const n=s[e];let o=r[e];const i=D[n.type]||D.line;o&&o instanceof i||(o=r[e]=new i);const l=k(n.setContext(C(t,o,n))),d=o.resolveElementProperties(t,l);d.options=l,a.update(o,d)}}(t,r,s,a.mode)},beforeDatasetsDraw(e){O(e,"beforeDatasetsDraw")},afterDatasetsDraw(e){O(e,"afterDatasetsDraw")},beforeDraw(e){O(e,"beforeDraw")},afterDraw(e){O(e,"afterDraw")},beforeEvent(e,t,n){a(e,v.get(e),t.event,n)},destroy(e){v.delete(e)},_getState:e=>v.get(e),defaults:{drawTime:"afterDatasetsDraw",dblClickSpeed:350,animations:{numbers:{properties:["x","y","x2","y2","width","height"],type:"number"}},label:{drawTime:null}},descriptors:{_indexable:!1,_scriptable:e=>!i.includes(e),annotations:{_allKeys:!1,_fallback:(e,t)=>"elements."+D[t.type||"line"].id}},additionalOptionScopes:[""]};const I={update:Object.assign};function k(e){const t=D[e.type]||D.line,n={};n.id=e.id,n.type=t.id,n.drawTime=e.drawTime,Object.assign(n,T(e,t.defaults),T(e,t.defaultRoutes));for(const t of i)n[t]=e[t];return n}function T(e,n){const o={};for(const i of Object.keys(n)){const a=n[i],s=e[i];o[i]=t.isObject(a)?T(s,a):s}return o}function C(e,t,n){return t.$context||(t.$context=Object.assign(Object.create(e.getContext()),{element:t,id:n.id,type:"annotation"}))}function O(e,n){const{ctx:o,chartArea:i}=e,a=v.get(e).elements.filter((e=>e.options.display));t.clipArea(o,i),a.forEach((e=>{e.options.drawTime===n&&e.draw(o)})),t.unclipArea(o),a.forEach((e=>{"drawLabel"in e&&e.options.label&&(e.options.label.drawTime||e.options.drawTime)===n&&e.drawLabel(o,i)}))}return e.Chart.register(P),P}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("chart.js"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["chart.js","chart.js/helpers"],e):(t="undefined"!=typeof globalThis?globalThis:t||self)["chartjs-plugin-annotation"]=e(t.Chart,t.Chart.helpers)}(this,(function(t,e){"use strict";const n=["click","dblclick"],i=["enter","leave"],o=n.concat(i);function a(t,e,n,i){if(e.listened)switch(n.type){case"mousemove":case"mouseout":!function(t,e,n){if(!e.moveListened)return;let i;"mousemove"===n.type&&(i=r(e.elements,n));const o=e.hovered;e.hovered=i,function(t,e,n,i){n&&n!==i&&s(t,e,n.options.leave||e.listeners.leave,n);i&&i!==n&&s(t,e,i.options.enter||e.listeners.enter,i)}(t,e,o,i)}(t,e,n);break;case"click":!function(t,e,n,i){const o=e.listeners,a=r(e.elements,n);if(a){const n=a.options,r=n.dblclick||o.dblclick,l=n.click||o.click;a.clickTimeout?(clearTimeout(a.clickTimeout),delete a.clickTimeout,s(t,e,r,a)):r?a.clickTimeout=setTimeout((()=>{delete a.clickTimeout,s(t,e,l,a)}),i.dblClickSpeed):s(t,e,l,a)}}(t,e,n,i)}}function s(t,n,i,o){e.callback(i,[{chart:t,element:o}])}function r(t,n){let i=Number.POSITIVE_INFINITY;return t.filter((t=>t.options.display&&t.inRange(n.x,n.y))).reduce(((t,o)=>{const a=o.getCenterPoint(),s=e.distanceBetweenPoints(n,a);return s<i?(t=[o],i=s):s===i&&t.push(o),t}),[]).sort(((t,e)=>t._index-e._index)).slice(0,1)[0]}const l=Math.PI,d=l/2;function c(t,n,i){return n="number"==typeof n?n:t.parse(n),n=e.isFinite(n)?t.getPixelForValue(n):i,function(t,e){const n=t.chart.chartArea;return t.isHorizontal()?e>=n.left&&e<=n.right:e>=n.top&&e<=n.bottom}(t,n)?n:i}function h(t,e,n,i,o,a){if(t.beginPath(),a){const s=Math.min(a,o/2,i/2),r=e+s,c=n+s,h=e+i-s,f=n+o-s;t.moveTo(e,c),r<h&&c<f?(t.arc(r,c,s,-l,-d),t.arc(h,c,s,-d,0),t.arc(h,f,s,0,d),t.arc(r,f,s,d,l)):r<h?(t.moveTo(r,n),t.arc(h,c,s,-d,d),t.arc(r,c,s,d,l+d)):c<f?(t.arc(r,c,s,-l,0),t.arc(r,f,s,0,l)):t.arc(r,c,s,-l,l),t.closePath(),t.moveTo(e,n)}else t.rect(e,n,i,o)}class f extends t.Element{inRange(t,e,n){const{x:i,y:o,width:a,height:s}=this.getProps(["x","y","width","height"],n);return t>=i&&t<=i+a&&e>=o&&e<=o+s}getCenterPoint(t){const{x:e,y:n,width:i,height:o}=this.getProps(["x","y","width","height"],t);return{x:e+i/2,y:n+o/2}}draw(t){const{x:e,y:n,width:i,height:o,options:a}=this;t.save(),t.lineWidth=a.borderWidth,t.strokeStyle=a.borderColor,t.fillStyle=a.backgroundColor,t.setLineDash(a.borderDash),t.lineDashOffset=a.borderDashOffset,h(t,e,n,i,o,a.cornerRadius),t.fill(),a.borderWidth&&t.stroke(),t.restore()}resolveElementProperties(t,e){const n=t.scales[e.xScaleID],i=t.scales[e.yScaleID];let o,a,{top:s,left:r,bottom:l,right:d}=t.chartArea;return n||i?(n&&(o=c(n,e.xMin,r),a=c(n,e.xMax,d),r=Math.min(o,a),d=Math.max(o,a)),i&&(o=c(i,e.yMin,l),a=c(i,e.yMax,s),s=Math.min(o,a),l=Math.max(o,a)),{x:r,y:s,x2:d,y2:l,width:d-r,height:l-s}):{options:{}}}}f.id="boxAnnotation",f.defaults={display:!0,borderDash:[],borderDashOffset:0,borderWidth:1,cornerRadius:0,xScaleID:"x",xMin:void 0,xMax:void 0,yScaleID:"y",yMin:void 0,yMax:void 0},f.defaultRoutes={borderColor:"color",backgroundColor:"color"};const u=Math.PI,x=(t,e,n)=>({x:t.x+n*(e.x-t.x),y:t.y+n*(e.y-t.y)});class y extends t.Element{intersects(t,e,n){n=n||.001;const i=this,o={x:i.x,y:i.y},a={x:i.x2,y:i.y2},s=((t,e,n)=>x(e,n,Math.abs((t-e.x)/(n.x-e.x))).y)(t,o,a),r=((t,e,n)=>x(e,n,Math.abs((t-e.y)/(n.y-e.y))).x)(e,o,a);return(!isFinite(s)||Math.abs(e-s)<n)&&(!isFinite(r)||Math.abs(t-r)<n)}labelIsVisible(){const t=this.options.label;return t&&t.enabled&&t.content}isOnLabel(t,e){const{labelRect:n}=this;if(!n)return!1;const{x:i,y:o}=(a={x:t,y:e},s=n,r=-n.rotation,l=Math.cos(r),d=Math.sin(r),c=s.x,h=s.y,{x:c+l*(a.x-c)-d*(a.y-h),y:h+d*(a.x-c)+l*(a.y-h)});var a,s,r,l,d,c,h;const f=n.width/2,u=n.height/2;return i>=n.x-f&&i<=n.x+f&&o>=n.y-u&&o<=n.y+u}inRange(t,e){const n=this.options.borderWidth||1;return this.intersects(t,e,n)||this.isOnLabel(t,e)}getCenterPoint(){return{x:(this.x2+this.x)/2,y:(this.y2+this.y)/2}}draw(t){const{x:e,y:n,x2:i,y2:o,options:a}=this;t.save(),t.lineWidth=a.borderWidth,t.strokeStyle=a.borderColor,t.setLineDash(a.borderDash),t.lineDashOffset=a.borderDashOffset,t.beginPath(),t.moveTo(e,n),t.lineTo(i,o),t.stroke(),t.restore()}drawLabel(t,n){this.labelIsVisible()&&(t.save(),function(t,n,i){const o=n.options.label;t.font=e.toFontString(o.font);const{width:a,height:s}=function(t,n){const i=n.content;if(i instanceof Image)return{width:b(i.width,n.width)+2*n.xPadding,height:b(i.height,n.height)+2*n.yPadding};const o=e.isArray(i)?i:[i],a=o.length;let s=0;for(let e=0;e<a;e++){const n=o[e];p.has(n)||p.set(n,t.measureText(n).width),s=Math.max(s,p.get(n))}return s+=2*n.xPadding,{width:s,height:a*n.font.size+(a+1)*n.yPadding}}(t,o),r=n.labelRect=function(t,n,i,o){const a=t.options.label,{xAdjust:s,yAdjust:r,xPadding:l,yPadding:d,position:c}=a,h={x:t.x,y:t.y},f={x:t.x2,y:t.y2},y="auto"===a.rotation?function(t){const{x:e,y:n,x2:i,y2:o}=t,a=Math.atan2(o-n,i-e);return a>u/2?a-u:a<u/-2?a+u:a}(t):e.toRadians(a.rotation),b=function(t,e,n){const i=Math.cos(n),o=Math.sin(n);return{w:Math.abs(t*i)+Math.abs(e*o),h:Math.abs(t*o)+Math.abs(e*i)}}(n,i,y),p=function(t,e,n,i){let o=.5;const a=function(t,e){const{x:n,x2:i,y:o,y2:a}=t,s=Math.min(o,a)-e.top,r=Math.min(n,i)-e.left,l=e.bottom-Math.max(o,a),d=e.right-Math.max(n,i);return{x:Math.min(r,d),y:Math.min(s,l),dx:r<d?1:-1,dy:s<l?1:-1}}(t,i),s=t.options.label;"start"===e?o=g({w:t.x2-t.x,h:t.y2-t.y},n,s,a):"end"===e&&(o=1-g({w:t.x-t.x2,h:t.y-t.y2},n,s,a));return o}(t,c,b,o),M=x(h,f,p),w={size:b.w,min:o.left,max:o.right,padding:l},v={size:b.h,min:o.top,max:o.bottom,padding:d};return{x:m(M.x,w)+s,y:m(M.y,v)+r,width:n,height:i,rotation:y}}(n,a,s,i);if(t.translate(r.x,r.y),t.rotate(r.rotation),t.fillStyle=o.backgroundColor,h(t,-a/2,-s/2,a,s,o.cornerRadius),t.fill(),t.fillStyle=o.color,e.isArray(o.content)){t.textAlign=o.textAlign;const e=function(t,e){const{textAlign:n,xPadding:i}=t;if("start"===n)return-e/2+i;if("end"===n)return+e/2-i;return 0}(o,a);let n=-s/2+o.yPadding;for(let i=0;i<o.content.length;i++)t.textBaseline="top",t.fillText(o.content[i],e,n),n+=o.font.size+o.yPadding}else if(o.content instanceof Image){const e=-a/2+o.xPadding,n=-s/2+o.yPadding;t.drawImage(o.content,e,n,a-2*o.xPadding,s-2*o.yPadding)}else t.textAlign="center",t.textBaseline="middle",t.fillText(o.content,0,0)}(t,this,n),t.restore())}resolveElementProperties(t,e){const n=t.scales[e.scaleID];let i,o,{top:a,left:s,bottom:r,right:l}=t.chartArea;if(n)i=c(n,e.value,NaN),o=c(n,e.endValue,i),n.isHorizontal()?(s=i,l=o):(a=i,r=o);else{const n=t.scales[e.xScaleID],i=t.scales[e.yScaleID];n&&(s=c(n,e.xMin,s),l=c(n,e.xMax,l)),i&&(a=c(i,e.yMin,a),r=c(i,e.yMax,r))}return{x:s,y:a,x2:l,y2:r,width:l-s,height:r-a}}}function b(t,e){return"number"==typeof e?e:"string"==typeof e?("string"==typeof(n=e)&&n.endsWith("%")&&parseFloat(n)/100)*t:t;var n}y.id="lineAnnotation",y.defaults={display:!0,borderWidth:2,borderDash:[],borderDashOffset:0,label:{backgroundColor:"rgba(0,0,0,0.8)",drawTime:void 0,font:{family:void 0,lineHeight:void 0,size:void 0,style:"bold",weight:void 0},color:"#fff",xPadding:6,yPadding:6,rotation:0,cornerRadius:6,position:"center",xAdjust:0,yAdjust:0,textAlign:"center",enabled:!1,content:null},value:void 0,endValue:void 0,scaleID:void 0,xScaleID:"x",xMin:void 0,xMax:void 0,yScaleID:"y",yMin:void 0,yMax:void 0},y.defaultRoutes={borderColor:"color"};const p=new Map;function g(t,e,n,i){const{xPadding:o,yPadding:a}=n,s=t.w*i.dx,r=t.h*i.dy,l=s>0&&(e.w/2+o-i.x)/s,d=r>0&&(e.h/2+a-i.y)/r;return Math.max(Math.min(Math.max(l,d),.25),0)}function m(t,e){const{size:n,min:i,max:o,padding:a}=e,s=n/2;return n>o-i?(o+i)/2:(i>=t-a-s&&(t=i+a+s),o<=t+a+s&&(t=o-a-s),t)}class M extends f{inRange(t,e){return function(t,e){const{width:n,height:i}=e,o=e.getCenterPoint(!0),a=n/2,s=i/2;if(a<=0||s<=0)return!1;return Math.pow(t.x-o.x,2)/Math.pow(a,2)+Math.pow(t.y-o.y,2)/Math.pow(s,2)<=1}({x:t,y:e},this)}draw(t){const{width:e,height:n,options:i}=this,o=this.getCenterPoint();t.save(),t.beginPath(),t.lineWidth=i.borderWidth,t.strokeStyle=i.borderColor,t.fillStyle=i.backgroundColor,t.setLineDash(i.borderDash),t.lineDashOffset=i.borderDashOffset,t.ellipse(o.x,o.y,n/2,e/2,Math.PI/2,0,2*Math.PI),t.fill(),t.stroke(),t.restore()}}M.id="ellipseAnnotation",M.defaults={display:!0,borderDash:[],borderDashOffset:0,borderWidth:1,xScaleID:"x",xMin:void 0,xMax:void 0,yScaleID:"y",yMin:void 0,yMax:void 0},M.defaultRoutes={borderColor:"color",backgroundColor:"color"};class w extends t.Element{inRange(t,e){const{width:n,options:i}=this,o=this.getCenterPoint(!0),a=n/2+i.borderWidth;return!(a<=0)&&Math.pow(t-o.x,2)+Math.pow(e-o.y,2)<=Math.pow(a,2)}getCenterPoint(t){const{x:e,y:n}=this.getProps(["x","y"],t);return{x:e,y:n}}draw(t){const{x:e,y:n,width:i,options:o}=this;t.save(),t.lineWidth=o.borderWidth,t.strokeStyle=o.borderColor,t.fillStyle=o.backgroundColor,t.setLineDash(o.borderDash),t.lineDashOffset=o.borderDashOffset,t.beginPath(),t.arc(e,n,i/2,0,2*Math.PI),t.fill(),t.stroke(),t.restore()}resolveElementProperties(t,e){const{chartArea:n,scales:i}=t,o=i[e.xScaleID],a=i[e.yScaleID];let s=n.width/2,r=n.height/2;return o&&(s=c(o,e.xValue,s)),a&&(r=c(a,e.yValue,r)),{x:s,y:r,width:2*e.radius,height:2*e.radius}}}w.id="pointAnnotation",w.defaults={display:!0,borderDash:[],borderDashOffset:0,borderWidth:1,radius:10,xScaleID:"x",xValue:void 0,yScaleID:"y",yValue:void 0},w.defaultRoutes={borderColor:"color",backgroundColor:"color"};const v=new Map,D={box:f,line:y,ellipse:M,point:w};Object.keys(D).forEach((e=>{t.defaults.describe("elements."+D[e].id,{_fallback:"plugins.annotation"})}));var P={id:"annotation",version:"1.0.0",afterRegister(){t.Chart.register(D)},afterUnregister(){t.Chart.unregister(D)},beforeInit(t){v.set(t,{annotations:[],elements:[],listeners:{},listened:!1,moveListened:!1})},beforeUpdate(t,n,i){const o=v.get(t).annotations=[];let a=i.annotations;e.isObject(a)?Object.keys(a).forEach((t=>{const n=a[t];e.isObject(n)&&(n.id=t,o.push(n))})):e.isArray(a)&&o.push(...a)},afterDataLimits(t,n){const i=v.get(t);!function(t,n,i){const o=function(t,n){const i=t.axis,o=t.id,a=i+"ScaleID";let s=e.valueOrDefault(t.min,Number.NEGATIVE_INFINITY),r=e.valueOrDefault(t.max,Number.POSITIVE_INFINITY);for(const e of n)if(e.scaleID===o)for(const n of["value","endValue"]){const i=e[n];if(i){const e=t.parse(i);s=Math.min(s,e),r=Math.max(r,e)}}else if(e[a]===o)for(const n of[i+"Min",i+"Max",i+"Value"]){const i=e[n];if(i){const e=t.parse(i);s=Math.min(s,e),r=Math.max(r,e)}}return{min:s,max:r}}(n,i);let a=!1;e.isFinite(o.min)&&void 0===n.options.min&&void 0===n.options.suggestedMin&&(a=n.min!==o.min,n.min=o.min);e.isFinite(o.max)&&void 0===n.options.max&&void 0===n.options.suggestedMax&&(a=n.max!==o.max,n.max=o.max);a&&"function"==typeof n.handleTickRangeOptions&&n.handleTickRangeOptions()}(0,n.scale,i.annotations.filter((t=>t.display)))},afterUpdate(e,a,s){const r=v.get(e);!function(t,e,a){const s=e.annotations||[];e.listened=!1,e.moveListened=!1,o.forEach((t=>{"function"==typeof a[t]&&(e.listened=!0,e.listeners[t]=a[t])})),i.forEach((t=>{"function"==typeof a[t]&&(e.moveListened=!0)})),e.listened&&e.moveListened||s.forEach((t=>{e.listened||n.forEach((n=>{"function"==typeof t[n]&&(e.listened=!0)})),e.moveListened||i.forEach((n=>{"function"==typeof t[n]&&(e.listened=!0,e.moveListened=!0)}))}))}(0,r,s),function(e,n,i,o){const a=function(e,n,i){if("reset"===i||"none"===i||"resize"===i)return I;return new t.Animations(e,n)}(e,i.animations,o),s=n.annotations,r=function(t,e){const n=e.length,i=t.length;if(i<n){const e=n-i;t.splice(i,0,...new Array(e))}else i>n&&t.splice(n,i-n);return t}(n.elements,s);for(let t=0;t<s.length;t++){const n=s[t];let i=r[t];const o=D[n.type]||D.line;i&&i instanceof o||(i=r[t]=new o);const l=k(n.setContext(C(e,i,n))),d=i.resolveElementProperties(e,l);d.skip=isNaN(d.x)||isNaN(d.y),d.options=l,a.update(i,d)}}(e,r,s,a.mode)},beforeDatasetsDraw(t){O(t,"beforeDatasetsDraw")},afterDatasetsDraw(t){O(t,"afterDatasetsDraw")},beforeDraw(t){O(t,"beforeDraw")},afterDraw(t){O(t,"afterDraw")},beforeEvent(t,e,n){a(t,v.get(t),e.event,n)},destroy(t){v.delete(t)},_getState:t=>v.get(t),defaults:{drawTime:"afterDatasetsDraw",dblClickSpeed:350,animations:{numbers:{properties:["x","y","x2","y2","width","height"],type:"number"}},label:{drawTime:null}},descriptors:{_indexable:!1,_scriptable:t=>!o.includes(t),annotations:{_allKeys:!1,_fallback:(t,e)=>"elements."+D[e.type||"line"].id}},additionalOptionScopes:[""]};const I={update:Object.assign};function k(t){const e=D[t.type]||D.line,n={};n.id=t.id,n.type=t.type,n.drawTime=t.drawTime,Object.assign(n,T(t,e.defaults),T(t,e.defaultRoutes));for(const e of o)n[e]=t[e];return n}function T(t,n){const i={};for(const o of Object.keys(n)){const a=n[o],s=t[o];i[o]=e.isObject(a)?T(s,a):s}return i}function C(t,e,n){return e.$context||(e.$context=Object.assign(Object.create(t.getContext()),{element:e,id:n.id,type:"annotation"}))}function O(t,n){const{ctx:i,chartArea:o}=t,a=v.get(t).elements.filter((t=>!t.skip&&t.options.display));e.clipArea(i,o),a.forEach((t=>{t.options.drawTime===n&&t.draw(i)})),e.unclipArea(i),a.forEach((t=>{"drawLabel"in t&&t.options.label&&(t.options.label.drawTime||t.options.drawTime)===n&&t.drawLabel(i,o)}))}return t.Chart.register(P),P}));
 //# sourceMappingURL=chartjs-plugin-annotation.min.js.map

package.json

@@ -5,3 +5,3 @@ {
   "description": "Annotations for Chart.js",
-  "version": "1.0.0-rc",
+  "version": "1.0.0",
   "author": "Evert Timberg <[e-mail]>",
@@ -23,7 +23,7 @@ "license": "MIT",
     "dev": "karma start --auto-watch --no-single-run --browsers chrome",
-    "docs": "npm run build && vuepress build docs --dest dist/docs",
-    "docs:dev": "npm run build && vuepress dev docs",
+    "docs": "npm run build && vuepress build docs --no-cache",
+    "docs:dev": "npm run build && vuepress dev docs --no-cache",
     "lint": "concurrently \"npm:lint-*\"",
     "lint-js": "eslint \"old_samples/**/*.html\" \"test/**/*.js\" \"src/**/*.js\"",
-    "lint-md": "markdownlint-cli2 \"**/*.md\" \"**/*.mdx\" \"#**/node_modules\"",
+    "lint-md": "eslint \"**/*.md\"",
     "lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/",
@@ -36,15 +36,17 @@ "test": "cross-env NODE_ENV=test concurrently \"npm:test-*\"",
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^11.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.19.0",
-    "@typescript-eslint/parser": "^4.19.0",
-    "chart.js": "^3.0.0-rc.3",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "chart.js": "^3.1.0",
     "chartjs-plugin-autocolors": "0.0.3",
     "chartjs-test-utils": "^0.2.2",
-    "concurrently": "^6.0.0",
+    "concurrently": "^6.0.2",
     "cross-env": "^7.0.3",
-    "eslint": "^7.22.0",
+    "eslint": "^7.24.0",
     "eslint-config-chartjs": "^0.3.0",
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-html": "^6.1.2",
-    "karma": "^6.3.0",
+    "eslint-plugin-markdown": "^2.0.1",
+    "karma": "^6.3.2",
     "karma-chrome-launcher": "^3.1.0",
@@ -56,16 +58,15 @@ "karma-coverage": "^2.0.3",
     "karma-rollup-preprocessor": "^7.0.7",
-    "markdownlint-cli2": "0.0.15",
     "pixelmatch": "^5.2.1",
-    "rollup": "^2.42.3",
+    "rollup": "^2.45.2",
     "rollup-plugin-istanbul": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.2.3",
+    "typescript": "^4.2.4",
     "vuepress": "^1.8.2",
     "vuepress-plugin-redirect": "^1.2.5",
-    "vuepress-theme-chartjs": "^0.1.0"
+    "vuepress-theme-chartjs": "^0.2.0"
   },
   "peerDependencies": {
-    "chart.js": "^3.0.0-rc.3"
+    "chart.js": "^3.0.1"
   },
   "dependencies": {}
 }

README.md

@@ -12,2 +12,6 @@ # chartjs-plugin-annotation.js
 
+---
+> This plugin needs to be registered. It does not function as inline plugin.
+---
+
 For Chart.js 2.4.0 to 2.9.x support, use [version 0.5.7 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v0.5.7)
@@ -14,0 +18,0 @@

types/events.d.ts

@@ -9,2 +9,11 @@ import { Chart } from 'chart.js';
 
+/**
+ * Some scriptable options may be called with during the chart's initial
+ * display, when the element isn't fully initialized.
+ */
+export interface PartialEventContext {
+  chart: Chart,
+  element?: Partial<AnnotationElement>,
+}
+
 export interface AnnotationEvents {
@@ -11,0 +20,0 @@ enter?(context: EventContext): void,

types/index.d.ts

@@ -5,2 +5,3 @@ import { Plugin, ChartType } from 'chart.js';
 declare module 'chart.js' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface PluginOptionsByType<TType extends ChartType> {
@@ -7,0 +8,0 @@ annotation: AnnotationPluginOptions;

types/label.d.ts

 import { Color, FontSpec } from 'chart.js';
-import { DrawTime } from './options';
+import { PartialEventContext } from './events';
+import { DrawTime, Scriptable } from './options';
 
 export interface LabelOptions {
-	backgroundColor?: Color,
-	drawTime?: DrawTime,
+	backgroundColor?: Scriptable<Color, PartialEventContext>,
+	drawTime?: Scriptable<DrawTime, PartialEventContext>,
 	font?: FontSpec
-	color?: Color,
+	color?: Scriptable<Color, PartialEventContext>,
 	/**
@@ -13,3 +14,3 @@ * Padding of label to add left/right
 	 */
-	xPadding?: number,
+	xPadding?: Scriptable<number, PartialEventContext>,
 	/**
@@ -19,3 +20,3 @@ * Padding of label to add top/bottom
 	 */
-	yPadding?: number,
+	yPadding?: Scriptable<number, PartialEventContext>,
 	/**
@@ -25,3 +26,3 @@ * Corner radius of the label rectangle
 	 */
-	cornerRadius?: number,
+	cornerRadius?: Scriptable<number, PartialEventContext>,
 
@@ -32,5 +33,11 @@ /**
 	 */
-	position?: LabelPosition,
+	position?: Scriptable<LabelPosition, PartialEventContext>,
 
 	/**
+	 * Text alignment when the content of the label is multi-line.
+	 * @default 'center'
+	 */
+	textAlign?: Scriptable<LabelTextAlign, PartialEventContext>,
+
+	/**
 	 * Adjustment along x-axis (left-right) of label relative to above number (can be negative)
@@ -41,3 +48,3 @@ * For horizontal lines positioned left or right, negative values move
 	 */
-	xAdjust?: number,
+	xAdjust?: Scriptable<number, PartialEventContext>,
 
@@ -50,3 +57,3 @@ /**
 	 */
-	yAdjust?: number,
+	yAdjust?: Scriptable<number, PartialEventContext>,
 
@@ -57,3 +64,3 @@ /**
 	 */
-	enabled?: boolean,
+	enabled?: Scriptable<boolean, PartialEventContext>,
 
@@ -63,3 +70,3 @@ /**
 	 */
-	content: string | string[] | HTMLImageElement | null,
+	content: Scriptable<string | string[] | HTMLImageElement | null, PartialEventContext>,
 
@@ -70,3 +77,3 @@ /**
 	 */
-	width: number | string,
+	width: Scriptable<number | string, PartialEventContext>,
 
@@ -77,3 +84,3 @@ /**
 	 */
-	height: number | string,
+	height: Scriptable<number | string, PartialEventContext>,
 
@@ -84,5 +91,7 @@ /**
 	 */
-	rotation?: number | 'auto'
+	rotation?: Scriptable<number | 'auto', PartialEventContext>
 }
 
 export type LabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'center';
+
+export type LabelTextAlign = 'start' | 'center' | 'end';

types/options.d.ts

 import { Color } from 'chart.js';
-import { AnnotationEvents, EventContext } from './events';
+import { AnnotationEvents, PartialEventContext } from './events';
 import { LabelOptions } from './label';
@@ -21,20 +21,23 @@
 export interface CoreAnnotationOptions extends AnnotationEvents {
-  display?: boolean | ((context: EventContext) => boolean);
-	borderColor?: Color,
-	borderWidth?: number,
-	borderDash?: [number, number],
-	borderDashOffset?: number,
-	drawTime?: DrawTime,
-	endValue?: any,
-	scaleID?: string,
-	value?: any,
-	xScaleID?: string,
-	yScaleID?: string,
+	id?: string,
+	display?: Scriptable<boolean, PartialEventContext>,
+	borderColor?: Scriptable<Color, PartialEventContext>,
+	borderWidth?: Scriptable<number, PartialEventContext>,
+	borderDash?: Scriptable<[number, number], PartialEventContext>,
+	borderDashOffset?: Scriptable<number, PartialEventContext>,
+	drawTime?: Scriptable<DrawTime, PartialEventContext>,
+	endValue?: Scriptable<number|string, PartialEventContext>,
+	scaleID?: Scriptable<string, PartialEventContext>,
+	value?: Scriptable<number|string, PartialEventContext>,
+	xScaleID?: Scriptable<string, PartialEventContext>,
+	yScaleID?: Scriptable<string, PartialEventContext>,
 }
 
+export type Scriptable<T, TContext> = T | ((ctx: TContext, options: AnnotationOptions) => T);
+export type ScaleValue = number | string;
 interface AnnotationCoordinates {
-  xMax?: any,
-  xMin?: any,
-  yMax?: any,
-  yMin?: any,
+  xMax?: Scriptable<ScaleValue, PartialEventContext>,
+  xMin?: Scriptable<ScaleValue, PartialEventContext>,
+  yMax?: Scriptable<ScaleValue, PartialEventContext>,
+  yMin?: Scriptable<ScaleValue, PartialEventContext>,
 }
@@ -47,21 +50,21 @@
 export interface BoxAnnotationOptions extends CoreAnnotationOptions, AnnotationCoordinates {
-	backgroundColor?: Color,
-	cornerRadius?: number
+	backgroundColor?: Scriptable<Color, PartialEventContext>,
+	cornerRadius?: Scriptable<number, PartialEventContext>
 }
 
 interface EllipseAnnotationOptions extends CoreAnnotationOptions, AnnotationCoordinates {
-	backgroundColor?: Color,
+	backgroundColor?: Scriptable<Color, PartialEventContext>,
 }
 
 interface PointAnnotationOptions extends CoreAnnotationOptions {
-	backgroundColor: Color,
-	radius?: number,
-	xValue?: any;
-	yValue?: any;
+	backgroundColor: Scriptable<Color, PartialEventContext>,
+	radius?: Scriptable<number, PartialEventContext>,
+	xValue?: Scriptable<ScaleValue, PartialEventContext>;
+	yValue?: Scriptable<ScaleValue, PartialEventContext>;
 }
 
 export interface AnnotationPluginOptions extends AnnotationEvents {
-	annotations: AnnotationOptions[]
-	dblClickSpeed?: number,
-	drawTime?: DrawTime,
+	annotations: AnnotationOptions[] | Record<string, AnnotationOptions>,
+	dblClickSpeed?: Scriptable<number, PartialEventContext>,
+	drawTime?: Scriptable<DrawTime, PartialEventContext>,
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83737

increased by4.82%

Lines of code

2068

increased by3.19%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

44

increased by10%

Worsened metrics

Dev dependency count

29

increased by3.57%

No dependency changes