apexcharts/dist/features/morph.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 r in t)if("default"!==r){const a=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,a.get?a:{enumerable:!0,get:()=>t[r]})}return e.default=t,Object.freeze(e)}const r=e(t),a=r.__apex_Environment_Environment,s=r.__apex_BrowserAPIs_BrowserAPIs,n=r.__apex_Animations_prefersReducedMotion,i=r.__apex_PathMorphing_parsePath,l=new Set(["bar","funnel","pyramid"]),o=new Set(["pie","donut","polarArea","radialBar","gauge"]);function h(t){return l.has(t)?"bar":o.has(t)?"radial":null}t.registerFeatures({morphTypeChange:class{constructor(t,e){this.w=t,this.ctx=e,this._snapshot=null}canMorphTypes(t,e){if(t===e)return!1;const r=h(t),a=h(e);return!(!r||!a)}isCompatibleSeriesShape(t,e,r){if(!Array.isArray(r)||0===r.length)return!1;const a=h(t),s=h(e);return"radial"===s?r.every(t=>"number"==typeof t):"bar"===s?r.every(t=>t&&"object"==typeof t&&Array.isArray(t.data)):null!==a&&null!==s}captureBeforeDestroy({fromType:t,toType:e,newSeries:r}){if(this._snapshot=null,!a.isBrowser())return!1;const s=this.w.config.chart.animations;if(!s||!1===s.enabled)return!1;if(s.chartTypeMorph&&!1===s.chartTypeMorph.enabled)return!1;if(s.respectReducedMotion&&n())return!1;if(!this.canMorphTypes(t,e))return!1;if(!this.isCompatibleSeriesShape(t,e,r))return!1;const i=this._captureFromDOM(t);if(!i.length)return!1;const l=this._buildMapping(i,t,e,r);return 0!==l.size&&(this._snapshot={fromType:t,toType:e,mapping:l,oldLayout:{translateX:this.w.layout.translateX||0,translateY:this.w.layout.translateY||0}},this.w.globals.previousPaths=[],!0)}_captureFromDOM(t){var e;const r=null==(e=this.w.globals.dom)?void 0:e.baseEl;if(!r)return[];const a=[],s=h(t);if("bar"===s){r.querySelectorAll(".apexcharts-bar-series .apexcharts-series").forEach(t=>{var e;const r=parseInt(null!=(e=t.getAttribute("data:realIndex"))?e:"0",10);t.querySelectorAll("path[pathTo]").forEach((t,e)=>{const s=t.getAttribute("pathTo")||t.getAttribute("d");s&&a.push({realIndex:r,j:e,d:s,fill:t.getAttribute("fill")})})})}else if("radial"===s)if("radialBar"===t||"gauge"===t){const t=this.w.layout.gridWidth/2,e=Math.min(this.w.layout.gridWidth,this.w.layout.gridHeight)/2;r.querySelectorAll(".apexcharts-radial-series .apexcharts-radialbar-area").forEach(r=>{var s;const n=r.parentElement,i=parseInt(null!=(s=null==n?void 0:n.getAttribute("data:realIndex"))?s:"0",10),l=r.getAttribute("d");if(!l)return;const o=parseFloat(r.getAttribute("stroke-width")||"0"),h=o>1&&this._radialArcToFilledSegment(l,o,t,e)||l;a.push({realIndex:i,j:0,d:h,fill:r.getAttribute("stroke")})})}else{r.querySelectorAll(".apexcharts-pie-series .apexcharts-pie-area").forEach((t,e)=>{const r=t.getAttribute("d");r&&a.push({realIndex:e,j:0,d:r,fill:t.getAttribute("fill")})})}return a}_radialArcToFilledSegment(t,e,r,a){const s=t.match(/M\s*(-?[\d.]+)\s+(-?[\d.]+)\s+A\s*(-?[\d.]+)\s+(?:-?[\d.]+)\s+(?:-?[\d.]+)\s+(\d)\s+(\d)\s+(-?[\d.]+)\s+(-?[\d.]+)/);if(!s)return null;const n=parseFloat(s[1]),i=parseFloat(s[2]),l=parseFloat(s[3]),o=parseInt(s[4],10),h=parseInt(s[5],10),u=parseFloat(s[6]),p=parseFloat(s[7]);if(!isFinite(l)||l<=0)return null;const c=e/2,d=l+c,$=Math.max(0,l-c),f=(t,e,s)=>{const n=t-r,i=e-a,l=Math.sqrt(n*n+i*i);if(0===l)return{x:r,y:a};const o=s/l;return{x:r+n*o,y:a+i*o}},y=f(n,i,d),g=f(u,p,d),x=f(n,i,$),b=f(u,p,$),_=h?0:1;return`M ${y.x} ${y.y} A ${d} ${d} 0 ${o} ${h} ${g.x} ${g.y} L ${b.x} ${b.y} A ${$} ${$} 0 ${o} ${_} ${x.x} ${x.y} Z`}buildRingSegmentPath(t,e,r,a,s,n){const i=a/2,l=r+i,o=Math.max(0,r-i),h=(s-90)*Math.PI/180,u=(n-90)*Math.PI/180,p=t+l*Math.cos(h),c=e+l*Math.sin(h),d=t+l*Math.cos(u),$=e+l*Math.sin(u),f=t+o*Math.cos(h),y=e+o*Math.sin(h),g=t+o*Math.cos(u),x=e+o*Math.sin(u),b=n>s?1:0,_=Math.abs(n-s)>180?1:0;return`M ${p} ${c} A ${l} ${l} 0 ${_} ${b} ${d} ${$} L ${g} ${x} A ${o} ${o} 0 ${_} ${1-b} ${f} ${y} Z`}getFromType(){return this._snapshot?this._snapshot.fromType:null}_buildMapping(t,e,r,a){const s=new Map,n=h(r),i=t.slice().sort((t,e)=>t.realIndex-e.realIndex||t.j-e.j);if("radial"===n)return i.forEach((t,e)=>{s.set(`${e}:0`,{d:t.d,fill:t.fill})}),s;if("bar"===n){const t=[];return(Array.isArray(a)?a:[]).forEach((e,r)=>{const a=e&&Array.isArray(e.data)?e.data:[];for(let e=0;e<a.length;e++)t.push({realIndex:r,j:e})}),i.forEach((e,r)=>{const a=t[r];a&&s.set(`${a.realIndex}:${a.j}`,{d:e.d,fill:e.fill})}),s}return s}isActive(){return null!==this._snapshot}getInitialPathFor(t,e){if(!this._snapshot)return null;const r=this._snapshot.mapping.get(`${t}:${e}`);if(!r)return null;const a=this._snapshot.oldLayout.translateX-(this.w.layout.translateX||0),s=this._snapshot.oldLayout.translateY-(this.w.layout.translateY||0);return 0===a&&0===s?r.d:this._translatePathD(r.d,a,s)}_translatePathD(t,e,r){if(0===e&&0===r)return t;return i(t).map(t=>{const a=t[0];return"Z"===a?"Z":"M"===a||"L"===a||"T"===a?`${a} ${t[1]+e} ${t[2]+r}`:"H"===a?`${a} ${t[1]+e}`:"V"===a?`${a} ${t[1]+r}`:"C"===a?`${a} ${t[1]+e} ${t[2]+r} ${t[3]+e} ${t[4]+r} ${t[5]+e} ${t[6]+r}`:"S"===a||"Q"===a?`${a} ${t[1]+e} ${t[2]+r} ${t[3]+e} ${t[4]+r}`:"A"===a?`${a} ${t[1]} ${t[2]} ${t[3]} ${t[4]} ${t[5]} ${t[6]+e} ${t[7]+r}`:t.join(" ")}).join(" ")}getInitialFillFor(t,e){if(!this._snapshot)return null;const r=this._snapshot.mapping.get(`${t}:${e}`);return r?r.fill:null}getSpeed(){const t=this.w.config.chart.animations;return t.chartTypeMorph&&t.chartTypeMorph.speed||t.speed||600}applyChromeFade(){var t;if(!this._snapshot||!a.isBrowser())return;const e=null==(t=this.w.globals.dom)?void 0:t.baseEl;if(!e)return;const r=this.getSpeed();[".apexcharts-xaxis",".apexcharts-yaxis",".apexcharts-grid",".apexcharts-gridlines-horizontal",".apexcharts-gridlines-vertical",".apexcharts-legend",".apexcharts-title-text",".apexcharts-subtitle-text"].forEach(t=>{e.querySelectorAll(t).forEach(t=>{t.style&&(t.style.opacity="0",t.style.transition=`opacity ${r}ms ease-out`,s.requestAnimationFrame(()=>{t.style.opacity="1"}),setTimeout(()=>{t.style.transition="",t.style.opacity=""},r+80))})}),setTimeout(()=>this.cleanup(),r+100)}cleanup(){this._snapshot=null}}}),exports.default=t;