UNPKG

@lxlib/chart

Version:

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.

16 lines (14 loc) 6.24 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@lxlib/util"),require("rxjs"),require("rxjs/operators"),require("@angular/common"),require("ng-zorro-antd/core/outlet")):"function"==typeof define&&define.amd?define("@lxlib/chart/water-wave",["exports","@angular/core","@lxlib/util","rxjs","rxjs/operators","@angular/common","ng-zorro-antd/core/outlet"],t):t(((e=e||self).lxlib=e.lxlib||{},e.lxlib.chart=e.lxlib.chart||{},e.lxlib.chart["water-wave"]={}),e.ng.core,e.lxlib.util,e.rxjs,e.rxjs.operators,e.ng.common,e["ng-zorro-antd/core/outlet"])}(this,(function(e,t,r,n,i,o,a){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */function l(e,t,r,n){var i,o=arguments.length,a=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,n);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(a=(o<3?i(a):o>3?i(t,r,a):i(t,r))||a);return o>3&&a&&Object.defineProperty(t,r,a),a}function s(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function c(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,i,o=r.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)a.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(i)throw i.error}}return a}function h(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(c(arguments[t]));return e}var u=function(){function e(e,t,r,n){this.el=e,this.renderer=t,this.ngZone=r,this.cdr=n,this.resize$=null,this.delay=0,this.color="#1890FF",this.height=160}return e.prototype.renderChart=function(e){if(this.resize$){this.updateRadio();var t=this.percent,r=this.color,n=this.node,i=Math.min(Math.max(t/100,0),100),o=this;cancelAnimationFrame(this.timer);var a=n.nativeElement,l=a.getContext("2d"),s=a.width,c=a.height,h=s/2,u=h-2;l.beginPath(),l.lineWidth=4;for(var p=s-2,f=p/8,d=.2,g=0,v=0,y=[],m=h-2,b=-Math.PI/2,w=!0,x=b;x<b+2*Math.PI;x+=1/(8*Math.PI))y.push([h+m*Math.cos(x),h+m*Math.sin(x)]);var M=y.shift();l.strokeStyle=r,l.moveTo(M[0],M[1]),function t(){if(l.clearRect(0,0,s,c),w&&"update"!==e)if(y.length){var n=y.shift();l.lineTo(n[0],n[1]),l.stroke()}else w=!1,l.lineTo(M[0],M[1]),l.stroke(),y=null,l.globalCompositeOperation="destination-over",l.beginPath(),l.lineWidth=2,l.arc(h,h,m,0,2*Math.PI,!0),l.beginPath(),l.save(),l.arc(h,h,h-6,0,2*Math.PI,!0),l.restore(),l.clip(),l.fillStyle=r;else{if(i>=.85){if(d>.05)d-=.002}else if(i<=.1){if(d<.2*1.5)d+=.002}else{if(d<=.2)d+=.002;if(d>=.2)d-=.002}i-v>0&&(v+=.005),i-v<0&&(v-=.005),g+=.07,function(){l.beginPath(),l.save();for(var e=[],t=2;t<=2+p;t+=20/p){var n=g+(2+t)/f,i=Math.sin(n)*d,o=t,a=2*u*(1-v)+(h-u)-f*i;l.lineTo(o,a),e.push([o,a])}var s=e.shift();l.lineTo(2+p,c),l.lineTo(2,c),l.lineTo(s[0],s[1]);var y=l.createLinearGradient(0,0,0,c);y.addColorStop(0,"#ffffff"),y.addColorStop(1,r),l.fillStyle=y,l.fill(),l.restore()}()}o.timer=requestAnimationFrame(t)}()}},e.prototype.updateRadio=function(){var e=this.el.nativeElement.parentNode.offsetWidth,t=e<this.height?e/this.height:1;this.renderer.setStyle(this.el.nativeElement,"transform","scale("+t+")")},e.prototype.installResizeEvent=function(){var e=this;this.resize$=n.fromEvent(window,"resize").pipe(i.debounceTime(200)).subscribe((function(){return e.updateRadio()}))},e.prototype.ngOnInit=function(){var e=this;this.installResizeEvent(),this.ngZone.runOutsideAngular((function(){return setTimeout((function(){return e.renderChart("")}),e.delay)}))},e.prototype.ngOnChanges=function(){var e=this;this.ngZone.runOutsideAngular((function(){return e.renderChart("update")})),this.cdr.detectChanges()},e.prototype.ngOnDestroy=function(){this.timer&&cancelAnimationFrame(this.timer),this.resize$.unsubscribe()},e.decorators=[{type:t.Component,args:[{selector:"g2-water-wave",exportAs:"g2WaterWave",template:'<div [ngStyle]="{\'height.px\': height, \'width.px\': height, \'overflow\': \'hidden\'}">\n <canvas #container class="g2-water-wave__canvas" width="{{height*2}}" height="{{height*2}}"></canvas>\n</div>\n<div class="g2-water-wave__desc" [ngStyle]="{\'width.px\': height}">\n <span *ngIf="title" class="g2-water-wave__desc-title">\n <ng-container *nzStringTemplateOutlet="title">{{title}}</ng-container>\n </span>\n <h4 class="g2-water-wave__desc-percent">{{percent}}%</h4>\n</div>\n',host:{"[class.g2-water-wave]":"true"},preserveWhitespaces:!1,changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:t.NgZone},{type:t.ChangeDetectorRef}]},e.propDecorators={node:[{type:t.ViewChild,args:["container",{static:!0}]}],delay:[{type:t.Input}],title:[{type:t.Input}],color:[{type:t.Input}],height:[{type:t.Input}],percent:[{type:t.Input}]},l([r.InputNumber(),s("design:type",Object)],e.prototype,"delay",void 0),l([r.InputNumber(),s("design:type",Object)],e.prototype,"height",void 0),l([r.InputNumber(),s("design:type",Number)],e.prototype,"percent",void 0),e}();var p=[u],f=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule,r.LxlibUtilModule,a.NzOutletModule],declarations:h(p),exports:h(p)}]}],e}();e.G2WaterWaveComponent=u,e.G2WaterWaveModule=f,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=water-wave.umd.min.js.map