apexcharts/dist/features/context-menu.common.js

A JavaScript Chart Library

/*!
 * ApexCharts v6.6.1
 * (c) 2018-2026 ApexCharts
 */
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("apexcharts/core");function t(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}const n=t(e),i=n.__apex_Environment_Environment,s=n.__apex_Utils;e.registerFeatures({contextMenu:class{constructor(e,t){this.w=e,this.ctx=t,this.menu=null,this._items=[],this._focusIndex=-1,this._trigger=null,this._onContext=this._onContext.bind(this),this._onDocDown=this._onDocDown.bind(this),this._onKey=this._onKey.bind(this),this._afterRender=this._afterRender.bind(this),t.addEventListener("mounted",this._afterRender),t.addEventListener("updated",this._afterRender)}_cfg(){return this.w.config.chart.contextMenu||{}}_enabled(){return!0===this._cfg().enabled}_doc(){return this.w.dom.baseEl&&this.w.dom.baseEl.ownerDocument}_afterRender(){if(this._detachTrigger(),this.close(),!this._enabled()||!i.isBrowser())return;const e=this.w.dom.Paper&&this.w.dom.Paper.node;e&&(e.addEventListener("contextmenu",this._onContext),this._trigger=e)}_detachTrigger(){this._trigger&&(this._trigger.removeEventListener("contextmenu",this._onContext),this._trigger=null)}_onContext(e){this._enabled()&&(e.preventDefault(),this.open(e.clientX,e.clientY))}_clientToData(e,t){const n=this.w,i=n.dom.baseEl&&n.dom.baseEl.querySelector(".apexcharts-grid");if(!i)return null;const s=i.getBoundingClientRect();if(!s.width||!s.height)return null;const o=e=>e<0?0:e>1?1:e,r=o((e-s.left)/s.width),a=o((t-s.top)/s.height),l=n.globals.minX+r*(n.globals.maxX-n.globals.minX),c=n.globals.yAxisScale&&n.globals.yAxisScale[0],h=c&&isFinite(c.niceMin)?c.niceMin:n.globals.minY,u=c&&isFinite(c.niceMax)?c.niceMax:n.globals.maxY;return{x:l,y:u-a*(u-h)}}_resolveItems(e){const t=this._cfg(),n=Array.isArray(t.items)&&t.items.length?t.items:["annotate","xline","yline","measure"],i=t.labels||{},s=[];return n.forEach(t=>{if("string"==typeof t){if("annotate"===t)s.push({id:"annotate",label:i.annotate||"Add note here",run:()=>this._annotate(e)});else if("xline"===t)s.push({id:"xline",label:i.xline||"Annotate here",run:()=>this._line(e,"x")});else if("yline"===t)s.push({id:"yline",label:i.yline||"Mark this level",run:()=>this._line(e,"y")});else if("measure"===t){const t=this.ctx.measure;t&&this.w.config.chart.measure&&this.w.config.chart.measure.enabled&&s.push({id:"measure",label:i.measure||"Measure from here",run:()=>t.seedFromClient(e.clientX,e.clientY)})}}else t&&"object"==typeof t&&"function"==typeof t.onClick&&s.push({id:t.id||"custom",label:t.label||"Action",run:()=>t.onClick(this.ctx,e)})}),s}_annotate(e){if(null==e.x||null==e.y)return;const t=this._cfg(),n=this.ctx.ink;n&&"function"==typeof n.createAt?n.createAt(e.x,e.y,{text:t.noteText||"Note"}):this.ctx.addPointAnnotation({x:e.x,y:e.y,marker:{size:5},label:{text:t.noteText||"Note",style:{background:"#fff",color:"#334155"}}},!0)}_line(e,t){const n=this._cfg().line||{},i="x"===t?e.x:e.y;if(null==i)return;const o=this.ctx.ink;if(o&&"function"==typeof o.createLineAt)return void o.createLineAt(t,i,{text:n.text,strokeDashArray:n.strokeDashArray,color:n.color});const r={strokeDashArray:null!=n.strokeDashArray?n.strokeDashArray:4};n.text&&(r.label={text:n.text}),n.color&&(r.borderColor=n.color,r.label=s.extend(r.label||{},{borderColor:n.color})),"x"===t?this.ctx.addXaxisAnnotation(s.extend(r,{x:i}),!0):this.ctx.addYaxisAnnotation(s.extend(r,{y:i}),!0)}open(e,t){this.close();const n=this.w,i=n.dom.elWrap,s=this._doc();if(!i||!s)return;const o=this._clientToData(e,t),r=n.globals,a={x:o?o.x:null,y:o?o.y:null,seriesIndex:r.capturedSeriesIndex>=0?r.capturedSeriesIndex:null,dataPointIndex:r.capturedDataPointIndex>=0?r.capturedDataPointIndex:null,clientX:e,clientY:t},l=this._resolveItems(a);if(!l.length)return;this._items=l;const c=s.createElement("div");c.className="apexcharts-context-menu",c.setAttribute("role","menu"),c.style.position="absolute",c.style.visibility="hidden",l.forEach((e,t)=>{const n=s.createElement("button");n.type="button",n.className="apexcharts-context-menu-item",n.setAttribute("role","menuitem"),n.tabIndex=-1,n.textContent=e.label,n.addEventListener("click",e=>{e.stopPropagation(),this._activate(t)}),n.addEventListener("mouseenter",()=>this._focus(t)),c.appendChild(n)}),i.appendChild(c),this.menu=c;const h=i.getBoundingClientRect();let u=e-h.left,d=t-h.top;const x=c.offsetWidth,m=c.offsetHeight,_=Math.max(0,i.clientWidth-x),f=Math.max(0,i.clientHeight-m);u>_&&(u=_),d>f&&(d=f),c.style.left=Math.max(0,u)+"px",c.style.top=Math.max(0,d)+"px",c.style.visibility="visible",s.addEventListener("mousedown",this._onDocDown,!0),s.addEventListener("keydown",this._onKey,!0),this._focus(0)}_focus(e){if(!this.menu)return;const t=this.menu.querySelectorAll(".apexcharts-context-menu-item");this._focusIndex>=0&&t[this._focusIndex]&&t[this._focusIndex].classList.remove("apexcharts-context-menu-item--active"),this._focusIndex=e,t[e]&&(t[e].classList.add("apexcharts-context-menu-item--active"),"function"==typeof t[e].focus&&t[e].focus())}_activate(e){const t=this._items[e];this.close(),t&&t.run()}_onDocDown(e){this.menu&&this.menu.contains(e.target)||this.close()}_onKey(e){this.menu&&this._items.length&&("Escape"===e.key?(e.preventDefault(),this.close()):"ArrowDown"===e.key?(e.preventDefault(),this._focus((this._focusIndex+1)%this._items.length)):"ArrowUp"===e.key?(e.preventDefault(),this._focus((this._focusIndex-1+this._items.length)%this._items.length)):"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this._activate(this._focusIndex<0?0:this._focusIndex)))}close(){const e=this._doc();e&&(e.removeEventListener("mousedown",this._onDocDown,!0),e.removeEventListener("keydown",this._onKey,!0)),this.menu&&this.menu.parentNode&&this.menu.parentNode.removeChild(this.menu),this.menu=null,this._items=[],this._focusIndex=-1}teardown(){this.close(),this._detachTrigger()}}}),exports.default=e;