apexcharts/dist/features/keyboard.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).ApexKeyboard={})}(this,function(t){"use strict";var e=Object.defineProperty,i=Object.defineProperties,s=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,n=(t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s,l=(t,e)=>{for(var i in e||(e={}))a.call(e,i)&&n(t,i,e[i]);if(o)for(var i of o(e))r.call(e,i)&&n(t,i,e[i]);return t};const h=globalThis.ApexCharts,c=globalThis.ApexCharts.__internals.__apex_Graphics,d=globalThis.ApexCharts.__internals.__apex_Utils;h.registerFeatures({keyboardNavigation:class{constructor(t,e){this.w=t,this.ctx=e,this.seriesIndex=0,this.dataPointIndex=0,this.active=!1,this._tooltipDismissed=!1,this._focusedEl=null,this._hoveredBarEl=null,this._enlargedScatterMarker=null,this._onKeyDown=this._onKeyDown.bind(this),this._onFocus=this._onFocus.bind(this),this._onBlur=this._onBlur.bind(this),this._onLegendClick=this._onLegendClick.bind(this),this._onPointerDown=this._onPointerDown.bind(this),this._lastPointerDownAt=0}init(){const t=this.w.dom.Paper.node;t&&(t.setAttribute("tabindex","0"),t.addEventListener("focus",this._onFocus),t.addEventListener("blur",this._onBlur),t.addEventListener("mousedown",this._onPointerDown,{capture:!0}),t.addEventListener("pointerdown",this._onPointerDown,{capture:!0}),t.addEventListener("touchstart",this._onPointerDown,{capture:!0,passive:!0}),t.addEventListener("keydown",this._onKeyDown,{passive:!1}),this.ctx.events.addEventListener("legendClick",this._onLegendClick))}destroy(){const t=this.w,e=t.dom.Paper&&t.dom.Paper.node;this.ctx.events.removeEventListener("legendClick",this._onLegendClick),e&&(e.removeEventListener("focus",this._onFocus),e.removeEventListener("blur",this._onBlur),e.removeEventListener("keydown",this._onKeyDown),e.removeEventListener("mousedown",this._onPointerDown,{capture:!0}),e.removeEventListener("pointerdown",this._onPointerDown,{capture:!0}),e.removeEventListener("touchstart",this._onPointerDown,{capture:!0}))}_onPointerDown(){this._lastPointerDownAt=Date.now()}handleKey(t){}_onFocus(){this._isNavEnabled()&&(Date.now()-this._lastPointerDownAt<100||(this.active=!0,this._clampCursor(),this._snapToVisibleRange(),this._showCurrentPoint()))}_onBlur(){this.active=!1,this._tooltipDismissed=!1,this._hideFocus()}_onLegendClick(){this.active&&(this.active=!1,this._hideFocus())}_onKeyDown(t){var e,i,s;if(this._isNavEnabled()&&this.active){if(t.shiftKey&&("ArrowRight"===t.key||"ArrowLeft"===t.key)&&this._canPan())return t.preventDefault(),void this._panBy("ArrowRight"===t.key?1:-1);switch(t.key){case"ArrowRight":t.preventDefault(),this._move(0,1);break;case"ArrowLeft":t.preventDefault(),this._move(0,-1);break;case"ArrowUp":t.preventDefault(),this._move(-1,0);break;case"ArrowDown":t.preventDefault(),this._move(1,0);break;case"Home":t.preventDefault(),this.dataPointIndex=0,this._skipNullForward(),this._showCurrentPoint();break;case"End":t.preventDefault(),this.dataPointIndex=this._getDataPointCount(this.seriesIndex)-1,this._skipNullBackward(),this._showCurrentPoint();break;case"Enter":case" ":t.preventDefault(),this._fireClick();break;case"+":case"=":this._canZoom()&&(t.preventDefault(),null==(e=this.ctx.toolbar)||e.handleZoomIn(),this._announce("Zoomed in"));break;case"-":case"_":this._canZoom()&&(t.preventDefault(),null==(i=this.ctx.toolbar)||i.handleZoomOut(),this._announce("Zoomed out"));break;case"0":this._canZoom()&&this.w.interact.zoomed&&(t.preventDefault(),null==(s=this.ctx.toolbar)||s.handleZoomReset(),this._announce("Zoom reset"));break;case"Escape":t.preventDefault(),this._tooltipDismissed?(this.active=!1,this._tooltipDismissed=!1,this._hideFocus()):(this._tooltipDismissed=!0,this._hideFocus())}}}_canZoom(){const t=this.w;return Boolean(t.globals.axisCharts&&t.config.chart.zoom&&t.config.chart.zoom.enabled)}_canPan(){return this._canZoom()}_panBy(t){const e=this.w,i=this.ctx.toolbar;if(!i)return;const s=Number(e.globals.minX),o=Number(e.globals.maxX);if(!isFinite(s)||!isFinite(o)||s===o)return;const a=.1*(o-s)*t;i.zoomUpdateOptions(s+a,o+a),this._announce(t>0?"Panned right":"Panned left")}_move(t,e){const i=this.w,s=i.config.chart.accessibility.keyboard.navigation.wrapAround;if(0!==t){const e=this.w.globals.tooltip;if(e&&e.tConfig&&e.tConfig.shared){const t=this.dataPointIndex;if(e.tooltipUtil&&e.tooltipUtil.isXoverlap(t)&&e.tooltipUtil.isInitialSeriesSameLen())return}const o=this._getSeriesCount();let a=this.seriesIndex+t,r=0;for(;r<o&&(a<0&&(a=s?o-1:0),a>=o&&(a=s?0:o-1),i.globals.collapsedSeriesIndices.includes(a));)a+=t,r++;this.seriesIndex=a;const n=this._getDataPointCount(a);this.dataPointIndex>=n&&(this.dataPointIndex=n-1)}if(0!==e){const t=this._getDataPointCount(this.seriesIndex);let i=this.dataPointIndex+e;i<0&&(i=s?t-1:0),i>=t&&(i=s?0:t-1),this.dataPointIndex=i,e>0?this._skipNullForward():this._skipNullBackward(),this._isDataPointVisible(this.seriesIndex,this.dataPointIndex)||this._snapToVisibleRangeInDirection(e)}this._showCurrentPoint()}_skipNullForward(){const t=this.w,e=this.seriesIndex,i=this._getDataPointCount(e);let s=this.dataPointIndex,o=0;if(Array.isArray(t.seriesData.series[e])){for(;o<i&&null===t.seriesData.series[e][s];)s=(s+1)%i,o++;this.dataPointIndex=s}}_skipNullBackward(){const t=this.w,e=this.seriesIndex,i=this._getDataPointCount(e);let s=this.dataPointIndex,o=0;if(Array.isArray(t.seriesData.series[e])){for(;o<i&&null===t.seriesData.series[e][s];)s=(s-1+i)%i,o++;this.dataPointIndex=s}}_showCurrentPoint(){const{seriesIndex:t,dataPointIndex:e}=this,i=this.w,s=i.globals.tooltip;s&&s.ttItems&&(i.interact.capturedSeriesIndex=t,i.interact.capturedDataPointIndex=e,this._applyFocusClass(t,e),this._showTooltip(t,e,s))}_hideFocus(){const t=this.w,e=t.globals.tooltip;if(this._removeFocusClass(),this._leaveHoveredBar(),!e)return;e.marker&&e.marker.resetPointsSize(),this._enlargedScatterMarker=null;const i=e.getElTooltip();i&&(i.classList.remove("apexcharts-active"),t.config.chart.accessibility.enabled&&t.config.chart.accessibility.announcements.enabled&&i.setAttribute("aria-hidden","true")),t.dom.baseEl.classList.remove("apexcharts-tooltip-active");const s=e.getElXCrosshairs();s&&s.classList.remove("apexcharts-active")}_showTooltip(t,e,i){const s=this.w,o=s.config.chart.type,a=i.getElTooltip();if(!a)return;const r=i.getCachedDimensions();i.tooltipRect={x:0,y:0,ttWidth:r.ttWidth||0,ttHeight:r.ttHeight||0},this._setSyntheticEvent(t,e,i),s.dom.baseEl.classList.add("apexcharts-tooltip-active"),a.classList.add("apexcharts-active"),s.config.chart.accessibility.enabled&&s.config.chart.accessibility.announcements.enabled&&a.removeAttribute("aria-hidden"),"pie"===o||"donut"===o||"polarArea"===o?this._showTooltipNonAxis(t,e,i,a):"radialBar"===o?this._showTooltipRadialBar(t,e,i,a):"heatmap"===o||"treemap"===o?this._showTooltipHeatTree(t,e,i,a,o):"bar"===o||"candlestick"===o||"boxPlot"===o||"violin"===o||"rangeBar"===o?this._showTooltipBar(t,e,i):this._showTooltipAxisLine(t,e,i)}_setSyntheticEvent(t,e,i){const s=this.w,o=s.config.chart.type;let a=0,r=0;const n=this._getFocusableElement(t,e);if(n){const t=n.getBoundingClientRect();a=t.left+t.width/2,r=t.top+t.height/2}else if(s.globals.pointsArray&&s.globals.pointsArray[t]&&s.globals.pointsArray[t][e]){const o=s.globals.pointsArray[t][e],n=i.getElGrid&&i.getElGrid();if(n){const t=n.getBoundingClientRect();a=t.left+(o[0]||0),r=t.top+(o[1]||0)}}else{const t=s.dom.Paper&&s.dom.Paper.node;if(t){const e=t.getBoundingClientRect();a=e.left+e.width/2,r=e.top+e.height/2}}if(("line"===o||"area"===o||"rangeArea"===o||"scatter"===o||"bubble"===o||"radar"===o)&&s.globals.pointsArray&&s.globals.pointsArray[t]&&s.globals.pointsArray[t][e]){const o=s.globals.pointsArray[t][e],n=i.getElGrid&&i.getElGrid();if(n){const t=n.getBoundingClientRect();a=t.left+(o[0]||0),r=t.top+(o[1]||0)}}i.e={type:"mousemove",clientX:a,clientY:r}}_showTooltipBar(t,e,o){var a,r,n,h;const d=this.w,u=o.tConfig.shared&&(o.tooltipUtil.isXoverlap(e)||d.globals.isBarHorizontal)&&o.tooltipUtil.isInitialSeriesSameLen(),p=null==(h=null==(n=null==(r=null==(a=d.rangeData.seriesRange)?void 0:a[t])?void 0:r[e])?void 0:n.y)?void 0:h[0];var g;o.tooltipLabels.drawSeriesTexts((g=l(l({ttItems:o.ttItems,i:t,j:e},void 0!==(null==p?void 0:p.y1)&&{y1:p.y1}),void 0!==(null==p?void 0:p.y2)&&{y2:p.y2}),i(g,s({shared:u}))));const b=`.apexcharts-series[data\\:realIndex='${t}']`,_=d.dom.Paper.findOne(`${b} path[j='${e}'], ${b} circle[j='${e}'], ${b} rect[j='${e}']`);if(_){this._leaveHoveredBar();new c(this.w,this.ctx).pathMouseEnter(_,null),this._hoveredBarEl=_}if(d.globals.isBarHorizontal){const t=_&&_.node;if(t){const e=d.dom.elWrap.getBoundingClientRect(),i=t.getBoundingClientRect(),s=i.left-e.left,a=i.top-e.top,r=i.height,n=i.width,l=o.tooltipRect.ttWidth||0,h=a+r/2-(o.tooltipRect.ttHeight||0)/2;let c=s+n;s<(o.xyRatios&&null!=o.xyRatios.baseLineInvertedY?o.xyRatios.baseLineInvertedY:e.width/2)&&(c=s-l);const u=o.getElTooltip();u&&(u.style.left=c+"px",u.style.top=h+"px")}}else o.tooltipPosition.moveStickyTooltipOverBars(e,t)}_showTooltipAxisLine(t,e,i){const s=this.w,o=s.config.chart.type,a=i.tConfig.shared&&i.tooltipUtil.isXoverlap(e)&&i.tooltipUtil.isInitialSeriesSameLen();i.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:t,j:e,shared:a});const r="scatter"===o||"bubble"===o,n=s.globals.markers.largestSize>0&&!s.globals.markers.batched;r?this._showScatterBubblePoint(t,e,i):n?a?i.marker.enlargePoints(e):i.tooltipPosition.moveDynamicPointOnHover(e,t):a?i.tooltipPosition.moveDynamicPointsOnHover(e):i.tooltipPosition.moveDynamicPointOnHover(e,t)}_showScatterBubblePoint(t,e,i){const s=this.w.dom.baseEl;this._enlargedScatterMarker&&(i.marker.oldPointSize(this._enlargedScatterMarker),this._enlargedScatterMarker=null);const o=s.querySelector(`.apexcharts-series[data\\:realIndex='${t}']`);if(!o)return;const a=o.querySelector(`.apexcharts-marker[rel='${e}']`);a&&(i.marker.enlargeCurrentPoint(e,a),this._enlargedScatterMarker=a)}_showTooltipNonAxis(t,e,i,s){const o=this.w;i.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:e,shared:!1});const a=s.getBoundingClientRect(),r=a.width||i.tooltipRect.ttWidth||0,n=a.height||i.tooltipRect.ttHeight||0,l=o.dom.baseEl.querySelector(`.apexcharts-pie-area[j='${e}']`),h=i.getSliceAnchor(l);h&&(s.style.left=h.x-r/2+"px",s.style.top=h.y-n-10+"px")}_showTooltipRadialBar(t,e,i,s){var o;const a=this.w;i.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:t,shared:!1});const{ttWidth:r=0,ttHeight:n=0}=i.getCachedDimensions(),l=a.dom.baseEl.querySelector(`.apexcharts-radialbar-series[data\\:realIndex='${t}'] path`);if(l){const e=parseFloat(null!=(o=l.getAttribute("data:angle"))?o:"")||0,i=(a.config.plotOptions.radialBar.startAngle||0)+e/2,h=a.layout.gridWidth/2,c=a.layout.gridHeight/2,u=a.globals.radialSize||Math.min(a.layout.gridWidth,a.layout.gridHeight)/2,p=a.seriesData.series.length,g=u/Math.max(p,1),b=u-t*g,_=(b+(b-g))/2,f=d.polarToCartesian(h,c,_,i),m=f.x+(a.layout.translateX||0),v=f.y+(a.layout.translateY||0);s.style.left=m-r/2+"px",s.style.top=v-n-10+"px"}}_showTooltipHeatTree(t,e,i,s,o){var a,r;const n=this.w;i.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:t,j:e,shared:!1});const l=s.getBoundingClientRect(),h=l.width||i.tooltipRect.ttWidth||0,c=l.height||i.tooltipRect.ttHeight||0,d="heatmap"===o?"apexcharts-heatmap-rect":"apexcharts-treemap-rect",u=n.dom.baseEl.querySelector(`.${d}[i='${t}'][j='${e}']`);if(u){const t=n.dom.elWrap.getBoundingClientRect(),e=u.getBoundingClientRect(),o=e.left-t.left,l=e.top-t.top,d=e.width,p=e.height,g=parseFloat(null!=(a=u.getAttribute("cx"))?a:""),b=parseFloat(null!=(r=u.getAttribute("width"))?r:"");i.tooltipPosition.moveXCrosshairs(g+b/2);let _=o+d+h/2;const f=l+p/2-c/2;o+d>n.layout.gridWidth/2&&(_=o-h/2),s.style.left=_+"px",s.style.top=f+"px"}}_applyFocusClass(t,e){this._removeFocusClass();const i=this._getFocusableElement(t,e)||this._getBatchedFocusEl(t);if(i){i.classList.add("apexcharts-keyboard-focused"),i.setAttribute("role","img");const s=this._buildPointLabel(t,e);s&&i.setAttribute("aria-label",s),this._focusedEl=i}}_getBatchedFocusEl(t){return this.w.globals.markers.batched?this.w.dom.baseEl.querySelector(`.apexcharts-series[data\\:realIndex='${t}'] .apexcharts-series-markers path`):null}_removeFocusClass(){this._focusedEl&&(this._focusedEl.classList.remove("apexcharts-keyboard-focused"),this._focusedEl.removeAttribute("role"),this._focusedEl.removeAttribute("aria-label"),this._focusedEl=null)}_buildPointLabel(t,e){var i,s,o,a,r,n,l,h;const c=this.w,d=c.config.chart.type,u=c.seriesData.seriesNames||[],p=c.seriesData.series||[];if("pie"===d||"donut"===d||"polarArea"===d){const t=null!=(s=(null==(i=c.labelData)?void 0:i.labels)&&c.labelData.labels[e])?s:"",o=Array.isArray(p)?p[e]:"";return t?`${t}: ${o}`:`${o}`}if("radialBar"===d){return`${u[t]||`Series ${t+1}`}: ${Array.isArray(p)?p[t]:""}`}const g=u[t]||`Series ${t+1}`,b=(Array.isArray(p[t])?p[t]:[])[e];let _=null==b?"":String(b);const f=null==(a=null==(o=c.formatters)?void 0:o.yLabelFormatters)?void 0:a[t];if("function"==typeof f)try{_=f(b,{seriesIndex:t,dataPointIndex:e,w:c})}catch(t){}let m="";const v=null==(r=c.labelData)?void 0:r.categoryLabels,x=null==(l=null==(n=c.seriesData)?void 0:n.seriesX)?void 0:l[t];if(Array.isArray(v)&&null!=v[e])m=String(v[e]);else if(Array.isArray(x)&&null!=x[e]){const i=null==(h=c.formatters)?void 0:h.xLabelFormatter;if("function"==typeof i)try{m=String(i(x[e],{seriesIndex:t,dataPointIndex:e,w:c}))}catch(t){m=String(x[e])}else m=String(x[e])}return m?`${g}: ${_}, ${m}`:`${g}: ${_}`}_leaveHoveredBar(){if(this._hoveredBarEl){new c(this.w,this.ctx).pathMouseLeave(this._hoveredBarEl,null),this._hoveredBarEl=null}}_getFocusableElement(t,e){const i=this.w,s=i.config.chart.type,o=i.dom.baseEl;if("pie"===s||"donut"===s||"polarArea"===s)return o.querySelector(`.apexcharts-pie-area[j='${e}']`);if("heatmap"===s)return o.querySelector(`.apexcharts-heatmap-rect[i='${t}'][j='${e}']`);if("treemap"===s)return o.querySelector(`.apexcharts-treemap-rect[i='${t}'][j='${e}']`);if("radialBar"===s)return o.querySelector(`.apexcharts-radialbar-series[data\\:realIndex='${t}'] path`);if("bar"===s||"candlestick"===s||"boxPlot"===s||"violin"===s||"rangeBar"===s)return o.querySelector(`.apexcharts-series[data\\:realIndex='${t}'] path[j='${e}']`);return o.querySelector(`.apexcharts-series[data\\:realIndex='${t}'] .apexcharts-marker[rel='${e}']`)||null}_fireClick(){const t=this.w.globals.tooltip;if(!t)return;t.markerClick({type:"mouseup",clientX:0,clientY:0},this.seriesIndex,this.dataPointIndex)}_isNavEnabled(){const t=this.w.config.chart.accessibility;return t.enabled&&t.keyboard.enabled&&t.keyboard.navigation.enabled}_getSeriesCount(){const t=this.w,e=t.config.chart.type;return"pie"===e||"donut"===e||"polarArea"===e?1:t.seriesData.series.length}_getDataPointCount(t){const e=this.w,i=e.config.chart.type;if("pie"===i||"donut"===i||"polarArea"===i)return e.seriesData.series.length;const s=e.seriesData.series;return s[t]&&Array.isArray(s[t])?s[t].length:0}_clampCursor(){const t=this._getSeriesCount();this.seriesIndex>=t&&(this.seriesIndex=t-1),this.seriesIndex<0&&(this.seriesIndex=0);const e=this._getDataPointCount(this.seriesIndex);this.dataPointIndex>=e&&(this.dataPointIndex=e-1),this.dataPointIndex<0&&(this.dataPointIndex=0)}_snapToVisibleRange(){const t=this.w,e=t.globals,i=this.seriesIndex;if(!t.interact.zoomed)return;const s=t.seriesData.seriesX&&t.seriesData.seriesX[i];if(!s||!s.length)return;const o=e.minX,a=e.maxX;if(void 0===o||void 0===a)return;const r=s[this.dataPointIndex];if(r>=o&&r<=a)return;const n=s.length;for(let t=0;t<n;t++)if(s[t]>=o&&s[t]<=a)return void(this.dataPointIndex=t)}_snapToVisibleRangeInDirection(t){const e=this.w,i=e.globals,s=this.seriesIndex,o=e.seriesData.seriesX&&e.seriesData.seriesX[s];if(!o||!o.length)return;const a=i.minX,r=i.maxX;if(void 0===a||void 0===r)return;const n=o.length;if(t>=0){for(let t=0;t<n;t++)if(o[t]>=a&&o[t]<=r)return void(this.dataPointIndex=t)}else for(let t=n-1;t>=0;t--)if(o[t]>=a&&o[t]<=r)return void(this.dataPointIndex=t)}_isDataPointVisible(t,e){const i=this.w,s=i.globals;if(!i.interact.zoomed)return!0;const o=i.seriesData.seriesX&&i.seriesData.seriesX[t];if(!o)return!0;const a=o[e];return void 0===a||a>=s.minX&&a<=s.maxX}_announce(t){const e=this.w;if(!e.config.chart.accessibility.announcements.enabled)return;const i=e.dom.baseEl;if(!i)return;const s=i.querySelector(".apexcharts-sr-status");s&&(s.textContent="",setTimeout(()=>{s.textContent=t},0))}}}),t.default=h,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});