apexcharts/dist/features/measure.common.js

A JavaScript Chart Library

/*!
 * ApexCharts v6.6.1
 * (c) 2018-2026 ApexCharts
 */
"use strict";var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,o=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i,a=(e,t)=>{for(var s in t||(t={}))r.call(t,s)&&o(e,s,t[s]);if(i)for(var s of i(t))n.call(t,s)&&o(e,s,t[s]);return e},h=(e,i)=>t(e,s(i));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("apexcharts/core");function c(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const s in e)if("default"!==s){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,i.get?i:{enumerable:!0,get:()=>e[s]})}return t.default=e,Object.freeze(t)}const l=c(d),u=l.__apex_Graphics,_=l.__apex_Environment_Environment;d.registerFeatures({measure:class{constructor(e,t){this.w=e,this.ctx=t,this.graphics=new u(e),this.pins=[],this.drag=null,this.armed=!1,this.persistent=!1,this.pane=null,this._seedActive=!1,this._onKeyDown=this._onKeyDown.bind(this),this._onKeyUp=this._onKeyUp.bind(this),this._onDown=this._onDown.bind(this),this._onMove=this._onMove.bind(this),this._onUp=this._onUp.bind(this),this._onSeedDown=this._onSeedDown.bind(this),this._onSeedKey=this._onSeedKey.bind(this),this._afterRender=this._afterRender.bind(this),t.addEventListener("mounted",this._afterRender),t.addEventListener("updated",this._afterRender),this._bindKeys()}_cfg(){return this.w.config.chart.measure||{}}_enabled(){return this.w.globals.axisCharts&&!0===this._cfg().enabled}_mode(){return"free"===this._cfg().mode?"free":"span"}_snapToSeries(e){const t=(this.w.config.series||[])[0];if(!t)return null;const s=this._points(t.data||[]);if(!s.length)return null;let i=s[0],r=Math.abs(s[0].x-e);for(let t=1;t<s.length;t++){const n=Math.abs(s[t].x-e);n<r&&(r=n,i=s[t])}return i}_resolve(e){if("free"===this._mode())return e;const t=this._snapToSeries(e.x);if(!t)return e;const s=this._dataToGrid(t.x,t.y);return{x:t.x,y:t.y,gx:s.gx,gy:s.gy}}_doc(){return this.w.dom.baseEl&&this.w.dom.baseEl.ownerDocument}_bindKeys(){if(this._keysBound)return;const e=this._doc();e&&(e.addEventListener("keydown",this._onKeyDown),e.addEventListener("keyup",this._onKeyUp),this._keysBound=!0)}_onKeyDown(e){if(!this._enabled()||this.persistent)return;const t=this._cfg().key||"m";e.key&&e.key.toLowerCase()===String(t).toLowerCase()?this._arm():"Escape"===e.key&&this._cancelDrag()}_onKeyUp(e){if(this.persistent)return;const t=this._cfg().key||"m";e.key&&e.key.toLowerCase()===String(t).toLowerCase()&&(this.drag||this._disarm())}startMeasure(){this._enabled()&&(this.persistent=!0,this._arm())}stopMeasure(){this.persistent=!1,this._cancelDrag(),this._disarm()}seedFromClient(e,t){if(!this._enabled())return;this._cancelDrag(),this._endSeed(!1);const s=this._project(e,t);this.drag={a:s,b:s},this._seedActive=!0;const i=this._doc();i&&(i.addEventListener("mousemove",this._onMove),i.addEventListener("touchmove",this._onMove,{passive:!1}),i.addEventListener("mousedown",this._onSeedDown,!0),i.addEventListener("touchstart",this._onSeedDown,!0),i.addEventListener("keydown",this._onSeedKey,!0)),this._renderLive()}_onSeedDown(e){if(!this._seedActive||!this.drag)return;e.preventDefault(),e.stopPropagation();const{cx:t,cy:s}=this._clientXY(e);this.drag.b=this._project(t,s),this._endSeed(!0)}_onSeedKey(e){"Escape"===e.key&&this._endSeed(!1)}_endSeed(e){var t,s;if(!this._seedActive)return;this._seedActive=!1;const i=this._doc();i&&(i.removeEventListener("mousemove",this._onMove),i.removeEventListener("touchmove",this._onMove),i.removeEventListener("mousedown",this._onSeedDown,!0),i.removeEventListener("touchstart",this._onSeedDown,!0),i.removeEventListener("keydown",this._onSeedKey,!0));const r=this.drag;if(this.drag=null,this._clearLive(),!e||!r)return;const n=this._resolve(r.a),o=this._resolve(r.b);if(Math.abs(n.gx-o.gx)<2&&Math.abs(n.gy-o.gy)<2)return;const a=this._mode();!1!==this._cfg().pinOnRelease&&(this.pins.push({xa:n.x,ya:n.y,xb:o.x,yb:o.y,mode:a}),this._renderPins(),null==(s=null==(t=this.ctx.history)?void 0:t.snapshot)||s.call(t,"measure")),this._fireMeasured(n,o)}clearMeasures(){var e,t;this.pins=[],this._renderPins(),null==(t=null==(e=this.ctx.history)?void 0:e.snapshot)||t.call(e,"clear measures")}getPins(){return this.pins.map(e=>({xa:e.xa,ya:e.ya,xb:e.xb,yb:e.yb,mode:"free"===e.mode?"free":"span"}))}setPins(e){this.pins=Array.isArray(e)?e.filter(e=>e&&isFinite(e.xa)&&isFinite(e.ya)&&isFinite(e.xb)&&isFinite(e.yb)).map(e=>({xa:+e.xa,ya:+e.ya,xb:+e.xb,yb:+e.yb,mode:"free"===e.mode?"free":"span"})):[],this._renderPins()}_points(e){const t=[];for(let s=0;s<e.length;s++){const i=e[s];let r,n;Array.isArray(i)?(r=+i[0],n=+i[1]):i&&"object"==typeof i?(r=+i.x,n=+i.y):(r=s,n=+i),isFinite(r)&&isFinite(n)&&t.push({x:r,y:n})}return t}_arm(){if(this.armed||!this._enabled())return;const e=this.w,t=e.dom.elGraphical;if(!t)return;this.armed=!0;const s=this.graphics.drawRect(0,0,e.layout.gridWidth,e.layout.gridHeight);s.node.setAttribute("class","apexcharts-measure-capture"),s.node.setAttribute("fill","transparent"),s.node.style.cursor="crosshair",s.node.style.pointerEvents="all",s.node.addEventListener("mousedown",this._onDown),s.node.addEventListener("touchstart",this._onDown,{passive:!1}),t.add(s),this.pane=s}_disarm(){if(this.armed=!1,this.pane){this.pane.node.removeEventListener("mousedown",this._onDown),this.pane.node.removeEventListener("touchstart",this._onDown);const e=this.pane.node;e.parentNode&&e.parentNode.removeChild(e),this.pane=null}}_clientXY(e){const t=e.touches&&e.touches[0]?e.touches[0]:e;return{cx:t.clientX,cy:t.clientY}}_gridRect(){const e=this.w.dom.baseEl.querySelector(".apexcharts-grid");return e?e.getBoundingClientRect():null}_yRange(){const e=this.w.globals,t=e.yAxisScale&&e.yAxisScale[0];return t&&isFinite(t.niceMin)&&isFinite(t.niceMax)&&t.niceMax!==t.niceMin?[t.niceMin,t.niceMax]:[e.minY,e.maxY]}_project(e,t){const s=this.w,i=this._gridRect(),r=s.layout.gridWidth,n=s.layout.gridHeight,o=e=>e<0?0:e>1?1:e,a=i?o((e-i.left)/i.width):0,h=i?o((t-i.top)/i.height):0,[d,c]=this._yRange();return{x:s.globals.minX+a*(s.globals.maxX-s.globals.minX),y:c-h*(c-d),gx:a*r,gy:h*n}}_dataToGrid(e,t){const s=this.w,i=s.layout.gridWidth,r=s.layout.gridHeight,n=s.globals.maxX-s.globals.minX||1,[o,a]=this._yRange(),h=a-o||1;return{gx:(e-s.globals.minX)/n*i,gy:r-(t-o)/h*r}}_onDown(e){if(!this.armed)return;e.preventDefault(),e.stopPropagation();const{cx:t,cy:s}=this._clientXY(e),i=this._project(t,s);this.drag={a:i,b:i};const r=this._doc();r&&(r.addEventListener("mousemove",this._onMove),r.addEventListener("mouseup",this._onUp),r.addEventListener("touchmove",this._onMove,{passive:!1}),r.addEventListener("touchend",this._onUp)),this._renderLive()}_onMove(e){if(!this.drag)return;e.cancelable&&e.preventDefault();const{cx:t,cy:s}=this._clientXY(e);this.drag.b=this._project(t,s),this._renderLive()}_onUp(e){var t,s;const i=this._doc();if(i&&(i.removeEventListener("mousemove",this._onMove),i.removeEventListener("mouseup",this._onUp),i.removeEventListener("touchmove",this._onMove),i.removeEventListener("touchend",this._onUp)),!this.drag)return;const r=this.drag.a,n=this.drag.b;if(this.drag=null,this._clearLive(),Math.abs(r.gx-n.gx)<2&&Math.abs(r.gy-n.gy)<2)return void(this.persistent||this._disarm());const o=this._mode(),a=this._resolve(r),h=this._resolve(n);!1!==this._cfg().pinOnRelease&&(this.pins.push({xa:a.x,ya:a.y,xb:h.x,yb:h.y,mode:o}),this._renderPins(),null==(s=null==(t=this.ctx.history)?void 0:t.snapshot)||s.call(t,"measure")),this._fireMeasured(a,h),this.persistent||this._disarm()}_cancelDrag(){const e=this._doc();e&&(e.removeEventListener("mousemove",this._onMove),e.removeEventListener("mouseup",this._onUp),e.removeEventListener("touchmove",this._onMove),e.removeEventListener("touchend",this._onUp)),this.drag=null,this._clearLive()}_stats(e,t){const s=t.x-e.x,i=t.y-e.y;return{dx:s,dy:i,pct:0!==e.y?i/Math.abs(e.y)*100:NaN,slope:0!==s?i/s:NaN}}_fmt(e){if(!isFinite(e))return"n/a";const t=Math.abs(e);return 0!==t&&(t<.01||t>=1e6)?e.toExponential(2):String(Math.round(100*e)/100)}_computedStyle(){if(!_.isBrowser())return null;const e=this.w.dom.elGraphical&&this.w.dom.elGraphical.node;if(!e||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(e)}catch(e){return null}}_resolveColor(e,t,s,i){if(e)return e;const r=void 0!==i?i:this._computedStyle();return(r?r.getPropertyValue(t).trim():"")||s}_colors(){const e=this._cfg().colors||{},t=this._computedStyle();return{up:this._resolveColor(e.up,"--apx-measure-up","#16a34a",t),down:this._resolveColor(e.down,"--apx-measure-down","#dc2626",t),neutral:this._resolveColor(e.neutral,"--apx-measure-neutral","#64748b",t),guide:this._resolveColor(e.guide,"--apx-measure-guide","#94a3b8",t)}}_dirColor(e){const t=this._colors();return 0===e?t.neutral:e>0?t.up:t.down}_dirClass(e){return 0===e?"apexcharts-measure-flat":e>0?"apexcharts-measure-up":"apexcharts-measure-down"}_fmtPct(e){if(!isFinite(e))return"n/a";const t=this._cfg().format&&this._cfg().format.percent;if("function"==typeof t)try{const s=t(e);if(null!=s)return String(s)}catch(e){}return(e>=0?"+":"")+this._fmt(e)+"%"}_label(e,t,s,i){const r=this._cfg().label;if("function"==typeof r){const n=r({from:{x:e.x,y:e.y},to:{x:t.x,y:t.y},dx:s.dx,dy:s.dy,percentChange:s.pct,slope:s.slope,mode:i});return Array.isArray(n)?n.map(String):[String(n)]}if("span"===i){const i=0===s.dy?"":s.dy>0?" \u2191":" \u2193",r=isFinite(s.pct)?"("+this._fmtPct(s.pct)+")":"";return[this._fmtY(s.dy)+"  "+r+i,this._fmtX(e.x)+"  to  "+this._fmtX(t.x)]}return["\u0394x "+this._fmtDx(s.dx),"\u0394y "+this._fmtY(s.dy),this._fmtPct(s.pct)]}_fmtDx(e){if("datetime"===this.w.config.xaxis.type){const t=e/864e5;return Math.round(10*t)/10+"d"}return this._fmt(e)}_fmtY(e){const t=this._cfg().format&&this._cfg().format.y;if("function"==typeof t)try{const s=t(e);if(null!=s)return String(s)}catch(e){}const s=this.w.globals.yLabelFormatters&&this.w.globals.yLabelFormatters[0];if("function"==typeof s)try{const t=s(e,{seriesIndex:0,dataPointIndex:-1,w:this.w});if(null!=t&&""!==t)return String(t)}catch(e){}return this._fmt(e)}_fmtX(e){const t=this.w,s=this._cfg().format&&this._cfg().format.x;if("function"==typeof s)try{const t=s(e);if(null!=t)return String(t)}catch(e){}if("datetime"===t.config.xaxis.type){return new Date(e).toLocaleDateString(void 0,{day:"numeric",month:"short",year:"numeric"})}const i=t.globals.xLabelFormatter;if("function"==typeof i)try{const s=i(e,{w:t});if(null!=s&&""!==s)return String(s)}catch(e){}return this._fmt(e)}_liveGroup(){const e=this.w;if(this._live&&this._live.node&&this._live.node.parentNode)return this._live;const t=this.graphics.group({class:"apexcharts-measure-live"});return t.node.style.pointerEvents="none",e.dom.elGraphical&&e.dom.elGraphical.add(t),this._live=t,t}_clearLive(){if(this._live&&this._live.node){const e=this._live.node;e.parentNode&&e.parentNode.removeChild(e)}this._live=null}_renderLive(){if(!this.drag)return;const e=this._liveGroup();for(;e.node.firstChild;)e.node.removeChild(e.node.firstChild);const t=this._resolve(this.drag.a),s=this._resolve(this.drag.b);this._drawRuler(e,t,s,!1,this._mode())}_renderPins(){const e=this.w,t=e.dom.baseEl&&e.dom.baseEl.querySelector(".apexcharts-measure-pins");if(t&&t.parentNode&&t.parentNode.removeChild(t),!this.pins.length||!e.dom.elGraphical)return;const s=this.graphics.group({class:"apexcharts-measure-pins"});s.node.style.pointerEvents="none",e.dom.elGraphical.add(s),this.pins.forEach(e=>{const t=h(a({},this._dataToGrid(e.xa,e.ya)),{x:e.xa,y:e.ya}),i=h(a({},this._dataToGrid(e.xb,e.yb)),{x:e.xb,y:e.yb});this._drawRuler(s,t,i,!0,e.mode||"span")})}_drawRuler(e,t,s,i,r){const n=this._stats(t,s),o=this.graphics.group({class:"apexcharts-measure-ruler "+this._dirClass(n.dy)+(i?" apexcharts-measure-pinned":"")});"free"===(r||this._mode())?this._drawFree(o,t,s,n):this._drawSpan(o,t,s,n),e.add(o)}_dot(e,t,s){if(!1===this._cfg().markers)return;const i=this.graphics.drawMarker(t.gx,t.gy,{pSize:4,shape:"circle",pointFillColor:s,pointFillOpacity:1,pointStrokeColor:"#fff",pointStrokeWidth:2,pointStrokeOpacity:1});e.add(i)}_readout(e,t,s,i,r,n,o){const a=this.graphics.drawRect(s,i,r,n,4);a.node.setAttribute("class","apexcharts-measure-label-bg"),a.attr({fill:"#ffffff","fill-opacity":.95,stroke:o,"stroke-width":1}),e.add(a);const h=this.graphics.drawText({x:s+9,y:i+15,text:t,textAnchor:"start",fontSize:"11px",foreColor:"#1e293b",cssClass:"apexcharts-measure-label"});e.add(h)}_drawSpan(e,t,s,i){const r=this.w,n=this._cfg(),o=r.layout.gridHeight,a=this._dirColor(i.dy),h=Math.min(t.gx,s.gx),d=Math.max(t.gx,s.gx);if(!1!==n.band){const t=this.graphics.drawRect(h,0,Math.max(0,d-h),o,0);t.node.setAttribute("class","apexcharts-measure-band"),t.attr({fill:a,"fill-opacity":.09,stroke:"none"}),e.add(t)}!1!==n.guides&&[t,s].forEach(t=>{const s=this.graphics.drawLine(t.gx,0,t.gx,o,this._colors().guide,4,1);s.node.setAttribute("class","apexcharts-measure-vline"),e.add(s)}),[t,s].forEach(t=>this._dot(e,t,a));const c=this._label(t,s,i,"span"),l=c.reduce((e,t)=>Math.max(e,t.length),0),u=Math.max(148,6.4*l),_=20+15*c.length;let p=(h+d)/2-u/2;p=Math.max(2,Math.min(p,r.layout.gridWidth-u-2)),this._readout(e,c,p,4,u,_,a)}_drawFree(e,t,s,i){const r=this._dirColor(i.dy),n=this.graphics.drawLine(t.gx,t.gy,s.gx,s.gy,r,0,2);n.node.setAttribute("class","apexcharts-measure-line"),e.add(n),[t,s].forEach(t=>this._dot(e,t,r));const o=this._label(t,s,i,"free"),a=o.reduce((e,t)=>Math.max(e,t.length),0),h=Math.max(72,6.2*a),d=16+15*o.length;let c=(t.gx+s.gx)/2+8,l=(t.gy+s.gy)/2-d/2;c=Math.max(2,Math.min(c,this.w.layout.gridWidth-h-2)),l=Math.max(2,Math.min(l,this.w.layout.gridHeight-d-2)),this._readout(e,o,c,l,h,d,r)}_fireMeasured(e,t){const s=this._stats(e,t),i={from:{x:e.x,y:e.y},to:{x:t.x,y:t.y},dx:s.dx,dy:s.dy,percentChange:s.pct,slope:s.slope},r=this.w.config.chart.events.measured;"function"==typeof r&&r(this.ctx,i),this.ctx.events.fireEvent("measured",[this.ctx,i])}_afterRender(){this._enabled()&&(this.w.interact.measureEnabled&&!this.persistent&&(this.persistent=!0),this.pins.length&&this._renderPins(),this.persistent&&!this.drag&&(this._disarm(),this._arm()))}teardown(){this._cancelDrag(),this._endSeed(!1),this._disarm();const e=this._doc();e&&this._keysBound&&(e.removeEventListener("keydown",this._onKeyDown),e.removeEventListener("keyup",this._onKeyUp)),this._keysBound=!1,this.pins=[]}}}),exports.default=d;