quoslibero/vendors/fc-timeseries/src/_internal/components/data-marker/flag-marker.js

FusionCharts JavaScript charting framework

import SmartRenderer from'../../../../../fc-core/src/component-interface/smart-renderer';import timeConverter from'../../../../../fc-utils/src/time-converter';import{pluck,parseUnsafeString,defined}from'../../../../../fc-core/src/lib';import{convertColor}from'../../../../../fc-core/src/lib/lib-graphics';import{getMinPlaceHolder,getPlaceHolderIndex}from'../../../../../fc-utils/src/time-bucket';import{addDep}from'../../../../../fc-core/src/dependency-manager';import flagMarkerAnimation from'./flag-marker.animation';import isArray from'../../../../../fc-utils/src/type/is-array';import isObject from'../../../../../fc-utils/src/type/is-object';let pathStr='M12.4444444,0 L1.55555556,0 C0.7,0 0,0.654545455 0,1.45454545 L0,10.8363636 C0,11.3454545 0.233333333,11.7817897 0.7,12.0727273 L7,16 L13.3,12.0727273 C13.6888889,11.7818182 14,11.3454545 14,10.8363636 L14,1.45454545 C14,0.654545455 13.3,0 12.4444444,0 Z',flagHeight=16,stickLength=10,flagWidth=16,VISIBLE='visible';const getSameProperty=(a=[])=>{if(!isArray(a))return{};let b,c,d={},e=isObject(a[0])?a[0]:{},f=a.length,g=a=>isObject(a)&&a.hasOwnProperty(b)&&a[b]==e[b];for(b in e){let h=!0;for(c=1;c<f;++c)if(!g(a[c])){h=!1;break}h&&(d[b]=e[b])}return d};addDep({name:'flagMarkerAnimation',type:'animationRule',extension:flagMarkerAnimation});class FlagMarker extends SmartRenderer{configure(a){super.configure(a);var b,c,d=this,e=d.config,f=e.styleInfo;if(a.data&&(this.config.data=a.data),c=a.style)for(let d in b=f[a.index]||(f[a.index]={}),c)b[d]=c[d];e.skipGrouping=a.skipGrouping,defined(a.visibility)&&(e.visibility=a.visibility)}constructor(){super(),this._getMarkerBounds=function(){return{width:flagWidth,height:26}},this.config.styleInfo={}}setHoverInEffect(a){let b=this,c=b.config,d=c.markerInfo[a].markers,e=d[0].style||{},f={},g={},h={},i={},j=b.getFromEnv('getStyleDef');d.multipleMarkers?(g=d.markers.map(a=>a.style&&j(a.style['marker:hover'])||{}),i=d.markers.map(a=>a.style&&j(a.style['text:hover'])||{}),Object.assign(f,c.defaultHoverStyle,getSameProperty(g)),Object.assign(h,c.defaultHoverStyle,getSameProperty(i))):(Object.assign(f,c.defaultHoverStyle,j(e['marker:hover'])),Object.assign(h,c.defaultHoverStyle,j(e['text:hover']))),b.getFromEnv('animationManager').setAnimationState('mouseOver'),b.setData({style:{marker:f,text:h},index:a,skipGrouping:!0})}setHoverOutEffect(a){let b=this;b.getFromEnv('animationManager').setAnimationState('mouseOut'),b.setData({style:{marker:{},text:{}},index:a,skipGrouping:!0})}__setDefaultConfig(){var a=this.config;a['default-stroke-width']=1,a['default-fill-opacity']=.5,a['default-stroke-opacity']=.5,a['default-font-color']='#ffffff',a['default-stroke-color-multiple']='#8c8c8c',a['default-tooltip-background']='#f2eded',a.defaultMarkerStyle={"stroke-width":1,"fill-opacity":.5,"stroke-opacity":.5},a.defaultTextStyle={fill:'#ffffff',"font-size":'12px',"fill-opacity":1,"stroke-opacity":1,"text-anchor":'middle',"font-weight":'normal',"font-style":'normal'},a.defaultHoverStyle={opacity:1,"fill-opacity":1,"stroke-opacity":1}}draw(){this.config.visibility===VISIBLE&&(this._createGroup(),this._drawMarkers())}getType(){return'dataMarker'}getName(){return'flagMarker'}_checkPointOverMarker(a,b,c,d){for(var e,f,g,h,i,j,k=this,l=k.config,m=l.dataInfo,n=k._getMarkerBounds(),o=l.markerInfo,p=Math.ceil(a),q=Math.floor(a),r=d,s=[p,q];r<n.width;)s.unshift(++p),s.push(--q),r+=d;return s.forEach(a=>{!j&&o[a]&&(e=m[a],f=e.x,g=e.y,h=(e.width||0)/2,i=f+h,b>=i-n.width/2&&b<=i+n.width/2&&c<=g&&c>=g-n.height&&(j={pointIndex:a,hovered:!0,pointObj:e,markerObj:o[a],component:k}))}),j}_getTooltext(a){var b,c,d=this,e=d.config,f=e.markerInfo,g=f[a],h=g.markers,j=h.length,k=g.multipleMarkers;return g.formatedTime||(g.formatedTime=d.getFromEnv('xScale').getFormattedTime({type:'tooltip',dateRange:g})),g.tooltipValue||(g.tooltipValue=d.getFromEnv('yScale').tickFormat(4,'.2s')(g.value)),b=`<div style='margin-bottom: 6px'>${g.formatedTime}</div>`,c=`<div style='margin-bottom:6px; height: 14px;'>
    <div style='float: left;'>${g.seriesname}:<span style='padding-left:8px'>${g.tooltipValue}</span></div>
    </div>`,h.forEach((a,b)=>{k&&(c+=`<div style='clear: both; margin-bottom:2px; font-weight: 600;'>${a.time}</div>`),c+=a.tooltext?`<div style='clear: both; ${b<j-1?'margin-bottom: 6px':''}'>${parseUnsafeString(a.tooltext)}</div>`:''}),{header:b,body:c}}allocatePosition(){this.config.skipGrouping||this._groupMarkers()}_groupMarkers(){var a,b,c,d,e=this,f=e.getLinkedParent(),g=f._getRelevantInfo(),h=g.firstTimeStamp,i=g.dataInfo,j=e.config,k=j.markerInfo={},l=e.getFromEnv('binDecider'),m=l.getRangeThreshold(),n=m[0]._name,o=j.data;j.dataInfo=i,o.forEach(f=>{c=timeConverter.parser(f.timeformat).parse(f.time),d=getPlaceHolderIndex(n)-getPlaceHolderIndex(getMinPlaceHolder(f.timeformat)),c&&0<=d&&1>=d&&(c=c.getTime(),c>=h&&(b=e.getFromEnv('xScale').getBinIndex(c,h),i[b]&&(!k[b]&&(a=k[b]={markers:[],id:f.seriesname+f.time,startDate:i[b].startDate,seriesname:f.seriesname,endDate:i[b].endDate}),a.markers.push(f),1<a.markers.length&&(a.multipleMarkers=!0))))})}_createGroup(){var a=this;a.addGraphicalElement({el:'group',container:{label:'group',id:'thermo',isParent:!0},component:a,label:'group',attr:{name:'markerGroup-thermo'}})}getStyleInformation(a){let b,c,d,e,f,g,h,i,j,k,l=this,m=l.config,n=m.styleInfo,o=m.markerInfo[a],p=l.getFromEnv('getStyleDef'),q=m.defaultMarkerStyle,r=m.defaultTextStyle,s=l.getLinkedParent()._getRelevantInfo(),t=l.getFromEnv('baseTextStyle');return g={},h={},i=n[a]||{},c=i.marker||{},f=o.markers[0],e=f.style||{},b=p(e.marker),d=p(e.text),o.multipleMarkers?(k=o.markers.map(a=>a.style&&p(a.style.marker)||{}),j=o.markers.map(a=>a.style&&p(a.style.text)||{}),b=getSameProperty(k),d=getSameProperty(j),!b.fill&&(b.fill=o.fill=m['default-stroke-color-multiple']),!b.stroke&&(b.stroke=m['default-stroke-color-multiple'])):(b.fill=o.fill=convertColor(pluck(b.fill,s.fill),100*pluck(c['fill-opacity'],b['fill-opacity'],q['fill-opacity'])),b.stroke=o.stroke=convertColor(pluck(b.stroke,s.fill),100*pluck(c['stroke-opacity'],b['stroke-opacity'],q['fill-opacity']))),Object.assign(g,q,b,i.marker),Object.assign(h,r,t,d,i.text),{marker:g,text:h}}_drawMarkers(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p=this,q=p.config,r=q.dataInfo,s={},t=q.markerInfo;for(g in t)b=r[g],f=t[g],m=f.multipleMarkers,i=f.id,a=b.y,c=b.x,d=b.width||0,h=c+d/2,l=a-stickLength,s=p.getStyleInformation(g),e=f.markers[0],f.value=b.value,n=s.marker.opacity,o=s.text.opacity,k={path:['M',h,a,'V',l],opacity:n},p.addGraphicalElement({el:'path',container:{label:'group'},id:i,component:p,attr:k,css:s.marker,label:'flagStick'},!0),k={path:pathStr,transform:`t${h-8+1},${l-flagHeight}`,opacity:n},p.addGraphicalElement({el:'path',container:{label:'group'},id:i,component:p,attr:k,css:s.marker,label:'flagTriangle'},!0),(m||(j=e.identifier))&&(k={text:m?f.markers.length:j.charAt(0),x:h,y:l-8,opacity:o},p.addGraphicalElement({el:'text',container:{label:'group'},id:i,component:p,attr:k,css:s.text,label:'markerText'},!0));p.styleInfo={}}}export default FlagMarker;