@fusioncharts/fusiontime/src/_internal/components/reference-zone.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 M="M",h="h",v="v",Z="Z",L="L",GUTTER=1,GUTTER_5=5,GUTTER_1=1,COLOR_F3F3F3="#f3f3f3",anchorRadius=3,BOTTOM="bottom",TOP="top",ROLLOVER="referenceZoneRollOver",ROLLOUT="referenceZoneRollOut",CLICK="referenceZoneClick",isWithinYRange=function isWithinYRange(value,range){return value>=range[1]&&value<=range[0]},defaultStyle={marker:{fill:"#f76260",stroke:"#f76260","fill-opacity":"1","stroke-opacity":"1",opacity:"1",borderthickness:0,borderpadding:2,borderradius:0,borderdash:"none","stroke-width":1},"marker-zone":{stroke:"#f76260","fill-opacity":.2,fill:"#f76260","stroke-opacity":1,"stroke-width":0},"marker-zone:hover":{stroke:"#f76260","fill-opacity":.3,fill:"#f76260","stroke-opacity":1,"stroke-width":1},"marker-notch":{"stroke-width":0,stroke:"#f76260",fill:"#f76260","fill-opacity":1},"marker-notch:hover":{"stroke-width":1,stroke:"#f76260",fill:"#f76260","fill-opacity":.5},"marker-tag":{fill:"#f76260",stroke:"#f76260","fill-opacity":"1","stroke-opacity":"1",opacity:"1",borderthickness:0,borderpadding:2,borderradius:0,borderdash:"none","stroke-width":1},"marker-notch-connector":{fill:"none",stroke:"#f76260","fill-opacity":"1","stroke-opacity":"1",opacity:"1","stroke-width":1},text:{fill:"#5F5F5F","vertical-align":"top",opacity:"1","fill-opacity":"1","stroke-opacity":"1","font-size":"11px","font-style":"normal"},"marker-text":{fill:COLOR_F3F3F3,"vertical-align":"middle","text-anchor":"middle",opacity:"1","fill-opacity":"1","stroke-opacity":"1","font-size":"11px","font-style":"normal"}};var ReferenceZone=function(_SmartRenderer){function ReferenceZone(){var _this;_this=_SmartRenderer.call(this)||this;var refzone=_this,config=refzone.config,chart,scale,maxVaueFormatted,minValueFormatted;refzone.hoverInHandler=function(e){e.stopPropagation();chart=refzone.getFromEnv("chart");scale=config.yScale;refzone.setState("hovered",true);refzone.asyncDraw();refzone.fireEvent("referenceZoneHovered",{hovered:true,scale:config.yScale,range:{minValue:scale.getRangeValue(config.minValue),maxValue:scale.getRangeValue(config.maxValue)}});maxVaueFormatted=config.formatterFn({value:config.maxValue,type:"referenceline",prefix:config.prefix,suffix:config.suffix});minValueFormatted=config.formatterFn({value:config.minValue,type:"referenceline",prefix:config.prefix,suffix:config.suffix});chart.fireChartInstanceEvent(ROLLOVER,{label:config.label,valueMax:config.maxValue,valueMin:config.minValue,valueMaxFormatted:maxVaueFormatted,valueMinFormatted:minValueFormatted})};refzone.moveHandler=function(e){e.stopPropagation()};refzone.hoverOutHandler=function(e){e.stopPropagation();refzone.setState("hovered",false);refzone.asyncDraw();refzone.fireEvent("referenceZoneHovered",{hovered:false,scale:config.yScale,range:{minValue:scale.getRangeValue(config.minValue),maxValue:scale.getRangeValue(config.maxValue)}});chart.fireChartInstanceEvent(ROLLOUT,{label:config.label,valueMax:config.maxValue,valueMin:config.minValue,valueMaxFormatted:maxVaueFormatted,valueMinFormatted:minValueFormatted})};refzone.clickHandler=function(e){e.stopPropagation();chart.fireChartInstanceEvent(CLICK,{label:config.label,valueMax:config.maxValue,valueMin:config.minValue,valueMaxFormatted:maxVaueFormatted,valueMinFormatted:minValueFormatted})};refzone.referenceZoneHoveredHandler=function(e){var eventData=e.data,canvas=refzone.getLinkedParent();canvas.highlightDataPoints(eventData.hovered,eventData.scale,eventData.range)};refzone.canvasHoveredHandler=function(e){var canvas=refzone.getLinkedParent(),_refzone$config=refzone.config,yScale=_refzone$config.yScale,minValue=_refzone$config.minValue,maxValue=_refzone$config.maxValue;if(refzone.getState("hovered")){refzone.setState("hovered",false);refzone.asyncDraw();canvas.highlightDataPoints(false,yScale,{minValue:yScale.getRangeValue(minValue),maxValue:yScale.getRangeValue(maxValue)})}};return _this}(0,_inheritsLoose2.default)(ReferenceZone,_SmartRenderer);var _proto=ReferenceZone.prototype;_proto.__setDefaultConfig=function __setDefaultConfig(){_SmartRenderer.prototype.__setDefaultConfig.call(this);this.config.extStyle={}};_proto.configureAttributes=function configureAttributes(obj){if(obj===void 0){obj={}}_SmartRenderer.prototype.configureAttributes.call(this,obj);var refZone=this,selfConfig=refZone.config,refZoneConfig=obj.referenceLine||{},minValue,maxValue;minValue=(0,_lib.pluckNumber)(refZoneConfig.valuemin,0);maxValue=(0,_lib.pluckNumber)(refZoneConfig.valuemax,0);selfConfig.label=(0,_lib.pluck)(refZoneConfig.label,"");if(minValue>maxValue){var _ref=[maxValue,minValue];minValue=_ref[0];maxValue=_ref[1]}selfConfig.minValue=minValue;selfConfig.maxValue=maxValue;for(var key in obj){if(obj.hasOwnProperty(key)){this.config[key]=obj[key]}}selfConfig.formattedMinValue=selfConfig.formatterFn({value:selfConfig.minValue,type:"referenceline",prefix:selfConfig.prefix,suffix:selfConfig.suffix});selfConfig.formattedMaxValue=selfConfig.formatterFn({value:selfConfig.maxValue,type:"referenceline",prefix:selfConfig.prefix,suffix:selfConfig.suffix});refZone.createStyleDefinition()};_proto.createStyleDefinition=function createStyleDefinition(){var refZone=this,config=refZone.config,extStyle=config.extStyle,getStyleDef=refZone.getFromEnv("getStyleDef"),baseTextStyle=refZone.getFromEnv("baseTextStyle"),extMarkerStyle=getStyleDef(extStyle.marker),extMarkerHoverStyle=getStyleDef(extStyle["marker:hover"]),extMarkerZoneStyle=getStyleDef(extStyle["marker-zone"]),extMarkerZoneHoverStyle=getStyleDef(extStyle["marker-zone:hover"]),extMarkerTagStyle=getStyleDef(extStyle["marker-tag"]),extTextStyle=getStyleDef(extStyle.text),extMarkerTextStyle=getStyleDef(extStyle["marker-text"]),extMarkerNotchStyle=getStyleDef(extStyle["marker-notch"]),extMarkerNotchHoverStyle=getStyleDef(extStyle["marker-notch:hover"]),extMarkerNotchConnectorStyle=getStyleDef(extStyle["marker-notch-connector"]),extMarkerNotchConnectorHoverStyle=getStyleDef(extStyle["marker-notch-connector:hover"]);config.styleDefinition={marker:Object.assign({},defaultStyle.marker,extMarkerStyle),"marker:hover":Object.assign({},defaultStyle.marker,extMarkerHoverStyle),"marker-zone":Object.assign({},defaultStyle["marker-zone"],extMarkerStyle,extMarkerZoneStyle),"marker-zone:hover":Object.assign({},extMarkerStyle,extMarkerZoneStyle,defaultStyle["marker-zone:hover"],extMarkerHoverStyle,extMarkerZoneHoverStyle),"marker-tag":Object.assign({},defaultStyle["marker-tag"],extMarkerStyle,extMarkerTagStyle),text:Object.assign({},baseTextStyle,defaultStyle.text,extTextStyle),"marker-text":Object.assign({},baseTextStyle,defaultStyle["marker-text"],extTextStyle,extMarkerTextStyle),"marker-notch":Object.assign({},defaultStyle["marker-notch"],extMarkerStyle,extMarkerNotchStyle),"marker-notch:hover":Object.assign({},extMarkerStyle,extMarkerNotchStyle,defaultStyle["marker-notch:hover"],extMarkerHoverStyle,extMarkerNotchHoverStyle),"marker-notch-connector":Object.assign({},defaultStyle["marker-notch-connector"],extMarkerStyle,extMarkerNotchConnectorStyle),"marker-notch-connector:hover":Object.assign({},defaultStyle["marker-notch-connector"],extMarkerStyle,extMarkerNotchConnectorStyle,extMarkerHoverStyle,extMarkerNotchConnectorHoverStyle)}};_proto.getMarkerPath=function getMarkerPath(){var refLine=this,selfConfig=refLine.config,direction=selfConfig.direction,canvasConfig=refLine.getLinkedParent().config,canvasLeft=canvasConfig.canvasLeft,canvasWidth=canvasConfig.canvasWidth,canvasTop=canvasConfig.canvasTop,canvasHeight=canvasConfig.canvasHeight,canvasRight=canvasLeft+canvasWidth,canvasBottom=canvasTop+canvasHeight,rightBorder=canvasConfig.borderConfig.rightBorder,leftBorder=canvasConfig.borderConfig.leftBorder,topBorder=canvasConfig.borderConfig.topBorder,bottomBorder=canvasConfig.borderConfig.bottomBorder,yScale=selfConfig.yScale,minRangeValue,maxRangeValue,minValue=selfConfig.minValue,maxValue=selfConfig.maxValue,rangeDiffPx,zonePathArr=[],connectorPathArr=[];minRangeValue=yScale.getRangeValue(minValue);maxRangeValue=yScale.getRangeValue(maxValue);rangeDiffPx=minRangeValue-maxRangeValue;switch(direction){case"left":zonePathArr=[M,canvasRight-rightBorder,maxRangeValue,h,-canvasWidth,v,rangeDiffPx,h,canvasWidth,Z];connectorPathArr=[M,canvasRight-rightBorder-canvasWidth,maxRangeValue,v,rangeDiffPx];break;case"right":zonePathArr=[M,canvasLeft+leftBorder,maxRangeValue,h,canvasWidth,v,rangeDiffPx,h,-canvasWidth,Z];connectorPathArr=[M,canvasLeft+leftBorder+canvasWidth,maxRangeValue,v,rangeDiffPx];break;case"top":zonePathArr=[M,minRangeValue,canvasBottom-bottomBorder,v,-canvasHeight,h,rangeDiffPx,v,canvasHeight,Z];connectorPathArr=[M,minRangeValue,canvasBottom-bottomBorder-canvasHeight,h,rangeDiffPx];break;case"bottom":zonePathArr=[M,minRangeValue,canvasTop+topBorder,v,canvasHeight,h,rangeDiffPx,v,-canvasHeight,Z];connectorPathArr=[M,minRangeValue,canvasTop+topBorder+canvasHeight,h,rangeDiffPx];break}return{connectorPath:connectorPathArr,zonePath:zonePathArr}};_proto.getLabelsProps=function getLabelsProps(pathArr,styleDefinition){var refLine=this,mergedMarkerStyle=styleDefinition.marker,textStyle=styleDefinition.text,refLineConfig=refLine.config,canvasConfig=refLine.getLinkedParent().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]+pathArr[4];props.textAnchor="start";break;case"bottom":props.x=pathArr[1];props.y=pathArr[2]+pathArr[4];props.textAnchor="start";break;case"left":props.x=pathArr[1]+pathArr[4]+anchorRadius;props.y=pathArr[2]+pathArr[6]+mergedMarkerStyle.borderpadding;props.textAnchor="start";break;case"right":props.x=pathArr[1]+pathArr[4]-mergedMarkerStyle.borderpadding-1;props.y=pathArr[2]+pathArr[6]+mergedMarkerStyle.borderpadding;props.textAnchor="end"}if(canvasConfig.canvasBGHeight<props.y){props.y=canvasConfig.canvasBGHeight-2*mergedMarkerStyle.borderpadding;textStyle["vertical-align"]=BOTTOM}else{textStyle["vertical-align"]=TOP}}return props};_proto.getBulbPoints=function getBulbPoints(pathArr){var refLineConfig=this.config,direction=refLineConfig.direction,scale=refLineConfig.yScale,scaleRange=scale.getRange(),bulbPoints=[];if(pathArr){switch(direction){case"left":isWithinYRange(pathArr[2],scaleRange)&&bulbPoints.push({cx:pathArr[1]+pathArr[4],cy:pathArr[2]});isWithinYRange(pathArr[2]+pathArr[6],scaleRange)&&bulbPoints.push({cx:pathArr[1]+pathArr[4],cy:pathArr[2]+pathArr[6]});break;case"right":isWithinYRange(pathArr[2],scaleRange)&&bulbPoints.push({cx:pathArr[1]+pathArr[4],cy:pathArr[2]});isWithinYRange(pathArr[2]+pathArr[6],scaleRange)&&bulbPoints.push({cx:pathArr[1]+pathArr[4],cy:pathArr[2]+pathArr[6]})}}return bulbPoints};_proto.getTagProps=function getTagProps(mergedMarkerStyle,flagStyle,textStyle){var refLine=this,_this$config=this.config,yScale=_this$config.yScale,minValue=_this$config.minValue,maxValue=_this$config.maxValue,direction=_this$config.direction,formattedMinValue=_this$config.formattedMinValue,formattedMaxValue=_this$config.formattedMaxValue,scaleRange=yScale.getRange(),smartLabel=refLine.getFromEnv("smartLabel"),flagBorderPadding=2*flagStyle.borderpadding,tagPadding=2*(mergedMarkerStyle.borderpadding+GUTTER_1),minSmartText,maxSmartText,_refLine$getLinkedPar=refLine.getLinkedParent().config,canvasLeft=_refLine$getLinkedPar.canvasLeft,canvasWidth=_refLine$getLinkedPar.canvasWidth,canvasLeftBorder=_refLine$getLinkedPar.borderConfig.leftBorder,canvasRight=canvasLeft+canvasWidth,minRangeValue,maxRangeValue,tagWidth,tagProps=[];minRangeValue=yScale.getRangeValue(minValue);maxRangeValue=yScale.getRangeValue(maxValue);smartLabel.setStyle({fontFamily:textStyle["font-family"],fontWeight:textStyle["font-weight"],fontSize:textStyle["font-size"],fontStyle:textStyle["font-style"]});switch(direction){case"left":minSmartText=smartLabel.getSmartText(formattedMinValue);maxSmartText=smartLabel.getSmartText(formattedMaxValue);tagWidth=Math.max(minSmartText.width,maxSmartText.width)+tagPadding;isWithinYRange(minRangeValue,scaleRange)&&tagProps.push({tagPath:[M,canvasRight,minRangeValue,L,canvasRight+GUTTER_5,minRangeValue,L,canvasRight+2*GUTTER_5,minRangeValue-minSmartText.height/2-flagBorderPadding,h,tagWidth,v,minSmartText.height+4*flagStyle.borderpadding,h,-tagWidth,L,canvasRight+GUTTER_5,minRangeValue,Z],tagTextProps:{x:canvasRight+2*GUTTER_5+tagWidth/2,y:minRangeValue,value:formattedMinValue}});isWithinYRange(maxRangeValue,scaleRange)&&tagProps.push({tagPath:[M,canvasRight,maxRangeValue,L,canvasRight+GUTTER_5,maxRangeValue,L,canvasRight+2*GUTTER_5,maxRangeValue-maxSmartText.height/2-flagBorderPadding,h,tagWidth,v,maxSmartText.height+4*flagStyle.borderpadding,h,-tagWidth,L,canvasRight+GUTTER_5,maxRangeValue,Z],tagTextProps:{x:canvasRight+2*GUTTER_5+tagWidth/2,y:maxRangeValue,value:formattedMaxValue}});break;case"right":default:minSmartText=smartLabel.getSmartText(formattedMinValue);maxSmartText=smartLabel.getSmartText(formattedMaxValue);tagWidth=Math.max(minSmartText.width,maxSmartText.width)+tagPadding;isWithinYRange(minRangeValue,scaleRange)&&tagProps.push({tagPath:[M,canvasLeft+canvasLeftBorder,minRangeValue,L,canvasLeft-GUTTER_5,minRangeValue,L,canvasLeft-2*GUTTER_5,minRangeValue-minSmartText.height/2-flagBorderPadding,h,-tagWidth,v,minSmartText.height+4*flagStyle.borderpadding,h,tagWidth,L,canvasLeft-GUTTER_5,minRangeValue,Z],tagTextProps:{x:canvasLeft-2*GUTTER_5-tagWidth/2,y:minRangeValue,value:formattedMinValue}});isWithinYRange(maxRangeValue,scaleRange)&&tagProps.push({tagPath:[M,canvasLeft+canvasLeftBorder,maxRangeValue,L,canvasLeft-GUTTER_5,maxRangeValue,L,canvasLeft-2*GUTTER_5,maxRangeValue-maxSmartText.height/2-flagBorderPadding,h,-tagWidth,v,maxSmartText.height+4*flagStyle.borderpadding,h,tagWidth,L,canvasLeft-GUTTER_5,maxRangeValue,Z],tagTextProps:{x:canvasLeft-2*GUTTER_5-tagWidth/2,y:maxRangeValue,value:formattedMaxValue}})}return tagProps};_proto.draw=function draw(){var refZone=this,selfConfig=refZone.config,styleDefinition=selfConfig.styleDefinition,label=selfConfig.label,markerPath,zonePath,labelProps,bulbPoints,tagProps,tagPath,tagTextProps,isHovered=refZone.getState("hovered"),canvasConfig=refZone.getLinkedParent().config,padding=canvasConfig.padding,connectorStyle=isHovered?styleDefinition["marker-notch-connector:hover"]:styleDefinition["marker-notch-connector"],strokeWidth=Number.parseFloat(connectorStyle["stroke-width"])+GUTTER,left=canvasConfig.canvasBGLeft-padding.left-anchorRadius-(selfConfig.direction==="left"?strokeWidth:0),top=canvasConfig.canvasBGTop-padding.top-anchorRadius,width=canvasConfig.canvasBGWidth+2*anchorRadius+strokeWidth,height=canvasConfig.canvasBGHeight+2*anchorRadius,clipPath=["M"+left+","+top,"L"+(left+width)+","+top,"L"+(left+width)+","+(top+height),"L"+left+","+(top+height)+"Z"];refZone.addGraphicalElement({el:"group",container:{id:"exo",label:"group",isParent:true},component:refZone,label:"refZone",attr:{name:"reference-zone-exo"},id:"exo"},true);refZone.addGraphicalElement({el:"group",container:{id:"exo",label:"refZone"},component:refZone,label:"refZone-exo-group",attr:{name:"reference-zone-group","clip-path":clipPath},id:"exo"},true);refZone.addGraphicalElement({el:"group",container:{id:"exo",label:"refZone"},component:refZone,label:"refZone-exo-hover-group",attr:{name:"reference-zone-hover-elem-group"},id:"exo"},true);markerPath=refZone.getMarkerPath();zonePath=markerPath.zonePath;labelProps=refZone.getLabelsProps(zonePath,styleDefinition);bulbPoints=refZone.getBulbPoints(zonePath);if(zonePath.length){refZone.addGraphicalElement({el:"path",attr:{path:zonePath},container:{label:"refZone-exo-group"},css:isHovered?styleDefinition["marker-zone:hover"]:styleDefinition["marker-zone"],component:refZone,label:"line"},true);bulbPoints.forEach((function(bulbPoint){refZone.addGraphicalElement({el:"circle",attr:{cx:bulbPoint.cx,cy:bulbPoint.cy,r:anchorRadius},container:{label:"refZone-exo-hover-group"},css:isHovered?styleDefinition["marker-notch:hover"]:styleDefinition["marker-notch"],component:refZone,label:"anchor"})}));refZone.addGraphicalElement({el:"path",attr:{path:markerPath.connectorPath},container:{label:"refZone-exo-group"},css:connectorStyle,component:refZone,label:"anchorConnector"});if(isHovered){if(labelProps.isValidLabel){refZone.addGraphicalElement({el:"text",attr:{text:label,x:labelProps.x,y:labelProps.y-styleDefinition.marker.borderpadding*(styleDefinition.text["vertical-align"]==="top"?-1:1),"text-anchor":labelProps.textAnchor},css:styleDefinition.text,container:{label:"refZone-exo-hover-group"},outlineText:selfConfig.showTextOutline,component:refZone,label:"label"},true)}tagProps=refZone.getTagProps(styleDefinition.marker,styleDefinition["marker-tag"],styleDefinition.text);tagProps.forEach((function(tagProp){tagPath=tagProp.tagPath;tagTextProps=tagProp.tagTextProps;refZone.addGraphicalElement({el:"path",attr:{path:tagPath},container:{label:"refZone-exo-hover-group"},css:styleDefinition["marker-tag"],component:refZone,label:"tag"},true);refZone.addGraphicalElement({el:"text",attr:{text:tagTextProps.value,x:tagTextProps.x,y:tagTextProps.y},css:styleDefinition["marker-text"],container:{label:"refZone-exo-hover-group"},component:refZone,label:"tag-text"},true)}))}}};return ReferenceZone}(_componentInterface.SmartRenderer);var _default=exports.default=ReferenceZone;