@fusioncharts/features/src/crossline-zoomline/index.js

FusionCharts JavaScript charting framework

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule=true;exports.default=void 0;var _inheritsLoose2=_interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _lib=require("@fusioncharts/core/src/lib");var _componentInterface=require("@fusioncharts/core/src/component-interface");var BLANK="",math=Math,mathMax=math.max,mathMin=math.min,UNDEF,scale,boxHeight=0,_top,plotOut,hasTouch="ontouchstart"in window,CANVAS="canvas",chartInclusionList={zoomlinedy:true,zoomline:true},callbackLabel=function callbackLabel(){this.remove()},callbackValue=function callbackValue(){this.remove()},createGroup=function createGroup(groupName,parentContainer,crossLine){return crossLine.getFromEnv("animationManager").setAnimation({el:"group",attr:{name:groupName},container:parentContainer,state:"appearing",component:crossLine,label:"group"})},nearestUndefined=function nearestUndefined(pos){var i,diff,_scale,nearest={},lowest=Number.POSITIVE_INFINITY;for(i=0;i<this.length;i++){diff=this[i]-pos;diff<0?_scale=scale.NEG:_scale=scale.POS;diff=Math.abs(diff);if(diff<=lowest){lowest=diff;nearest.absValue=diff;nearest.noScaleSide=_scale}}return nearest},getHandler=function getHandler(_this){return{onMouseOut:function onMouseOut(){_this.hide();_this.position=UNDEF},onMouseMove:function onMouseMove(e){var residue,info,line,step,chart,xAxis,chartConfig,canvasLeft,x,xAxisVisible,bridgePixel,pos;if(_this.disabled||_this._mouseIsDown&&!hasTouch){return}info=_this.getZoomInfo();line=_this.getGraphicalElement("line");step=info.step;chart=_this.chart;xAxis=chart.getChildren("xAxis")[0];chartConfig=chart.get("config");canvasLeft=chartConfig.canvasLeft;x=(0,_lib.getMouseCoordinate)(_this.getFromEnv("chart-container"),e,chart).chartX;xAxisVisible=xAxis.getVisibleConfig();bridgePixel=xAxis.getAxisConfig("axisDimention").x-canvasLeft;pos=(pos=_this.getDataIndexFromPixel(Math.round(x)))+((residue=pos%step)>step/2?step-residue:-residue);x=xAxis.getPixel(pos,{wrtVisible:true})-bridgePixel-canvasLeft;x-=info.offset;line.transform(["T",Math.round(x),0]);_this.hidden&&chartConfig.crossline.enabled!==0&&_this.show();(pos<xAxisVisible.minValue||pos>xAxisVisible.maxValue)&&_this.hide();if(pos!==_this.position||_this.hidden){_this.position=pos;_this.lineX=x;_this.updateLabels()}}}};var CrossLine=function(_ComponentInterface){function CrossLine(){var _this2;_this2=_ComponentInterface.call(this)||this;_this2.config.handlers=getHandler(_this2);return _this2}(0,_inheritsLoose2.default)(CrossLine,_ComponentInterface);var _proto=CrossLine.prototype;_proto.configureAttributes=function configureAttributes(options){this.config.options=options};_proto.draw=function draw(){var i,ii,plot,plotColor,attrObj={},crossLine=this,labelPadding=2.5,chart=crossLine.getFromEnv("chart"),numberFormatter=chart.getFromEnv()["number-formatter"],chartConfig=chart.config,plotX=crossLine.left=chart.getChildren("xAxis")[0].getAxisConfig("axisDimention").x,plotY=crossLine.top=chartConfig.canvasTop,plotH=crossLine.height=chartConfig.canvasHeight,plotO=crossLine._visout=chartConfig._visout,plots=[],animationManager=crossLine.getFromEnv("animationManager"),groupValue,fetchedLine=crossLine.getGraphicalElement("line"),line,options=crossLine.config.options,labelStyle=options.labelstyle,valueStyle=options.valuestyle,pyaxis=chart.getChildren("yAxis")[0],pYAxisLimits=pyaxis.getLimit(),syaxis=chart.getChildren("yAxis")[1],sYAxisLimits=syaxis&&syaxis.getLimit(),fetchedLabels=crossLine.getGraphicalElement("labels"),labels=[],positionLabel,groupLabel,fetchedPositionLabel=crossLine.getGraphicalElement("positionLabel"),crosslineBottomGroup=crossLine.getLinkedParent().getChildContainer("crosslineBottom"),crosslineTopGroup=crossLine.getLinkedParent().getChildContainer("crosslineTop");chart.iterateComponents((function(child){if(child.getType&&child.getType()==="dataset"&&!child.getState("removed")){plots.push(child)}}));crossLine.plots=plots;crossLine.width=chartConfig._visw;groupValue=crossLine.group;if(!(groupValue=crossLine.getContainer("valueGroup"))){groupValue=crossLine.addContainer("valueGroup",createGroup("crossline-value-group",crosslineTopGroup,crossLine))}if(!(groupLabel=crossLine.getContainer("labelGroup"))){groupLabel=crossLine.addContainer("labelGroup",createGroup("crossline-label-group",crosslineTopGroup,crossLine));groupLabel.insertBefore(chart.getChildContainer("plotGroup"))}crossLine.container=crosslineBottomGroup;groupValue.attr({transform:["T",plotX,chartConfig._ymin]}).css(valueStyle);line=animationManager.setAnimation({el:fetchedLine||"path",container:crosslineBottomGroup,doNotRemove:true,attr:(0,_lib.extend2)({path:["M",plotX,plotY,"l",0,plotH]},options.line)}).toBack();if(!fetchedLine){crossLine.addGraphicalElement("line",line,false)}if(options.labelEnabled){attrObj.x=plotO;attrObj.y=plotY+plotH+(chartConfig.scrollHeight||0)+labelPadding;attrObj["vertical-align"]="top";attrObj.direction=chartConfig.textDirection;attrObj.text=BLANK}positionLabel=animationManager.setAnimation({el:fetchedPositionLabel||"text",attr:options.labelEnabled&&attrObj,css:options.labelEnabled&&labelStyle,container:groupLabel,doNotRemove:true,callback:!options.labelEnabled&&callbackLabel});if(!fetchedPositionLabel&&options.labelEnabled){crossLine.addGraphicalElement("positionLabel",positionLabel,false)}crossLine.hide();crossLine.ppixelRatio=-(pyaxis.config.axisDimention.axisLength/pyaxis.getVisibleLength());crossLine.spixelRatio=syaxis&&-(syaxis.config.axisDimention.axisLength/syaxis.getVisibleLength());crossLine.yminValue=chartConfig._yminValue;crossLine.pyaxisminvalue=pYAxisLimits.min;crossLine.pyaxismaxvalue=pYAxisLimits.max;crossLine.syaxisminvalue=sYAxisLimits&&sYAxisLimits.min;crossLine.syaxismaxvalue=sYAxisLimits&&sYAxisLimits.max;crossLine.positionLabels=chartConfig.xlabels||{data:[],parsed:[]};crossLine.chart=chart;i=0;if(options.valueEnabled){for(ii=plots.length;i<ii;i+=1){plot=plots[i];plotColor=(0,_lib.hashify)(plot.config.linecolor);attrObj.x=0;attrObj.y=plotO;attrObj.fill=plotColor;attrObj.direction=chartConfig.textDirection;attrObj.text=BLANK;attrObj["text-bound"]=valueStyle["text-bound"];attrObj.lineHeight=valueStyle.lineHeight;labels[i]=animationManager.setAnimation({el:fetchedLabels&&fetchedLabels[i]||"text",container:groupValue,doNotRemove:true,attr:attrObj});!(fetchedLabels&&fetchedLabels[i])&&crossLine.addGraphicalElement("labels",labels[i],true)}crossLine.numberFormatter=numberFormatter}for(ii=fetchedLabels&&fetchedLabels.length;i<ii;i++){animationManager.setAnimation({el:fetchedLabels[i],component:crossLine,doNotRemove:true,callback:callbackValue})}fetchedLabels&&fetchedLabels.splice(plots.length)};_proto.getType=function getType(){return"crossline"};_proto.getName=function getName(){return"crossLine"};_proto.getZoomInfo=function getZoomInfo(){return this.getFromEnv("chartConfig").viewPortConfig};_proto.getDataIndexFromPixel=function getDataIndexFromPixel(px){return Math.round(this.getFromEnv("chart").getChildren("xAxis")[0].getValue(px,{wrtVisible:true}))};_proto.getPositionLabel=function getPositionLabel(index){var text=this.getFromEnv("chart").getChildren("xAxis")[0].getLabel(index);return text&&text.label||BLANK};_proto.disable=function disable(state){if(state!==UNDEF){this.disabled=!!state;if(this.disabled&&this.visible){this.hide()}}return this.disabled};_proto.updateLabels=function updateLabels(){var crossline=this,labelPadding=2.5,animationManager=crossline.getFromEnv("animationManager"),labels=crossline.getGraphicalElement("labels"),positionLabel=crossline.getGraphicalElement("positionLabel"),plots=crossline.plots,visw=crossline.width,position=crossline.position,x=crossline.lineX,flooredX=Math.floor(x),dummyText=crossline.dummyText,numberFormatter=crossline.numberFormatter,pYAxisMinValue=crossline.pyaxisminvalue,pYAxisMaxValue=crossline.pyaxismaxvalue,sYAxisMinValue=crossline.syaxisminvalue,sYAxisMaxValue=crossline.syaxismaxvalue,verticalLimits=getVerticalLimits(crossline);plotOut=crossline._visout;if(labels){if(!dummyText){dummyText=crossline.dummyText=crossline.getFromEnv("paper").text().hide()}dummyText.attr({text:numberFormatter.yAxis("0")});dummyText&&verticalLimits.init(dummyText.getBBox().height,labels.length);var sortedLabels=[];labels.forEach((function(label,i){if(plots[i].getState("removed")){return}var plot=plots[i],value=plot.components.data[position]&&plot.components.data[position].config.setValue,labelYPos,yAxis=plot.config.parentYAxis;if(value===UNDEF||!plot.getState("visible")||(yAxis?value>sYAxisMaxValue||value<sYAxisMinValue:value>pYAxisMaxValue||value<pYAxisMinValue)){labelYPos=plotOut}else{labelYPos=yAxis?(value-sYAxisMinValue)*crossline.spixelRatio:(value-pYAxisMinValue)*crossline.ppixelRatio}sortedLabels.push({value:value,labelYPos:labelYPos,label:label})}));sortedLabels.sort((function(a,b){return b.value-a.value}));sortedLabels.forEach((function(sortedLabel){verticalLimits.occupy(sortedLabel.labelYPos,sortedLabel.label)}))}labels&&labels.forEach((function(label,i){if(plots[i].getState("removed")){return}var plot=plots[i],value=plot.components.data[position]&&plot.components.data[position].config.setValue,bBox,labelWidth,halfLabelWidth,adjustedHalfLabelWidth,_xPos,_yPos,text=numberFormatter[plot.config.parentYAxis?"sYAxis":"yAxis"](value);if(text){label.attr({text:text});bBox=label.getBBox();labelWidth=bBox&&bBox.width;halfLabelWidth=labelWidth&&labelWidth*.5;adjustedHalfLabelWidth=halfLabelWidth&&halfLabelWidth+10;_yPos=label.calcY;_xPos=mathMax(0,mathMin(flooredX,visw));_yPos!==UNDEF&&_xPos!==UNDEF&&animationManager.setAnimation({el:label,attr:{x:_xPos,y:_yPos,"text-anchor":x<=adjustedHalfLabelWidth&&"start"||x+adjustedHalfLabelWidth>=visw&&"end"||"middle","text-bound":["rgba(255,255,255,0.8)","rgba(0,0,0,0.2)",1,labelPadding]},doNotRemove:true,component:crossline})}else{label.attr({x:-visw})}}));positionLabel&&animationManager.setAnimation({el:positionLabel,attr:{x:x+crossline.left,text:crossline.getPositionLabel(position),"text-bound":["rgba(255,255,255,1)","rgba(0,0,0,1)",1,labelPadding]},component:crossline})};_proto.show=function show(){if(!this.disabled){this.hidden=false;var valueGroup=this.getContainer("valueGroup"),positionLabel=this.getGraphicalElement("positionLabel"),line=this.getGraphicalElement("line");valueGroup&&valueGroup.show();positionLabel&&positionLabel.show();line&&line.show()}};_proto.hide=function hide(){this.hidden=true;var valueGroup=this.getContainer("valueGroup"),positionLabel=this.getGraphicalElement("positionLabel"),line=this.getGraphicalElement("line");valueGroup&&valueGroup.hide();positionLabel&&positionLabel.hide();line&&line.hide()};_proto.dispose=function dispose(){var crossline=this,key;for(key in crossline){crossline.hasOwnProperty(key)&&delete crossline[key]}};return CrossLine}(_componentInterface.ComponentInterface);function getVerticalLimits(crossline){var _bottom=crossline.getFromEnv("chart").getChildren("yAxis")[0].getPixel(crossline.yminValue),margin=2,oMatrix,result={},sections;scale={};_top=crossline.height*-1;try{Object.defineProperty(scale,"POS",{enumerable:false,configurable:false,get:function get(){return 1}});Object.defineProperty(scale,"NEG",{enumerable:false,configurable:false,get:function get(){return-1}})}catch(e){scale.POS=1;scale.NEG=-1}try{Object.defineProperty(result,"top",{enumerable:false,configurable:false,get:function get(){return _top}});Object.defineProperty(result,"bottom",{enumerable:false,configurable:false,get:function get(){return _bottom}})}catch(e){result.top=_top;result.bottom=_bottom}result.init=function(height){var i,defaultValue=0;boxHeight=height+margin;_top+=boxHeight/2;sections=Math.floor(Math.abs(_top)/boxHeight);oMatrix=new OccupancyMatrix(sections);for(i=0;i<sections;i++){oMatrix.pos.push(defaultValue)}};result.occupy=function(pos,label){var passedSections=Math.floor(Math.abs(_top-pos)/boxHeight);oMatrix&&oMatrix.attachShift(pos,passedSections,label)};return result}var AttachableLabel=function(){function AttachableLabel(){this.y=0;this.lRef=UNDEF;this.__shift=0;this.__index=0}var _proto2=AttachableLabel.prototype;_proto2.applyShift=function applyShift(shiftApplied){this.__shift=shiftApplied;this.lRef.calcY=this.y+=shiftApplied*boxHeight};_proto2.applyDirectIndex=function applyDirectIndex(newIndex){this.__index=newIndex;this.lRef.calcY=this.y=_top-newIndex*boxHeight*-1};return AttachableLabel}();var OccupancyMatrix=function(){function OccupancyMatrix(count){this.holes=[];this.pos=[];for(var i=0;i<count;i++){this.holes.push(i)}}var _proto3=OccupancyMatrix.prototype;_proto3.repositionHoles=function repositionHoles(){var i,index=0,pos=this.pos,value;this.holes.length=0;for(i=0;i<pos.length;i++){value=pos[i];!value&&(this.holes[index++]=i)}};_proto3.attachShift=function attachShift(value,index,label){var indexVal,pos=this.pos,length=pos.length,nearestUndefIndex,tempArr,attachedLabel,_index,calibratedIndex,nearestOffset;if(value===plotOut){label.calcY=plotOut;return}calibratedIndex=index>length-1?length-1:index;indexVal=pos[calibratedIndex];attachedLabel=new AttachableLabel;attachedLabel.y=value;attachedLabel.lRef=label;if(!indexVal){attachedLabel.applyDirectIndex(calibratedIndex);pos.splice(calibratedIndex,1,attachedLabel);this.holes.splice(this.holes.indexOf(calibratedIndex),1);return}nearestOffset=nearestUndefined.call(this.holes,calibratedIndex);nearestUndefIndex=calibratedIndex+nearestOffset.absValue*nearestOffset.noScaleSide;if(nearestOffset.noScaleSide===scale.POS){attachedLabel.applyDirectIndex(nearestUndefIndex);pos.splice(nearestUndefIndex,1,attachedLabel);this.holes.splice(this.holes.indexOf(nearestUndefIndex),1);return nearestUndefIndex}if(nearestOffset.noScaleSide===scale.NEG){tempArr=pos.splice(nearestUndefIndex+1,pos.length-1);pos.pop();tempArr.forEach((function(element){element&&element.applyShift(-1)}));[].push.apply(pos,tempArr);_index=nearestUndefIndex;while(true){if(!pos[_index]){break}_index++}pos.push(0);this.repositionHoles();nearestOffset=nearestUndefined.call(this.holes,_index);_index+=nearestOffset.absValue*nearestOffset.noScaleSide;attachedLabel.applyDirectIndex(_index);pos.splice(_index,1,attachedLabel);this.repositionHoles();return pos.length-1}};return OccupancyMatrix}();var _default=exports.default={extension:function extension(Fusioncharts){Fusioncharts.addEventListener("instantiated",(function onFcInstantiated(event){if(event.sender.getName()===CANVAS){var canvas=event.sender,handlers,crosslineOptions,crosslineCount;canvas.registerFactory("crossLineManager-zoomline",(function(){var chart=event.sender.getFromEnv("chart"),chartName=chart&&chart.getName(),crossline;if(chartName&&chartInclusionList[chartName.toLowerCase()]){crosslineOptions=chart.config.crossline;if(crosslineOptions&&crosslineOptions.enabled!==0&&chart.config.useCrossline===1){crosslineCount=1}else{crosslineOptions&&(crosslineOptions.enabled=0);crosslineCount=0}(0,_lib.componentFactory)(canvas,CrossLine,"crossLine",crosslineCount,[crosslineOptions]);if(crosslineCount){crossline=canvas.getChildren("crossLine")[0];handlers=crossline.config.handlers;crossline.addExtEventListener("fc-mousemove",handlers.onMouseMove,canvas);crossline.addExtEventListener("fc-mouseover",handlers.onMouseMove,canvas);crossline.addExtEventListener("fc-dragstart",(function(e){handlers.onMouseOut(e);crossline.removeExtEventListener("fc-mousemove",handlers.onMouseMove,canvas)}),canvas);crossline.addExtEventListener("fc-dragend",(function(){crossline.addExtEventListener("fc-mousemove",handlers.onMouseMove,canvas)}),canvas);crossline.addExtEventListener("fc-mouseout",(function(e){handlers.onMouseOut(e)}),canvas)}}}))}}))},name:"crossline-manager",type:"extension",requiresFusionCharts:true};