apexcharts/dist/features/drilldown.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).ApexDrilldown={})}(this,function(t){"use strict";var e=Object.defineProperty,i=Object.defineProperties,r=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,l=(t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r,a=(t,e)=>{for(var i in e||(e={}))n.call(e,i)&&l(t,i,e[i]);if(s)for(var i of s(e))o.call(e,i)&&l(t,i,e[i]);return t},c=(t,e)=>i(t,r(e));const d=globalThis.ApexCharts,h=globalThis.ApexCharts.__internals.__apex_Utils,p=globalThis.ApexCharts.__internals.__apex_Environment_Environment,u=globalThis.ApexCharts.__internals.__apex_BrowserAPIs_BrowserAPIs;function f(t,e,i,r){var s;const n=null==(s=null==e?void 0:e.dimensions)?void 0:s.dimHelpers,o=n?n.getTitleSubtitleCoords("title").height+n.getTitleSubtitleCoords("subtitle").height:0,l=i.getBoundingClientRect().height||18,a=r&&r.offsetY||0,c=function(t,e){const i=t.layout.translateY||0,r=t.dom.elWrap;if(!r)return i;const s=t.dom.baseEl.querySelectorAll(".apexcharts-yaxis-label");if(!s.length)return i;const n=r.getBoundingClientRect().top,o=e.getBoundingClientRect();let l=i;for(let t=0;t<s.length;t++){const e=s[t].getBoundingClientRect();e.height&&(e.left>=o.right||e.right<=o.left||(l=Math.min(l,e.top-n)))}return l}(t,i);if(c-o>=l+1)return i.style.top=`${c-l-1+a}px`,!0;i.style.top=`${o+a}px`;const d="dark"===t.config.theme.mode;return i.style.background=d?"rgba(20,24,30,0.82)":"rgba(255,255,255,0.86)",i.style.borderRadius="4px",!1}const w="http://www.w3.org/1999/xhtml";class g{constructor(t,e,i){this.w=t,this.ctx=e,this.drilldown=i}render(t){if(!p.isBrowser())return;const e=this.w,i=e.dom.elWrap;if(!i)return;const r=i.querySelector(".apexcharts-breadcrumb");r&&r.parentNode&&r.parentNode.removeChild(r);const s=e.config.drilldown&&e.config.drilldown.breadcrumb;if(!s||!1===s.show)return;if(0===this.drilldown.depth)return;const n=u.createElementNS(w,"nav");n.setAttribute("class","apexcharts-breadcrumb"),n.setAttribute("aria-label","Drilldown breadcrumb"),this._position(n,s);const o=null!=s.separator?s.separator:" / ";t.forEach((e,i)=>{if(i>0){const t=u.createElementNS(w,"span");t.setAttribute("class","apexcharts-breadcrumb-separator"),t.setAttribute("aria-hidden","true"),t.textContent=o,n.appendChild(t)}const r=this._label(e,i);if(i===t.length-1){const t=u.createElementNS(w,"span");t.setAttribute("class","apexcharts-breadcrumb-item apexcharts-breadcrumb-current"),t.setAttribute("aria-current","page"),t.textContent=r,n.appendChild(t)}else{const t=u.createElementNS(w,"button");if(t.setAttribute("type","button"),t.setAttribute("class","apexcharts-breadcrumb-item"),0===i){const e=u.createElementNS(w,"span");e.setAttribute("class","apexcharts-breadcrumb-arrow"),e.setAttribute("aria-hidden","true"),e.textContent="\u2190",t.appendChild(e)}const e=u.createElementNS(w,"span");e.setAttribute("class","apexcharts-breadcrumb-label"),e.textContent=r,t.appendChild(e),t.addEventListener("click",()=>this.drilldown.drillToLevel(i)),n.appendChild(t)}}),i.appendChild(n),this.w.globals.axisCharts&&f(this.w,this.ctx,n,s),this._avoidChromeOverlap(n)}_avoidChromeOverlap(t){const e=this.w,i=[".apexcharts-title-text",".apexcharts-subtitle-text"].map(t=>e.dom.baseEl.querySelector(t)).filter(t=>null!==t);if(!i.length)return;const r=e.dom.elWrap.getBoundingClientRect().top;for(let e=0;e<i.length+1;e++){const e=t.getBoundingClientRect(),s=i.find(t=>{const i=t.getBoundingClientRect();return e.left<i.right&&e.right>i.left&&e.top<i.bottom&&e.bottom>i.top});if(!s)break;t.style.top=s.getBoundingClientRect().bottom-r+4+"px"}}_label(t,e){const i=this.w.config.drilldown.breadcrumb;let r;if(0===e)r=null!=i.rootLabel?i.rootLabel:"All";else{const e=(this.w.config.drilldown.series||[]).find(e=>e&&e.id===t);r=e&&e.name||String(t)}return"function"==typeof i.formatter?i.formatter(r,{index:e,depth:this.drilldown.depth}):r}_position(t,e){const i=e.offsetX||0,r=e.offsetY||0;t.style.position="absolute",t.style.top=r+"px","top-right"===e.position?t.style.right=3-i+"px":t.style.left=i+"px"}}const b="http://www.w3.org/1999/xhtml",_="apexcharts-drilldown-loading";class m{constructor(t){this.w=t,this.el=null}_cfg(){const t=this.w.config.drilldown,e=t&&t.loading;return!1===e?{show:!1}:e||{}}show(){if(!p.isBrowser())return;const t=this._cfg();if(!1===t.show)return;const e=this.w.dom.elWrap;if(!e)return;this.hide();const i=u.createElementNS(b,"div");i.setAttribute("class",_),i.setAttribute("role","status"),i.setAttribute("aria-live","polite"),i.setAttribute("aria-label",t.text||"Loading");const r=u.createElementNS(b,"div");if(r.setAttribute("class",`${_}-spinner`),r.setAttribute("aria-hidden","true"),i.appendChild(r),t.text){const e=u.createElementNS(b,"span");e.setAttribute("class",`${_}-text`),e.textContent=t.text,i.appendChild(e)}e.appendChild(i),this.el=i}hide(){const t=this.w.dom.elWrap;if(t){const e=t.querySelectorAll(`.${_}`);for(let t=0;t<e.length;t++){const i=e[t];i.parentNode&&i.parentNode.removeChild(i)}}else this.el&&this.el.parentNode&&this.el.parentNode.removeChild(this.el);this.el=null}}const x="__apexDrilldownMarker";d.registerFeatures({drilldown:class{constructor(t,e){this.w=t,this.ctx=e,this.stack=[],this.rootSnapshot=null,this._wired=!1,this._asyncCache=new Map,this._pending=null,this._warnedUnreachable=!1,this._warnedNoSliceOffset=!1,this.breadcrumb=new g(t,e,this),this.loading=new m(t),this._onPointSelect=this._onPointSelect.bind(this),this._afterRender=this._afterRender.bind(this),this._onPlotDown=this._onPlotDown.bind(this),this._onPlotClick=this._onPlotClick.bind(this),this._downAt=null,this._plotClickWired=null,this.init()}init(){const t=this.w;t.config.drilldown&&t.config.drilldown.enabled&&(this._wired||(this._wired=!0,this.ctx.addEventListener("dataPointSelection",this._onPointSelect),this.ctx.addEventListener("mounted",this._afterRender),this.ctx.addEventListener("updated",this._afterRender),t.config.markers&&(t.config.markers.discrete=this._drillMarkers(t.config.series))))}get path(){return["root",...this.stack.map(t=>t.id)]}get depth(){return this.stack.length}drillDown(t,e,i){const r=this._resolveChild(t);return r?this._drillInto(r,e,i):"function"==typeof this.w.config.drilldown.onDrillDown?this._drillDownAsync(t,e,i):(console.warn(`ApexCharts: drilldown id "${t}" not found in chart.drilldown.series, and no onDrillDown resolver is set.`),Promise.resolve(this.ctx))}drillUp(){return this.drillToLevel(this.stack.length-1)}drillToRoot(){return this.drillToLevel(0)}drillToLevel(t){const e=this.stack.length;if(t<0||t>=e)return Promise.resolve(this.ctx);const i=this.path[this.path.length-1],r=0===t?this.rootSnapshot:this.stack[t].restore;this.stack=this.stack.slice(0,t);const s=this.path[this.path.length-1];return this._apply(this._viewFromSnapshot(r),"up",{from:i,to:s})}_resolveChild(t){const e=this.w.config.drilldown&&this.w.config.drilldown.series;return Array.isArray(e)&&e.find(e=>e&&e.id===t)||null}_drillInto(t,e,i){if(this.stack.length>=32)return console.warn("ApexCharts: drilldown max depth (32) reached."),Promise.resolve(this.ctx);this.rootSnapshot||(this.rootSnapshot=this._snapshot());const r=this.path[this.path.length-1];return this.stack.push({id:t.id,name:t.name,restore:this._snapshot()}),this._apply(this._viewFromChild(t),"down",{from:r,to:t.id,point:e,seriesIndex:i&&i.seriesIndex,dataPointIndex:i&&i.dataPointIndex})}_drillDownAsync(t,e,i){const r=this.w.config.drilldown.onDrillDown,s=this._cacheGet(t);if(s)return this._drillInto(s,e,i);if(this._pending)return this._pending;let n;this.loading.show();try{n=r({id:t,point:e,seriesIndex:i&&i.seriesIndex,dataPointIndex:i&&i.dataPointIndex})}catch(e){return this.loading.hide(),this._fire("drillDownError",{id:t,error:e}),Promise.resolve(this.ctx)}const o=()=>{this._pending=null,this.loading.hide()},l=Promise.resolve(n).then(r=>{if(o(),this._isDead())return this.ctx;if(!r||!r.data)return this._fire("drillDownError",{id:t,error:new Error(`drilldown: onDrillDown resolved without a drillable level for id "${t}" (expected an object with a \`data\` array).`)}),this.ctx;const s=null!=r.id?r:c(a({},r),{id:t});return this._cacheSet(t,s),this._drillInto(s,e,i)},e=>(o(),this._isDead()||this._fire("drillDownError",{id:t,error:e}),this.ctx));return this._pending=l,l}_isDead(){const t=this.w;return!t||!t.globals||!0===t.globals.isDestroyed}_cacheEnabled(){const t=this.w.config.drilldown;return!(!t||!1===t.cache)}_cacheGet(t){return this._cacheEnabled()&&null!=t&&this._asyncCache.get(t)||null}_cacheSet(t,e){this._cacheEnabled()&&null!=t&&this._asyncCache.set(t,e)}clearCache(t){return null==t?this._asyncCache.clear():this._asyncCache.delete(t),this.ctx}_snapshot(){const t=this.w.config,e=this._overrideFields(),i={series:this._uncollapseSeries(h.clone(t.series))};return Array.isArray(t.labels)&&t.labels.length&&(i.labels=h.clone(t.labels)),i.chart={type:t.chart.type,stacked:t.chart.stacked},e.has("xaxis")&&(i.xaxis=h.clone(t.xaxis)),e.has("yaxis")&&(i.yaxis=h.clone(t.yaxis)),e.has("colors")&&(i.colors=t.colors?h.clone(t.colors):void 0),e.has("plotOptions")&&(i.plotOptions=h.clone(t.plotOptions)),e.has("fill")&&(i.fill=h.clone(t.fill)),e.has("legend")&&(i.legend=h.clone(t.legend)),i}_uncollapseSeries(t){const e=this.w,i=e.globals,r=[...i.collapsedSeries||[],...i.ancillaryCollapsedSeries||[]];if(!r.length)return t;const s=e.config.chart.type,n=("pie"===s||"donut"===s||"polarArea"===s)&&1===t.length&&t[0]&&"object"==typeof t[0]&&Array.isArray(t[0].data)?t[0].data:t;for(const e of r){const r=e.index;i.axisCharts?t[r]&&(t[r].data=Array.isArray(e.data)?e.data.slice():e.data):n[r]&&"object"==typeof n[r]?n[r].y=e.data:void 0!==n[r]&&(n[r]=e.data)}return t}_overrideFields(){const t=new Set,e=this.w.config.drilldown&&this.w.config.drilldown.series||[];for(const i of e)i&&(i.xaxis&&t.add("xaxis"),i.yaxis&&t.add("yaxis"),i.colors&&t.add("colors"),i.plotOptions&&t.add("plotOptions"),i.fill&&t.add("fill"),i.legend&&t.add("legend"));return t}_copyOptionalViewFields(t,e){e.xaxis&&(t.xaxis=e.xaxis),e.yaxis&&(t.yaxis=e.yaxis),e.colors&&(t.colors=e.colors),e.plotOptions&&(t.plotOptions=e.plotOptions),e.fill&&(t.fill=e.fill),e.legend&&(t.legend=e.legend)}_viewFromChild(t){const e={};Array.isArray(t.series)?e.series=t.series:e.series=[{name:t.name||"",data:t.data}];const i={};return t.chart&&t.chart.type&&(i.type=t.chart.type),t.chart&&null!=t.chart.stacked&&(i.stacked=t.chart.stacked),Object.keys(i).length&&(e.chart=i),this._copyOptionalViewFields(e,t),e}_viewFromSnapshot(t){const e={series:t.series,chart:t.chart};return t.labels&&t.labels.length&&(e.labels=t.labels),this._copyOptionalViewFields(e,t),e}_apply(t,e,i){const r=this.w;r.interact.selectedDataPoints=[],r.globals.collapsedSeries=[],r.globals.collapsedSeriesIndices=[],r.globals.ancillaryCollapsedSeries=[],r.globals.ancillaryCollapsedSeriesIndices=[],r.globals.allSeriesCollapsed=!1,r.globals.risingSeries=[],t.markers=c(a({},t.markers||{}),{discrete:this._drillMarkers(t.series)});const s=(!r.config.drilldown.animation||!1!==r.config.drilldown.animation.enabled)&&!1!==r.config.chart.animations.enabled;"down"===e&&this._fire("drillDownStart",i);const n=e=>this.ctx.updateOptions(t,!1,e,!1,!1),o=()=>(this._fire("down"===e?"drillDownEnd":"drillUp",i),this.ctx);if(s&&this._zoomEnabled()){const t=this._triggerOrigin(i);if(t)return this._zoomDrill(t,e,()=>n(!1)).then(o)}return n(s).then(o)}_zoomEnabled(){const t=this.w.config.drilldown&&this.w.config.drilldown.animation;return!(!t||!t.zoomFromPoint)}_svgNode(){const t=this.w.dom&&this.w.dom.Paper;return t&&t.node?t.node:null}_markGroup(){const t=this._svgNode();return t&&"function"==typeof t.querySelector?t.querySelector(".apexcharts-plot-series, .apexcharts-heatmap, .apexcharts-treemap"):null}_triggerOrigin(t){if(!p.isBrowser())return null;const e=this._svgNode(),i=this._markGroup();if(!e||!i||"function"!=typeof i.animate||"function"!=typeof e.getBoundingClientRect)return null;const r=e.getBoundingClientRect();let s=null;if(t&&null!=t.seriesIndex&&null!=t.dataPointIndex&&this.w.dom.baseEl&&(s=this.w.dom.baseEl.querySelector(`[index="${t.seriesIndex}"][j="${t.dataPointIndex}"]`)),s&&"function"==typeof s.getBoundingClientRect){const t=s.getBoundingClientRect();return{x:t.left+t.width/2-r.left,y:t.top+t.height/2-r.top}}const n=i.getBoundingClientRect();return{x:n.left+n.width/2-r.left,y:n.top+n.height/2-r.top}}_zoomDrill(t,e,i){return r=this,s=null,n=function*(){const r=this._zoomDuration(),s="down"===e,n=Math.round(.55*r),o=s?"scale(1.03)":"scale(0.97)",l=s?"scaleX(0.55) scaleY(0.85)":"scale(1.04)",a=e=>{e.style.transformBox="view-box",e.style.transformOrigin=`${t.x}px ${t.y}px`},c=this._markGroup();let d=null;if(c){a(c),d=c.animate([{transform:"scale(1)",opacity:1},{transform:o,opacity:0}],{duration:n,easing:"ease-in",fill:"forwards"});try{yield d.finished}catch(t){}}yield i();const h=this._markGroup();if(h){a(h),h.style.opacity="0",h.style.transform=l,d&&c===h&&d.cancel();const t=h.animate([{transform:l,opacity:0},{transform:"scale(1)",opacity:1}],{duration:r,easing:"cubic-bezier(0.16, 1, 0.3, 1)",fill:"forwards"});try{yield t.finished}catch(t){}(p=h).style.transform="",p.style.opacity="",p.style.transformOrigin="",p.style.transformBox="",t.cancel()}var p},new Promise((t,e)=>{var i=t=>{try{l(n.next(t))}catch(t){e(t)}},o=t=>{try{l(n.throw(t))}catch(t){e(t)}},l=e=>e.done?t(e.value):Promise.resolve(e.value).then(i,o);l((n=n.apply(r,s)).next())});var r,s,n}_zoomDuration(){const t=this.w.config.drilldown&&this.w.config.drilldown.animation,e=t&&"number"==typeof t.speed?t.speed:260;return Math.max(80,e)}_fire(t,e){const i=this.w.config.chart.events&&this.w.config.chart.events[t];"function"==typeof i&&i(e,this.ctx,this.w),this.ctx.events.fireEvent(t,[e,this.ctx,this.w])}_onPointSelect(t,e,i){if(!i)return;const r=this._pointAt(i.seriesIndex,i.dataPointIndex);return r&&"object"==typeof r&&null!=r.drilldown?this.drillDown(r.drilldown,r,i):"function"==typeof this.w.config.drilldown.onDrillDown?this._drillDownAsync(null,r,i):void 0}_pointAt(t,e){const i=this.w.config.series;if(!Array.isArray(i)||null==t||null==e)return null;const r=i[t];return r&&Array.isArray(r.data)&&null!=r.data[e]?r.data[e]:null}_afterRender(){const t=this.w;t.config.drilldown&&t.config.drilldown.enabled&&(this._markDrillableTargets(),this._wirePlotClick(),this.breadcrumb.render(this.path),t.config.markers&&(t.config.markers.discrete=this._drillMarkers(t.config.series)))}_markDrillableTargets(){if(!p.isBrowser())return;const t=this.w,e=t.dom.baseEl,i=t.config.series;if(!e||!Array.isArray(i))return;let r=0;i.forEach((t,i)=>{const s=t&&Array.isArray(t.data)?t.data:null;s&&s.forEach((t,s)=>{if(!t||"object"!=typeof t||null==t.drilldown)return;const n=e.querySelectorAll(`[index="${i}"][j="${s}"]`);n.length||r++,n.forEach(t=>{this._isClickThroughMark(t)&&t.classList.remove("no-pointer-events"),t.classList.add("apexcharts-drilldown-target")})})}),r&&!this._warnedUnreachable&&(this._warnedUnreachable=!0,console.warn(`ApexCharts: ${r} drillable point(s) have no clickable mark, so clicking them cannot do anything. Leave \`drilldown.marker\` on, or give the series markers of its own (\`markers.size > 0\`).`))}warnSliceOffsetDisabled(){this._warnedNoSliceOffset||(this._warnedNoSliceOffset=!0,console.warn("ApexCharts: `plotOptions.pie.expandOnClick` is not available in a drilldown pie/donut, so it was ignored. A slice click navigates, and a slice that slid out would be discarded by the drill it just triggered."))}_wirePlotClick(){if(!p.isBrowser())return;const t=this.w.dom.baseEl;t&&this._plotClickWired!==t&&(this._plotClickWired&&(this._plotClickWired.removeEventListener("mousedown",this._onPlotDown),this._plotClickWired.removeEventListener("click",this._onPlotClick)),t.addEventListener("mousedown",this._onPlotDown),t.addEventListener("click",this._onPlotClick),this._plotClickWired=t)}_onPlotDown(t){this._downAt={x:t.clientX,y:t.clientY}}_onPlotClick(t){const e=this.w;if(!e.config.drilldown||!e.config.drilldown.enabled)return;const i=this._downAt;if(this._downAt=null,i&&Math.hypot(t.clientX-i.x,t.clientY-i.y)>4)return;const r=t.target;if(!r||"function"!=typeof r.closest)return;if(r.closest(".apexcharts-drilldown-target"))return;if(r.closest(".apexcharts-legend, .apexcharts-toolbar, .apexcharts-breadcrumb, .apexcharts-menu, .apexcharts-tooltip"))return;const s=e.interact.capturedSeriesIndex,n=e.interact.capturedDataPointIndex;if(null==s||null==n||s<0||n<0)return;if(!this._isPointBasedSeries(e.config.series[s]))return;const o=this._pointAt(s,n);return o&&"object"==typeof o&&null!=o.drilldown?this.drillDown(o.drilldown,o,{seriesIndex:s,dataPointIndex:n}):void 0}_isClickThroughMark(t){return!(!t.classList||!t.classList.contains("no-pointer-events"))&&(!!t.classList.contains("apexcharts-marker")&&!("function"==typeof t.closest&&t.closest(".apexcharts-tooltip")))}_drillMarkers(t){const e=this.w,i=e.config.drilldown,r=Array.isArray(e.config.markers&&e.config.markers.discrete)?e.config.markers.discrete.filter(t=>!t||!t[x]):[],s=i&&i.marker||{};if(!1===s.show||!Array.isArray(t))return r;const n=[];return t.forEach((t,e)=>{if(!this._seriesNeedsDrillMarker(e,t))return;const i=t&&Array.isArray(t.data)?t.data:null;i&&i.forEach((t,i)=>{if(!t||"object"!=typeof t||null==t.drilldown)return;const r={seriesIndex:e,dataPointIndex:i,[x]:!0};void 0!==s.size&&(r.size=s.size),void 0!==s.shape&&(r.shape=s.shape),void 0!==s.fillColor&&(r.fillColor=s.fillColor),void 0!==s.strokeColor&&(r.strokeColor=s.strokeColor),n.push(r)})}),r.concat(n)}_seriesNeedsDrillMarker(t,e){if(!this._isPointBasedSeries(e))return!1;const i=this.w.config.markers&&this.w.config.markers.size,r=Array.isArray(i)?i[t]:i;return!(Number(r)>0)}_isPointBasedSeries(t){const e=t&&t.type||this.w.config.chart.type;return"line"===e||"area"===e}}}),t.default=d,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});