apexcharts/dist/donut.common.js

A JavaScript Chart Library

/*!
 * ApexCharts v5.15.0
 * (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 i=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(e,a,i.get?i:{enumerable:!0,get:()=>t[a]})}return e.default=t,Object.freeze(e)}const a=e(t),i=a.__apex_Animations,s=a.__apex_Fill,n=a.__apex_Utils,l=a.__apex_Graphics,r=a.__apex_Filters,o=a.__apex_Scales;class h{constructor(t){this.w=t}drawYAxisTexts(t,e,a,i){const s=this.w,n=s.config.yaxis[0],r=s.formatters.yLabelFormatters[0];return new l(this.w).drawText({x:t+n.labels.offsetX,y:e+n.labels.offsetY,text:r(i,a),textAnchor:"middle",fontSize:n.labels.style.fontSize,fontFamily:n.labels.style.fontFamily,foreColor:Array.isArray(n.labels.style.colors)?n.labels.style.colors[a]:n.labels.style.colors})}}class d{constructor(t,e){this.ctx=e,this.w=t,this.chartType=this.w.config.chart.type,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled,this.animBeginArr=[0],this.animDur=0,this.donutDataLabels=this.w.config.plotOptions.pie.donut.labels,this.lineColorArr=void 0!==t.globals.stroke.colors?t.globals.stroke.colors:t.globals.colors,this.defaultSize=Math.min(t.layout.gridWidth,t.layout.gridHeight),this.centerY=this.defaultSize/2,this.centerX=t.layout.gridWidth/2,"radialBar"===t.config.chart.type?this.fullAngle=360:this.fullAngle=Math.abs(t.config.plotOptions.pie.endAngle-t.config.plotOptions.pie.startAngle),this.initialAngle=t.config.plotOptions.pie.startAngle%this.fullAngle,t.globals.radialSize=this.defaultSize/2.05-t.config.stroke.width-(t.config.chart.sparkline.enabled?0:t.config.chart.dropShadow.blur),this.donutSize=t.globals.radialSize*parseInt(t.config.plotOptions.pie.donut.size,10)/100;const a=t.config.plotOptions.pie.customScale,i=t.layout.gridWidth/2,s=t.layout.gridHeight/2;this.translateX=i-i*a,this.translateY=s-s*a,this.dataLabelsGroup=new l(this.w).group({class:"apexcharts-datalabels-group",transform:`translate(${this.translateX}, ${this.translateY}) scale(${a})`}),this.maxY=0,this.sliceLabels=[],this.sliceSizes=[],this.prevSectorAngleArr=[]}draw(t){var e;const a=this.w,i=new l(this.w),s=i.group({class:"apexcharts-pie"});if(a.globals.noData)return s;let r=0;for(let e=0;e<t.length;e++)r+=n.negToZero(t[e]);const o=[],h=i.group();0===r&&(r=1e-5),t.forEach(t=>{this.maxY=Math.max(this.maxY,t)}),a.config.yaxis[0].max&&(this.maxY=a.config.yaxis[0].max),"back"===a.config.grid.position&&"polarArea"===this.chartType&&this.drawPolarElements(s);for(let e=0;e<t.length;e++){const i=this.fullAngle*n.negToZero(t[e])/r;o.push(i),"polarArea"===this.chartType?(o[e]=this.fullAngle/t.length,this.sliceSizes.push(a.globals.radialSize*t[e]/this.maxY)):this.sliceSizes.push(a.globals.radialSize)}const d=!0===(null==(e=this.ctx.morphTypeChange)?void 0:e.isActive());if(a.globals.dataChanged&&!d){let t,e=0;for(let t=0;t<a.globals.previousPaths.length;t++)e+=n.negToZero(a.globals.previousPaths[t]);for(let i=0;i<a.globals.previousPaths.length;i++)t=this.fullAngle*n.negToZero(a.globals.previousPaths[i])/e,this.prevSectorAngleArr.push(t)}if(this.donutSize<0&&(this.donutSize=0),"donut"===this.chartType){const t=i.drawCircle(this.donutSize);t.attr({cx:this.centerX,cy:this.centerY,fill:a.config.plotOptions.pie.donut.background?a.config.plotOptions.pie.donut.background:"transparent"}),h.add(t)}const c=this.drawArcs(o,t);if(this.sliceLabels.forEach(t=>{c.add(t)}),h.attr({transform:`translate(${this.translateX}, ${this.translateY}) scale(${a.config.plotOptions.pie.customScale})`}),h.add(c),s.add(h),this.donutDataLabels.show){const t=this.initialAnim&&!a.globals.resized&&!a.globals.dataChanged&&this.animDur>0,e=this.renderInnerDataLabels(this.dataLabelsGroup,this.donutDataLabels,{hollowSize:this.donutSize,centerX:this.centerX,centerY:this.centerY,opacity:t?0:this.donutDataLabels.show});if(t){const t=this.dataLabelsGroup.node;t.style.transition="opacity 280ms ease-out",setTimeout(()=>{t.style.opacity="1"},this.animDur)}s.add(e)}return"front"===a.config.grid.position&&"polarArea"===this.chartType&&this.drawPolarElements(s),s}drawArcs(t,e){var a,i;const o=this.w,h=new r(this.w),d=new l(this.w),c=new s(this.w),g=d.group({class:"apexcharts-slices"});let p=this.initialAngle,u=this.initialAngle,f=this.initialAngle,A=this.initialAngle;this.strokeWidth=o.config.stroke.show?o.config.stroke.width:0;const m=!0===(null==(a=this.ctx.morphTypeChange)?void 0:a.isActive());for(let a=0;a<t.length;a++){const s=d.group({class:"apexcharts-series apexcharts-pie-series",seriesName:n.escapeString(o.seriesData.seriesNames[a]),rel:a+1,"data:realIndex":a});g.add(s),p=f,u=A,f=p+t[a],A=u+this.prevSectorAngleArr[a];const r=f<p?this.fullAngle+f-p:f-p,b=c.fillPath({seriesNumber:a,size:this.sliceSizes[a],value:e[a]}),y=m?this.ctx.morphTypeChange.getInitialPathFor(a,0):null,w=y||this.getChangedPath(u,A),x=d.drawPath({d:w,stroke:Array.isArray(this.lineColorArr)?null!=(i=this.lineColorArr[a])?i:this.lineColorArr[a%this.lineColorArr.length]:this.lineColorArr,strokeWidth:0,fill:b,fillOpacity:o.config.fill.opacity,classes:`apexcharts-pie-area apexcharts-${this.chartType.toLowerCase()}-slice-${a}`});if(x.attr({index:0,j:a}),h.setSelectionFilter(x,0,a),o.config.chart.dropShadow.enabled){const t=o.config.chart.dropShadow;h.dropShadow(x,t,a)}this.addListeners(x,this.donutDataLabels);let S={x:0,y:0};const v=(p+r/2)%this.fullAngle;let z={x:this.centerX,y:this.centerY};"pie"===this.chartType||"polarArea"===this.chartType?(S=n.polarToCartesian(this.centerX,this.centerY,o.globals.radialSize/1.25+o.config.plotOptions.pie.dataLabels.offset,v),z=n.polarToCartesian(this.centerX,this.centerY,o.globals.radialSize/2,v)):"donut"===this.chartType&&(S=n.polarToCartesian(this.centerX,this.centerY,(o.globals.radialSize+this.donutSize)/2+o.config.plotOptions.pie.dataLabels.offset,v),z=n.polarToCartesian(this.centerX,this.centerY,(o.globals.radialSize+this.donutSize)/2,v)),l.setAttrs(x.node,{"data:angle":r,"data:startAngle":p,"data:strokeWidth":this.strokeWidth,"data:value":e[a],"data:cx":z.x,"data:cy":z.y}),s.add(x);let L=0;if(!this.initialAnim||o.globals.resized||o.globals.dataChanged?this.animBeginArr.push(0):(L=r/this.fullAngle*o.config.chart.animations.speed,0===L&&(L=1),this.animDur=L+this.animDur,this.animBeginArr.push(this.animDur)),m&&y){const t=this.getPiePath({me:this,startAngle:p,angle:r,size:this.sliceSizes[a]}),e=this.ctx.morphTypeChange.getSpeed();x.node.setAttribute("data:pathOrig",t),x.animate(e).plot(t,"polygons").attr({"stroke-width":this.strokeWidth})}else this.dynamicAnim&&o.globals.dataChanged?this.animatePaths(x,{size:this.sliceSizes[a],endAngle:f,startAngle:p,prevStartAngle:u,prevEndAngle:A,animateStartingPos:!0,i:a,animBeginArr:this.animBeginArr,shouldSetPrevPaths:!0,dur:o.config.chart.animations.dynamicAnimation.speed}):this.animatePaths(x,{size:this.sliceSizes[a],endAngle:f,startAngle:p,i:a,totalItems:t.length-1,animBeginArr:this.animBeginArr,dur:L});if(o.config.plotOptions.pie.expandOnClick&&"polarArea"!==this.chartType&&x.node.addEventListener("mouseup",this.pieClicked.bind(this,a)),void 0!==o.interact.selectedDataPoints[0]&&o.interact.selectedDataPoints[0].indexOf(a)>-1)if(this.initialAnim&&!o.globals.resized&&!o.globals.dataChanged&&this.animDur>0){const t=this,e=a;setTimeout(()=>t.pieClicked(e),this.animDur)}else this.pieClicked(a);if(o.config.dataLabels.enabled){const e=S.x,i=S.y;let s=100*r/this.fullAngle+"%";if(0!==r&&o.config.plotOptions.pie.dataLabels.minAngleToShowLabel<t[a]){const t=o.config.dataLabels.formatter;void 0!==t&&(s=t(o.globals.seriesPercent[a][0],{seriesIndex:a,w:o}));const n=o.globals.dataLabels.style.colors[a],l=d.group({class:"apexcharts-datalabels"}),r=d.drawText({x:e,y:i,text:s,textAnchor:"middle",fontSize:o.config.dataLabels.style.fontSize,fontFamily:o.config.dataLabels.style.fontFamily,fontWeight:o.config.dataLabels.style.fontWeight,foreColor:n});if(l.add(r),o.config.dataLabels.dropShadow.enabled){const t=o.config.dataLabels.dropShadow;h.dropShadow(r,t)}r.node.classList.add("apexcharts-pie-label"),o.config.chart.animations.animate&&!1===o.globals.resized&&(r.node.classList.add("apexcharts-pie-label-delay"),r.node.style.animationDelay=o.config.chart.animations.speed/940+"s"),this.sliceLabels.push(l)}}}return g}addListeners(t,e){const a=new l(this.w);t.node.addEventListener("mouseenter",a.pathMouseEnter.bind(this,t)),t.node.addEventListener("mouseleave",a.pathMouseLeave.bind(this,t)),t.node.addEventListener("mouseleave",this.revertDataLabelsInner.bind(this)),t.node.addEventListener("mousedown",a.pathMouseDown.bind(this,t)),this.donutDataLabels.total.showAlways||(t.node.addEventListener("mouseenter",this.printDataLabelsInner.bind(this,t.node,e)),t.node.addEventListener("mousedown",this.printDataLabelsInner.bind(this,t.node,e)))}animatePaths(t,e){const a=this.w;let i=e.endAngle<e.startAngle?this.fullAngle+e.endAngle-e.startAngle:e.endAngle-e.startAngle,s=i,n=e.startAngle;const l=e.startAngle;void 0!==e.prevStartAngle&&void 0!==e.prevEndAngle&&(n=e.prevEndAngle,s=e.prevEndAngle<e.prevStartAngle?this.fullAngle+e.prevEndAngle-e.prevStartAngle:e.prevEndAngle-e.prevStartAngle),e.i===a.config.series.length-1&&(i+l>this.fullAngle?e.endAngle=e.endAngle-(i+l):i+l<this.fullAngle&&(e.endAngle=e.endAngle+(this.fullAngle-(i+l)))),i===this.fullAngle&&(i=this.fullAngle-.01),this.animateArc(t,n,l,i,s,e)}animateArc(t,e,a,s,n,l){const r=this,o=this.w,h=new i(this.w),d=l.size;let c;(isNaN(e)||isNaN(n))&&(e=a,n=s,l.dur=0);let g=s,p=a;const u=e<a?this.fullAngle+e-a:e-a;o.globals.dataChanged&&l.shouldSetPrevPaths&&l.prevEndAngle&&(c=r.getPiePath({me:r,startAngle:l.prevStartAngle,angle:l.prevEndAngle<l.prevStartAngle?this.fullAngle+l.prevEndAngle-l.prevStartAngle:l.prevEndAngle-l.prevStartAngle,size:d}),t.attr({d:c})),0!==l.dur?t.animate(l.dur,l.animBeginArr[l.i]).after(function(){"pie"!==r.chartType&&"donut"!==r.chartType&&"polarArea"!==r.chartType||this.animate(o.config.chart.animations.dynamicAnimation.speed).attr({"stroke-width":r.strokeWidth}),l.i===o.config.series.length-1&&h.animationCompleted(t)}).during(i=>{g=u+(s-u)*i,l.animateStartingPos&&(g=n+(s-n)*i,p=e-n+(a-(e-n))*i),c=r.getPiePath({me:r,startAngle:p,angle:g,size:d}),t.node.setAttribute("data:pathOrig",c),t.attr({d:c})}):(c=r.getPiePath({me:r,startAngle:p,angle:s,size:d}),l.isTrack||(o.globals.animationEnded=!0),t.node.setAttribute("data:pathOrig",c),t.attr({d:c,"stroke-width":r.strokeWidth}))}pieClicked(t){const e=this.w,a=this,i=a.sliceSizes[t]+(e.config.plotOptions.pie.expandOnClick?4:0),s=e.dom.Paper.findOne(`.apexcharts-${a.chartType.toLowerCase()}-slice-${t}`);if("true"===s.attr("data:pieClicked")){s.attr({"data:pieClicked":"false"}),this.revertDataLabelsInner();const t=s.attr("data:pathOrig");return void s.attr({d:t})}{const a=e.dom.baseEl.getElementsByClassName("apexcharts-pie-area");Array.prototype.forEach.call(a,t=>{t.setAttribute("data:pieClicked","false");const e=t.getAttribute("data:pathOrig");e&&t.setAttribute("d",e)}),e.interact.capturedDataPointIndex=t,s.attr("data:pieClicked","true")}const n=parseInt(s.attr("data:startAngle"),10),l=parseInt(s.attr("data:angle"),10),r=a.getPiePath({me:a,startAngle:n,angle:l,size:i});360!==l&&s.plot(r)}getChangedPath(t,e){let a="";return this.dynamicAnim&&this.w.globals.dataChanged&&(a=this.getPiePath({me:this,startAngle:t,angle:e-t,size:this.size})),a}getPiePath({me:t,startAngle:e,angle:a,size:i}){let s;const r=new l(this.w),o=e,h=Math.PI*(o-90)/180;let d=a+e;Math.ceil(d)>=this.fullAngle+this.w.config.plotOptions.pie.startAngle%this.fullAngle&&(d=this.fullAngle+this.w.config.plotOptions.pie.startAngle%this.fullAngle-.01),Math.ceil(d)>this.fullAngle&&(d-=this.fullAngle);const c=Math.PI*(d-90)/180,g=t.centerX+i*Math.cos(h),p=t.centerY+i*Math.sin(h),u=t.centerX+i*Math.cos(c),f=t.centerY+i*Math.sin(c),A=n.polarToCartesian(t.centerX,t.centerY,t.donutSize,d),m=n.polarToCartesian(t.centerX,t.centerY,t.donutSize,o),b=a>180?1:0,y=["M",g,p,"A",i,i,0,b,1,u,f];return s="donut"===t.chartType?[...y,"L",A.x,A.y,"A",t.donutSize,t.donutSize,0,b,0,m.x,m.y,"L",g,p,"z"].join(" "):"pie"===t.chartType||"polarArea"===t.chartType?[...y,"L",t.centerX,t.centerY,"L",g,p].join(" "):[...y].join(" "),r.roundPathCorners(s,2*this.strokeWidth)}drawPolarElements(t){const e=this.w,a=new o(this.w),i=new l(this.w),s=new h(this.w),n=i.group(),r=i.group(),d=a.niceScale(0,Math.ceil(this.maxY),0),c=d.result.reverse(),g=d.result.length;this.maxY=d.niceMax;let p=e.globals.radialSize;const u=p/(g-1);for(let t=0;t<g-1;t++){const a=i.drawCircle(p);if(a.attr({cx:this.centerX,cy:this.centerY,fill:"none","stroke-width":e.config.plotOptions.polarArea.rings.strokeWidth,stroke:e.config.plotOptions.polarArea.rings.strokeColor}),e.config.yaxis[0].show){const a=s.drawYAxisTexts(this.centerX,this.centerY-p+parseInt(e.config.yaxis[0].labels.style.fontSize,10)/2,t,c[t]);r.add(a)}n.add(a),p-=u}this.drawSpokes(t),t.add(n),t.add(r)}renderInnerDataLabels(t,e,a){const i=this.w,s=new l(this.w),n=e.total.show;t.node.innerHTML="",t.node.style.opacity=a.opacity;const r=a.centerX,o=this.donutDataLabels.total.label?a.centerY:a.centerY-a.centerY/6;let h,d;h=void 0===e.name.color?i.globals.colors[0]:e.name.color;let c=e.name.fontSize,g=e.name.fontFamily,p=e.name.fontWeight;d=void 0===e.value.color?i.config.chart.foreColor:e.value.color;const u=e.value.formatter;let f="",A="";if(n?(h=e.total.color,c=e.total.fontSize,g=e.total.fontFamily,p=e.total.fontWeight,A=this.donutDataLabels.total.label?e.total.label:"",f=e.total.formatter(i)):1===i.seriesData.series.length&&(f=u(i.seriesData.series[0],i),A=i.seriesData.seriesNames[0]),A&&(A=e.name.formatter(A,e.total.show,i)),e.name.show){const a=s.drawText({x:r,y:o+parseFloat(e.name.offsetY),text:A,textAnchor:"middle",foreColor:h,fontSize:c,fontWeight:p,fontFamily:g});a.node.classList.add("apexcharts-datalabel-label"),t.add(a)}if(e.value.show){const a=e.name.show?parseFloat(e.value.offsetY)+16:e.value.offsetY,i=s.drawText({x:r,y:o+a,text:f,textAnchor:"middle",foreColor:d,fontWeight:e.value.fontWeight,fontSize:e.value.fontSize,fontFamily:e.value.fontFamily});i.node.classList.add("apexcharts-datalabel-value"),t.add(i)}return t}printInnerLabels(t,e,a,i){const s=this.w;let n;i?n=void 0===t.name.color?s.globals.colors[parseInt(i.parentNode.getAttribute("rel"),10)-1]:t.name.color:s.seriesData.series.length>1&&t.total.show&&(n=t.total.color);const l=s.dom.baseEl.querySelector(".apexcharts-datalabel-label"),r=s.dom.baseEl.querySelector(".apexcharts-datalabel-value");a=(0,t.value.formatter)(a,s),i||"function"!=typeof t.total.formatter||(a=t.total.formatter(s));const o=e===t.total.label;if(e=this.donutDataLabels.total.label?t.name.formatter(e,o,s):"",null!==l&&(l.textContent=e),null!==r&&(r.textContent=a),null!==l){l.style.fill=n}}printDataLabelsInner(t,e){const a=this.w,i=t.getAttribute("data:value"),s=a.seriesData.seriesNames[parseInt(t.parentNode.getAttribute("rel"),10)-1];a.seriesData.series.length>1&&this.printInnerLabels(e,s,i,t);const n=a.dom.baseEl.querySelector(".apexcharts-datalabels-group");if(null!==n){n.style.opacity="1"}}drawSpokes(t){const e=this.w,a=new l(this.w),i=e.config.plotOptions.polarArea.spokes;if(0===i.strokeWidth)return;const s=[],r=360/e.seriesData.series.length;for(let t=0;t<e.seriesData.series.length;t++)s.push(n.polarToCartesian(this.centerX,this.centerY,e.globals.radialSize,e.config.plotOptions.pie.startAngle+r*t));s.forEach((e,s)=>{const n=a.drawLine(e.x,e.y,this.centerX,this.centerY,Array.isArray(i.connectorColors)?i.connectorColors[s]:i.connectorColors);t.add(n)})}revertDataLabelsInner(){const t=this.w;if(this.donutDataLabels.show){const e=t.dom.Paper.findOne(".apexcharts-datalabels-group"),a=this.renderInnerDataLabels(e,this.donutDataLabels,{hollowSize:this.donutSize,centerX:this.centerX,centerY:this.centerY,opacity:this.donutDataLabels.show});t.dom.Paper.findOne(".apexcharts-radialbar, .apexcharts-pie").add(a)}}}t.use({pie:d,donut:d,polarArea:d}),exports.default=t;