apexcharts/dist/sunburst.js

A JavaScript Chart Library

/*!
 * ApexCharts v7.0.0
 * (c) 2018-2026 ApexCharts
 */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ApexSunburst={})}(this,function(t){"use strict";const e=globalThis.ApexCharts,s=globalThis.ApexCharts.__internals.__apex_Graphics,i=globalThis.ApexCharts.__internals.__apex_BrowserAPIs_BrowserAPIs,a=globalThis.ApexCharts.__internals.__apex_Environment_Environment,r=Math.PI/180,n=180/Math.PI;function o(t,e,s,i){return{x:t+s*Math.cos((i-90)*r),y:e+s*Math.sin((i-90)*r)}}const l=t=>`${t.x} ${t.y}`;const h=globalThis.ApexCharts.__internals,c=h.__apex_Animations;function u(t,e,s,i,a,r=null,n={}){var o,l,h;const c=e&&"object"==typeof e,d=c&&null!=(l=null!=(o=e.x)?o:e.name)?l:"",_=Number(c?null!=(h=e.y)?h:e.value:e),p={name:String(d),value:isNaN(_)?null:_,color:c&&e.color?e.color:void 0,_key:`${a}/${s}:${d}`};if(i&&!p.color&&(p.color=i[s%i.length]),n.keepDatum&&(p._datum=e),c&&Array.isArray(e.children)&&e.children.length)p.children=e.children.map((e,s)=>u(t,e,s,null,p._key,r,n));else if(c&&null!=e.drilldown&&!1!==n.expandDrilldown){const s=r||new Set;if(!s.has(e.drilldown)){const i=function(t,e){const s=t.config.drilldown;return(s&&Array.isArray(s.series)?s.series:[]).find(t=>t&&t.id===e)}(t,e.drilldown);if(i&&Array.isArray(i.data)&&i.data.length){const a=new Set(s);a.add(e.drilldown);const r=Array.isArray(i.colors)?i.colors:null;p.children=i.data.map((e,s)=>u(t,e,s,r,p._key,a,n))}}}return p}function d(t){t.children&&t.children.length&&(t.children.forEach(t=>d(t)),(null==t.value||isNaN(t.value))&&(t.value=t.children.reduce((t,e)=>t+Math.max(0,e.value||0),0))),(null==t.value||isNaN(t.value))&&(t.value=0)}function _(t){if("string"!=typeof t)return"";const e=t.indexOf("/");return-1===e?"":t.slice(e)}h.__apex_Animations_computeStagger,h.__apex_Animations_applyAnimationPolicy,h.__apex_Animations_prefersReducedMotion,h.__apex_Animations_applyProgressiveReveal;const p=Math.PI/180,f=180/Math.PI,m="http://www.w3.org/2000/svg",g="http://www.w3.org/1999/xhtml",b=(t,e,s)=>t+(e-t)*s;e.use({sunburst:class{constructor(t,e){this.ctx=e,this.w=t;const s=t.config;this.cfg=s.plotOptions.sunburst,this.strokeWidth=s.stroke.show?s.stroke.width:0,this.strokeColor=Array.isArray(s.stroke.colors)?s.stroke.colors[0]:s.stroke.colors||"#fff",this.startAngle=this.cfg.startAngle,this.endAngle=this.cfg.endAngle,this.maxDepth=0,this.centerX=0,this.centerY=0,this.maxRadius=0,this.total=1,this._focusMaxDepth=0,this._focus=null,this._zoomGen=0,this._roots=[],this._nodesAll=[],this._innerR=()=>0,this._outerR=()=>0,this._tooltipEl=null,this._lblSeq=0,this._morphLeafIndex=0,this._graphics=null,this._ringsG=null,this._labelsG=null}draw(t){const e=this.w,i=new s(this.w);this._graphics=i;const a=i.group({class:"apexcharts-sunburst"});if(e.globals.noData||!t||!t.length)return a;const r=e.layout.gridWidth,n=e.layout.gridHeight;if(this.centerX=r/2+(this.cfg.offsetX||0),this.centerY=n/2+(this.cfg.offsetY||0),this.maxRadius=Math.min(r,n)/2.05-this.strokeWidth-(e.config.chart.sparkline.enabled?0:e.config.chart.dropShadow.blur),this.maxRadius<5)return a;if(this._roots=this._buildHierarchy(),!this._roots.length)return a;this._roots.forEach(t=>this._fillValues(t)),this._validateStrict(),this._nodesAll=[];const o=e.globals.colors||[];this._roots.forEach((t,e)=>{this._colorPass(t,t.color||o[e%o.length]||"#008FFB")}),this.total=this._roots.reduce((t,e)=>t+Math.max(0,e.value),0)||1,this._ringsG=i.group({class:"apexcharts-sunburst-rings"}),this._labelsG=i.group({class:"apexcharts-sunburst-labels"}),a.add(this._ringsG),a.add(this._labelsG),this._focus=null,this._relayout(this._focus);const l=e.config.chart.animations;let h="none";return l.enabled&&(e.globals.dataChanged?l.dynamicAnimation.enabled&&(h="update"):e.globals.resized||(h="intro")),this._applyLayout(h),this._renderBreadcrumb(),a}_buildHierarchy(){return function(t,e={}){const s=t.config.series,i=s&&s[0],a=i&&Array.isArray(i.data)?i.data:s;return Array.isArray(a)?a.map((s,i)=>u(t,s,i,null,"",null,e)):[]}(this.w)}_fillValues(t){d(t)}_validateStrict(){if("strict"!==this.cfg.partition)return;let t=!1;const e=s=>{if(s.children&&s.children.length){const i=s.children.reduce((t,e)=>t+Math.max(0,e.value||0),0);!t&&null!=s.value&&Math.abs(i-s.value)>.5&&(console.warn(`ApexCharts sunburst: partition 'strict' but "${s.name}" (${s.value}) != sum of its children (${i}). Angles are normalized to fill the wedge.`),t=!0),s.children.forEach(e)}};this._roots.forEach(e)}_colorPass(t,e){t._color=t.color||e,this._nodesAll.push(t),t.children&&t.children.forEach(e=>this._colorPass(e,e.color||this._lighten(t._color,this.cfg.tint)))}_relayout(t){if(this._nodesAll.forEach(t=>{t._show=!1}),this._focusMaxDepth=0,t)this._placeVis(t,0,this.startAngle,this.endAngle,t._parent);else{const t=this._roots.reduce((t,e)=>t+Math.max(0,e.value),0)||1;let e=this.startAngle;this._roots.forEach(s=>{const i=(this.endAngle-this.startAngle)*Math.max(0,s.value)/t;this._placeVis(s,0,e,e+i,null),e+=i})}const e=this._parseSize(this.cfg.innerSize,this.maxRadius),s=this._focusMaxDepth+1,i=(this.maxRadius-e)/s,a=s>1?1:0;this._innerR=t=>e+t*i+(t>0?a/2:0),this._outerR=t=>e+(t+1)*i-a/2,this._nodesAll.forEach(t=>{t._show&&(t._iR=this._innerR(t._vDepth),t._oR=t._leaf&&"extend"===this.cfg.leaf&&t._vDepth<this._focusMaxDepth?this.maxRadius:this._outerR(t._vDepth))})}_placeVis(t,e,s,i,a){if(t._show=!0,t._vDepth=e,t._a0=s,t._a1=i,t._parent=a,t._leaf=!(t.children&&t.children.length),e>this._focusMaxDepth&&(this._focusMaxDepth=e),!t._leaf){const a=t.children.reduce((t,e)=>t+Math.max(0,e.value),0)||1;let r=s;t.children.forEach(n=>{const o=(i-s)*Math.max(0,n.value)/a;this._placeVis(n,e+1,r,r+o,t),r+=o})}}_applyLayout(t){var e;const s=this.w.config.chart.animations,i=s.enabled?"none"===t?0:"update"===t?s.dynamicAnimation.speed||350:s.speed||500:0,a=++this._zoomGen,r=null==(e=this.ctx)?void 0:e.morphTypeChange,n=!!r&&"function"==typeof r.isActive&&r.isActive()&&"function"==typeof r.getInitialPathAt,o=n?r.getSpeed():0;this._morphLeafIndex=0;const l="update"===t?this.ctx._sunburstPrevGeoms:null;this._nodesAll.forEach(e=>{if(e._show){const s={a0:e._a0,a1:e._a1,iR:e._iR,oR:e._oR};e._el||(e._el=this._createArcEl(e));const r=n?this._morphSourceFor(e):null;if(r&&o>0)this._morphArcFrom(e,r,s,o,a);else if(("intro"===t||n)&&i>0)this._sweepArc(e,s,n?o:i,a);else{let t,r=!1;if(e._cur)t=e._cur;else if(l&&l.get(e._key))t=l.get(e._key);else{const e=(s.a0+s.a1)/2;t={a0:e,a1:e,iR:s.iR,oR:s.iR},r=!0}this._animateArc(e,t,s,i,!1,r,a)}}else if(e._el&&e._cur){const t=(e._cur.a0+e._cur.a1)/2,s={a0:t,a1:t,iR:e._cur.iR,oR:e._cur.iR};this._animateArc(e,e._cur,s,i,!0,!1,a)}});const h=new Map;this._nodesAll.forEach(t=>{t._show&&h.set(t._key,{a0:t._a0,a1:t._a1,iR:t._iR,oR:t._oR})}),this.ctx._sunburstPrevGeoms=h,this._renderLabels(i)}_morphSourceFor(t){const e=this.ctx,s=e&&e.morphTypeChange;return s?"function"==typeof s.hasKeyedMarks&&s.hasKeyedMarks()&&"function"==typeof s.getInitialPathForKey?s.getInitialPathForKey(_(t._key)):t.children&&t.children.length?null:s.getInitialPathAt(this._morphLeafIndex++):null}_morphArcFrom(t,e,s,i,a){const r=t._el,n=this._arcPath(s.iR,s.oR,s.a0,s.a1,this.cfg.borderRadius);r.node.style.display="",r.attr({d:e,opacity:1}),t._cur=s,this._zoomGen===a&&new c(this.w,this.ctx).morphSVG(r,0,null,t._color,e,n,i,0)}_sweepArc(t,e,s,i){const a=t._el,r=this.cfg.borderRadius,n=this.startAngle,o=this.endAngle;a.node.style.display="",a.attr({d:"",opacity:1}),a.animate(s).during(s=>{if(this._zoomGen!==i)return;const l=n+(o-n)*s;if(l<=e.a0+.01)return void a.attr({d:""});const h=Math.min(e.a1,l);a.attr({d:this._arcPath(e.iR,e.oR,e.a0,h,r)}),t._cur={a0:e.a0,a1:h,iR:e.iR,oR:e.oR}}).after(()=>{this._zoomGen===i&&(t._cur=e)})}_createArcEl(t){const e=this._graphics.drawPath({d:"",fill:t._color,stroke:this.strokeColor,strokeWidth:this.strokeWidth,fillOpacity:1,classes:"apexcharts-sunburst-arc"}),s=e.node;return s.setAttribute("data:name",t.name),s.setAttribute("data:value",String(t.value)),s.setAttribute("data:key",_(t._key)),s.setAttribute("data:leaf",String(!(t.children&&t.children.length))),this._attachTooltip(s,t),a.isBrowser()&&(s.addEventListener("click",()=>this._zoomTo(t)),s.style.cursor="pointer"),this._ringsG.add(e),e}_animateArc(t,e,s,i,a,r,n){const o=t._el,l=this.cfg.borderRadius;if(o.attr({fill:t._color}),0===i)return o.attr({d:this._arcPath(s.iR,s.oR,s.a0,s.a1,l),opacity:a?0:1}),o.node.style.display=a?"none":"",void(t._cur=a?null:s);o.node.style.display="";const h=a?Number(o.attr("opacity"))||1:r?0:1,c=a?0:1;o.attr({opacity:h}),o.animate(i).during(i=>{if(this._zoomGen!==n)return;const a=b(e.a0,s.a0,i),r=b(e.a1,s.a1,i),u=b(e.iR,s.iR,i),d=b(e.oR,s.oR,i);o.attr({d:this._arcPath(u,d,a,r,l),opacity:b(h,c,i)}),t._cur={a0:a,a1:r,iR:u,oR:d}}).after(()=>{this._zoomGen===n&&(a?(o.node.style.display="none",t._cur=null):t._cur=s)})}_renderLabels(t){const e=this._labelsG;for(;e.node.firstChild;)e.node.removeChild(e.node.firstChild);this.cfg.dataLabels.show&&(this._nodesAll.forEach(t=>{t._show&&(t._a1-t._a0<this.cfg.dataLabels.minAngleToShow||this._renderCurvedLabel(t))}),t>0?(e.attr({opacity:0}),e.animate(250,t).attr({opacity:1})):e.attr({opacity:1}))}_renderCurvedLabel(t){if(!a.isBrowser())return;const e=this.cfg.dataLabels.style,s=this.w,r=(t._iR+t._oR)/2,n=(t._a0+t._a1)/2,o=n>90&&n<270,l=Math.min(r>0?4/r*f:0,(t._a1-t._a0)/2),h=o?t._a1-l:t._a0+l,c=o?t._a0+l:t._a1-l,u=this._ptAt(r,h),d=this._ptAt(r,c),_=Math.abs(c-h)>180?1:0,p=o?0:1,g=`apx-sb-lbl-${s.globals.cuid}-${this._lblSeq++}`,b=i.createElementNS(m,"path");b.setAttribute("id",g),b.setAttribute("d",`M ${u.x} ${u.y} A ${r} ${r} 0 ${_} ${p} ${d.x} ${d.y}`),b.setAttribute("fill","none"),b.setAttribute("stroke","none");const y=e.colors,x=(Array.isArray(y)?y[0]:y)||"#fff",A=i.createElementNS(m,"text");A.setAttribute("font-size",e.fontSize||"12px"),e.fontFamily&&A.setAttribute("font-family",e.fontFamily),A.setAttribute("font-weight",String(e.fontWeight||400)),A.setAttribute("fill",x),A.setAttribute("dominant-baseline","central"),A.style.pointerEvents="none";const v=i.createElementNS(m,"textPath");v.setAttribute("href","#"+g),v.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#"+g),v.setAttribute("startOffset","50%"),v.setAttribute("text-anchor","middle"),v.textContent=this._truncate(t.name,r,t._a1-t._a0,e.fontSize),A.appendChild(v),this._labelsG.node.appendChild(b),this._labelsG.node.appendChild(A)}_truncate(t,e,s,i){const a=e*s*p-8,r=.58*(parseFloat(i)||12),n=Math.floor(a/r);return n>=t.length?t:n<=1?"":t.slice(0,Math.max(1,n-1))+"\u2026"}_zoomTo(t){if(!1===this.cfg.zoomOnClick)return;const e=t===this._focus?t._parent||null:t;e!==this._focus&&(this._focus=!e||e.children&&e.children.length?e:e._parent||null,this._relayout(this._focus),this._applyLayout("zoom"),this._renderBreadcrumb())}_focusChain(){const t=[];let e=this._focus;for(;e;)t.unshift(e),e=e._parent;return t}_renderBreadcrumb(){if(!a.isBrowser())return;const t=this.w.dom.elWrap;if(!t)return;const e=t.querySelector(".apexcharts-breadcrumb");if(e&&e.parentNode&&e.parentNode.removeChild(e),!this._focus)return;const s=i.createElementNS(g,"nav");s.setAttribute("class","apexcharts-breadcrumb"),s.setAttribute("aria-label","Sunburst breadcrumb"),s.style.position="absolute",s.style.top="0px",s.style.left="0px";const r=[{name:"All",node:null}].concat(this._focusChain().map(t=>({name:t.name,node:t})));r.forEach((t,e)=>{if(e>0){const t=i.createElementNS(g,"span");t.setAttribute("class","apexcharts-breadcrumb-separator"),t.textContent=" / ",s.appendChild(t)}if(e===r.length-1){const e=i.createElementNS(g,"span");e.setAttribute("class","apexcharts-breadcrumb-item apexcharts-breadcrumb-current"),e.textContent=t.name,s.appendChild(e)}else{const a=i.createElementNS(g,"button");if(a.setAttribute("type","button"),a.setAttribute("class","apexcharts-breadcrumb-item"),0===e){const t=i.createElementNS(g,"span");t.setAttribute("class","apexcharts-breadcrumb-arrow"),t.textContent="\u2190",a.appendChild(t)}const r=i.createElementNS(g,"span");r.setAttribute("class","apexcharts-breadcrumb-label"),r.textContent=t.name,a.appendChild(r),a.addEventListener("click",()=>{this._focus=t.node,this._relayout(this._focus),this._applyLayout("zoom"),this._renderBreadcrumb()}),s.appendChild(a)}}),t.appendChild(s),this._avoidChromeOverlap(s)}_avoidChromeOverlap(t){!function(t,e){const s=[".apexcharts-title-text",".apexcharts-subtitle-text"].map(e=>t.dom.baseEl.querySelector(e)).filter(t=>null!==t);if(!s.length)return;const i=t.dom.elWrap.getBoundingClientRect().top;for(let t=0;t<s.length+1;t++){const t=e.getBoundingClientRect(),a=s.find(e=>{const s=e.getBoundingClientRect();return t.left<s.right&&t.right>s.left&&t.top<s.bottom&&t.bottom>s.top});if(!a)break;e.style.top=a.getBoundingClientRect().bottom-i+4+"px"}}(this.w,t)}_ptAt(t,e){return{x:this.centerX+t*Math.cos((e-90)*p),y:this.centerY+t*Math.sin((e-90)*p)}}_arcPath(t,e,s,i,a){if(e<=t+.01)return"";let r=i-s;const h=this.cfg.spacing;if(h>0&&r>0&&e>0){const t=h/e*f,a=Math.min(t/2,Math.max(0,r/2-.25));r=(i-=a)-(s+=a)}if(r<=0)return"";const c=r*p,u=this.centerX,d=this.centerY;let _=a;return _=Math.min(_,c*t/2,c*e/2,(e-t)/2),_>.5?function({cx:t,cy:e,rIn:s,rOut:i,a0:a,a1:r,r:h,spanDeg:c}){const u=(s,i)=>o(t,e,s,i),d=h/i*n,_=h/s*n,p=u(i,a+d),f=u(i,r-d),m=c-2*d>180?1:0,g=u(i,r),b=u(i-h,r),y=u(i,a),x=u(i-h,a),A=u(s,r-_),v=u(s,a+_),w=c-2*_>180?1:0,R=u(s,r),M=u(s+h,r),C=u(s,a),S=u(s+h,a);return["M",l(p),"A",i,i,0,m,1,l(f),"Q",l(g),l(b),"L",l(M),"Q",l(R),l(A),"A",s,s,0,w,0,l(v),"Q",l(C),l(S),"L",l(x),"Q",l(y),l(p),"Z"].join(" ")}({cx:u,cy:d,rIn:t,rOut:e,a0:s,a1:i,r:_,spanDeg:r}):function({cx:t,cy:e,rIn:s,rOut:i,a0:a,a1:r,spanDeg:n}){const h=(s,i)=>o(t,e,s,i),c=n>180?1:0,u=h(i,a),d=h(i,r),_=h(s,r),p=h(s,a);return["M",l(u),"A",i,i,0,c,1,l(d),"L",l(_),"A",s,s,0,c,0,l(p),"Z"].join(" ")}({cx:u,cy:d,rIn:t,rOut:e,a0:s,a1:i,spanDeg:r})}_tip(){return this._tooltipEl||(this._tooltipEl=this.w.dom.baseEl.querySelector(".apexcharts-tooltip")),this._tooltipEl}_attachTooltip(t,e){this.w.config.tooltip.enabled&&a.isBrowser()&&(t.addEventListener("mouseenter",t=>this._showTooltip(t,e)),t.addEventListener("mousemove",t=>this._positionTooltip(t)),t.addEventListener("mouseleave",()=>this._hideTooltip()))}_showTooltip(t,e){const s=this._tip();if(!s)return;const i=this.w,a=(e.value/this.total*100).toFixed(1),r=e._parent?e._parent.value:this.total,n=r>0?(e.value/r*100).toFixed(1):a,o=i.config.tooltip.fillSeriesColor?`background-color:${e._color};`:"";s.innerHTML=`<div class="apexcharts-tooltip-series-group apexcharts-active" style="display:flex;${o}"><span class="apexcharts-tooltip-marker" style="background-color:${e._color}"></span><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">${e.name}: </span><span class="apexcharts-tooltip-text-y-value">${e.value} (${n}% of parent, ${a}% of total)</span></div></div></div>`,s.classList.add("apexcharts-active"),s.style.opacity="1",this._positionTooltip(t)}_positionTooltip(t){const e=this._tip();if(!e)return;const s=this.w.dom.elWrap.getBoundingClientRect(),i=e.offsetWidth,a=e.offsetHeight;let r=t.clientX-s.left+12;r+i>s.width&&(r=t.clientX-s.left-i-12),r=Math.max(0,Math.min(r,s.width-i));let n=t.clientY-s.top+12;n+a>s.height&&(n=t.clientY-s.top-a-12),n=Math.max(0,Math.min(n,s.height-a)),e.style.left=r+"px",e.style.top=n+"px"}_hideTooltip(){const t=this._tip();t&&(t.classList.remove("apexcharts-active"),t.style.opacity="0")}_parseSize(t,e){if("number"==typeof t)return t;const s=String(t).trim();if(s.endsWith("%"))return parseFloat(s)/100*e;const i=parseFloat(s);return isNaN(i)?.15*e:i}_lighten(t,e){if("string"!=typeof t||"#"!==t[0])return t;let s=t.slice(1);if(3===s.length&&(s=s.split("").map(t=>t+t).join("")),6!==s.length)return t;const i=parseInt(s,16);if(isNaN(i))return t;let a=i>>16&255,r=i>>8&255,n=255&i;return a=Math.round(a+(255-a)*e),r=Math.round(r+(255-r)*e),n=Math.round(n+(255-n)*e),"#"+((1<<24)+(a<<16)+(r<<8)+n).toString(16).slice(1)}}}),t.default=e,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});