@ohayojp/chart
Version:
Cache the dictionary, city data etc.
298 lines (292 loc) • 8.84 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 { Chart } from '@antv/g2';
import { OhayoConfigService, InputNumber, InputBoolean, OhayoUtilModule } from '@ohayojp/util';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: single-bar.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class G2SingleBarComponent {
// #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.plusColor = '#40a9ff';
this.minusColor = '#ff4d4f';
this.height = 60;
this.barSize = 30;
this.min = 0;
this.max = 100;
this.value = 0;
this.line = false;
this.padding = 0;
this.textStyle = { fontSize: 12, color: '#595959' };
configSrv.attachKey(this, 'chart', 'theme');
}
/**
* @return {?}
*/
get chart() {
return this._chart;
}
/**
* @private
* @return {?}
*/
install() {
const { el, height, padding, textStyle, line, format, theme } = this;
/** @type {?} */
const chart = (this._chart = new Chart({
container: el.nativeElement,
autoFit: true,
height,
padding,
theme,
}));
chart.legend(false);
chart.axis(false);
chart.tooltip(false);
chart.coordinate().transpose();
chart
.interval()
.position('1*value')
.label('value', (/**
* @return {?}
*/
() => ({
formatter: format,
style: Object.assign({}, textStyle),
})));
if (line) {
chart.annotation().line({
start: ['50%', '0%'],
end: ['50%', '100%'],
style: {
stroke: '#e8e8e8',
lineDash: [0, 0],
},
});
}
chart.render();
this.attachChart();
}
/**
* @private
* @return {?}
*/
attachChart() {
const { _chart, height, padding, value, min, max, plusColor, minusColor, barSize } = this;
if (!_chart)
return;
_chart.scale({ value: { max, min } });
_chart.height = height;
_chart.padding = padding;
_chart.geometries[0].color('value', (/**
* @param {?} val
* @return {?}
*/
(val) => (val > 0 ? plusColor : minusColor))).size(barSize);
_chart.changeData([{ value }]);
_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()));
}
}
}
G2SingleBarComponent.decorators = [
{ type: Component, args: [{
selector: 'g2-single-bar',
exportAs: 'g2SingleBar',
template: ``,
host: {
'[style.height.px]': 'height',
},
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
G2SingleBarComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone },
{ type: OhayoConfigService },
{ type: Platform }
];
G2SingleBarComponent.propDecorators = {
delay: [{ type: Input }],
plusColor: [{ type: Input }],
minusColor: [{ type: Input }],
height: [{ type: Input }],
barSize: [{ type: Input }],
min: [{ type: Input }],
max: [{ type: Input }],
value: [{ type: Input }],
line: [{ type: Input }],
format: [{ type: Input }],
padding: [{ type: Input }],
textStyle: [{ type: Input }],
theme: [{ type: Input }]
};
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2SingleBarComponent.prototype, "delay", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2SingleBarComponent.prototype, "height", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2SingleBarComponent.prototype, "barSize", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2SingleBarComponent.prototype, "min", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2SingleBarComponent.prototype, "max", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2SingleBarComponent.prototype, "value", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], G2SingleBarComponent.prototype, "line", void 0);
if (false) {
/** @type {?} */
G2SingleBarComponent.ngAcceptInputType_delay;
/** @type {?} */
G2SingleBarComponent.ngAcceptInputType_height;
/** @type {?} */
G2SingleBarComponent.ngAcceptInputType_barSize;
/** @type {?} */
G2SingleBarComponent.ngAcceptInputType_min;
/** @type {?} */
G2SingleBarComponent.ngAcceptInputType_max;
/** @type {?} */
G2SingleBarComponent.ngAcceptInputType_value;
/** @type {?} */
G2SingleBarComponent.ngAcceptInputType_line;
/**
* @type {?}
* @private
*/
G2SingleBarComponent.prototype._chart;
/** @type {?} */
G2SingleBarComponent.prototype.delay;
/** @type {?} */
G2SingleBarComponent.prototype.plusColor;
/** @type {?} */
G2SingleBarComponent.prototype.minusColor;
/** @type {?} */
G2SingleBarComponent.prototype.height;
/** @type {?} */
G2SingleBarComponent.prototype.barSize;
/** @type {?} */
G2SingleBarComponent.prototype.min;
/** @type {?} */
G2SingleBarComponent.prototype.max;
/** @type {?} */
G2SingleBarComponent.prototype.value;
/** @type {?} */
G2SingleBarComponent.prototype.line;
/** @type {?} */
G2SingleBarComponent.prototype.format;
/** @type {?} */
G2SingleBarComponent.prototype.padding;
/** @type {?} */
G2SingleBarComponent.prototype.textStyle;
/** @type {?} */
G2SingleBarComponent.prototype.theme;
/**
* @type {?}
* @private
*/
G2SingleBarComponent.prototype.el;
/**
* @type {?}
* @private
*/
G2SingleBarComponent.prototype.ngZone;
/**
* @type {?}
* @private
*/
G2SingleBarComponent.prototype.platform;
}
/**
* @fileoverview added by tsickle
* Generated from: single-bar.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [G2SingleBarComponent];
class G2SingleBarModule {
}
G2SingleBarModule.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: single-bar.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { G2SingleBarComponent, G2SingleBarModule };
//# sourceMappingURL=single-bar.js.map