@fusioncharts/fusiontime/src/_internal/components/reference-line.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 anchorRadius=3,GUTTER_5=5,M="M",L="L",h="h",v="v",z="z",COLOR_F3F3F3="#f3f3f3",COLOR_595959="#595959",RIGHT="right",MIDDLE="middle",ROLLOVER="referenceLineRollOver",ROLLOUT="referenceLineRollOut",CLICK="referenceLineClick",toString=function toString(x){return x.toString()};var ReferenceLine=function(_SmartRenderer){function ReferenceLine(){var _this;_this=_SmartRenderer.call(this)||this;var refLine=_this,chart,config;refLine.hoverInHandler=function(e){e.stopPropagation();refLine.setData({isHovered:true},true);config=refLine.config;chart=refLine.getFromEnv("chart");chart.fireChartInstanceEvent(ROLLOVER,{label:config.label,value:config.value,valueFormatted:config.formattedMakerText})};refLine.moveHandler=function(e){e.stopPropagation()};refLine.hoverOutHandler=function(e){e.stopPropagation();refLine.setData({isHovered:false},true);chart.fireChartInstanceEvent(ROLLOUT,{label:config.label,value:config.value,valueFormatted:config.formattedMakerText})};refLine.clickHandler=function(e){e.stopPropagation();chart.fireChartInstanceEvent(CLICK,{label:config.label,value:config.value,valueFormatted:config.formattedMakerText})};return _this}(0,_inheritsLoose2.default)(ReferenceLine,_SmartRenderer);var _proto=ReferenceLine.prototype;_proto.__setDefaultConfig=function __setDefaultConfig(){_SmartRenderer.prototype.__setDefaultConfig.call(this);this.config.defaultStyle={text:{fill:"#5F5F5F","vertical-align":"top",opacity:"1","fill-opacity":"1","stroke-opacity":"1","font-size":"11px","font-style":"normal"},marker:{fill:"#B70000",stroke:"#B70000","fill-opacity":"1","stroke-opacity":"1",opacity:"1",borderthickness:0,borderpadding:2,borderradius:0,borderdash:"none","stroke-width":"1"}};this.config.isHovered=false;this.config.formatterFn=toString;this.config.direction=RIGHT};_proto.configureAttributes=function configureAttributes(obj){if(obj===void 0){obj={}}var refLine=this,selfConfig=refLine.config,getStyleDef=refLine.getFromEnv("getStyleDef");if(obj.referenceLine){var refLineConfig=obj.referenceLine||{};if(refLineConfig.style){selfConfig.markerStyle=getStyleDef(refLineConfig.style.marker||{});selfConfig.textStyle=getStyleDef(refLineConfig.style.text||{});selfConfig.alwaysVisible=refLineConfig.alwaysvisible||false}else{selfConfig.markerStyle={};selfConfig.textStyle={}}selfConfig.label=(0,_lib.pluck)(refLineConfig.label,"");selfConfig.value=(0,_lib.pluckNumber)(refLineConfig.value,0)}if(obj.yScale)selfConfig.yScale=obj.yScale;if(obj.formatterFn)selfConfig.formatterFn=obj.formatterFn;if(obj.prefix)selfConfig.prefix=obj.prefix;if(obj.suffix)selfConfig.suffix=obj.suffix;if(obj.direction)selfConfig.direction=obj.direction;if(obj.isHovered!=null)selfConfig.isHovered=obj.isHovered;selfConfig.formattedValue=selfConfig.formatterFn({value:selfConfig.value,type:"referenceline",prefix:selfConfig.prefix,suffix:selfConfig.suffix})};_proto.getPathArr=function getPathArr(){var refLine=this,selfConfig=refLine.config,direction=selfConfig.direction,canvasConfig=refLine.getLinkedParent().config,yScale=selfConfig.yScale,yScaleDomain=yScale.getDomain(),rangeValue,value=selfConfig.value,pathArr=[];if((0,_isValidNumber.default)(yScaleDomain[0])&&(0,_isValidNumber.default)(yScaleDomain[1])&&value>=yScaleDomain[0]&&value<=yScaleDomain[1]){rangeValue=yScale.getRangeValue(value);switch(direction){case"left":pathArr=["M",canvasConfig.canvasLeft+canvasConfig.canvasWidth-canvasConfig.borderConfig.rightBorder,rangeValue,"h",-canvasConfig.canvasWidth];break;case"top":case"bottom":pathArr=["M",rangeValue,canvasConfig.canvasTop,"v",canvasConfig.canvasHeight-canvasConfig.borderConfig.bottomBorder];break;case"right":default:pathArr=["M",canvasConfig.canvasLeft+canvasConfig.borderConfig.leftBorder,rangeValue,"h",canvasConfig.canvasWidth]}}return pathArr};_proto.getLabelsProps=function getLabelsProps(pathArr,mergedMarkerStyle){var refLineConfig=this.config,direction=refLineConfig.direction,props={isValidLabel:false};if(pathArr.length&&refLineConfig.label){props.isValidLabel=true;switch(direction){case"top":props.x=pathArr[1];props.y=pathArr[2];props.textAnchor="start";break;case"bottom":props.x=pathArr[1];props.y=pathArr[4];props.textAnchor="start";break;case"left":props.x=pathArr[1]+pathArr[4]+anchorRadius;props.y=pathArr[2]+mergedMarkerStyle.borderpadding;props.textAnchor="start";break;case"right":default:props.x=pathArr[1]+pathArr[4]-mergedMarkerStyle.borderpadding-1;props.y=pathArr[2]+mergedMarkerStyle.borderpadding;props.textAnchor="end"}}return props};_proto.getBulbPoints=function getBulbPoints(pathArr){var refLineConfig=this.config,direction=refLineConfig.direction,bulbPoints={};if(pathArr){switch(direction){case"left":bulbPoints.cx=pathArr[1]+pathArr[4]-anchorRadius;bulbPoints.cy=pathArr[2];break;case"right":default:bulbPoints.cx=pathArr[1]+pathArr[4]+anchorRadius;bulbPoints.cy=pathArr[2]}}return bulbPoints};_proto.getTagProps=function getTagProps(mergedMarkerStyle,flagStyle,textStyle){var refLine=this,_this$config=this.config,value=_this$config.value,yScale=_this$config.yScale,direction=_this$config.direction,formattedValue=_this$config.formattedValue,smartLabel=refLine.getFromEnv("smartLabel"),smartText,_refLine$getLinkedPar=refLine.getLinkedParent().config,canvasLeft=_refLine$getLinkedPar.canvasLeft,canvasWidth=_refLine$getLinkedPar.canvasWidth,canvasLeftBorder=_refLine$getLinkedPar.borderConfig.leftBorder,canvasRight=canvasLeft+canvasWidth,rangeValue,tagWidth,tagPath,tagTextPosition={},tagProps={value:formattedValue};rangeValue=yScale.getRangeValue(value);smartLabel.setStyle({fontFamily:textStyle["font-family"],fontWeight:textStyle["font-weight"],fontSize:textStyle["font-size"],fontStyle:textStyle["font-style"]});smartText=smartLabel.getSmartText(formattedValue);tagWidth=smartText.width+2*mergedMarkerStyle.borderpadding;switch(direction){case"left":tagPath=[M,canvasRight,rangeValue,L,canvasRight+GUTTER_5,rangeValue,L,canvasRight+2*GUTTER_5,rangeValue-smartText.height/2-2*flagStyle.marker.borderpadding,h,tagWidth,v,smartText.height+4*flagStyle.marker.borderpadding,h,-tagWidth,L,canvasRight+GUTTER_5,rangeValue,z];tagTextPosition.x=canvasRight+2*GUTTER_5+tagWidth/2;tagTextPosition.y=rangeValue;break;case"right":default:tagPath=[M,canvasLeft+canvasLeftBorder,rangeValue,L,canvasLeft-GUTTER_5,rangeValue,L,canvasLeft-2*GUTTER_5,rangeValue-smartText.height/2-2*flagStyle.marker.borderpadding,h,-tagWidth,v,smartText.height+4*flagStyle.marker.borderpadding,h,tagWidth,L,canvasLeft-GUTTER_5,rangeValue,z];tagTextPosition.x=canvasLeft-2*GUTTER_5-tagWidth/2;tagTextPosition.y=rangeValue}tagProps.value=formattedValue;tagProps.tagPath=tagPath;tagProps.tagTextPosition=tagTextPosition;return tagProps};_proto.draw=function draw(){var refLine=this,selfConfig=refLine.config,mergedTextStyle,mergedMarkerStyle,selfDefaultStyle=selfConfig.defaultStyle,flagStyle,bulbStyle,flagStyleMarker,flagStyleText,textStyle=selfConfig.textStyle,markerStyle=selfConfig.markerStyle,label=selfConfig.label,value=selfConfig.value,pathArr,labelProps,bulbPoints,tagProps,tagPath,tagTextPosition,isHovered=selfConfig.isHovered,alwaysVisible=selfConfig.alwaysVisible,baseTextStyle=refLine.getFromEnv("baseTextStyle");refLine.addGraphicalElement({el:"group",container:{id:"thermo",label:"group",isParent:true},component:refLine,label:"refLine",attr:{name:"reference-line-thermo"},id:"thermo"},true);refLine.addGraphicalElement({el:"group",container:{id:"thermo",label:"refLine"},component:refLine,label:"refLine-thermo-hover-group",attr:{name:"reference-line-hover-elem-group"},id:"thermo"},true);refLine.addGraphicalElement({el:"group",container:{id:"thermo",label:"refLine"},component:refLine,label:"refLine-thermo-group",attr:{name:"reference-line-group"},id:"thermo"},true);Object.assign(selfDefaultStyle.text,baseTextStyle);mergedTextStyle=(0,_lib.extend2)((0,_lib.extend2)({},selfDefaultStyle.text),textStyle);mergedMarkerStyle=(0,_lib.extend2)((0,_lib.extend2)({},selfDefaultStyle.marker),markerStyle);bulbStyle=(0,_lib.extend2)({},mergedMarkerStyle);pathArr=refLine.getPathArr();labelProps=refLine.getLabelsProps(pathArr,mergedMarkerStyle);bulbPoints=refLine.getBulbPoints(pathArr);if(pathArr.length){refLine.addGraphicalElement({el:"path",attr:{path:pathArr,stroke:mergedMarkerStyle.stroke||mergedMarkerStyle.fill,"fill-opacity":mergedMarkerStyle["fill-opacity"],"stroke-opacity":mergedMarkerStyle["stroke-opacity"],"stroke-width":mergedMarkerStyle["stroke-width"],"stroke-linecap":mergedMarkerStyle["stroke-linecap"],opacity:mergedMarkerStyle.opacity*(isHovered||alwaysVisible?1:.4),"stroke-dasharray":mergedMarkerStyle["stroke-dasharray"]||"none"},container:{label:"refLine-thermo-group"},component:refLine,label:"line"},true);bulbStyle["stroke-width"]=isHovered||alwaysVisible?mergedMarkerStyle["stroke-width"]||1:0;bulbStyle.stroke=markerStyle&&markerStyle.stroke||COLOR_595959;refLine.addGraphicalElement({el:"circle",attr:{cx:bulbPoints.cx,cy:bulbPoints.cy,r:anchorRadius},container:{label:"refLine-thermo-group"},css:bulbStyle,component:refLine,label:"anchor"});selfConfig.formattedMakerText=selfConfig.formatterFn({value:value,type:"referenceline",prefix:selfConfig.prefix,suffix:selfConfig.suffix});if(isHovered||alwaysVisible){flagStyle=(0,_lib.extend2)((0,_lib.extend2)((0,_lib.extend2)({},selfDefaultStyle),{text:{fill:COLOR_F3F3F3}}),{text:textStyle,marker:markerStyle});if(labelProps.isValidLabel){refLine.addGraphicalElement({el:"text",attr:{text:label,x:labelProps.x,y:labelProps.y-mergedMarkerStyle.borderpadding*(mergedTextStyle["vertical-align"]==="top"?-1:1),opacity:mergedTextStyle.opacity,"text-anchor":labelProps.textAnchor,"text-bound":[mergedMarkerStyle.fill,mergedMarkerStyle.fill,mergedMarkerStyle.borderthickness,mergedMarkerStyle.borderpadding,mergedMarkerStyle.borderradius,mergedMarkerStyle.borderdash,.2]},css:mergedTextStyle,container:{label:"refLine-thermo-hover-group"},component:refLine,label:"label"},true)}tagProps=refLine.getTagProps(mergedMarkerStyle,flagStyle,mergedTextStyle);tagPath=tagProps.tagPath;tagTextPosition=tagProps.tagTextPosition;flagStyleMarker=(0,_lib.extend2)({},flagStyle.marker);!flagStyleMarker.stroke&&(flagStyleMarker.stroke="none");refLine.addGraphicalElement({el:"path",attr:{path:tagPath},container:{label:"refLine-thermo-hover-group"},css:flagStyleMarker,component:refLine,label:"tag"},true);flagStyleText=(0,_lib.extend2)({},flagStyle.text);!flagStyleText["text-anchor"]&&(flagStyleText["text-anchor"]="middle");flagStyleText["vertical-align"]=MIDDLE;refLine.addGraphicalElement({el:"text",attr:{text:selfConfig.formattedValue,x:tagTextPosition.x,y:tagTextPosition.y},css:flagStyleText,container:{label:"refLine-thermo-hover-group"},component:refLine,label:"tag-text"},true)}}};return ReferenceLine}(_componentInterface.SmartRenderer);var _default=exports.default=ReferenceLine;