@fusioncharts/fusiontime/src/_internal/components/crossline.js

FusionCharts JavaScript time-series 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 _componentInterface=require("@fusioncharts/core/src/component-interface");var _lib=require("@fusioncharts/core/src/lib");var _isValidNumber=_interopRequireDefault(require("@fusioncharts/utils/src/type/is-valid-number"));var _localizeDateString=require("../_utils/localizeDateString");var VERTICAL="vertical",END="end",MIDDLE="middle",START="start",GUTTER_5=5,M="M",L="L",l="l",h="h",v="v",z="z";var Crossline=function(_SmartRenderer){function Crossline(){return _SmartRenderer.apply(this,arguments)||this}(0,_inheritsLoose2.default)(Crossline,_SmartRenderer);var _proto=Crossline.prototype;_proto.__setDefaultConfig=function __setDefaultConfig(){_SmartRenderer.prototype.__setDefaultConfig.call(this);var crosslineConfig=this.config;crosslineConfig.type=VERTICAL;crosslineConfig.values=[];crosslineConfig._defaultLineStyle={stroke:"#9a9a9a","stroke-width":1,"stroke-opacity":1};crosslineConfig._defaultTextStyle={fill:"#ffffff","font-size":"10px","font-weight":"normal","font-style":"normal","text-anchor":"middle"};crosslineConfig._defaultTagStyle={fill:"#5f5f5f"};crosslineConfig._defaultPadding=2};_proto.configureAttributes=function configureAttributes(obj){_SmartRenderer.prototype.configureAttributes.call(this,obj);var config=this.config,type,inputStyle,baseTextStyle=this.getFromEnv("baseTextStyle"),getStyleDef=this.getFromEnv("getStyleDef");for(var key in obj){if(obj.hasOwnProperty(key)){config[key]=obj[key]}}type=config.type;inputStyle=config.inputStyle;config._lineStyle=Object.assign({},config._defaultLineStyle,getStyleDef(inputStyle.line),getStyleDef(inputStyle[type+"-line"]));config._textStyle=Object.assign({},config._defaultTextStyle,baseTextStyle,getStyleDef(inputStyle.label),getStyleDef(inputStyle[type+"-label"]));config._tagStyle=Object.assign({},config._defaultTagStyle,getStyleDef(inputStyle.tag),getStyleDef(inputStyle[type+"-tag"]))};_proto.getPathArrs=function getPathArrs(){var crossline=this,selfConfig=crossline.config,isVertical=selfConfig.type===VERTICAL,scale=selfConfig.scale,values=selfConfig.values,pathArrays=[],pathArr,canvasConfig=crossline.getLinkedParent().config,canvasPadding=canvasConfig.padding,canvasLeft=canvasConfig.canvasLeft-canvasPadding.left,canvasTop=canvasConfig.canvasTop-canvasPadding.top,canvasWidth=canvasConfig.canvasWidth,canvasHeight=canvasConfig.canvasHeight;values.forEach((function(value){var rangeVal=scale.getRangeValue(value);if(rangeVal){if(isVertical){pathArr=[M,rangeVal,canvasTop,v,canvasHeight]}else{pathArr=[M,canvasLeft,rangeVal,h,canvasWidth]}pathArrays.push(pathArr)}}));return pathArrays};_proto.drawVerticalCrosslineText=function drawVerticalCrosslineText(){var _this$getFromEnv;var crossline=this,selfConfig=crossline.config,dateRange=selfConfig.dateRange,text=selfConfig.timeFormatterFn({dateRange:dateRange,type:"crossline"}),values=selfConfig.values,scale=selfConfig.scale,padding=(0,_lib.pluckNumber)(selfConfig.padding,selfConfig._defaultPadding),canvasConfig=crossline.getLinkedParent().config,canvasPadding=canvasConfig.padding,canvasLeft=canvasConfig.canvasLeft-canvasPadding.left,canvasTop=canvasConfig.canvasTop-canvasPadding.top,canvasWidth=canvasConfig.canvasWidth,canvasHeight=canvasConfig.canvasHeight,canvasBottom=canvasTop+canvasHeight,canvasRight=canvasLeft+canvasWidth,smartLabel=crossline.getFromEnv("smartLabel"),markerPath,textOffset=0,rangeValue,smartText,crosslineId;var lang=(_this$getFromEnv=this.getFromEnv("language"))!=null?_this$getFromEnv:"english";text=(0,_localizeDateString.localizeDateString)(text,lang);values.forEach((function(value,index){if((0,_isValidNumber.default)(value)){smartLabel.setStyle(selfConfig._textStyle);smartText=smartLabel.getOriSize(text);rangeValue=scale.getRangeValue(value);crosslineId="crossline-"+index;crossline.addGraphicalElement({el:"group",container:{id:"thermo",label:"thermo",isParent:true},component:crossline,label:crosslineId,attr:{name:"veritcal-crossline-marker-group"},id:crosslineId});if(rangeValue+smartText.width/2+2*padding>canvasRight){markerPath=[M,rangeValue,canvasBottom,L,rangeValue,canvasBottom+padding,v,smartText.height+2*padding,h,-(smartText.width+4*padding),v,-(smartText.height+2*padding),L,rangeValue-padding,canvasBottom+padding,z];selfConfig._textStyle["text-anchor"]=END;textOffset=-2*padding}else if(rangeValue-smartText.width/2-2*padding<canvasLeft){markerPath=[M,rangeValue,canvasBottom,L,rangeValue,canvasBottom+padding,v,smartText.height+2*padding,h,smartText.width+4*padding,v,-(smartText.height+2*padding),L,rangeValue+padding,canvasBottom+padding,z];selfConfig._textStyle["text-anchor"]=START;textOffset=2*padding}else{markerPath=[M,rangeValue,canvasBottom,L,rangeValue-padding,canvasBottom+padding,L,rangeValue-smartText.width/2-2*padding,canvasBottom+padding,v,smartText.height+2*padding,h,smartText.width+4*padding,v,-(smartText.height+2*padding),L,rangeValue+padding,canvasBottom+padding,z];selfConfig._textStyle["text-anchor"]=MIDDLE}crossline.addGraphicalElement({el:"path",attr:{path:markerPath},css:selfConfig._tagStyle,id:"vertical-crossline-marker-"+index,container:{label:crosslineId}});crossline.addGraphicalElement({el:"text",attr:{text:text,x:rangeValue+textOffset,y:canvasBottom+2*padding+smartText.height/2},css:selfConfig._textStyle,id:"vertical-crossline-text-"+index,container:{label:crosslineId}});smartLabel.setStyle(selfConfig._textStyle);smartText=smartLabel.getOriSize(text);rangeValue=scale.getRangeValue(value)}}))};_proto.drawHorizontalCrosslineText=function drawHorizontalCrosslineText(){var _this=this;var crossline=this,selfConfig=crossline.config,values=selfConfig.values,text,crosslineId,markerProp;values.forEach((function(value,index){if((0,_isValidNumber.default)(value)){text=selfConfig.formatterFn({value:selfConfig.texts[index],type:"crossline",prefix:selfConfig.prefix,suffix:selfConfig.suffix});markerProp=_this.getHorizontalMarkerProps(value,index);crosslineId="crossline-"+index;crossline.addGraphicalElement({el:"group",container:{id:"thermo",label:"thermo",isParent:true},component:crossline,label:crosslineId,attr:{name:"horizontal-crossline-marker-group"},id:crosslineId});selfConfig._tagStyle.fill=(0,_lib.pluck)(selfConfig.markerFill,selfConfig._tagStyle.fill);selfConfig._tagStyle.stroke=(0,_lib.pluck)(selfConfig._tagStyle.stroke,selfConfig.markerFill);crossline.addGraphicalElement({el:"path",attr:{path:markerProp.markerPath},css:selfConfig._tagStyle,id:"horizontal-crossline-marker-"+index,container:{label:crosslineId}});crossline.addGraphicalElement({el:"text",attr:{text:text,x:markerProp.markerText.x,y:markerProp.markerText.y},css:selfConfig._textStyle,id:"horizontal-crossline-text-"+index,outlineText:selfConfig.showTextOutline,container:{label:crosslineId}})}}))};_proto.getHorizontalMarkerProps=function getHorizontalMarkerProps(value,index){var crossline=this,selfConfig=crossline.config,scale=selfConfig.scale,yAxisAlignment=selfConfig.yAxisAlignment,padding=(0,_lib.pluckNumber)(selfConfig.padding,selfConfig._defaultPadding),canvasConfig=crossline.getLinkedParent().config,text=selfConfig.formatterFn({value:selfConfig.texts[index],type:"crossline",prefix:selfConfig.prefix,suffix:selfConfig.suffix}),borderConfig=canvasConfig.borderConfig,canvasPadding=canvasConfig.padding,canvasLeft=canvasConfig.canvasLeft+borderConfig.leftBorder-canvasPadding.left,canvasWidth=canvasConfig.canvasWidth-borderConfig.rightBorder+canvasPadding.left,canvasRight=canvasLeft+canvasWidth,smartLabel=crossline.getFromEnv("smartLabel"),rangeValue,smartText,markerPath,markerText={},markerProp={};smartLabel.setStyle(selfConfig._textStyle);smartText=smartLabel.getSmartText(text);rangeValue=scale.getRangeValue(value);switch(yAxisAlignment){case"left":markerPath=[M,canvasLeft,rangeValue,h,-GUTTER_5,l,-GUTTER_5,-(smartText.height/2)-2*padding,h,-(smartText.width+2*padding),v,smartText.height+4*padding,h,smartText.width+2*padding,l,GUTTER_5,-smartText.height/2-2*padding];markerText.x=canvasLeft-2*GUTTER_5-(smartText.width+2*padding)/2;markerText.y=rangeValue;break;case"right":markerPath=[M,canvasRight,rangeValue,h,GUTTER_5,l,2*GUTTER_5,-(smartText.height/2)-2*padding,h,smartText.width+2*padding,v,smartText.height+4*padding,h,-(smartText.width+2*padding),l,-(2*GUTTER_5),-smartText.height/2-2*padding];markerText.x=canvasRight+2*GUTTER_5+(smartText.width+2*padding)/2;markerText.y=rangeValue;break}markerProp.markerPath=markerPath;markerProp.markerText=markerText;return markerProp};_proto.draw=function draw(){var crossline=this,config=crossline.config;crossline.getPathArrs().forEach((function(pathArr,index){crossline.addGraphicalElement({el:"group",container:{id:"strato",label:"strato",isParent:true},component:crossline,label:"verticalcrossline-"+index,attr:{name:"vertical-crossline-group"},id:"crossline-"+index});crossline.addGraphicalElement({el:"group",container:{id:"strato",label:"strato",isParent:true},component:crossline,label:"horizontalcrossline-"+index,attr:{name:"horizontal-crossline-group"},id:"crossline-"+index});if(pathArr.length){crossline.addGraphicalElement({el:"path",attr:{path:pathArr},css:config._lineStyle,container:{label:config.type+"crossline-"+index},id:config.type+"-crossline-path-"+index,component:crossline})}if(config.showMarker){config.type===VERTICAL?crossline.drawVerticalCrosslineText():crossline.drawHorizontalCrosslineText()}}))};return Crossline}(_componentInterface.SmartRenderer);var _default=exports.default=Crossline;