apexcharts/dist/features/annotations.common.js

A JavaScript Chart Library

/*!
 * ApexCharts v5.10.5
 * (c) 2018-2026 ApexCharts
 */
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("apexcharts/core");function e(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t)for(const a in t)if("default"!==a){const o=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(e,a,o.get?o:{enumerable:!0,get:()=>t[a]})}return e.default=t,Object.freeze(e)}const a=e(t),o=a.__apex_Graphics,i=a.__apex_Utils,n=a.__apex_CoreUtils;class s{constructor(t){this.w=t.w,this.annoCtx=t}setOrientations(t,e=null){var a,o;const i=this.w;if("vertical"===t.label.orientation){const n=null!==e?e:0,s=i.dom.baseEl.querySelector(`.apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='${n}']`);if(null!==s){const e=s.getBBox();s.setAttribute("x",String(parseFloat(null!=(a=s.getAttribute("x"))?a:"0")-e.height+4));const i="top"===t.label.position?e.width:-e.width;s.setAttribute("y",String(parseFloat(null!=(o=s.getAttribute("y"))?o:"0")+i));const{x:n,y:l}=this.annoCtx.graphics.rotateAroundCenter(s);s.setAttribute("transform",`rotate(-90 ${n} ${l})`)}}}addBackgroundToAnno(t,e){const a=this.w;if(!t||!e.label.text||!String(e.label.text).trim())return null;const o=a.dom.baseEl.querySelector(".apexcharts-grid");if(!o)return null;const i=o.getBoundingClientRect(),n=o.getBBox(),s=i.width/n.width||1,l=t.getBoundingClientRect();let{left:r,right:d,top:h,bottom:c}=e.label.style.padding;"vertical"===e.label.orientation&&([h,c,r,d]=[r,d,h,c]);const x=(l.left-i.left)/s-r,g=(l.top-i.top)/s-h,p=this.annoCtx.graphics.drawRect(x-a.globals.barPadForNumericAxis,g,l.width/s+r+d,l.height/s+h+c,e.label.borderRadius,e.label.style.background,1,e.label.borderWidth,e.label.borderColor,0);return e.id&&p.node.classList.add(e.id),p}annotationsBackground(){const t=this.w,e=(e,a,o)=>{const i=t.dom.baseEl.querySelector(`.apexcharts-${o}-annotations .apexcharts-${o}-annotation-label[rel='${a}']`);if(i){const t=i.parentNode,a=this.addBackgroundToAnno(i,e);a&&(null==t||t.insertBefore(a.node,i),e.label.mouseEnter&&a.node.addEventListener("mouseenter",e.label.mouseEnter.bind(this,e)),e.label.mouseLeave&&a.node.addEventListener("mouseleave",e.label.mouseLeave.bind(this,e)),e.label.click&&a.node.addEventListener("click",e.label.click.bind(this,e)))}};t.config.annotations.xaxis.forEach((t,a)=>e(t,a,"xaxis")),t.config.annotations.yaxis.forEach((t,a)=>e(t,a,"yaxis")),t.config.annotations.points.forEach((t,a)=>e(t,a,"point"))}getY1Y2(t,e){var a,o;const i=this.w,s="y1"===t?e.y:e.y2;let l,r=!1;if(this.annoCtx.invertAxis){const t=i.config.xaxis.convertedCatToNumeric?i.labelData.categoryLabels:i.labelData.labels,o=t.indexOf(s),n=i.dom.baseEl.querySelector(`.apexcharts-yaxis-texts-g text:nth-child(${o+1})`);l=n?parseFloat(null!=(a=n.getAttribute("y"))?a:"0"):(i.layout.gridHeight/t.length-1)*(o+1)-i.globals.barHeight,void 0!==e.seriesIndex&&i.globals.barHeight&&(l-=i.globals.barHeight/2*(i.seriesData.series.length-1)-i.globals.barHeight*e.seriesIndex)}else{const t=i.globals.seriesYAxisMap[e.yAxisIndex][0],a=i.config.yaxis[e.yAxisIndex].logarithmic?new n(this.w).getLogVal(i.config.yaxis[e.yAxisIndex].logBase,s,t)/i.globals.yLogRatio[t]:(s-i.globals.minYArr[t])/(i.globals.yRange[t]/i.layout.gridHeight);l=i.layout.gridHeight-Math.min(Math.max(a,0),i.layout.gridHeight),r=a>i.layout.gridHeight||a<0,!e.marker||void 0!==e.y&&null!==e.y||(l=0),(null==(o=i.config.yaxis[e.yAxisIndex])?void 0:o.reversed)&&(l=a)}return"string"==typeof s&&s.includes("px")&&(l=parseFloat(s)),{yP:l,clipped:r}}getX1X2(t,e){const a=this.w,o="x1"===t?e.x:e.x2,i=this.annoCtx.invertAxis?a.globals.minY:a.globals.minX,n=this.annoCtx.invertAxis?a.globals.maxY:a.globals.maxX,s=this.annoCtx.invertAxis?a.globals.yRange[0]:a.globals.xRange;let l=!1,r=this.annoCtx.inversedReversedAxis?(n-o)/(s/a.layout.gridWidth):(o-i)/(s/a.layout.gridWidth);return"category"!==a.config.xaxis.type&&!a.config.xaxis.convertedCatToNumeric||this.annoCtx.invertAxis||a.axisFlags.dataFormatXNumeric||a.config.chart.sparkline.enabled||(r=this.getStringX(o)),"string"==typeof o&&o.includes("px")&&(r=parseFloat(o)),null==o&&e.marker&&(r=a.layout.gridWidth),void 0!==e.seriesIndex&&a.globals.barWidth&&!this.annoCtx.invertAxis&&(r-=a.globals.barWidth/2*(a.seriesData.series.length-1)-a.globals.barWidth*e.seriesIndex),"number"!=typeof r&&(r=0,l=!0),parseFloat(r.toFixed(10))>parseFloat(a.layout.gridWidth.toFixed(10))?(r=a.layout.gridWidth,l=!0):r<0&&(r=0,l=!0),{x:r,clipped:l}}getStringX(t){var e;const a=this.w;let o=t;if(a.config.xaxis.convertedCatToNumeric&&a.labelData.categoryLabels.length){const e=String(t);t=a.labelData.categoryLabels.findIndex(t=>String(t)===e)+1}const i=a.labelData.labels.map(t=>Array.isArray(t)?t.join(" "):t).indexOf(t),n=a.dom.baseEl.querySelector(`.apexcharts-xaxis-texts-g text:nth-child(${i+1})`);return n&&(o=parseFloat(null!=(e=n.getAttribute("x"))?e:"0")),o}}class l{constructor(t){this.w=t.w,this.annoCtx=t,this.invertAxis=this.annoCtx.invertAxis,this.helpers=new s(this.annoCtx)}addXaxisAnnotation(t,e,a){const o=this.w,n=this.helpers.getX1X2("x1",t);let s=n.x;const l=n.clipped;let r,d=!0;const h=t.label.text,c=t.strokeDashArray;if(i.isNumber(s)){if(null===t.x2||void 0===t.x2){if(!l){const a=this.annoCtx.graphics.drawLine(s+t.offsetX,0+t.offsetY,s+t.offsetX,o.layout.gridHeight+t.offsetY,t.borderColor,c,t.borderWidth);e.appendChild(a.node),t.id&&a.node.classList.add(t.id)}}else{const a=this.helpers.getX1X2("x2",t);if(r=a.x,d=a.clipped,r<s){const t=s;s=r,r=t}const i=this.annoCtx.graphics.drawRect(s+t.offsetX,0+t.offsetY,r-s,o.layout.gridHeight+t.offsetY,0,t.fillColor,t.opacity,1,t.borderColor,c);i.node.classList.add("apexcharts-annotation-rect"),i.attr("clip-path",`url(#gridRectMask${o.globals.cuid})`),e.appendChild(i.node),t.id&&i.node.classList.add(t.id)}if(!l||!d){const i=this.annoCtx.graphics.getTextRects(h,t.label.style.fontSize),n="top"===t.label.position?4:"center"===t.label.position?o.layout.gridHeight/2+("vertical"===t.label.orientation?i.width/2:0):o.layout.gridHeight,l=this.annoCtx.graphics.drawText({x:s+t.label.offsetX,y:n+t.label.offsetY-("vertical"===t.label.orientation?"top"===t.label.position?i.width/2-12:-i.width/2:0),text:h,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:`apexcharts-xaxis-annotation-label ${t.label.style.cssClass} ${t.id?t.id:""}`});l.attr({rel:a}),e.appendChild(l.node),this.annoCtx.helpers.setOrientations(t,a)}}}drawXAxisAnnotations(){const t=this.w,e=this.annoCtx.graphics.group({class:"apexcharts-xaxis-annotations"});return t.config.annotations.xaxis.map((t,a)=>{this.addXaxisAnnotation(t,e.node,a)}),e}}const r=a.__apex_axes_AxesUtils;class d{constructor(t){this.w=t.w,this.annoCtx=t,this.helpers=new s(this.annoCtx),this.axesUtils=new r(this.annoCtx.w,{theme:this.annoCtx.theme,timeScale:this.annoCtx.timeScale})}addYaxisAnnotation(t,e,a){const o=this.w,i=t.strokeDashArray;let n=this.helpers.getY1Y2("y1",t),s=n.yP;const l=n.clipped;let r,d=!0,h=!1;const c=t.label.text;if(null===t.y2||void 0===t.y2){if(!l){h=!0;const a=this.annoCtx.graphics.drawLine(0+t.offsetX,s+t.offsetY,this._getYAxisAnnotationWidth(t),s+t.offsetY,t.borderColor,i,t.borderWidth);e.appendChild(a.node),t.id&&a.node.classList.add(t.id)}}else{if(n=this.helpers.getY1Y2("y2",t),r=n.yP,d=n.clipped,r>s){const t=s;s=r,r=t}if(!l||!d){h=!0;const a=this.annoCtx.graphics.drawRect(0+t.offsetX,r+t.offsetY,this._getYAxisAnnotationWidth(t),s-r,0,t.fillColor,t.opacity,1,t.borderColor,i);a.node.classList.add("apexcharts-annotation-rect"),a.attr("clip-path",`url(#gridRectMask${o.globals.cuid})`),e.appendChild(a.node),t.id&&a.node.classList.add(t.id)}}if(h){const i="right"===t.label.position?o.layout.gridWidth:"center"===t.label.position?o.layout.gridWidth/2:0,n=this.annoCtx.graphics.drawText({x:i+t.label.offsetX,y:(null!=r?r:s)+t.label.offsetY-3,text:c,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:`apexcharts-yaxis-annotation-label ${t.label.style.cssClass} ${t.id?t.id:""}`});n.attr({rel:a}),e.appendChild(n.node)}}_getYAxisAnnotationWidth(t){const e=this.w;let a=e.layout.gridWidth;return a=t.width.indexOf("%")>-1?e.layout.gridWidth*parseInt(t.width,10)/100:parseInt(t.width,10),a+t.offsetX}drawYAxisAnnotations(){const t=this.w,e=this.annoCtx.graphics.group({class:"apexcharts-yaxis-annotations"});return t.config.annotations.yaxis.forEach((t,a)=>{t.yAxisIndex=this.axesUtils.translateYAxisIndex(t.yAxisIndex),this.axesUtils.isYAxisHidden(t.yAxisIndex)&&this.axesUtils.yAxisAllSeriesCollapsed(t.yAxisIndex)||this.addYaxisAnnotation(t,e.node,a)}),e}}class h{constructor(t){this.w=t.w,this.annoCtx=t,this.helpers=new s(this.annoCtx)}addPointAnnotation(t,e,a){if(this.w.globals.collapsedSeriesIndices.indexOf(t.seriesIndex)>-1)return;const o=this.helpers.getX1X2("x1",t),n=o.x,s=o.clipped,l=this.helpers.getY1Y2("y1",t),r=l.yP,d=l.clipped;if(i.isNumber(n)&&!d&&!s){const o={pSize:t.marker.size,pointStrokeWidth:t.marker.strokeWidth,pointFillColor:t.marker.fillColor,pointStrokeColor:t.marker.strokeColor,shape:t.marker.shape,pRadius:t.marker.radius,class:`apexcharts-point-annotation-marker ${t.marker.cssClass} ${t.id?t.id:""}`};let i=this.annoCtx.graphics.drawMarker(n+t.marker.offsetX,r+t.marker.offsetY,o);e.appendChild(i.node);const s=t.label.text?t.label.text:"",l=this.annoCtx.graphics.drawText({x:n+t.label.offsetX,y:r+t.label.offsetY-t.marker.size-parseFloat(t.label.style.fontSize)/1.6,text:s,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:`apexcharts-point-annotation-label ${t.label.style.cssClass} ${t.id?t.id:""}`});if(l.attr({rel:a}),e.appendChild(l.node),t.customSVG.SVG){const a=this.annoCtx.graphics.group({class:"apexcharts-point-annotations-custom-svg "+t.customSVG.cssClass});a.attr({transform:`translate(${n+t.customSVG.offsetX}, ${r+t.customSVG.offsetY})`}),a.node.innerHTML=t.customSVG.SVG,e.appendChild(a.node)}if(t.image.path){const e=t.image.width?t.image.width:20,a=t.image.height?t.image.height:20;i=this.annoCtx.addImage({x:n+t.image.offsetX-e/2,y:r+t.image.offsetY-a/2,width:e,height:a,path:t.image.path,appendTo:".apexcharts-point-annotations"})}t.mouseEnter&&i.node.addEventListener("mouseenter",t.mouseEnter.bind(this,t)),t.mouseLeave&&i.node.addEventListener("mouseleave",t.mouseLeave.bind(this,t)),t.click&&i.node.addEventListener("click",t.click.bind(this,t))}}drawPointAnnotations(){const t=this.w,e=this.annoCtx.graphics.group({class:"apexcharts-point-annotations"});return t.config.annotations.points.map((t,a)=>{this.addPointAnnotation(t,e.node,a)}),e}}const c=a.__apex_Options;t.registerFeatures({annotations:class{constructor(t,{theme:e=null,timeScale:a=null}={}){this.w=t,this.theme=e,this.timeScale=a,this.invertAxis=void 0,this.inversedReversedAxis=void 0,this.graphics=new o(this.w),this.w.globals.isBarHorizontal&&(this.invertAxis=!0),this.helpers=new s(this),this.xAxisAnnotations=new l(this),this.yAxisAnnotations=new d(this),this.pointsAnnotations=new h(this),this.w.globals.isBarHorizontal&&this.w.config.yaxis[0].reversed&&(this.inversedReversedAxis=!0),this.xDivision=this.w.layout.gridWidth/this.w.globals.dataPoints}drawAxesAnnotations(){const t=this.w;if(t.globals.axisCharts&&t.globals.dataPoints){const e=this.yAxisAnnotations.drawYAxisAnnotations(),a=this.xAxisAnnotations.drawXAxisAnnotations(),o=this.pointsAnnotations.drawPointAnnotations(),i=t.config.chart.animations.enabled,n=[e,a,o],s=[a.node,e.node,o.node];for(let e=0;e<3;e++)t.dom.elGraphical.add(n[e]),!i||t.globals.resized||t.globals.dataChanged||"scatter"!==t.config.chart.type&&"bubble"!==t.config.chart.type&&t.globals.dataPoints>1&&s[e].classList.add("apexcharts-element-hidden"),t.globals.delayedElements.push({el:s[e],index:0});this.helpers.annotationsBackground()}}drawImageAnnos(){this.w.config.annotations.images.map(t=>{this.addImage(t)})}drawTextAnnos(){this.w.config.annotations.texts.map(t=>{this.addText(t)})}addXaxisAnnotation(t,e,a){this.xAxisAnnotations.addXaxisAnnotation(t,e,a)}addYaxisAnnotation(t,e,a){this.yAxisAnnotations.addYaxisAnnotation(t,e,a)}addPointAnnotation(t,e,a){this.pointsAnnotations.addPointAnnotation(t,e,a)}addText(t){const{x:e,y:a,text:o,textAnchor:i,foreColor:n,fontSize:s,fontFamily:l,fontWeight:r,cssClass:d,backgroundColor:h,borderWidth:c,strokeDashArray:x,borderRadius:g,borderColor:p,appendTo:b=".apexcharts-svg",paddingLeft:f=4,paddingRight:y=4,paddingBottom:u=2,paddingTop:m=2}=t,A=this.w,C=this.graphics.drawText({x:e,y:a,text:o,textAnchor:i||"start",fontSize:s||"12px",fontWeight:r||"regular",fontFamily:l||A.config.chart.fontFamily,foreColor:n||A.config.chart.foreColor,cssClass:d}),w=A.dom.baseEl.querySelector(b);w&&w.appendChild(C.node);const v=C.bbox();if(o){const t=this.graphics.drawRect(v.x-f,v.y-m,v.width+f+y,v.height+u+m,g,h||"transparent",1,c,p,x);w.insertBefore(t.node,C.node)}}addImage(t){const e=this.w,{path:a,x:o=0,y:i=0,width:n=20,height:s=20,appendTo:l=".apexcharts-svg"}=t,r=e.dom.Paper.image(a);r.size(n,s).move(o,i);const d=e.dom.baseEl.querySelector(l);return d&&d.appendChild(r.node),r}addXaxisAnnotationExternal(t,e,a){return this.addAnnotationExternal({params:t,pushToMemory:e,context:a,type:"xaxis",contextMethod:a.addXaxisAnnotation}),a}addYaxisAnnotationExternal(t,e,a){return this.addAnnotationExternal({params:t,pushToMemory:e,context:a,type:"yaxis",contextMethod:a.addYaxisAnnotation}),a}addPointAnnotationExternal(t,e,a){return void 0===this.invertAxis&&(this.invertAxis=a.w.globals.isBarHorizontal),this.addAnnotationExternal({params:t,pushToMemory:e,context:a,type:"point",contextMethod:a.addPointAnnotation}),a}addAnnotationExternal({params:t,pushToMemory:e,context:a,type:o,contextMethod:n}){const s=a,l=s.w,r=l.dom.baseEl.querySelector(`.apexcharts-${o}-annotations`),d=r.childNodes.length+1,h=new c,x=Object.assign({},"xaxis"===o?h.xAxisAnnotation:"yaxis"===o?h.yAxisAnnotation:h.pointAnnotation),g=i.extend(x,t);switch(o){case"xaxis":this.addXaxisAnnotation(g,r,d);break;case"yaxis":this.addYaxisAnnotation(g,r,d);break;case"point":this.addPointAnnotation(g,r,d)}const p=l.dom.baseEl.querySelector(`.apexcharts-${o}-annotations .apexcharts-${o}-annotation-label[rel='${d}']`),b=this.helpers.addBackgroundToAnno(p,g);return b&&r.insertBefore(b.node,p),e&&l.globals.memory.methodsToExec.push({context:s,id:g.id?g.id:i.randomId(),method:n,label:"addAnnotation",params:t}),a}clearAnnotations(t){const e=t.w,a=e.dom.baseEl.querySelectorAll(".apexcharts-yaxis-annotations, .apexcharts-xaxis-annotations, .apexcharts-point-annotations");for(let t=e.globals.memory.methodsToExec.length-1;t>=0;t--)"addText"!==e.globals.memory.methodsToExec[t].label&&"addAnnotation"!==e.globals.memory.methodsToExec[t].label||e.globals.memory.methodsToExec.splice(t,1);Array.prototype.forEach.call(a,t=>{for(;t.firstChild;)t.removeChild(t.firstChild)})}removeAnnotation(t,e){const a=t.w,o=a.dom.baseEl.querySelectorAll(`.${e}`);o&&(a.globals.memory.methodsToExec.map((t,o)=>{t.id===e&&a.globals.memory.methodsToExec.splice(o,1)}),Object.keys(a.config.annotations).forEach(t=>{const o=a.config.annotations[t];Array.isArray(o)&&(a.config.annotations[t]=o.filter(t=>t.id!==e))}),Array.prototype.forEach.call(o,t=>{t.parentElement.removeChild(t)}))}}}),exports.default=t;