@lxlib/chart
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.
376 lines (370 loc) • 12.4 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, NgZone, ChangeDetectorRef, ViewChild, Input, NgModule } from '@angular/core';
import { InputNumber, LxlibUtilModule } from '@lxlib/util';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
/**
* @fileoverview added by tsickle
* Generated from: water-wave.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class G2WaterWaveComponent {
// #endregion
/**
* @param {?} el
* @param {?} renderer
* @param {?} ngZone
* @param {?} cdr
*/
constructor(el, renderer, ngZone, cdr) {
this.el = el;
this.renderer = renderer;
this.ngZone = ngZone;
this.cdr = cdr;
this.resize$ = null;
// #region fields
this.delay = 0;
this.color = '#1890FF';
this.height = 160;
}
/**
* @private
* @param {?} type
* @return {?}
*/
renderChart(type) {
if (!this.resize$)
return;
this.updateRadio();
const { percent, color, node } = this;
/** @type {?} */
const data = Math.min(Math.max(percent / 100, 0), 100);
/** @type {?} */
const self = this;
cancelAnimationFrame(this.timer);
/** @type {?} */
const canvas = (/** @type {?} */ (node.nativeElement));
/** @type {?} */
const ctx = (/** @type {?} */ (canvas.getContext('2d')));
/** @type {?} */
const canvasWidth = canvas.width;
/** @type {?} */
const canvasHeight = canvas.height;
/** @type {?} */
const radius = canvasWidth / 2;
/** @type {?} */
const lineWidth = 2;
/** @type {?} */
const cR = radius - lineWidth;
ctx.beginPath();
ctx.lineWidth = lineWidth * 2;
/** @type {?} */
const axisLength = canvasWidth - lineWidth;
/** @type {?} */
const unit = axisLength / 8;
/** @type {?} */
const range = 0.2;
// 振幅
/** @type {?} */
let currRange = range;
/** @type {?} */
const xOffset = lineWidth;
/** @type {?} */
let sp = 0;
// 周期偏移量
/** @type {?} */
let currData = 0;
/** @type {?} */
const waveupsp = 0.005;
// 水波上涨速度
/** @type {?} */
let arcStack = [];
/** @type {?} */
const bR = radius - lineWidth;
/** @type {?} */
const circleOffset = -(Math.PI / 2);
/** @type {?} */
let circleLock = true;
// tslint:disable-next-line:binary-expression-operand-order
for (let i = circleOffset; i < circleOffset + 2 * Math.PI; i += 1 / (8 * Math.PI)) {
arcStack.push([radius + bR * Math.cos(i), radius + bR * Math.sin(i)]);
}
/** @type {?} */
const cStartPoint = (/** @type {?} */ (arcStack.shift()));
ctx.strokeStyle = color;
ctx.moveTo(cStartPoint[0], cStartPoint[1]);
/**
* @return {?}
*/
function drawSin() {
ctx.beginPath();
ctx.save();
/** @type {?} */
const sinStack = [];
for (let i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) {
/** @type {?} */
const x = sp + (xOffset + i) / unit;
/** @type {?} */
const y = Math.sin(x) * currRange;
/** @type {?} */
const dx = i;
// tslint:disable-next-line:binary-expression-operand-order
/** @type {?} */
const dy = 2 * cR * (1 - currData) + (radius - cR) - unit * y;
ctx.lineTo(dx, dy);
sinStack.push([dx, dy]);
}
/** @type {?} */
const startPoint = (/** @type {?} */ (sinStack.shift()));
ctx.lineTo(xOffset + axisLength, canvasHeight);
ctx.lineTo(xOffset, canvasHeight);
ctx.lineTo(startPoint[0], startPoint[1]);
/** @type {?} */
const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
gradient.addColorStop(0, '#ffffff');
gradient.addColorStop(1, color);
ctx.fillStyle = gradient;
ctx.fill();
ctx.restore();
}
/**
* @return {?}
*/
function render() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
if (circleLock && type !== 'update') {
if ((/** @type {?} */ (arcStack)).length) {
/** @type {?} */
const temp = (/** @type {?} */ ((/** @type {?} */ (arcStack)).shift()));
ctx.lineTo(temp[0], temp[1]);
ctx.stroke();
}
else {
circleLock = false;
ctx.lineTo(cStartPoint[0], cStartPoint[1]);
ctx.stroke();
arcStack = null;
ctx.globalCompositeOperation = 'destination-over';
ctx.beginPath();
ctx.lineWidth = lineWidth;
// tslint:disable-next-line:binary-expression-operand-order
ctx.arc(radius, radius, bR, 0, 2 * Math.PI, true);
ctx.beginPath();
ctx.save();
// tslint:disable-next-line:binary-expression-operand-order
ctx.arc(radius, radius, radius - 3 * lineWidth, 0, 2 * Math.PI, true);
ctx.restore();
ctx.clip();
ctx.fillStyle = color;
}
}
else {
if (data >= 0.85) {
if (currRange > range / 4) {
/** @type {?} */
const t = range * 0.01;
currRange -= t;
}
}
else if (data <= 0.1) {
if (currRange < range * 1.5) {
/** @type {?} */
const t = range * 0.01;
currRange += t;
}
}
else {
if (currRange <= range) {
/** @type {?} */
const t = range * 0.01;
currRange += t;
}
if (currRange >= range) {
/** @type {?} */
const t = range * 0.01;
currRange -= t;
}
}
if (data - currData > 0) {
currData += waveupsp;
}
if (data - currData < 0) {
currData -= waveupsp;
}
sp += 0.07;
drawSin();
}
self.timer = requestAnimationFrame(render);
}
render();
}
/**
* @private
* @return {?}
*/
updateRadio() {
const { offsetWidth } = this.el.nativeElement.parentNode;
/** @type {?} */
const radio = offsetWidth < this.height ? offsetWidth / this.height : 1;
this.renderer.setStyle(this.el.nativeElement, 'transform', `scale(${radio})`);
}
/**
* @private
* @return {?}
*/
installResizeEvent() {
this.resize$ = fromEvent(window, 'resize')
.pipe(debounceTime(200))
.subscribe((/**
* @return {?}
*/
() => this.updateRadio()));
}
/**
* @return {?}
*/
ngOnInit() {
this.installResizeEvent();
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => setTimeout((/**
* @return {?}
*/
() => this.renderChart('')), this.delay)));
}
/**
* @return {?}
*/
ngOnChanges() {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => this.renderChart('update')));
this.cdr.detectChanges();
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.timer) {
cancelAnimationFrame(this.timer);
}
(/** @type {?} */ (this.resize$)).unsubscribe();
}
}
G2WaterWaveComponent.decorators = [
{ type: 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: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
G2WaterWaveComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: NgZone },
{ type: ChangeDetectorRef }
];
G2WaterWaveComponent.propDecorators = {
node: [{ type: ViewChild, args: ['container', { static: true },] }],
delay: [{ type: Input }],
title: [{ type: Input }],
color: [{ type: Input }],
height: [{ type: Input }],
percent: [{ type: Input }]
};
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2WaterWaveComponent.prototype, "delay", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2WaterWaveComponent.prototype, "height", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Number)
], G2WaterWaveComponent.prototype, "percent", void 0);
if (false) {
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.resize$;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.node;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.timer;
/** @type {?} */
G2WaterWaveComponent.prototype.delay;
/** @type {?} */
G2WaterWaveComponent.prototype.title;
/** @type {?} */
G2WaterWaveComponent.prototype.color;
/** @type {?} */
G2WaterWaveComponent.prototype.height;
/** @type {?} */
G2WaterWaveComponent.prototype.percent;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.el;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.ngZone;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* Generated from: water-wave.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [G2WaterWaveComponent];
class G2WaterWaveModule {
}
G2WaterWaveModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, LxlibUtilModule, NzOutletModule],
declarations: [...COMPONENTS],
exports: [...COMPONENTS],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: water-wave.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { G2WaterWaveComponent, G2WaterWaveModule };
//# sourceMappingURL=water-wave.js.map