lemon-ngx-trend/bundles/lemon-ngx-trend.umd.min.js

ngx-trend Angular component for Lemoncloud

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/animations"),require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("lemon-ngx-trend",["exports","@angular/animations","@angular/core","@angular/common"],e):e((t=t||self)["lemon-ngx-trend"]={},t.ng.animations,t.ng.core,t.ng.common)}(this,function(t,e,n,i){"use strict";function a(t,e,n,i){var a,r=arguments.length,o=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(o=(r<3?a(o):r>3?a(e,n,o):a(e,n))||o);return r>3&&o&&Object.defineProperty(e,n,o),o}function r(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}function o(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var i,a,r=n.call(t),o=[];try{for(;(void 0===e||e-- >0)&&!(i=r.next()).done;)o.push(i.value)}catch(s){a={error:s}}finally{try{i&&!i.done&&(n=r["return"])&&n.call(r)}finally{if(a)throw a.error}}return o}function s(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(o(arguments[e]));return t}function d(t,e,n,i,a){return void 0===i&&(i=0),void 0===a&&(a=1),e===n?i:i+(t-e)*(a-i)/(n-e)}function p(t,e,n){var i=Math.sqrt((t.x-e.x)*(t.x-e.x)+(t.y-e.y)*(t.y-e.y)),a=(t.x-e.x)/i,r=(t.y-e.y)/i;return{x:e.x+a*n,y:e.y+r*n}}var l=function(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))},c=function(t,e,n){return(t.y-e.y)*(t.x-n.x)==(t.y-n.y)*(t.x-e.x)};var h=function(){return Math.round(Math.random()*Math.pow(10,16))};var u=function(){function t(){this.autoDraw=!1,this.autoDrawDuration=2e3,this.autoDrawEasing="ease",this.padding=8,this.radius=10,this.stroke="black",this.strokeLinecap="",this.strokeWidth=1,this.gradient=[],this.svgHeight="25%",this.svgWidth="100%",this.showCircle=!1,this.circleColor="black",this.circleWidth=1,this.showLastLabel=!1,this.labelColor="black",this.animationState="",this.id=h(),this.gradientId="ngx-trend-vertical-gradient-"+this.id}return t.prototype.ngOnChanges=function(){var t=this;if(this.data&&!(this.data.length<2)){var e=this.data.map(function(t){return"number"==typeof t?t:t.value});this.animationState="inactive";var n=this.width||300,i=this.height||75;this.svgWidth=this.width||"100%",this.svgHeight=this.height||"25%",this.viewBox="0 0 "+n+" "+i;var a=location.href.split(location.hash||"#")[0];this.pathStroke=this.gradient&&this.gradient.length?"url('"+a+"#"+this.gradientId+"')":undefined,this.gradientTrimmed=this.gradient.slice().reverse().map(function(e,n){return{idx:n,stopColor:e,offset:d(n,0,t.gradient.length-1||1)}});var r,h,u,g,y,f,m,v,x,b,w=(r=e,h=this.padding,u=n-this.padding,g=i-this.padding,y=this.padding,f=this.minValue,m=this.maxValue,v={min:0,max:r.length-1},x={min:f||Math.min.apply(Math,s(r)),max:m||Math.max.apply(Math,s(r))},b=r.map(function(t,e){return{x:d(e,v.min,v.max,h,u),y:d(t,x.min,x.max,g,y)}}),x.min===x.max&&(b[0].y+=1e-4),b);this.circleCoordinates=w,this.lastLabelCoordinates=this.getLabelCoordinateOfLast(),this.autoDraw&&"active"!==this.animationState&&(this.animationState="inactive",setTimeout(function(){t.lineLength=t.pathEl.nativeElement.getTotalLength(),t.animationState="active"})),this.d=this.smooth?function(t,e){var n=o(t),i=n[0],a=n.slice(1);return a.reduce(function(t,n,r){var o=a[r+1],s=a[r-1]||i,d=o&&c(s,n,o);if(!o||d)return t+"\nL "+n.x+","+n.y;var h=l(s,n),u=l(o,n),g=Math.min(h,u),y=g/2<e?g/2:e,f=p(s,n,y),m=p(o,n,y);return[t,"L "+f.x+","+f.y,"S "+n.x+","+n.y+" "+m.x+","+m.y].join("\n")},"M "+i.x+","+i.y)}(w,this.radius):function(t){return t.reduce(function(t,e,n){return t+(0===n?"M":"L")+" "+e.x+","+e.y+"\n"},"")}(w)}},t.prototype.getLabelCoordinateOfLast=function(){var t=this.circleCoordinates.length-1,e=this.circleCoordinates[t];return{x:e.x,y:e.y+15}},a([n.Input(),r("design:type",Array)],t.prototype,"data",void 0),a([n.Input(),r("design:type",Boolean)],t.prototype,"smooth",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"autoDraw",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"autoDrawDuration",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"autoDrawEasing",void 0),a([n.Input(),r("design:type",Number)],t.prototype,"width",void 0),a([n.Input(),r("design:type",Number)],t.prototype,"height",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"padding",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"radius",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"stroke",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"strokeLinecap",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"strokeWidth",void 0),a([n.Input(),r("design:type",Array)],t.prototype,"gradient",void 0),a([n.Input(),r("design:type",String)],t.prototype,"preserveAspectRatio",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"svgHeight",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"svgWidth",void 0),a([n.ViewChild("pathEl"),r("design:type",n.ElementRef)],t.prototype,"pathEl",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"showCircle",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"circleColor",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"circleWidth",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"showLastLabel",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"labelColor",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"maxValue",void 0),a([n.Input(),r("design:type",Object)],t.prototype,"minValue",void 0),t=a([n.Component({selector:"ngx-trend",template:'\n  <svg *ngIf="data && data.length >= 2"\n    [attr.width]="svgWidth"\n    [attr.height]="svgHeight"\n    [attr.stroke]="stroke"\n    [attr.stroke-width]="strokeWidth"\n    [attr.stroke-linecap]="strokeLinecap"\n    [attr.viewBox]="viewBox"\n    [attr.preserveAspectRatio]="preserveAspectRatio"\n  >\n    <defs *ngIf="gradient && gradient.length">\n      <linearGradient [attr.id]="gradientId" x1="0%" y1="0%" x2="0%" y2="100%">\n        <stop\n          *ngFor="let g of gradientTrimmed;"\n          [attr.key]="g.idx"\n          [attr.offset]="g.offset"\n          [attr.stop-color]="g.stopColor"\n        />\n      </linearGradient>\n    </defs>\n    <path fill="none" #pathEl\n      [attr.stroke]="pathStroke" [attr.d]="d"\n      [@pathAnimation]="{\n        value: animationState,\n        params: {\n          autoDrawDuration: autoDrawDuration,\n          autoDrawEasing: autoDrawEasing,\n          lineLength: lineLength\n        }\n      }" />\n    <ng-container *ngIf="showCircle" >\n      <style>\n        .small { font-size: 12px; font-weight: 400; text-anchor: end; stroke-width: 0;}\n      </style>\n      <ng-container *ngFor="let circle of circleCoordinates; index as i">\n        <circle [attr.cx]="circle.x" [attr.cy]="circle.y" [attr.r]="circleWidth"\n                [attr.fill]="circleColor" [attr.stroke]="circleColor"\n                [attr.strokeWidth]="circleWidth"\n                [@circleAnimation]="{\n                  value: animationState,\n                  params: {\n                    autoDrawDuration: autoDrawDuration\n                  }\n                }"\n        />\n        <text *ngIf="showLastLabel && i === circleCoordinates.length - 1"\n              class="small"\n              [@circleAnimation]="{\n                  value: animationState,\n                  params: {\n                    autoDrawDuration: autoDrawDuration\n                  }\n                }"\n              [attr.fill]="labelColor"\n              [attr.x]="lastLabelCoordinates.x"\n              [attr.y]="lastLabelCoordinates.y">{{ data[data.length-1] | number }}</text>\n      </ng-container>\n    </ng-container>\n  </svg>\n  ',animations:[e.trigger("pathAnimation",[e.state("inactive",e.style({display:"none"})),e.transition("* => active",[e.style({display:"initial"}),e.animate("{{ autoDrawDuration }}ms {{ autoDrawEasing }}",e.keyframes([e.style({"stroke-dasharray":"{{ lineLength }}px","stroke-dashoffset":"{{ lineLength }}px"}),e.style({"stroke-dasharray":"{{ lineLength }}px","stroke-dashoffset":0})])),e.style({"stroke-dashoffset":"","stroke-dasharray":""})])]),e.trigger("circleAnimation",[e.state("inactive",e.style({visibility:"hidden",opacity:0})),e.transition("* => active",[e.style({visibility:"hidden"}),e.animate("{{ autoDrawDuration }}ms",e.keyframes([e.style({visibility:"visible"})]))])])]}),r("design:paramtypes",[])],t)}(),g=function(){function t(){}return t=a([n.NgModule({imports:[i.CommonModule],exports:[u],declarations:[u]})],t)}();t.TrendComponent=u,t.TrendModule=g,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=lemon-ngx-trend.umd.min.js.map