quoslibero
Version:
FusionCharts JavaScript charting framework
1 lines • 13.2 kB
JavaScript
import GaugePolarNumeric from'./gauge-polar-numeric';import{pluck,toPrecision,pluckNumber,parseUnsafeString,preDefStr,getValidValue,convertColor,getFirstValue,getDashStyle}from'../lib';import{polarToCartesian}from'./utils/polar-util';import difference from'./utils/array/diff';import{addDep}from'../dependency-manager';import polarNumericAnimation from'./polar-numeric.animation';import LinearScale from'./scales/linear';var UNDEF,POSITION_MIDDLE=preDefStr.POSITION_MIDDLE,POSITION_START=preDefStr.POSITION_START,POSITION_TOP=preDefStr.POSITION_TOP,POSITION_BOTTOM=preDefStr.POSITION_BOTTOM,POSITION_END=preDefStr.POSITION_END,BLANKSTRING='',GUTTER_PADDING=5,M='M',L='L',math=Math,pi=math.PI,pi2=2*pi,TICK='_tick',LABEL_ID='_label',TRENDLINE_ID='_trendLine',TRENDLABEL_ID='_trendLabel',TRENDMARKER_ID='_marker';addDep({name:'polarNumericAnimation',type:'animationRule',extension:polarNumericAnimation});class PolarGaugeAxis extends GaugePolarNumeric{constructor(){super(),this.config.scale=new LinearScale,this.config.prevTickMarks=[],this.config.prevIntervalArrLabel=[],this.config.prevIntervalArrTrendLine=[]}getName(){return'polarNumeric'}setAxisDimention(){let a,b=this,c=b.getScale(),d=b.config,e=d.startAngle||pi2/2,f=d.totalAngle||pi2/2,g=d.axisDimention||(d.axisDimention={});g.centerX=d.centerX,g.centerY=d.centerY,g.axisLength=pi2,a=[e,e+f],c.setRange(a)}__setDefaultConfig(){super.__setDefaultConfig();let a=this.config;a.trendPoints=UNDEF,a.ticksBelowGauge=UNDEF,a.ticksBelowGraph=UNDEF,a.trendValueDistance=UNDEF}configureAttributes(a){var b,c=this,d=c.config;super.configureAttributes(a),b=d.rawAttr,d.upperLimitDisplay=b.upperLimitDisplay||'',d.lowerLimitDisplay=b.lowerLimitDisplay||'',d.polarPadding=4}_drawComponents(){var a=this,b=a.config;b.drawTick&&a._drawTick(),b.drawLabels&&a._drawLabel(),b.drawTrendLines&&a._drawTrendLine()}getAngle(a){var b,c=this,d=c.getScale();return b=d.getRangeValue(a),b}placeAxis(a){var b,c,d,e,f,g,h,j,k,l=this,m=l.config,n=l.getFromEnv('chart'),o=n.getFromEnv('smartLabel'),p=m.axisRange,q=m.labels.style,r=p.tickInterval||1,s=m.upperLimitDisplay,t=m.lowerLimitDisplay,u=p.max,v=p.min,w=0,x=n.getFromEnv('number-formatter');if(j={left:0,right:0,top:0,bottom:0},o.useEllipsesOnOverflow(n.config.useEllipsesWhenOverflow),o.setStyle({fontSize:q.fontSize,fontFamily:q.fontFamily,lineHeight:q.lineHeight,fontWeight:q.fontWeight}),l.components||(l.components={},l.components.labels=[]),m.labels.isDraw=1,m.labels.drawNormalVal=1,m.labels.drawLimitVal=1,m.lines.isDraw=1,m.labels.step=m.tickValueStep,m.labelPadding=0,k=a,m.drawLabels&&m.showTickValues&&0<k){for(m.labelPadding+=m.tickValueDistance,k-=m.tickValueDistance,f=x.scale,(c=v,d=0);c<=u;c+=r)e=''+f.call(x,toPrecision(c,10)),h=o.getOriSize(e,!0),l.components.labels[d]={config:{width:h.width,height:h.height,props:{label:{attr:{}}}}},d++,e.length>w&&(b=e,w=e.length);if(h=o.getOriSize(b,!0),h.width>a/2)return m.labels.isDraw=!1,j;m.showLimits?(s||t)&&(g=o.getOriSize(s,!0),g.width>h.width&&(b=s,w=g.width,h=g),g=o.getOriSize(t,!0),g.width>h.width&&(b=t,w=g.width,h=g)):m.labels.drawLimitVal=!1,h=o.getOriSize(b),m.labelMaxW=h.width,m.labelMaxW>a/2&&(m.labelMaxW=a/2),m.labelMaxH=h.height,m.placeValuesInside?m.labelPadding=-m.labelPadding:(j.right+=m.labelMaxW+m.tickValueDistance,j.left+=m.labelMaxW+m.tickValueDistance,j.top+=m.labelMaxH+m.tickValueDistance,j.bottom+=m.labelMaxH+m.tickValueDistance)}else m.labels.isDraw=!1;return j}_parseLabel(){var a,b,c,d,e,f,g,h,j,k,l,m,n,o=this,p=o.config,q=o.getFromEnv('chart'),r=p.axisRange,s=o.getScale(),t=q.getFromEnv('smartLabel'),u=p.labels,v=u.style,w=p.labelPadding||0,x=p.radius,y=pluckNumber(p.gaugeOuterRadius,x),z=pluckNumber(p.gaugeInnerRadius,x),A=p.centerX,B=p.centerY,C=p.placeValuesInside,D=p.labelMaxH,E=p.labelMaxW,F=r.max,G=r.min,H=p.ticks,I=H.length,J=q.getFromEnv('number-formatter');if(v.lineHeight&&(k=v.lineHeight,-1!==k.indexOf('px')&&(k=k.replace('px',''),k=parseFloat(k))),t.useEllipsesOnOverflow(q.config.useEllipsesWhenOverflow),t.setStyle({fontSize:v.fontSize,fontFamily:v.fontFamily,lineHeight:v.lineHeight,fontWeight:v.fontWeight}),p.labels.isDraw){for(a=o.components.labels,h=p.labels.step,j=c=>{d=H[c],f=s.getRangeValue(d),(p.labels.drawNormalVal||p.labels.drawLimitVal&&(d===G||d===F))&&(p.labels.drawNormalVal||d===G||d===F)&&(p.labels.drawLimitVal||d!==G&&d!==F)&&(0!==p.showZeroPlaneValue||0!==p.showZeroPlane||0!==d)&&(l=J.scale,d===G&&p.lowerLimitDisplay?(e=t.getSmartText(p.lowerLimitDisplay,E,D),g=e.text):d===F&&p.upperLimitDisplay?(e=t.getSmartText(p.upperLimitDisplay,E,D),g=e.text):g=l.call(J,toPrecision(d,10)),n=C?polarToCartesian(z+w-p.polarPadding,f):polarToCartesian(y+w+p.polarPadding,f),n.x+=A,n.y+=B,m={fill:v.color,"line-height":k,text:g,x:n.x,y:n.y},n.x>A-10&&n.x<A+10&&n.y<B?(m['text-anchor']=POSITION_MIDDLE,m['text-valign']=C?POSITION_TOP:POSITION_BOTTOM):n.x>A-10&&n.x<A+10&&n.y<B?(m['text-anchor']=POSITION_MIDDLE,m['text-valign']=C?POSITION_BOTTOM:POSITION_TOP):n.x<A?(m['text-anchor']=C?POSITION_START:POSITION_END,m['text-valign']='center'):(m['text-anchor']=C?POSITION_END:POSITION_START,m['text-valign']='center'),b=a[c]=a[c]||{config:{props:{label:{attr:{}}}}},b.config.props.label.attr=Object.assign(b.config.props.label.attr,m))},c=0;c<I;c+=h)j(c);0!=(I-1)%h&&j(I-1)}}_drawLabel(){var a,b,c,d,e,f,g,h,j,k,l=this,m=l.config,n=l.getFromEnv('chart'),o=m.axisRange,p=m.labels,q=p.style,r=o.max,s=o.min,t=m.axisLabelContainerTop,u=n.getFromEnv('animationManager'),v={fontFamily:q.fontFamily,fontSize:q.fontSize,fontWeight:q.fontWeight,fontStyle:q.fontStyle,lineHeight:q.lineHeight},w=m.ticks,x=w.length,y=[];if(t.show(),t.css(v),m.labels.isDraw){for(g=m.labels.step,h=a=>{b=w[a],(m.labels.drawNormalVal||m.labels.drawLimitVal&&(b===s||b===r))&&(m.labels.drawNormalVal||b===s||b===r)&&(m.labels.drawLimitVal||b!==s&&b!==r)&&(0!==m.showZeroPlaneValue||0!==m.showZeroPlane||0!==b)&&(y.push(b),k=l.getGraphicalElement(`${b}${LABEL_ID}`),d=l.components.labels[a].config.props.label.attr,c=u.setAnimation({el:k||'text',attr:d,container:t,component:l,label:'text'}),!k&&l.addGraphicalElement(`${b}${LABEL_ID}`,c))},a=0;a<x;a+=g)h(a);0!=(x-1)%g&&h(x-1)}for(f=difference(m.prevIntervalArrLabel,y),b=0,e=f.length;b<e;b++)j=l.getGraphicalElement(`${f[b]}${LABEL_ID}`),j&&l.removeGraphicalElement(j);m.prevIntervalArrLabel=y}_drawTick(){var a,b,c,d,e,f,g,h,j,k,l,m,n,o,p,q,r,s,t,u=this,v=u.config,w=v.drawTick,x=u.getScale(),y=v.drawTickMinor,z=u.getFromEnv('chart'),A=z.getFromEnv('animationManager'),B=v.radius,C=v.centerX,D=v.centerY,E=pluckNumber(v.gaugeOuterRadius,B),F=pluckNumber(v.gaugeInnerRadius,B),G=v.ticks,H=v.minorTicks;if(l=v.axisAxisLineContainer,e={stroke:v.majorTMColor,"stroke-width":v.majorTMThickness,"stroke-linecap":'round'},d={stroke:v.minorTMColor,"stroke-width":v.minorTMThickness,"stroke-linecap":'round'},l.show(),q=v.prevTickMarks,v.prevTickMarks=[],v.lines.isDraw&&w&&v.showTickMarks){for(v.prevTickMarks=G.slice(),j=0;j<G.length;j++)o=G[j],a=x.getRangeValue(o),v.placeTicksInside?(f=polarToCartesian(F,a),g=polarToCartesian(F+v.majorTMHeight,a)):(f=polarToCartesian(E,a),g=polarToCartesian(E-v.majorTMHeight,a)),f.x+=C,f.y+=D,g.x+=C,g.y+=D,e.path='M'+f.x+' '+f.y+'L'+g.x+' '+g.y,n=Object.assign({},e),p=u.getGraphicalElement(`${G[j]}${TICK}`),c=A.setAnimation({el:p||'path',attr:n,container:l,component:u,label:'path'}),p||u.addGraphicalElement(`${G[j]}${TICK}`,c);if(y)for(v.prevTickMarks=v.prevTickMarks.concat(H),j=0;j<H.length;j+=1)k=H[j],b=x.getRangeValue(k),v.placeTicksInside?(f=polarToCartesian(F,b),h=polarToCartesian(F+v.minorTMHeight,b)):(f=polarToCartesian(E,b),h=polarToCartesian(E-v.minorTMHeight,b)),f.x+=C,f.y+=D,h.x+=C,h.y+=D,d.path='M'+f.x+' '+f.y+'L'+h.x+' '+h.y,n=Object.assign({},d),r=u.getGraphicalElement(`${H[j]}${TICK}`),c=A.setAnimation({el:r||'path',attr:n,container:l,component:u,label:'path'}),r||u.addGraphicalElement(`${H[j]}${TICK}`,c)}for(m=difference(q,v.prevTickMarks),j=0,t=m.length;j<t;j++)s=u.getGraphicalElement(`${m[j]}${TICK}`),s&&u.removeGraphicalElement(s)}_drawTrendLine(){var a,b,c,d,e,f,g,h,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,N,O,P,Q,R=Math.cos,S=this,T=S.config,U=T.axisRange,V=S.getFromEnv('toolTipController'),W=U.max,X=S.getScale(),Y=U.min,Z=T.canvas,$=S.getFromEnv('chart'),_=$.config,aa=$.getFromEnv('smartLabel'),ba=$.getFromEnv('color-manager'),ca=$.getFromEnv('animationManager'),da=T.scaleFactor,ea=T.centerX||0,fa=T.centerY||0,ga=Z.canvasWidth||_.canvasWidth,ha=T.trend.trendStyle,ia=T.axisTrendContainerTop,ja=T.axisTrendContainerBottom,ka=T.axisTrendLabelContainer,la={fontFamily:ha.fontFamily,fontSize:ha.fontSize,lineHeight:ha.lineHeight,fontWeight:ha.fontWeight,fontStyle:ha.fontStyle},ma=$.getFromEnv('number-formatter'),na=T.trendPoints,oa=na&&na.point,pa=math.PI/180,qa={},ra=oa&&oa.length,sa={},ta={},ua={},va=[];for(aa.useEllipsesOnOverflow(_.useEllipsesWhenOverflow),aa.setStyle(la),b=0;b<ra;b+=1)h=na.point[b],va.push(h.startvalue+'_'+h.endvalue+'_'+b);for(K=difference(T.prevIntervalArrTrendLine,va),b=0,Q=K.length;b<Q;b++)N=S.getGraphicalElement(`${K[b]}${TRENDLINE_ID}`),O=S.getGraphicalElement(`${K[b]}${TRENDLABEL_ID}`),P=S.getGraphicalElement(`${K[b]}${TRENDMARKER_ID}`),N&&S.removeGraphicalElement(N),O&&S.removeGraphicalElement(O),P&&S.removeGraphicalElement(P);for(T.prevIntervalArrTrendLine=va.slice(),b=0;b<ra;b+=1)h=na.point[b],J=h.startvalue+'_'+h.endvalue+'_'+b,j=pluckNumber(h.startvalue,h.value),k=pluckNumber(h.endvalue,j),a=X.getRangeValue(j),g=j!==k,j<=W&&j>=Y&&k<=W&&k>=Y&&(l={startValue:j,endValue:k,tooltext:getValidValue(parseUnsafeString(h.markertooltext)),displayValue:getValidValue(parseUnsafeString(h.displayvalue),g?BLANKSTRING:ma.scale(j)),showOnTop:pluckNumber(h.showontop,T.ticksBelowGauge,T.ticksBelowGraph,1),color:pluck(h.color,ba.getColor('trendLightColor')),alpha:pluckNumber(h.alpha,99),thickness:pluckNumber(h.thickness,1),dashStyle:h.dashed?getDashStyle(h.dashlen||2,h.dashgap||2):'',useMarker:pluckNumber(h.usemarker,0),markerColor:convertColor(pluck(h.markercolor,h.color,ba.getColor('trendLightColor')),100),markerBorderColor:convertColor(pluck(h.markerbordercolor,h.bordercolor,ba.getColor('trendDarkColor')),100),markerRadius:pluckNumber(pluckNumber(h.markerradius)*da,5),markerToolText:getFirstValue(h.markertooltext),trendValueDistance:pluckNumber(pluckNumber(h.trendvaluedistance,T.trendValueDistance)*da,T.tickValueDistance),isTrendZone:g,valueInside:pluckNumber(h.valueinside,T.placeValuesInside,0),showBorder:pluckNumber(h.showborder,1),borderColor:convertColor(pluck(h.bordercolor,h.color,ba.getColor('trendDarkColor')),pluckNumber(h.borderalpha,h.alpha,100)),radius:pluckNumber(pluckNumber(h.radius)*da),innerRadius:pluckNumber(pluckNumber(h.innerradius)*da)},m=3,n=R(89.99*pa),o=-n,p=pluckNumber(l.radius,T.gaugeOuterRadius),q=pluckNumber(l.innerRadius,g?Math.max(T.gaugeInnerRadius-15,0):T.gaugeInnerRadius),r=polarToCartesian(p,a),s=polarToCartesian(q,a),r.x+=ea,r.y+=fa,s.x+=ea,s.y+=fa,t=r.x,u=r.y,v=s.x,w=s.y,x=S.getAngle(k),y=S.getAngle(j),g?(y>x&&(y+=x,x=y-x,y-=x),sa={fill:convertColor(l.color,l.alpha),"stroke-width":l.showBorder?l.thickness:0,stroke:l.borderColor,"stroke-dasharray":l.dashStyle,ringpath:[ea,fa,p,q,y,x]}):sa={"stroke-width":l.showBorder?l.thickness:0,stroke:l.borderColor,"stroke-linecap":'round',"stroke-dasharray":l.dashStyle,path:[M,t,u,L,v,w]},ta=l.useMarker?{fill:l.markerColor,"stroke-width":1,stroke:l.markerBorderColor,polypath:[m,t,u,l.markerRadius,(-y+Math.PI)/pa,0]}:{},l.displayValue===BLANKSTRING?ua={text:BLANKSTRING}:(z=(l.endValue+l.startValue)/2,x=S.getAngle(z),A=R(x),B=Math.sin(x),C=aa.getOriSize(l.displayValue).width,l.valueInside?(D=q-2-l.trendValueDistance,E=A>n?POSITION_END:A<o?POSITION_START:POSITION_MIDDLE):(D=p+2+l.trendValueDistance,E=A>n?POSITION_START:A<o?POSITION_END:POSITION_MIDDLE),t=ea+D*A,u=fa+D*B,F=aa.getOriSize(l.displayValue).height,qa=aa.getSmartText(l.displayValue,ga,F),t=ga<t+C?ga-C-GUTTER_PADDING:t<C?C+GUTTER_PADDING:t,C>ga&&(t=ga/2),ua={fill:convertColor(h.color,l.alpha)||ha.color,text:qa.text,"text-anchor":E,"vertical-align":POSITION_TOP,"text-bound":[ha.backgroundColor,ha.borderColor,ha.borderThickness,ha.borderPadding,ha.borderRadius,ha.borderDash],x:t,y:u},G=qa.height,u+=A>n||A<o?-(G/2)+.4*G*B*(l.valueInside?-1:1):l.valueInside?-(0>B?0:G):-(0<B?0:G),ua.y=u),d=S.getGraphicalElement(J+TRENDLINE_ID),e=S.getGraphicalElement(J+TRENDLABEL_ID),I=S.getGraphicalElement(J+TRENDMARKER_ID),c=g?ca.setAnimation({el:d||'ringpath',attr:sa,container:ja,component:S,label:'ringpath'}):ca.setAnimation({el:d||'path',attr:sa,container:ia,component:S,label:'path'}),c.show(),c.data('label',g?'ringPath':'path'),f=ca.setAnimation({el:e||'text',attr:ua,container:ka,component:S,label:'text'}),f.css(la),f.show(),H=ca.setAnimation({el:I||'polypath',attr:ta,container:ia,component:S,label:'polypath'}),H.show(),T.showTooltip&&(qa.oriText?V.enableToolTip(f,qa.oriText):V.disableToolTip(f),l.markerToolText?V.enableToolTip(H,l.markerToolText):V.disableToolTip(H)),!d&&S.addGraphicalElement(J+TRENDLINE_ID,c),!d&&S.addGraphicalElement(J+TRENDLABEL_ID,f),!I&&S.addGraphicalElement(J+TRENDMARKER_ID,H))}}export default PolarGaugeAxis;