@lxlib/chart
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.
319 lines (313 loc) • 9.44 kB
JavaScript
import { __decorate, __metadata, __spread } from 'tslib';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, NgZone, Input, NgModule } from '@angular/core';
import { registerShape, Chart } from '@antv/g2';
import { InputNumber, LxlibUtilModule } from '@lxlib/util';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: gauge.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var G2GaugeComponent = /** @class */ (function () {
// #endregion
function G2GaugeComponent(el, ngZone) {
this.el = el;
this.ngZone = ngZone;
// #region fields
this.delay = 0;
this.color = '#2f9cff';
this.bgColor = '#f0f2f5';
this.padding = [10, 10, 30, 10];
}
/**
* @private
* @return {?}
*/
G2GaugeComponent.prototype.install = /**
* @private
* @return {?}
*/
function () {
// 自定义Shape 部分
registerShape('point', 'pointer', {
draw: /**
* @param {?} cfg
* @param {?} container
* @return {?}
*/
function (cfg, container) {
/** @type {?} */
var group = container.addGroup({});
// 获取极坐标系下画布中心点
/** @type {?} */
var center = ((/** @type {?} */ (this))).parsePoint({ x: 0, y: 0 });
// 绘制指针
group.addShape('line', {
attrs: {
x1: center.x,
y1: center.y,
x2: cfg.x,
y2: cfg.y,
stroke: cfg.color,
lineWidth: 2.5,
lineCap: 'round',
},
});
group.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 5.75,
stroke: cfg.color,
lineWidth: 2,
fill: '#fff',
},
});
return group;
},
});
var _a = this, el = _a.el, height = _a.height, padding = _a.padding, format = _a.format;
/** @type {?} */
var chart = (this.chart = new Chart({
container: el.nativeElement,
autoFit: true,
height: height,
padding: padding,
}));
chart.legend(false);
chart.animate(false);
chart.tooltip(false);
chart.coordinate('polar', {
startAngle: (-9 / 8) * Math.PI,
endAngle: (1 / 8) * Math.PI,
radius: 0.75,
});
chart.scale('value', {
min: 0,
max: 100,
nice: true,
tickCount: 6,
});
chart.axis('1', false);
chart.axis('value', {
line: null,
label: {
offset: -12,
formatter: format,
},
tickLine: null,
grid: null,
});
chart.point().position('value*1').shape('pointer');
this.attachChart();
};
/**
* @private
* @return {?}
*/
G2GaugeComponent.prototype.attachChart = /**
* @private
* @return {?}
*/
function () {
var _a = this, chart = _a.chart, percent = _a.percent, color = _a.color, bgColor = _a.bgColor, title = _a.title;
if (!chart)
return;
/** @type {?} */
var data = [{ name: title, value: percent }];
/** @type {?} */
var val = data[0].value;
chart.annotation().clear(true);
chart.geometries[0].color(color);
// 绘制仪表盘背景
chart.annotation().arc({
top: false,
start: [0, 0.95],
end: [100, 0.95],
style: {
stroke: bgColor,
lineWidth: 12,
lineDash: null,
},
});
chart.annotation().arc({
start: [0, 0.95],
end: [data[0].value, 0.95],
style: {
stroke: color,
lineWidth: 12,
lineDash: null,
},
});
// 绘制指标数字
chart.annotation().text({
position: ['50%', '85%'],
content: title,
style: {
fontSize: 12,
fill: 'rgba(0, 0, 0, 0.43)',
textAlign: 'center',
},
});
chart.annotation().text({
position: ['50%', '90%'],
content: val + " %",
style: {
fontSize: 24,
fill: 'rgba(0, 0, 0, 0.85)',
textAlign: 'center',
},
offsetY: 15,
});
chart.changeData(data);
};
/**
* @return {?}
*/
G2GaugeComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () { return setTimeout((/**
* @return {?}
*/
function () { return _this.install(); }), _this.delay); }));
};
/**
* @return {?}
*/
G2GaugeComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () { return _this.attachChart(); }));
};
/**
* @return {?}
*/
G2GaugeComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _this = this;
if (this.chart) {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () { return _this.chart.destroy(); }));
}
};
G2GaugeComponent.decorators = [
{ type: Component, args: [{
selector: 'g2-gauge',
exportAs: 'g2Gauge',
template: "",
host: {
'[class.g2-gauge]': 'true',
},
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
G2GaugeComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: NgZone }
]; };
G2GaugeComponent.propDecorators = {
delay: [{ type: Input }],
title: [{ type: Input }],
height: [{ type: Input }],
color: [{ type: Input }],
bgColor: [{ type: Input }],
format: [{ type: Input }],
percent: [{ type: Input }],
padding: [{ type: Input }]
};
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2GaugeComponent.prototype, "delay", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Number)
], G2GaugeComponent.prototype, "height", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Number)
], G2GaugeComponent.prototype, "percent", void 0);
return G2GaugeComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
G2GaugeComponent.prototype.chart;
/** @type {?} */
G2GaugeComponent.prototype.delay;
/** @type {?} */
G2GaugeComponent.prototype.title;
/** @type {?} */
G2GaugeComponent.prototype.height;
/** @type {?} */
G2GaugeComponent.prototype.color;
/** @type {?} */
G2GaugeComponent.prototype.bgColor;
/** @type {?} */
G2GaugeComponent.prototype.format;
/** @type {?} */
G2GaugeComponent.prototype.percent;
/** @type {?} */
G2GaugeComponent.prototype.padding;
/**
* @type {?}
* @private
*/
G2GaugeComponent.prototype.el;
/**
* @type {?}
* @private
*/
G2GaugeComponent.prototype.ngZone;
}
/**
* @fileoverview added by tsickle
* Generated from: gauge.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var COMPONENTS = [G2GaugeComponent];
var G2GaugeModule = /** @class */ (function () {
function G2GaugeModule() {
}
G2GaugeModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, LxlibUtilModule],
declarations: __spread(COMPONENTS),
exports: __spread(COMPONENTS),
},] }
];
return G2GaugeModule;
}());
/**
* @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: gauge.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { G2GaugeComponent, G2GaugeModule };
//# sourceMappingURL=gauge.js.map