-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathsmart.chart.rangeselector.js
6 lines (4 loc) · 13.9 KB
/
smart.chart.rangeselector.js
1
2
3
4
5
6
/* Smart UI v15.2.0 (2023-04-20)
Copyright (c) 2011-2023 jQWidgets.
License: https://htmlelements.com/license/ */ //
Smart.Chart&&(Smart.Chart.prototype._moduleRangeSelector=!0,Smart.Chart.prototype._renderXAxisRangeSelector=function(e,t){const i=this,r=i.seriesGroups[e],s=i._getXAxis(e),o=s?s.rangeSelector:void 0;if(!i._isSelectorRefresh){const e=(o&&o.renderTo?o.renderTo:i).getElementsByClassName("smart-chart-range-selector")[0];e&&e.parentElement.removeChild(e)}if(!s||!1===s.visible||"spider"===r.type)return!1;if(!i._isGroupVisible(e))return!1;if(!o)return!1;let a="horizontal"===r.orientation;o.renderTo&&(a=!1),i.rightToLeft&&(s.flip=!0);let l=a?i.offsetHeight:i.offsetWidth;l-=4;const n=this._getXAxisStats(e,s,l);let h=s.position;if(o.renderTo&&o.position&&(h=o.position),!this._isSelectorRefresh){const i=o.renderTo,r=document.createElement("div");if(r.className="smart-chart-range-selector smart-unselectable",r.style.position="absolute",r.style.backgroundColor="transparent",r.style.onselectstart=function(){return!1},i)i.appendChild(r),r.style.width=i.offsetWidth+"px",r.style.height=i.offsetHeight+"px",t.width=i.offsetWidth,t.height=i.offsetHeight;else{this.renderer.getContainer().appendChild(r);const e=this._selectorGetSize(s);a?(r.style.left=1+t.x+("right"!==h?-e:t.width)+"px",r.style.top="0",r.style.height=l+"px",r.style.width=e+"px",t.height=e):(r.style.left="2px",r.style.top=t.y+("top"!==h?t.height:-e)+"px",r.style.height=e+"px",r.style.width=l-1+"px")}r.parentDiv=r.parentElement,this._refreshSelector(e,s,n,r,t,a)}return this._isSelectorRefresh=!1,!0},Smart.Chart.prototype._refreshSelector=function(e,t,i,r,s,o){const a=this,l={},n=t.rangeSelector;for(let e in n)l[e]=n[e];delete l.padding;let h=l.minValue,d=l.maxValue;isNaN(h)&&(h=Math.min(i.min.valueOf(),i.dsRange.min.valueOf())),isNaN(d)&&(d=Math.max(i.max.valueOf(),i.dsRange.max.valueOf())),this._isDate(i.min)&&(h=new Date(h)),this._isDate(i.max)&&(d=new Date(d));let p=t.position;n.renderTo&&n.position&&(p=n.position),l.dataField=t.dataField,delete l.rangeSelector,l.type=t.type,l.baseUnit=null!==n.baseUnit?n.baseUnit:t.baseUnit,l.minValue=h,l.maxValue=d,l.flip=t.flip,l.position=p;let g=2,u=2,c=2,f=2;n.renderTo||(g=o?0:s.x,u=o?0:this._rect.width-s.x-s.width,c=o?s.y:5,f=o?this._paddedRect.height-this._plotRect.height:5);let m=n.padding;m=null!=m||n.renderTo?{left:m&&m.left?m.left:g,top:m&&m.top?m.top:c,right:m&&m.right?m.right:u,bottom:m&&m.bottom?m.bottom:f}:{left:g,top:c,right:u,bottom:f};let x=n.dataField;for(let e=0;null==x&&e<this.seriesGroups.length;e++)for(let t=0;null==x&&t<this.seriesGroups[e].series.length;t++)x=this.seriesGroups[e].series[t].dataField;const y={parentChart:this,padding:m,_isRangeSelectorInstance:!0,theme:this.theme,caption:n.caption,description:n.description,titlePadding:n.titlePadding,colorScheme:n.colorScheme||this.colorScheme,backgroundColor:n.backgroundColor||this.backgroundColor||a._getThemeColor("background"),backgroundImage:n.backgroundImage,showBorderLine:null!==n.showBorderLine?n.showBorderLine:!!n.renderTo,borderLineWidth:n.borderLineWidth||this.borderLineWidth,borderLineColor:n.borderLineColor||this.borderLineColor||a._getThemeColor("line"),rightToLeft:null!==n.rightToLeft?n.rightToLeft:this.rightToLeft,greyScale:null!==n.greyScale?n.greyScale:this.greyScale,renderEngine:this.renderEngine,showLegend:!1,animation:"none",enableEvents:!1,showToolTips:!1,dataSource:this.dataSource,xAxis:l,seriesGroups:[{orientation:o?"horizontal":"vertical",valueAxis:{visible:!1},type:n.serieType,skipOverlappingPoints:n.skipOverlappingPoints,columnSeriesOverlap:n.columnSeriesOverlap,columnsGapPercent:n.columnsGapPercent,seriesGapPercent:n.seriesGapPercent,series:[{dataField:x,opacity:.8,lineWidth:1}]}]};n.seriesGroups&&(y.seriesGroups=n.seriesGroups),n.valueAxis.visible&&(y.valueAxis=n.valueAxis),y.showBorderLine||(y.borderLineWidth=1,y.borderLineColor=a._get([this.backgroundColor,this.background,a._getThemeColor("background")]),y.showBorderLine=!0),a._supressBindingRefresh=!0,r.innerHTML="";const _=document.createElement("smart-chart");_.rightToLeft=a.rightToLeft,_.parentDiv=r;for(let e in y)_[e]=y[e];r.appendChild(_),a._rangeSelectorInstances[e]=_,a._supressBindingRefresh=!1;const S=function(){if(!_._plotRect)return;const t=_._paddedRect;if(t.height=_._plotRect.height,o||"top"!==p){if(o){const e=_._renderData[0].xAxis.rect.width;t.width-=e,"right"!==p&&(t.x+=e)}}else t.y+=_._renderData[0].xAxis.rect.height;if(a._createSliderElements(e,r,t,n,{min:l.minValue,max:l.maxValue}),a._rangeSelectorEventData={groupIndex:e,renderTo:r,swapXY:o},a.hasAttribute("aria-owns")){const e=a.getAttribute("aria-owns");a.setAttribute("aria-owns",e+" "+_.id)}else a.setAttribute("aria-owns",_.id)};_.isRendered?S():_.whenRendered((()=>{S()}))},Smart.Chart.prototype._createSliderElements=function(e,t,i,r,s){const o=this,a=t.getElementsByClassName("slider")[0];a&&a.parentElement.removeChild(a);const l=r.selectedRangeColor||"blue",n=o._get([r.selectedRangeOpacity,.1]),h=o._get([r.unselectedRangeOpacity,.5]),d=r.unselectedRangeColor||"white",p=r.rangeLineColor||"grey",g=document.createElement("div");for(g.className="slider",g.style.position="absolute",g.style.background=l,g.style.opacity=n,g.style.left=i.x+"px",g.style.top=i.y+"px",g.style.width=i.width+"px",g.style.height=i.height+"px",t.appendChild(g);this._sliders.length<e+1;)this._sliders.push({});function u(e,t){const i=document.createElement("div");return i.className="slider",i.style.position="absolute",i.style.background=e,i.style.opacity=t,i}function c(){const e=document.createElement("div");return e.className="slider",e.style.position="absolute",e.style.background="#FFFFFF",e.style.borderStyle="solid",e.style.borderWidth="1px",e.style.borderRadius="3px",e.style.borderColor=p,e.setAttribute("role","slider"),e.setAttribute("aria-controls",o.id),e}const f=g.getBoundingClientRect(),m=t.getBoundingClientRect();this._sliders[e]={element:g,host:t.firstElementChild,_sliderInitialAbsoluteRect:{x:f.left,y:f.top,width:i.width,height:i.height},_hostInitialAbsolutePos:{x:m.left,y:m.top},getRect:function(){const e=t.getBoundingClientRect();return{x:e.left-this._hostInitialAbsolutePos.x+this._sliderInitialAbsoluteRect.x,y:e.top-this._hostInitialAbsolutePos.y+this._sliderInitialAbsoluteRect.y,width:this._sliderInitialAbsoluteRect.width,height:this._sliderInitialAbsoluteRect.height}},rect:i,left:u(d,h),right:u(d,h),leftTop:u(p,h),rightTop:u(p,h),leftBorder:u(p,h),leftBar:c(),rightBorder:u(p,h),rightBar:c()};const x=this._sliders[e];t.appendChild(x.left),t.appendChild(x.right),t.appendChild(x.leftTop),t.appendChild(x.rightTop),t.appendChild(x.leftBorder),t.appendChild(x.rightBorder),t.appendChild(x.leftBar),t.appendChild(x.rightBar);const y=this._renderData[e].xAxis.data.axisStats,_=y.min.valueOf(),S=y.max.valueOf();"number"==typeof y.min?(x.leftBar.setAttribute("aria-valuemin",s.min),x.leftBar.setAttribute("aria-valuemax",s.max),x.leftBar.setAttribute("aria-valuenow",_),x.rightBar.setAttribute("aria-valuemin",s.min),x.rightBar.setAttribute("aria-valuemax",s.max),x.rightBar.setAttribute("aria-valuenow",S)):(x.leftBar.setAttribute("aria-valuemin",s.min.getTime()),x.leftBar.setAttribute("aria-valuemax",s.max.getTime()),x.leftBar.setAttribute("aria-valuenow",y.min.getTime()),x.leftBar.setAttribute("aria-valuetext",y.min.toLocaleString()),x.rightBar.setAttribute("aria-valuemin",s.min.getTime()),x.rightBar.setAttribute("aria-valuemax",s.max.getTime()),x.rightBar.setAttribute("aria-valuenow",y.max.getTime()),x.rightBar.setAttribute("aria-valuetext",y.max.toLocaleString()));let b=this._valueToOffset(e,_),v=this._valueToOffset(e,S);if(b>v){const e=v;v=b,b=e}"horizontal"!==this.seriesGroups[e].orientation?(g.style.left=Math.round(i.x+b)+"px",g.style.top=i.y+"px",g.style.width=Math.round(v-b)+"px",g.style.height=i.height+"px"):(g.style.left=i.x+"px",g.style.top=Math.round(i.y+b)+"px",g.style.width=i.width+"px",g.style.height=Math.round(v-b)+"px"),this._setSliderPositions(e,b,v)},Smart.Chart.prototype._setSliderPositions=function(e,t,i){const r=this.seriesGroups[e],s=this._getXAxis(e),o=s.rangeSelector;let a="horizontal"===r.orientation;s.rangeSelector.renderTo&&(a=!1);let l=s.position;o.renderTo&&o.position&&(l=o.position);const n=this._sliders[e],h=a?"top":"left",d=a?"left":"top",p=a?"height":"width",g=a?"width":"height",u=a?"y":"x",c=a?"x":"y",f=n.rect;n.startOffset=t,n.endOffset=i,n.left.style[h]=f[u]+"px",n.left.style[d]=f[c]+"px",n.left.style[p]=t+"px",n.left.style[g]=f[g]+"px",n.right.style[h]=f[u]+i+"px",n.right.style[d]=f[c]+"px",n.right.style[p]=f[p]-i+1+"px",n.right.style[g]=f[g]+"px",n.leftTop.style[h]=f[u]+"px",n.leftTop.style[d]=f[c]+(a&&"right"===l||!a&&"top"!==l?0:f[g])+"px",n.leftTop.style[p]=t+"px",n.leftTop.style[g]="1px",n.rightTop.style[h]=f[u]+i+"px",n.rightTop.style[d]=f[c]+(a&&"right"===l||!a&&"top"!==l?0:f[g])+"px",n.rightTop.style[p]=f[p]-i+1+"px",n.rightTop.style[g]="1px",n.leftBorder.style[h]=f[u]+t+"px",n.leftBorder.style[d]=f[c]+"px",n.leftBorder.style[p]="1px",n.leftBorder.style[g]=f[g]+"px";let m=f[g]/4;m>20&&(m=20),m<3&&(m=3),n.leftBar.style[h]=f[u]+t-3+"px",n.leftBar.style[d]=f[c]+f[g]/2-m/2+"px",n.leftBar.style[p]="5px",n.leftBar.style[g]=m+"px",n.rightBorder.style[h]=f[u]+i+"px",n.rightBorder.style[d]=f[c]+"px",n.rightBorder.style[p]="1px",n.rightBorder.style[g]=f[g]+"px",n.rightBar.style[h]=f[u]+i-3+"px",n.rightBar.style[d]=f[c]+f[g]/2-m/2+"px",n.rightBar.style[p]="5px",n.rightBar.style[g]=m+"px"},Smart.Chart.prototype._resizeState={},Smart.Chart.prototype._onSliderMouseDown=function(e){e.stopImmediatePropagation(),e.stopPropagation();const t=this;t._sliders[t._rangeSelectorEventData.groupIndex]&&(void 0!==t._resizeState.state&&null!==t._resizeState.state||t._testAndSetReadyResize(e),"ready"===t._resizeState.state&&(t._draggingRangeSelector=!0,t._resizeState.state="resizing"))},Smart.Chart.prototype._valueToOffset=function(e,t){const i=this.seriesGroups[e],r=this._sliders[e],s=r.host._renderData[0].xAxis.data.axisStats,o=s.min.valueOf();let a=s.max.valueOf()-o;0===a&&(a=1);const l=this._getXAxis(e),n="horizontal"===i.orientation?"height":"width",h=(t.valueOf()-o)/a;return r.getRect()[n]*(l.flip?1-h:h)},Smart.Chart.prototype._offsetToValue=function(e,t){const i=this._sliders[e],r=this.seriesGroups[e],s=this._getXAxis(e),o="horizontal"===r.orientation?"height":"width";let a=i.getRect()[o];0===a&&(a=1);const l=i.host._renderData[0].xAxis.data.axisStats,n=l.min.valueOf(),h=l.max.valueOf();let d=t/a*(h-n)+n;return!0===s.flip&&(d=h-t/a*(h-n)),this._isDate(l.min)||this._isDate(l.max)?d=new Date(d):((void 0===s.dataField||null===s.dataField||l.useIndeces)&&(d=Math.round(d)),d<l.min&&(d=l.min),d>l.max&&(d=l.max)),d},Smart.Chart.prototype._onSliderMouseUp=function(e){const t=this,i=t._rangeSelectorEventData.groupIndex,r=t._rangeSelectorEventData.swapXY,s=t._sliders[i];if(delete t._draggingRangeSelector,!s)return;if("resizing"!==t._resizeState.state)return;e.stopImmediatePropagation(),e.stopPropagation(),t._resizeState={},t.style.cursor="default";const o=r?"top":"left",a=r?"y":"x",l=s.element.getBoundingClientRect()[o],n=l+(r?s.element.offsetHeight:s.element.offsetWidth),h=s.getRect();let d=t._offsetToValue(i,l-h[a]),p=t._offsetToValue(i,n-h[a]);!s.host._renderData[0].xAxis.data.axisStats.isTimeUnit&&p.valueOf()-d.valueOf()>864e5&&(d.setHours(0,0,0,0),p.setDate(p.getDate()+1),p.setHours(0,0,0,0));const g=t._getXAxis(i);if(g.flip){const e=d;d=p,p=e}for(let e=0;e<t.seriesGroups.length;e++)t._getXAxis(e)===g&&(t._selectorRange[e]={min:d,max:p});t._isSelectorRefresh=!0;const u=t.animation;t.$.fireEvent("rangeSelectionChanging",{instance:t,minValue:d,maxValue:p}),t.animation="none",t.update(),t.animation=u,t.$.fireEvent("rangeSelectionChanged",{instance:t,minValue:d,maxValue:p}),"number"==typeof d?(s.leftBar.setAttribute("aria-valuenow",d),s.rightBar.setAttribute("aria-valuenow",p)):(s.leftBar.setAttribute("aria-valuenow",d.getTime()),s.leftBar.setAttribute("aria-valuetext",d.toLocaleString()),s.rightBar.setAttribute("aria-valuenow",p.getTime()),s.rightBar.setAttribute("aria-valuetext",p.toLocaleString()))},Smart.Chart.prototype._onSliderMouseMove=function(e){const t=this,i=t._rangeSelectorEventData.groupIndex,r=t._sliders[i],s=t._rangeSelectorEventData.swapXY;if(!r)return;const o=r.getRect(),a=r.element,l={left:e.clientX,top:e.clientY},n=a.getBoundingClientRect(),h=s?"top":"left",d=parseFloat(getComputedStyle(a)[h]),p=s?"height":"width",g=s?"y":"x";if("resizing"===t._resizeState.state){if(e.stopImmediatePropagation(),e.stopPropagation(),"left"===t._resizeState.side){let e=Math.round(l[h]-n[h]),t=o[g];if(n[h]+e>=t&&n[h]+e<=t+o[p]){let t=parseInt(d),i=Math.max(2,(s?a.offsetHeight:a.offsetWidth)-e);a.style[p]=i+"px",a.style[h]=t+e+"px"}}else if("right"===t._resizeState.side){let e=s?a.offsetHeight:a.offsetWidth,t=Math.round(l[h]-n[h]-e),i=o[g];if(n[h]+e+t>=i&&n[h]+t+e<=i+o[p]){let i=Math.max(2,e+t);a.style[p]=i+"px"}}else if("move"===t._resizeState.side){let e=s?a.offsetHeight:a.offsetWidth,i=parseInt(d),r=Math.round(l[h]-t._resizeState.startPos);n[h]+r>=o[g]&&n[h]+r+e<=o[g]+o[p]&&(t._resizeState.startPos=l[h],a.style[h]=i+r+"px")}const u=parseInt(d)-r.rect[g],c=u+(s?a.offsetHeight:a.offsetWidth);t._setSliderPositions(i,u,c)}else t._testAndSetReadyResize(e)},Smart.Chart.prototype._testAndSetReadyResize=function(e){const t=this,i=t._rangeSelectorEventData,r=i.renderTo,s=i.groupIndex,o=t._sliders[s],a=i.swapXY,l=o.getRect(),n=o.element,h={left:e.clientX,top:e.clientY},d=n.getBoundingClientRect(),p=a?"left":"top",g=a?"top":"left",u=a?"width":"height",c=t._isTouchDevice?30:5;h[p]>=d[p]&&h[p]<=d[p]+l[u]?Math.abs(h[g]-d[g])<=c?(r.style.cursor=a?"row-resize":"col-resize",t._resizeState={state:"ready",side:"left"}):Math.abs(h[g]-d[g]-(a?n.offsetHeight:n.offsetWidth))<=c?(r.style.cursor=a?"row-resize":"col-resize",t._resizeState={state:"ready",side:"right"}):h[g]+c>d[g]&&h[g]-c<d[g]+(a?n.offsetHeight:n.offsetWidth)?(r.style.cursor="pointer",t._resizeState={state:"ready",side:"move",startPos:h[g]}):(r.style.cursor="default",t._resizeState={}):(r.style.cursor="default",t._resizeState={})},Smart.Chart.prototype._selectorGetSize=function(e){return e.rangeSelector.renderTo?0:e.rangeSelector.size||this._paddedRect.height/3});