@fusioncharts/fusiontime/src/_internal/components/time-span-min-marker.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 _utc=require("@fusioncharts/utils/src/time-intervals/utc");var _timeIntervals=require("@fusioncharts/utils/src/time-intervals");var _lib=require("@fusioncharts/core/src/lib");var _timeConverter=_interopRequireDefault(require("@fusioncharts/utils/src/time-converter"));var _clipUtils=require("@fusioncharts/utils/src/clip-utils");var UNDEF;var GUTTER_2=2,GUTTER_5=5,GUTTER_8=8,GUTTER_14=14,MINIMAL="minimal",ROLLOVER="timeMarkerRollOver",ROLLOUT="timeMarkerRollOut",CLICK="timeMarkerClick";function isValidUnit(unit){switch(unit){case"year":case"quarter":case"month":case"week":case"day":case"hour":case"minute":case"second":case"millisecond":return true;default:return false}}function getInterVal(unit,isUTC){switch(unit){case"year":return isUTC?_utc.utcYear:_timeIntervals.timeYear;case"quarter":return isUTC?_utc.utcMonth:_timeIntervals.timeMonth;case"month":return isUTC?_utc.utcMonth:_timeIntervals.timeMonth;case"week":return isUTC?_utc.utcWeek:_timeIntervals.timeWeek;case"day":return isUTC?_utc.utcDay:_timeIntervals.timeDay;case"hour":return isUTC?_utc.utcHour:_timeIntervals.timeHour;case"minute":return isUTC?_utc.utcMinute:_timeIntervals.timeMinute;case"second":return isUTC?_utc.utcSecond:_timeIntervals.timeSecond;case"millisecond":return isUTC?_utc.utcMillisecond:_timeIntervals.timeMillisecond}}function isWithinMarker(timeMarker,chartX,chartY,marker){var hovered=false,dimensions=marker.markerDim,hoveredMarkerDim,i,len,canvasDim=timeMarker.getLinkedParent().getDimension(),showTimeSpanMarkerTooltipAt=timeMarker.config.showTimeSpanMarkerTooltipAt;for(i=0,len=dimensions.length;i<len;i++){var dimension=dimensions[i],widthInCanvas=Math.min(dimension.x+dimension.width,canvasDim.left+canvasDim.width)-Math.max(dimension.x,canvasDim.left);if(chartX>=dimension.x&&chartX<=dimension.x+dimension.width&&(showTimeSpanMarkerTooltipAt===1||widthInCanvas<=canvasDim.width*showTimeSpanMarkerTooltipAt)&&chartY>=dimension.y&&chartY<=dimension.y+dimension.height){hovered=true;timeMarker.config.previouslyHoveredIndex=marker.index;hoveredMarkerDim=dimension;break}}return{pointIndex:marker.index,hovered:hovered,pointObj:{hoveredMarkerDim:hoveredMarkerDim,index:hovered&&i,type:marker.type},previouslyHoveredIndex:timeMarker.config.previouslyHoveredIndex,component:timeMarker}}function isValidMarker(currDomainStart,currDomainEnd,totalDomainStart,totalDomainEnd){if(currDomainStart>=totalDomainStart&&currDomainStart<=totalDomainEnd||currDomainEnd<=totalDomainEnd&&currDomainEnd>=totalDomainStart||totalDomainStart>=currDomainStart&&totalDomainEnd<=currDomainEnd){return true}return false}var TimeSpanMinMarker=function(_SmartRenderer){function TimeSpanMinMarker(){var _this;for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_SmartRenderer.call.apply(_SmartRenderer,[this].concat(args))||this;_this.getClassName=function(baseName){if(baseName===void 0){baseName=""}var randomString=Math.random().toString(36).substring(2);return baseName+"-"+randomString};_this.getCSPNonce=function(){var metaTag=document.querySelector('meta[http-equiv="Content-Security-Policy"]');if(metaTag){var content=metaTag.getAttribute("content");if(content){var match=content.match(/'nonce-([^']+)'/);if(match){return match[1]}}}return null};return _this}(0,_inheritsLoose2.default)(TimeSpanMinMarker,_SmartRenderer);var _proto=TimeSpanMinMarker.prototype;_proto.__setDefaultConfig=function __setDefaultConfig(){_SmartRenderer.prototype.__setDefaultConfig.call(this);var config=this.config;config.defaultStyle={text:{fill:"#808080",opacity:1,"font-size":"10px","font-weight":"normal","font-style":"normal","text-anchor":"middle","fill-opacity":1,"stroke-opacity":1},marker:{fill:"#62b58f",opacity:.2,"fill-opacity":1,"stroke-opacity":1,"border-thickness":0,"border-padding":1,"border-radius":0,"border-dash":"none","stroke-width":1,"stroke-dasharray":"none",stroke:"none"}};this.config.lastHoveredMarkerIndex=UNDEF;this.config.lastHoveredDomainIndex=UNDEF;config.hoveredIndex=UNDEF;config.previouslyHoveredIndex=UNDEF;config.hoveredOpacity=.5;config.valueArr=[];config.textArr=[];config.styleArr=[];config.domainArr=[];config.markerDetails=[];config.type=MINIMAL;config.showTimeSpanMarkerTooltipAt=1};_proto.getHoveredMarker=function getHoveredMarker(chartXArg,chartYArg){var timeMarker=this,chartX=chartXArg,chartY=chartYArg,selfConfig=timeMarker.config,canvas=timeMarker.getLinkedParent(),translationObj=canvas.getTranslation(),hoverDetails,markerDetails=selfConfig.markerDetails,i;chartX-=translationObj.x;chartY-=translationObj.y;for(i=markerDetails.length-1;i>=0;i--){hoverDetails=isWithinMarker(timeMarker,chartX,chartY,markerDetails[i]);if(hoverDetails.hovered){break}}return hoverDetails};_proto.setHoverInEffect=function setHoverInEffect(index,domainIndex){var timeMarker=this,chart=timeMarker.getFromEnv("chart");timeMarker.setData({hoveredIndex:index,hoveredDomainIndex:domainIndex},true);chart.fireEvent("timeSpanMinMarkerHovered",{senderTimeMarker:timeMarker,hoveredIndex:index,hoveredFromOutside:true})};_proto.setHoverOutEffect=function setHoverOutEffect(){var timeMarker=this,config=timeMarker.config,chart=timeMarker.getFromEnv("chart");timeMarker.setData({hoveredIndex:UNDEF,lastHoveredMarkerIndex:config.hoveredIndex,lastHoveredDomainIndex:config.hoveredDomainIndex},true);chart.fireEvent("timeSpanMinMarkerHovered",{senderTimeMarker:timeMarker,hoveredIndex:UNDEF,hoveredFromOutside:true})};_proto.fireMarkerEvents=function fireMarkerEvents(type,hoverMarkerIndex,hoverDomainIndex){var timeMarker=this,config=timeMarker.config,valueArr=config.valueArr,textArr=config.textArr,domainArr=config.domainArr,markerIndex,domainIndex,dateFormatter,startMS,endMS,isUTC=timeMarker.getFromEnv("UTC"),timeFormat,chart=timeMarker.getFromEnv("chart"),eventToBeFired;switch(type){case"fc-mouseover":eventToBeFired=ROLLOVER;markerIndex=hoverMarkerIndex;domainIndex=hoverDomainIndex;break;case"fc-mouseout":markerIndex=config.lastHoveredMarkerIndex;domainIndex=config.lastHoveredDomainIndex;if(markerIndex!==UNDEF&&domainIndex!==UNDEF){eventToBeFired=ROLLOUT}break;case"fc-click":eventToBeFired=CLICK;markerIndex=hoverMarkerIndex;domainIndex=hoverDomainIndex;break}if(eventToBeFired){timeFormat=valueArr[markerIndex].timeFormat;dateFormatter=isUTC?_timeConverter.default.utcFormatter(timeFormat):_timeConverter.default.formatter(timeFormat);startMS=+domainArr[markerIndex][domainIndex].start;endMS=+domainArr[markerIndex][domainIndex].end;chart.fireChartInstanceEvent(eventToBeFired,{start:startMS,startText:dateFormatter.format(startMS),end:endMS,endText:dateFormatter.format(endMS),formatter:timeFormat,type:valueArr[markerIndex].type,label:textArr[markerIndex]})}};_proto.getToolTextConfiguration=function getToolTextConfiguration(toolTextArr,type){var timeMarker=this,_timeMarker$getFromEn=timeMarker.getFromEnv("tooltipStyle"),headerStyle=_timeMarker$getFromEn.header,bodyStyle=_timeMarker$getFromEn.body,totalWidth=2*GUTTER_5+2*GUTTER_8+GUTTER_14,totalHeight=2*GUTTER_5+2*GUTTER_8,smartLabel=timeMarker.getFromEnv("smartLabel"),smartText;smartLabel.setStyle({"font-size":headerStyle["font-size"],"font-family":headerStyle["font-family"],"font-weight":headerStyle["font-weight"]});smartText=smartLabel.getOriSize(toolTextArr[0]);totalWidth+=smartText.width;totalHeight+=smartText.height;var toolTipTextArrMarginClass=this.getClassName("tooltip-text-margin"),toolTipTextArrPaddingClass=this.getClassName("tooltip-text-padding"),chartNonce=this.getCSPNonce();if(toolTextArr[1]){smartLabel.setStyle({"font-size":bodyStyle["font-size"],"font-family":bodyStyle["font-family"],"font-weight":bodyStyle["font-weight"]});smartText=smartLabel.getOriSize(toolTextArr[1]);totalHeight+=smartText.height;totalWidth=Math.max(totalWidth,smartText.width);return{header:'<style nonce="'+chartNonce+'">.'+toolTipTextArrMarginClass+' {margin: 5px;}</style><div class="'+toolTipTextArrMarginClass+'">'+toolTextArr[0]+"</div>",body:'<style nonce="'+chartNonce+'">.'+toolTipTextArrMarginClass+' {margin: 5px;}</style><div class="'+toolTipTextArrMarginClass+'">'+toolTextArr[1]+"</div>",dimensions:{width:totalWidth,height:type!=="full"?totalHeight:0}}}return{header:'<style nonce="'+chartNonce+'">.'+toolTipTextArrPaddingClass+' {padding: 5px;}</style><div class="'+toolTipTextArrPaddingClass+'">'+toolTextArr[0]+"</div>",body:"",dimensions:{width:totalWidth,height:type!=="full"?totalHeight:0}}};_proto.getMarkerAndLabelConfiguration=function getMarkerAndLabelConfiguration(index,lineHeight){var timeMarker=this,selfConfig=timeMarker.config,canvasConfig=timeMarker.getLinkedParent().config,canvasPadding=canvasConfig.padding,leftPadding=canvasPadding.left,rightPadding=canvasPadding.right,topPadding=canvasPadding.top,bottomPaddding=canvasPadding.bottom,xScale=timeMarker.config.xScale,xScaleDomain=xScale.getDomain(),value=selfConfig.valueArr[index],repeat=value.repeat,startRangeValue,textX,textY,type,markerYPos,markerHeight,domainArr,startDomain,endDomain,endRangeValue;startRangeValue=xScale.getRangeValue(value.start);endRangeValue=xScale.getRangeValue(value.end);type=value.type;textY=type==="full"?canvasConfig.canvasTop+GUTTER_2+topPadding:canvasConfig.canvasTop+canvasConfig.canvasHeight-GUTTER_2-topPadding+bottomPaddding;markerYPos=type==="full"?canvasConfig.canvasTop-canvasConfig.padding.top:canvasConfig.canvasTop+canvasConfig.canvasHeight-(lineHeight+2*GUTTER_2)-topPadding+bottomPaddding;markerHeight=type==="full"?canvasConfig.canvasHeight:lineHeight+2*GUTTER_2;selfConfig.markerDetails[index].markerDim=[];selfConfig.domainArr[index]=[];selfConfig.markerDetails[index].index=index;if(!repeat&&isValidMarker(+value.start,+value.end,+xScaleDomain[0],+xScaleDomain[1])){selfConfig.domainArr[index].push({start:value.start,end:value.end});selfConfig.markerDetails[index].markerDim.push({x:startRangeValue-leftPadding+rightPadding,y:markerYPos,width:endRangeValue-startRangeValue,height:markerHeight});textX=startRangeValue-leftPadding+rightPadding;startDomain=value.start;endDomain=value.end}else if(repeat){selfConfig.domainArr[index]=domainArr=timeMarker.getAllValidDomains(value.start,value.end,value.repeat);if(domainArr.length){textX=xScale.getRangeValue(domainArr[0].start)-leftPadding+rightPadding;startDomain=domainArr[0].start;endDomain=domainArr[0].end;domainArr.forEach((function(domain){startRangeValue=xScale.getRangeValue(domain.start);endRangeValue=xScale.getRangeValue(domain.end);selfConfig.markerDetails[index].markerDim.push({x:startRangeValue-leftPadding+rightPadding,y:markerYPos,width:endRangeValue-startRangeValue,height:markerHeight});if(repeat.multiplier<0){textX=startRangeValue-leftPadding+rightPadding;startDomain=domain.start;endDomain=domain.end}}))}}selfConfig.markerDetails[index].type=type;return{labelConfiguration:{x:textX,y:textY,width:endRangeValue-startRangeValue-2*GUTTER_2,startDomain:startDomain,endDomain:endDomain}}};_proto.getAllValidDomains=function getAllValidDomains(startValueArg,endValueArg,repeatConfig){var timeMarker=this,scale=timeMarker.config.xScale,totalDomain=scale.getDomain(),startValue=startValueArg,endValue=endValueArg,domainArr=[],timeDifference=Number(endValue)-Number(startValue);if(+startValue<+totalDomain[0]&&repeatConfig.multiplier>0){while(!isValidMarker(+startValue,+endValue,+totalDomain[0],+totalDomain[1])&&+startValue<=+totalDomain[1]){startValue=repeatConfig.interval.offset(startValue,repeatConfig.multiplier);endValue=new Date(Number(startValue)+timeDifference)}}while(isValidMarker(+startValue,+endValue,+totalDomain[0],+totalDomain[1])){domainArr.push({start:startValue,end:endValue});startValue=repeatConfig.interval.offset(startValue,repeatConfig.multiplier);endValue=new Date(Number(startValue)+timeDifference)}return domainArr};_proto.configureAttributes=function configureAttributes(obj){if(obj===void 0){obj={}}_SmartRenderer.prototype.configureAttributes.call(this,obj);var timeMarker=this,config=timeMarker.config,styleArr=[],textArr=[],isUTC=timeMarker.getFromEnv("UTC"),_timeMarker$getFromEn2=timeMarker.getFromEnv("focusScalesX")[0].applicableClippings,repeatClips=_timeMarker$getFromEn2.repeatClips,singleClips=_timeMarker$getFromEn2.singleClips,valueArr=[],valueObj,parser,startValue,timeFormat,endValue,unit,getStyleDef=timeMarker.getFromEnv("getStyleDef"),chartDefaultTextStyle=timeMarker.getFromEnv("textStyle"),baseTextStyle=timeMarker.getFromEnv("baseTextStyle"),timeMarkerConf=obj.timeMarker||[],i,len,marker,markerStyle,textStyle,styles,defaultMergeTextStyle=Object.assign({},chartDefaultTextStyle,config.defaultStyle.text,baseTextStyle);timeMarkerConf.sort((function(a,b){return+new Date(a.start)-+new Date(b.start)}));for(i=0,len=timeMarkerConf.length;i<len;i++){marker=timeMarkerConf[i];if(!marker.start||marker.start===_lib.BLANKSTRING){continue}timeFormat=(0,_lib.pluck)(marker.timeformat,obj.defaultFormat);parser=isUTC?_timeConverter.default.utcParser(timeFormat):_timeConverter.default.parser(timeFormat);startValue=parser.parse(marker.start);endValue=parser.parse(marker.end);if(!startValue||!endValue){continue}if(+startValue>+endValue){var _ref=[endValue,startValue];startValue=_ref[0];endValue=_ref[1]}startValue=(0,_clipUtils.getUnclippedValue)(+startValue,repeatClips,singleClips,{clampDirection:"up"});endValue=(0,_clipUtils.getUnclippedValue)(+endValue,repeatClips,singleClips,{clampDirection:"down"});if(startValue>endValue){continue}valueObj={start:new Date(startValue),end:new Date(endValue),startString:marker.start,endString:marker.end,timeFormat:timeFormat,type:marker.type||config.type};if(marker.repeat&&marker.repeat.unit&&Math.floor(+marker.repeat.multiplier)!==0&&isValidUnit(unit=marker.repeat.unit.toLowerCase())){valueObj.repeat={interval:getInterVal(unit,isUTC),multiplier:(unit==="quarter"?3:1)*(0,_lib.pluckNumber)(marker.repeat.multiplier,1)}}styles=marker.style||{};textStyle=Object.assign({},defaultMergeTextStyle,{"vertical-align":valueObj.type==="full"?"top":"bottom"},getStyleDef(styles.text));markerStyle=Object.assign({},config.defaultStyle.marker,getStyleDef(styles.marker));valueArr.push(valueObj);styleArr.push({text:textStyle,"text:hover":Object.assign({},textStyle,getStyleDef(styles["text:hover"])),marker:markerStyle,"marker:hover":Object.assign({},markerStyle,getStyleDef(styles["marker:hover"]))});textArr.push((0,_lib.pluck)(marker.label,""))}if(obj.xScale)config.xScale=obj.xScale;config.hoveredIndex=obj.hoveredIndex;config.hoveredDomainIndex=obj.hoveredDomainIndex;config.lastHoveredMarkerIndex=obj.lastHoveredMarkerIndex;config.lastHoveredDomainIndex=obj.lastHoveredDomainIndex;if(obj.timeMarker){config.valueArr=valueArr;config.styleArr=styleArr;config.textArr=textArr;config.showTimeSpanMarkerTooltipAt=obj.showTimeSpanMarkerTooltipAt}};_proto.getAllLabelsProps=function getAllLabelsProps(index,labelConfiguration){var timeMarker=this,selfConfig=timeMarker.config,smartLabel=timeMarker.getFromEnv("smartLabel"),valueArr=selfConfig.valueArr,domains=selfConfig.domainArr[index],domain,timeFormat,markerDim,markerDetails=selfConfig.markerDetails[index],smartText,dateLabel,_this$getFromEnv$0$ap=this.getFromEnv("focusScalesX")[0].applicableClippings,repeatClips=_this$getFromEnv$0$ap.repeatClips,singleClips=_this$getFromEnv$0$ap.singleClips,unClippedStart=(0,_clipUtils.getUnclippedValue)(+labelConfiguration.startDomain,repeatClips,singleClips),unClippedEnd=(0,_clipUtils.getUnclippedValue)(+labelConfiguration.endDomain,repeatClips,singleClips),isUTC=timeMarker.getFromEnv("UTC"),dateFormatter,x=labelConfiguration.x,y=labelConfiguration.y,width=labelConfiguration.width,height=smartLabel._lineHeight,labelArr=[],toolText,i,len,label=selfConfig.textArr[index];if(unClippedEnd<=unClippedStart){return[]}if(label){smartText=smartLabel.getSmartText((0,_lib.parseUnsafeString)(label),width,height);labelArr.push({dim:{x:x+width/2+GUTTER_2,y:y-GUTTER_2},text:(0,_lib.parseUnsafeString)(smartText.text)})}timeFormat=valueArr[index].timeFormat;for(i=0,len=domains.length;i<len;i++){toolText=[];domain=domains[i];markerDim=markerDetails.markerDim[i];dateFormatter=isUTC?_timeConverter.default.utcFormatter(timeFormat):_timeConverter.default.formatter(timeFormat);dateLabel=dateFormatter.format(domain.start)+" - "+dateFormatter.format(domain.end);toolText.push(dateLabel);label&&toolText.push(smartText.oriText);markerDim.toolTextArr=toolText}return labelArr};_proto.createGroup=function createGroup(){var timeMarker=this,canvasConfig=timeMarker.getLinkedParent().config,padding=canvasConfig.padding,canvasLeft=canvasConfig.canvasBGLeft-padding.left,canvasTop=canvasConfig.canvasBGTop-padding.top,canvasWidth=canvasConfig.canvasBGWidth,canvasHeight=canvasConfig.canvasBGHeight,clipPath=["M"+canvasLeft+","+canvasTop,"L"+(canvasLeft+canvasWidth)+","+canvasTop,"L"+(canvasLeft+canvasWidth)+","+(canvasTop+canvasHeight),"L"+canvasLeft+","+(canvasTop+canvasHeight)+"Z"];timeMarker.addGraphicalElement({el:"group",container:{id:"thermo",label:"group",isParent:true},component:timeMarker,label:"timeMarker",attr:{name:"time-marker-min-group","clip-path":clipPath},id:"timeMarker"})};_proto.drawAllLabels=function drawAllLabels(allLabelProps,style){var timeMarker=this;allLabelProps.forEach((function(labelProp,index){timeMarker.addGraphicalElement({el:"text",attr:{text:labelProp.text,x:labelProp.dim.x,y:labelProp.dim.y,opacity:style.opacity},css:style,container:{label:"timeMarker"},id:"time-marker-label-"+index,component:timeMarker,label:"label"},true)}))};_proto.draw=function draw(){var timeMarker=this,selfConfig=timeMarker.config,smartLabel=timeMarker.getFromEnv("smartLabel"),values=selfConfig.valueArr,styleArr=selfConfig.styleArr,allLabelProps,markerAndLabelConfiguartion,markerArr,labelConfiguration,i,j,isHovered,textStyle,markerStyle,len;timeMarker.createGroup();selfConfig.markerDetails=[];for(i=0,len=values.length;i<len;i++){isHovered=i===selfConfig.hoveredIndex;selfConfig.markerDetails[i]={};textStyle=isHovered?styleArr[i]["text:hover"]:styleArr[i].text;markerStyle=isHovered?styleArr[i]["marker:hover"]:styleArr[i].marker;smartLabel.setStyle({"font-size":textStyle["font-size"]||styleArr[i].text["font-size"],"font-family":textStyle["font-family"]||styleArr[i].text["font-family"],"font-weight":textStyle["font-weight"]||styleArr[i].text["font-weight"]});smartLabel.getOriSize((0,_lib.parseUnsafeString)(selfConfig.textArr[i]));markerAndLabelConfiguartion=timeMarker.getMarkerAndLabelConfiguration(i,selfConfig.textArr[i]?smartLabel._lineHeight:13);markerArr=selfConfig.markerDetails[i].markerDim;labelConfiguration=markerAndLabelConfiguartion.labelConfiguration;if(markerArr.length){allLabelProps=timeMarker.getAllLabelsProps(i,labelConfiguration);for(j=0;j<markerArr.length;j++){timeMarker.addGraphicalElement({el:"rect",attr:{x:markerArr[j].x,y:markerArr[j].y,width:markerArr[j].width,height:markerArr[j].height,opacity:markerStyle.opacity},container:{label:"timeMarker"},css:markerStyle,id:"time-span-marker-"+i+j,component:timeMarker,label:"line"})}timeMarker.drawAllLabels(allLabelProps,textStyle)}}};_proto.getType=function getType(){return"timeMarker"};_proto.getName=function getName(){return"timeSpanMinMarker"};return TimeSpanMinMarker}(_componentInterface.SmartRenderer);var _default=exports.default=TimeSpanMinMarker;