apexcharts/dist/features/keyboard.common.js

A JavaScript Chart Library

/*!
 * ApexCharts v5.10.6
 * (c) 2018-2026 ApexCharts
 */
"use strict";var t=Object.defineProperty,e=Object.defineProperties,i=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,r=(e,i,s)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[i]=s,n=(t,e)=>{for(var i in e||(e={}))a.call(e,i)&&r(t,i,e[i]);if(s)for(var i of s(e))o.call(e,i)&&r(t,i,e[i]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("apexcharts/core");function c(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t)for(const i in t)if("default"!==i){const s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,s.get?s:{enumerable:!0,get:()=>t[i]})}return e.default=t,Object.freeze(e)}const h=c(l),d=h.__apex_Graphics,p=h.__apex_Utils;l.registerFeatures({keyboardNavigation:class{constructor(t,e){this.w=t,this.ctx=e,this.seriesIndex=0,this.dataPointIndex=0,this.active=!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)}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("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;e&&(e.removeEventListener("focus",this._onFocus),e.removeEventListener("blur",this._onBlur),e.removeEventListener("keydown",this._onKeyDown),this.ctx.events.removeEventListener("legendClick",this._onLegendClick))}handleKey(t){}_onFocus(){this._isNavEnabled()&&(this.active=!0,this._clampCursor(),this._snapToVisibleRange(),this._showCurrentPoint())}_onBlur(){this.active=!1,this._hideFocus()}_onLegendClick(){this.active&&(this.active=!1,this._hideFocus())}_onKeyDown(t){if(this._isNavEnabled()&&this.active)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"Escape":t.preventDefault(),this.active=!1,this._hideFocus()}}_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 a=this._getSeriesCount();let o=this.seriesIndex+t,r=0;for(;r<a&&(o<0&&(o=s?a-1:0),o>=a&&(o=s?0:a-1),i.globals.collapsedSeriesIndices.includes(o));)o+=t,r++;this.seriesIndex=o;const n=this._getDataPointCount(o);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,a=0;if(Array.isArray(t.seriesData.series[e])){for(;a<i&&null===t.seriesData.series[e][s];)s=(s+1)%i,a++;this.dataPointIndex=s}}_skipNullBackward(){const t=this.w,e=this.seriesIndex,i=this._getDataPointCount(e);let s=this.dataPointIndex,a=0;if(Array.isArray(t.seriesData.series[e])){for(;a<i&&null===t.seriesData.series[e][s];)s=(s-1+i)%i,a++;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,a=s.config.chart.type,o=i.getElTooltip();if(!o)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"),o.classList.add("apexcharts-active"),s.config.chart.accessibility.enabled&&s.config.chart.accessibility.announcements.enabled&&o.removeAttribute("aria-hidden"),"pie"===a||"donut"===a||"polarArea"===a?this._showTooltipNonAxis(t,e,i,o):"radialBar"===a?this._showTooltipRadialBar(t,e,i,o):"heatmap"===a||"treemap"===a?this._showTooltipHeatTree(t,e,i,o,a):"bar"===a||"candlestick"===a||"boxPlot"===a||"rangeBar"===a?this._showTooltipBar(t,e,i):this._showTooltipAxisLine(t,e,i)}_setSyntheticEvent(t,e,i){const s=this.w,a=s.config.chart.type;let o=0,r=0;const n=this._getFocusableElement(t,e);if(n){const t=n.getBoundingClientRect();o=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 a=s.globals.pointsArray[t][e],n=i.getElGrid&&i.getElGrid();if(n){const t=n.getBoundingClientRect();o=t.left+(a[0]||0),r=t.top+(a[1]||0)}}else{const t=s.dom.Paper&&s.dom.Paper.node;if(t){const e=t.getBoundingClientRect();o=e.left+e.width/2,r=e.top+e.height/2}}if(("line"===a||"area"===a||"rangeArea"===a||"scatter"===a||"bubble"===a||"radar"===a)&&s.globals.pointsArray&&s.globals.pointsArray[t]&&s.globals.pointsArray[t][e]){const a=s.globals.pointsArray[t][e],n=i.getElGrid&&i.getElGrid();if(n){const t=n.getBoundingClientRect();o=t.left+(a[0]||0),r=t.top+(a[1]||0)}}i.e={type:"mousemove",clientX:o,clientY:r}}_showTooltipBar(t,s,a){var o,r,l,c;const h=this.w,p=a.tConfig.shared&&(a.tooltipUtil.isXoverlap(s)||h.globals.isBarHorizontal)&&a.tooltipUtil.isInitialSeriesSameLen(),u=null==(c=null==(l=null==(r=null==(o=h.rangeData.seriesRange)?void 0:o[t])?void 0:r[s])?void 0:l.y)?void 0:c[0];var g;a.tooltipLabels.drawSeriesTexts((g=n(n({ttItems:a.ttItems,i:t,j:s},void 0!==(null==u?void 0:u.y1)&&{y1:u.y1}),void 0!==(null==u?void 0:u.y2)&&{y2:u.y2}),e(g,i({shared:p}))));const b=`.apexcharts-series[data\\:realIndex='${t}']`,f=h.dom.Paper.findOne(`${b} path[j='${s}'], ${b} circle[j='${s}'], ${b} rect[j='${s}']`);if(f){this._leaveHoveredBar();new d(this.w,this.ctx).pathMouseEnter(f,null),this._hoveredBarEl=f}if(h.globals.isBarHorizontal){const t=f&&f.node;if(t){const e=h.dom.elWrap.getBoundingClientRect(),i=t.getBoundingClientRect(),s=i.left-e.left,o=i.top-e.top,r=i.height,n=i.width,l=a.tooltipRect.ttWidth||0,c=o+r/2-(a.tooltipRect.ttHeight||0)/2;let d=s+n;s<(a.xyRatios&&null!=a.xyRatios.baseLineInvertedY?a.xyRatios.baseLineInvertedY:e.width/2)&&(d=s-l);const p=a.getElTooltip();p&&(p.style.left=d+"px",p.style.top=c+"px")}}else a.tooltipPosition.moveStickyTooltipOverBars(s,t)}_showTooltipAxisLine(t,e,i){const s=this.w,a=s.config.chart.type,o=i.tConfig.shared&&i.tooltipUtil.isXoverlap(e)&&i.tooltipUtil.isInitialSeriesSameLen();i.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:t,j:e,shared:o});const r="scatter"===a||"bubble"===a,n=s.globals.markers.largestSize>0;r?this._showScatterBubblePoint(t,e,i):n?o?i.marker.enlargePoints(e):i.tooltipPosition.moveDynamicPointOnHover(e,t):o?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 a=s.querySelector(`.apexcharts-series[data\\:realIndex='${t}']`);if(!a)return;const o=a.querySelector(`.apexcharts-marker[rel='${e}']`);o&&(i.marker.enlargeCurrentPoint(e,o),this._enlargedScatterMarker=o)}_showTooltipNonAxis(t,e,i,s){var a,o;const r=this.w;i.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:e,shared:!1});const n=s.getBoundingClientRect(),l=n.width||i.tooltipRect.ttWidth||0,c=n.height||i.tooltipRect.ttHeight||0,h=r.dom.baseEl.querySelector(`.apexcharts-pie-area[j='${e}']`);if(h){const t=parseFloat(null!=(a=h.getAttribute("data:cx"))?a:""),e=parseFloat(null!=(o=h.getAttribute("data:cy"))?o:"");if(!isNaN(t)&&!isNaN(e)){const i=r.dom.Paper.node.getBoundingClientRect(),a=r.dom.elWrap.getBoundingClientRect(),o=i.left-a.left,n=i.top-a.top;s.style.left=o+t-l/2+"px",s.style.top=n+e-c-10+"px"}}}_showTooltipRadialBar(t,e,i,s){var a;const o=this.w;i.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:t,shared:!1});const{ttWidth:r=0,ttHeight:n=0}=i.getCachedDimensions(),l=o.dom.baseEl.querySelector(`.apexcharts-radialbar-series[data\\:realIndex='${t}'] path`);if(l){const e=parseFloat(null!=(a=l.getAttribute("data:angle"))?a:"")||0,i=(o.config.plotOptions.radialBar.startAngle||0)+e/2,c=o.layout.gridWidth/2,h=o.layout.gridHeight/2,d=o.globals.radialSize||Math.min(o.layout.gridWidth,o.layout.gridHeight)/2,u=o.seriesData.series.length,g=d/Math.max(u,1),b=d-t*g,f=(b+(b-g))/2,_=p.polarToCartesian(c,h,f,i),v=_.x+(o.layout.translateX||0),x=_.y+(o.layout.translateY||0);s.style.left=v-r/2+"px",s.style.top=x-n-10+"px"}}_showTooltipHeatTree(t,e,i,s,a){var o,r;const n=this.w;i.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:t,j:e,shared:!1});const l=s.getBoundingClientRect(),c=l.width||i.tooltipRect.ttWidth||0,h=l.height||i.tooltipRect.ttHeight||0,d="heatmap"===a?"apexcharts-heatmap-rect":"apexcharts-treemap-rect",p=n.dom.baseEl.querySelector(`.${d}[i='${t}'][j='${e}']`);if(p){const t=n.dom.elWrap.getBoundingClientRect(),e=p.getBoundingClientRect(),a=e.left-t.left,l=e.top-t.top,d=e.width,u=e.height,g=parseFloat(null!=(o=p.getAttribute("cx"))?o:""),b=parseFloat(null!=(r=p.getAttribute("width"))?r:"");i.tooltipPosition.moveXCrosshairs(g+b/2);let f=a+d+c/2;const _=l+u/2-h/2;a+d>n.layout.gridWidth/2&&(f=a-c/2),s.style.left=f+"px",s.style.top=_+"px"}}_applyFocusClass(t,e){this._removeFocusClass();const i=this._getFocusableElement(t,e);i&&(i.classList.add("apexcharts-keyboard-focused"),this._focusedEl=i)}_removeFocusClass(){this._focusedEl&&(this._focusedEl.classList.remove("apexcharts-keyboard-focused"),this._focusedEl=null)}_leaveHoveredBar(){if(this._hoveredBarEl){new d(this.w,this.ctx).pathMouseLeave(this._hoveredBarEl,null),this._hoveredBarEl=null}}_getFocusableElement(t,e){const i=this.w,s=i.config.chart.type,a=i.dom.baseEl;if("pie"===s||"donut"===s||"polarArea"===s)return a.querySelector(`.apexcharts-pie-area[j='${e}']`);if("heatmap"===s)return a.querySelector(`.apexcharts-heatmap-rect[i='${t}'][j='${e}']`);if("treemap"===s)return a.querySelector(`.apexcharts-treemap-rect[i='${t}'][j='${e}']`);if("radialBar"===s)return a.querySelector(`.apexcharts-radialbar-series[data\\:realIndex='${t}'] path`);if("bar"===s||"candlestick"===s||"boxPlot"===s||"rangeBar"===s)return a.querySelector(`.apexcharts-series[data\\:realIndex='${t}'] path[j='${e}']`);return a.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 a=e.minX,o=e.maxX;if(void 0===a||void 0===o)return;const r=s[this.dataPointIndex];if(r>=a&&r<=o)return;const n=s.length;for(let t=0;t<n;t++)if(s[t]>=a&&s[t]<=o)return void(this.dataPointIndex=t)}_snapToVisibleRangeInDirection(t){const e=this.w,i=e.globals,s=this.seriesIndex,a=e.seriesData.seriesX&&e.seriesData.seriesX[s];if(!a||!a.length)return;const o=i.minX,r=i.maxX;if(void 0===o||void 0===r)return;const n=a.length;if(t>=0){for(let t=0;t<n;t++)if(a[t]>=o&&a[t]<=r)return void(this.dataPointIndex=t)}else for(let t=n-1;t>=0;t--)if(a[t]>=o&&a[t]<=r)return void(this.dataPointIndex=t)}_isDataPointVisible(t,e){const i=this.w,s=i.globals;if(!i.interact.zoomed)return!0;const a=i.seriesData.seriesX&&i.seriesData.seriesX[t];if(!a)return!0;const o=a[e];return void 0===o||o>=s.minX&&o<=s.maxX}}}),exports.default=l;