@ohayojp/chart
Version:
Cache the dictionary, city data etc.
366 lines (360 loc) • 10.9 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Platform } from '@angular/cdk/platform';
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, NgZone, Input, Output, 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: mini-area.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function G2MiniAreaData() { }
if (false) {
/** @type {?} */
G2MiniAreaData.prototype.x;
/** @type {?} */
G2MiniAreaData.prototype.y;
/* Skipping unhandled member: [key: string]: any;*/
}
/**
* @record
*/
function G2MiniAreaClickItem() { }
if (false) {
/** @type {?} */
G2MiniAreaClickItem.prototype.item;
/** @type {?} */
G2MiniAreaClickItem.prototype.ev;
}
class G2MiniAreaComponent {
// #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 = 'rgba(24, 144, 255, 0.2)';
this.borderColor = '#1890FF';
this.borderWidth = 2;
this.height = 56;
this.fit = true;
this.line = false;
this.animate = true;
this.padding = [8, 8, 8, 8];
this.data = [];
this.yTooltipSuffix = '';
this.tooltipType = 'default';
this.clickItem = new EventEmitter();
configSrv.attachKey(this, 'chart', 'theme');
}
/**
* @return {?}
*/
get chart() {
return this._chart;
}
/**
* @private
* @return {?}
*/
install() {
const { el, fit, height, padding, xAxis, yAxis, yTooltipSuffix, tooltipType, line, theme } = this;
/** @type {?} */
const chart = (this._chart = new Chart({
container: el.nativeElement,
autoFit: fit,
height,
padding,
theme,
}));
if (!xAxis && !yAxis) {
chart.axis(false);
}
if (xAxis) {
chart.axis('x', xAxis);
}
else {
chart.axis('x', false);
}
if (yAxis) {
chart.axis('y', yAxis);
}
else {
chart.axis('y', false);
}
chart.legend(false);
/** @type {?} */
const tooltipOption = {
showTitle: false,
showMarkers: true,
enterable: true,
domStyles: {
'g2-tooltip': { padding: '0px' },
'g2-tooltip-title': { display: 'none' },
'g2-tooltip-list-item': { margin: '4px' },
},
};
if (tooltipType === 'mini') {
tooltipOption.position = 'top';
(/** @type {?} */ (tooltipOption.domStyles))['g2-tooltip'] = { padding: '0px', backgroundColor: 'transparent', boxShadow: 'none' };
tooltipOption.itemTpl = `<li>{value}</li>`;
tooltipOption.offset = 0;
}
chart.tooltip(tooltipOption);
chart
.area()
.position('x*y')
.tooltip('x*y', (/**
* @param {?} x
* @param {?} y
* @return {?}
*/
(x, y) => ({ name: x, value: y + yTooltipSuffix })))
.shape('smooth');
if (line) {
chart.line().position('x*y').shape('smooth').tooltip(false);
}
chart.on(`plot:click`, (/**
* @param {?} ev
* @return {?}
*/
(ev) => {
/** @type {?} */
const records = this._chart.getSnapRecords({ x: ev.x, y: ev.y });
this.ngZone.run((/**
* @return {?}
*/
() => this.clickItem.emit({ item: records[0]._origin, ev })));
}));
chart.render();
this.attachChart();
}
/**
* @private
* @return {?}
*/
attachChart() {
const { _chart, line, fit, height, animate, padding, data, color, borderColor, borderWidth } = this;
if (!_chart || !data || data.length <= 0) {
return;
}
/** @type {?} */
const geoms = _chart.geometries;
geoms.forEach((/**
* @param {?} g
* @return {?}
*/
g => g.color(color)));
if (line) {
geoms[1].color(borderColor).size(borderWidth);
}
_chart.autoFit = fit;
_chart.height = height;
_chart.animate(animate);
_chart.padding = padding;
_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()));
}
}
}
G2MiniAreaComponent.decorators = [
{ type: Component, args: [{
selector: 'g2-mini-area',
exportAs: 'g2MiniArea',
template: ``,
host: {
'[style.height.px]': 'height',
},
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
G2MiniAreaComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone },
{ type: OhayoConfigService },
{ type: Platform }
];
G2MiniAreaComponent.propDecorators = {
delay: [{ type: Input }],
color: [{ type: Input }],
borderColor: [{ type: Input }],
borderWidth: [{ type: Input }],
height: [{ type: Input }],
fit: [{ type: Input }],
line: [{ type: Input }],
animate: [{ type: Input }],
xAxis: [{ type: Input }],
yAxis: [{ type: Input }],
padding: [{ type: Input }],
data: [{ type: Input }],
yTooltipSuffix: [{ type: Input }],
tooltipType: [{ type: Input }],
theme: [{ type: Input }],
clickItem: [{ type: Output }]
};
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2MiniAreaComponent.prototype, "delay", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2MiniAreaComponent.prototype, "borderWidth", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2MiniAreaComponent.prototype, "height", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], G2MiniAreaComponent.prototype, "fit", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], G2MiniAreaComponent.prototype, "line", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], G2MiniAreaComponent.prototype, "animate", void 0);
if (false) {
/** @type {?} */
G2MiniAreaComponent.ngAcceptInputType_delay;
/** @type {?} */
G2MiniAreaComponent.ngAcceptInputType_borderWidth;
/** @type {?} */
G2MiniAreaComponent.ngAcceptInputType_height;
/** @type {?} */
G2MiniAreaComponent.ngAcceptInputType_fit;
/** @type {?} */
G2MiniAreaComponent.ngAcceptInputType_line;
/** @type {?} */
G2MiniAreaComponent.ngAcceptInputType_animate;
/**
* @type {?}
* @private
*/
G2MiniAreaComponent.prototype._chart;
/** @type {?} */
G2MiniAreaComponent.prototype.delay;
/** @type {?} */
G2MiniAreaComponent.prototype.color;
/** @type {?} */
G2MiniAreaComponent.prototype.borderColor;
/** @type {?} */
G2MiniAreaComponent.prototype.borderWidth;
/** @type {?} */
G2MiniAreaComponent.prototype.height;
/** @type {?} */
G2MiniAreaComponent.prototype.fit;
/** @type {?} */
G2MiniAreaComponent.prototype.line;
/** @type {?} */
G2MiniAreaComponent.prototype.animate;
/** @type {?} */
G2MiniAreaComponent.prototype.xAxis;
/** @type {?} */
G2MiniAreaComponent.prototype.yAxis;
/** @type {?} */
G2MiniAreaComponent.prototype.padding;
/** @type {?} */
G2MiniAreaComponent.prototype.data;
/** @type {?} */
G2MiniAreaComponent.prototype.yTooltipSuffix;
/** @type {?} */
G2MiniAreaComponent.prototype.tooltipType;
/** @type {?} */
G2MiniAreaComponent.prototype.theme;
/** @type {?} */
G2MiniAreaComponent.prototype.clickItem;
/**
* @type {?}
* @private
*/
G2MiniAreaComponent.prototype.el;
/**
* @type {?}
* @private
*/
G2MiniAreaComponent.prototype.ngZone;
/**
* @type {?}
* @private
*/
G2MiniAreaComponent.prototype.platform;
}
/**
* @fileoverview added by tsickle
* Generated from: mini-area.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [G2MiniAreaComponent];
class G2MiniAreaModule {
}
G2MiniAreaModule.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: mini-area.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { G2MiniAreaComponent, G2MiniAreaModule };
//# sourceMappingURL=mini-area.js.map