quoslibero/vendors/fc-timeseries/src/_internal/components/time-instance-marker.js

FusionCharts JavaScript charting framework

import{SmartRenderer}from'../../../../fc-core/src/component-interface';import{utcMillisecond,utcSecond,utcMinute,utcHour,utcDay,utcWeek,utcMonth,utcYear}from'../../../../fc-utils/src/time-intervals/utc';import{timeMillisecond,timeSecond,timeMinute,timeHour,timeDay,timeWeek,timeMonth,timeYear}from'../../../../fc-utils/src/time-intervals';import{pluckNumber,pluck,BLANKSTRING,parseUnsafeString}from'../../../../fc-core/src/lib';import TimeConverter from'../../../../fc-utils/src/time-converter';const GUTTER_5=5,GUTTER_8=8,GUTTER_14=14,M='M',v='v';function isValidUnit(a){return!('year'!==a&&'quarter'!==a&&'month'!==a&&'week'!==a&&'day'!==a&&'hour'!==a&&'minute'!==a&&'second'!==a&&'millisecond'!==a)}function getInterVal(a,b){return'year'===a?b?utcYear:timeYear:'quarter'===a?b?utcMonth:timeMonth:'month'===a?b?utcMonth:timeMonth:'week'===a?b?utcWeek:timeWeek:'day'===a?b?utcDay:timeDay:'hour'===a?b?utcHour:timeHour:'minute'===a?b?utcMinute:timeMinute:'second'===a?b?utcSecond:timeSecond:'millisecond'===a?b?utcMillisecond:timeMillisecond:void 0}function isWithinMarker(a,b,c,d){let e,f,g,h,j=!1,k=d.markerDim;for(g=0,h=k.length;g<h;g++)if(b>=k[g].x&&b<=k[g].x+k[g].width&&c>=k[g].y&&c<=k[g].y+k[g].height){j=!0,a.config.previouslyHoveredIndex=d.index,e=k[g];break}return f={pointIndex:d.index,hovered:j,pointObj:{hoveredMarkerDim:e,index:j&&g},previouslyHoveredIndex:a.config.previouslyHoveredIndex,component:a},f}class TimeInstanceMarker extends SmartRenderer{__setDefaultConfig(){super.__setDefaultConfig(),this.config.defaultStyle={text:{fill:'#808080',"font-size":'11px',"font-weight":'normal',"font-style":'normal',"vertical-align":'middle',"text-anchor":'middle',"fill-opacity":'1',"stroke-opacity":'1',opacity:1},marker:{fill:'#f8b8b7',opacity:1,stroke:'#666666',r:2,"stroke-width":'1',"stroke-dasharray":'none',"fill-opacity":'1',"stroke-opacity":'1'}},this.config.hoveredMarkerIndex=void 0,this.config.hoveredDomainIndex=void 0,this.config.previouslyHoveredIndex=void 0,this.config.hoveredFromOutside=!1,this.config.hoveredLabelFill='#ffffff',this.config.hoveredMarkerRadius='1.5',this.config.valueArr=[],this.config.textArr=[],this.config.styleArr=[],this.config.domainArr=[],this.config.repeatationArr=[],this.config.markerDetails=[],this.config.type='minimal'}getHoveredMarker(a,b){let c,d,e=this,f=e.config,g=e.getLinkedParent(),h=g.getTranslation(),j=f.markerDetails;for(a-=h.x,b-=h.y,d=j.length-1;0<=d&&(c=isWithinMarker(e,a,b,j[d]),!c.hovered);d--);return c}setHoverInEffect(a,b,c){let d=this,e=d.getFromEnv('chart');d.setData({hoveredMarkerIndex:a,hoveredDomainIndex:b,hoveredFromOutside:c},!0),e.fireEvent('timeInstanceMarkerHovered',{senderTimeMarker:d,hoveredMarkerIndex:a,hoveredDomainIndex:b,hoveredFromOutside:!0})}setHoverOutEffect(){let a=this,b=a.getFromEnv('chart');a.setData({hoveredMarkerIndex:void 0,hoveredDomainIndex:void 0},!0),b.fireEvent('timeInstanceMarkerHovered',{senderTimeMarker:a,hoveredMarkerIndex:void 0,hoveredDomainIndex:void 0,hoveredFromOutside:!0})}getToolTextConfiguration(a){var b=Math.max;let c,d,e,f=this,{header:g,body:h}=f.getFromEnv('tooltipStyle'),j=40,k=46,l=f.getFromEnv('smartLabel'),m={};if(l.setStyle({"font-size":g['font-size'],"font-family":g['font-family'],"font-weight":g['font-weight']}),e=l.getOriSize(a[0]),j+=e.width,k+=e.height,m.header=`<div style='margin: 5px;'>${a[0]}</div>`,m.body='<div>',l.setStyle({"font-size":h['font-size'],"font-family":h['font-family'],"font-weight":h['font-weight']}),2<a.length)for(m.body+=`</br>`,c=1,d=a.length;c<d;c++)a[c]&&(e=l.getOriSize(a[c]),k+=e.height,j=b(j,e.width),m.body+=`<div style= 'margin: 5px;'>${c}. ${a[c]}</div>`);else 2===a.length&&a[1]&&(e=l.getOriSize(a[1]),k+=e.height,j=b(j,e.width),m.body+=`<div style= 'margin: 5px;'>${a[1]}</div>`);return m.body+=`</div>`,m.dimensions={width:j,height:k},m}reCalculateDimension(a,b,c){let d=this,e=d.config,f=e.domainArr[a][b],g=d.config.xScale,h=d.getLinkedParent().config,i=h.padding,j=i.left,k=i.right,l=i.top,m=i.bottom,n=g.getRangeValue(f),o=e.markerDetails[a].markerDim[b],p=n-c/2-j+k,q=h.canvasBGTop+h.canvasBGHeight-c/2-l+m,r=2*c/2;o.x=p,o.y=q,o.width=r,o.height=2*c/2,o.thresholdX=p<h.canvasBGLeft?p-h.canvasBGLeft:p+r>h.canvasBGLeft+h.canvasBGWidth?p+r-(h.canvasBGLeft+h.canvasBGWidth):0,o.thresholdY=c/2}getMarkerDimension(a,b){let c=this,d=c.config.xScale,e=c.getLinkedParent().config,f=e.padding,g=f.left,h=f.right,i=f.top,j=f.bottom,k=d.getRangeValue(a),l=k-b/2-g+h,m=e.canvasBGTop+e.canvasBGHeight-b/2-i+j,n=2*b/2;return{x:l,y:m,width:n,height:2*b/2,thresholdX:l<e.canvasBGLeft?l-e.canvasBGLeft:l+n>e.canvasBGLeft+e.canvasBGWidth?l+n-(e.canvasBGLeft+e.canvasBGWidth):0,thresholdY:b/2}}getMarkerAndLabelConfiguration(a,b){let c,d=this,e=d.config,f=d.config.xScale,g=f.getDomain(),h=e.valueArr[a],i=h.repeat,j=parseFloat(b.text['line-height']);e.markerDetails[a].markerDim=[],e.markerDetails[a].index=a,e.domainArr[a]=[],!i&&+h.start>=+g[0]&&+h.start<=+g[1]?(e.domainArr[a].push(h.start),e.markerDetails[a].markerDim.push(d.getMarkerDimension(h.start,j))):i&&(e.domainArr[a]=c=d.getAllValidDomains(h.start,h.repeat),c.length&&c.forEach(b=>{e.markerDetails[a].markerDim.push(d.getMarkerDimension(b,j))}))}getAllValidDomains(a,b){let c=this,d=c.config.xScale,e=d.getDomain(),f=[];if(+a<+e[0]&&0<b.multiplier)for(;+a<+e[0];)a=b.interval.offset(a,b.multiplier);for(;+a<=+e[1];)f.push(a),a=b.interval.offset(a,b.multiplier);return f}configureAttributes(a={}){super.configureAttributes(a);let b,c,d,e,f,g,h,j,k,l,m,n,o,p,q,r,s=this,t=s.config,u=[],v=[],w=s.getFromEnv('isUTC'),x=[],y=s.getFromEnv('getStyleDef'),z=s.getFromEnv('textStyle'),A=s.getFromEnv('baseTextStyle'),B=a.timeMarker||[],C=Object.assign({},z,t.defaultStyle.text,A);for(g=0,h=B.length;g<h;g++)(j=B[g],j.start&&j.start!==BLANKSTRING)&&(f=pluck(j.timeformat,a.defaultFormat),c=w?TimeConverter.utcParser(f):TimeConverter.parser(f),d=c.parse(j.start),!!d)&&(b={start:d,startString:j.start,timeFormat:f,type:j.type||t.type},j.repeat&&j.repeat.unit&&0!==Math.floor(+j.repeat.multiplier)&&isValidUnit(e=j.repeat.unit.toLowerCase())&&(b.repeat={interval:getInterVal(e,w),multiplier:('quarter'===e?3:1)*pluckNumber(j.repeat.multiplier,1)}),k=j.style||{},x.push(b),l=Object.assign({},C,{},y(k.text)),m=Object.assign({},t.defaultStyle.marker,y(k.marker)),r=y(k['marker:hover']),n=Object.assign({},m,r),o=Object.assign({},m,y(k['marker-box'])),p=Object.assign({},m,y(k['marker-notch'])),q=Object.assign({},m,y(k['marker-line'])),u.push({text:l,"text:hover":Object.assign({},l,y(k['text:hover'])),marker:m,"marker:hover":n,"marker-box":o,"marker-box:hover":Object.assign({},o,r,y(k['marker-box:hover'])),"marker-notch":p,"marker-notch:hover":Object.assign({},p,r,y(k['marker-notch:hover'])),"marker-line":q,"marker-line:hover":Object.assign({},q,r,y(k['marker-line:hover']))}),v.push(pluck(parseUnsafeString(j.label),'')));a.xScale&&(t.xScale=a.xScale),t.hoveredMarkerIndex=a.hoveredMarkerIndex,t.hoveredDomainIndex=a.hoveredDomainIndex,t.hoveredFromOutside=a.hoveredFromOutside,a.timeMarker&&(t.valueArr=x,t.styleArr=u,t.textArr=v)}createToolipConfiguration(){let a,b,c,d,e,f,g=this,h=g.config,k=h.markerDetails,l=h.domainArr,m=h.repeatationArr,n=h.valueArr,o=g.getFromEnv('isUTC'),p=[];for(e=0;e<l.length;e++)for(a=l[e],b=n[e].timeFormat,c=o?TimeConverter.utcFormatter(b):TimeConverter.formatter(b),f=0;f<a.length;f++)p=[],d=c.format(a[f]),p=p.concat([d],m[e][f].labels),k[e].markerDim[f].toolTextArr=p}getRepeatationArr(){let a,b,c,d,e,f,g,h=this,k=h.config,l=k.domainArr,m=k.textArr,n=k.markerDetails,o=[];for(f=0;f<l.length;f++)for(d=l[f],o[f]=[],g=0;g<d.length;g++)for(a=f,e=d[g],o[f][g]={domainValue:e,labels:[m[f]],markerDimIndex:g};a+1<l.length;)c=l[a+1].map(a=>+a),-1!==(b=c.indexOf(+e))&&(o[f][g].labels.push(m[a+1]),l[a+1]=l[a+1].filter(a=>+a!=+e),n[a+1].markerDim=n[a+1].markerDim.filter((a,c)=>c!==b)),a++;return o}draw(){let a,b,c=this,d=c.config,e=d.valueArr,f=d.styleArr;for(c.addGraphicalElement({el:'group',container:{id:'thermo',label:'thermo',isParent:!0},component:c,label:'timeMarkerHoverGroup',attr:{name:'time-marker-hover-elem-group'},id:'timeMarker'}),c.addGraphicalElement({el:'group',container:{id:'thermo',label:'thermo',isParent:!0},component:c,label:'timeMarker',attr:{name:'time-marker-group'},id:'timeMarker'}),d.markerDetails=[],(a=0,b=e.length);a<b;a++)d.markerDetails[a]={},c.getMarkerAndLabelConfiguration(a,f[a]);d.repeatationArr=c.getRepeatationArr(),c.createToolipConfiguration(),c.drawTimeMarkers(),c.drawTimeMarkerLabels()}drawTimeMarkers(){let a,b,c,d,e,f,g,h,k=this,l=k.config,m=l.markerDetails,n=k.getLinkedParent().config,o=n.padding,p=l.styleArr;for(g=0;g<m.length;g++)for(a=m[g].markerDim,d=l.valueArr[g].type,h=0;h<a.length;h++)c=g===l.hoveredMarkerIndex&&h===l.hoveredDomainIndex,f=p[g],e=parseFloat(c?f['text:hover']['line-height']:f.text['line-height'],10),e!==parseFloat(f.text['line-height'],10)&&k.reCalculateDimension(g,h,e),b=a[h],(c||'full'===d)&&(k.addGraphicalElement({el:'path',attr:{path:[M,b.x+b.width/2,b.y+b.height/2,v,-n.canvasBGHeight],opacity:c?f['marker-line:hover'].opacity:f['marker-line'].opacity},container:{label:'timeMarkerHoverGroup'},id:'time-instance-marker-path-'+g+h,css:c?f['marker-line:hover']:f['marker-line'],component:k,label:'path'}),k.addGraphicalElement({el:'circle',attr:{cx:b.x+b.width/2,cy:n.canvasTop+l.hoveredMarkerRadius+o.bottom-o.top,r:l.hoveredMarkerRadius,opacity:c?f['marker-notch:hover'].opacity:f['marker-notch'].opacity},container:{label:'timeMarkerHoverGroup'},css:c?f['marker-notch:hover']:f['marker-notch'],id:'time-instance-marker-circle-'+g+h,component:k,label:'path'})),k.addGraphicalElement({el:'rect',attr:{x:b.x,y:b.y,width:b.width,height:b.height,opacity:c?f['marker-box:hover'].opacity:f['marker-box'].opacity},container:{label:'timeMarker'},css:c?f['marker-box:hover']:f['marker-box'],id:'time-instance-marker-rect-'+g+h,component:k,label:'rect'})}drawTimeMarkerLabels(){let a,b,c,d,e,f,g,h=this,k=h.config,l=k.markerDetails,m=k.repeatationArr,n=k.styleArr;for(f=0;f<m.length;f++)for(b=m[f],g=0;g<b.length;g++)d=b[g],c=f===k.hoveredMarkerIndex&&g===k.hoveredDomainIndex,1<(e=d.labels.length)&&(a=l[f].markerDim[d.markerDimIndex],h.addGraphicalElement({el:'text',attr:{x:a.x+a.width/2,y:a.y+a.height/2,text:e,opacity:c?n[f]['text:hover'].opacity:n[f].text.opacity},container:{label:'timeMarker'},css:c?n[f]['text:hover']:n[f].text,id:'time-instance-marker-text-'+f+g,component:h,label:'text'}))}getType(){return'timeMarker'}getName(){return'timeInstanceMarker'}}export default TimeInstanceMarker;