@ohayojp/chart
Version:
Cache the dictionary, city data etc.
330 lines (324 loc) • 9.68 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Platform } from '@angular/cdk/platform';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, NgZone, Input, NgModule } from '@angular/core';
import { registerShape, Chart } from '@antv/g2';
import { OhayoConfigService, InputNumber, OhayoUtilModule } from '@ohayojp/util';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: gauge.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class G2GaugeComponent {
// #endregion
/**
* @param {?} el
* @param {?} ngZone
* @param {?} configSrv
* @param {?} platform
*/
constructor(el, ngZone, configSrv, platform) {
this.el = el;
this.ngZone = ngZone;
this.platform = platform;
// #region fields
this.delay = 0;
this.color = '#2f9cff';
this.padding = [10, 10, 30, 10];
configSrv.attachKey(this, 'chart', 'theme');
}
/**
* @return {?}
*/
get chart() {
return this._chart;
}
/**
* @private
* @return {?}
*/
install() {
// 自定义Shape 部分
registerShape('point', 'pointer', {
// tslint:disable-next-line: typedef
/**
* @param {?} cfg
* @param {?} container
* @return {?}
*/
draw(cfg, container) {
/** @type {?} */
const group = container.addGroup({});
// 获取极坐标系下画布中心点
/** @type {?} */
const 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;
},
});
const { el, height, padding, format, theme } = this;
/** @type {?} */
const chart = (this._chart = new Chart({
container: el.nativeElement,
autoFit: true,
height,
padding,
theme,
}));
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: -14,
formatter: format,
},
tickLine: null,
grid: null,
});
chart.point().position('value*1').shape('pointer');
this.attachChart();
}
/**
* @private
* @return {?}
*/
attachChart() {
const { _chart, percent, color, bgColor, title } = this;
if (!_chart)
return;
/** @type {?} */
const data = [{ name: title, value: percent }];
/** @type {?} */
const 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: 20,
fill: 'rgba(0, 0, 0, 0.85)',
textAlign: 'center',
},
offsetY: 15,
});
_chart.changeData(data);
_chart.render();
}
/**
* @return {?}
*/
ngOnInit() {
if (!this.platform.isBrowser) {
return;
}
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => setTimeout((/**
* @return {?}
*/
() => this.install()), this.delay)));
}
/**
* @return {?}
*/
ngOnChanges() {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => this.attachChart()));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._chart) {
this.ngZone.runOutsideAngular((/**
* @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 = () => [
{ type: ElementRef },
{ type: NgZone },
{ type: OhayoConfigService },
{ type: Platform }
];
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 }],
theme: [{ 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);
if (false) {
/** @type {?} */
G2GaugeComponent.ngAcceptInputType_delay;
/** @type {?} */
G2GaugeComponent.ngAcceptInputType_height;
/** @type {?} */
G2GaugeComponent.ngAcceptInputType_percent;
/**
* @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 {?} */
G2GaugeComponent.prototype.theme;
/**
* @type {?}
* @private
*/
G2GaugeComponent.prototype.el;
/**
* @type {?}
* @private
*/
G2GaugeComponent.prototype.ngZone;
/**
* @type {?}
* @private
*/
G2GaugeComponent.prototype.platform;
}
/**
* @fileoverview added by tsickle
* Generated from: gauge.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [G2GaugeComponent];
class G2GaugeModule {
}
G2GaugeModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, OhayoUtilModule],
declarations: [...COMPONENTS],
exports: [...COMPONENTS],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: gauge.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { G2GaugeComponent, G2GaugeModule };
//# sourceMappingURL=gauge.js.map