@ohayojp/chart
Version:
Cache the dictionary, city data etc.
492 lines (486 loc) • 14.4 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Platform } from '@angular/cdk/platform';
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, NgZone, ViewChild, Input, Output, NgModule } from '@angular/core';
import { Chart } from '@antv/g2';
import { toDate, OhayoConfigService, InputNumber, InputBoolean, OhayoUtilModule } from '@ohayojp/util';
import format from 'date-fns/format';
import { CommonModule } from '@angular/common';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
/**
* @fileoverview added by tsickle
* Generated from: timeline.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function G2TimelineData() { }
if (false) {
/**
* 时间值
* @type {?|undefined}
*/
G2TimelineData.prototype.time;
/**
* 指标1数据
* @type {?}
*/
G2TimelineData.prototype.y1;
/**
* 指标2数据
* @type {?}
*/
G2TimelineData.prototype.y2;
/**
* 指标3数据
* @type {?|undefined}
*/
G2TimelineData.prototype.y3;
/**
* 指标4数据
* @type {?|undefined}
*/
G2TimelineData.prototype.y4;
/**
* 指标5数据
* @type {?|undefined}
*/
G2TimelineData.prototype.y5;
/* Skipping unhandled member: [key: string]: any;*/
}
/**
* @record
*/
function G2TimelineMap() { }
if (false) {
/**
* 指标1
* @type {?}
*/
G2TimelineMap.prototype.y1;
/**
* 指标
* @type {?}
*/
G2TimelineMap.prototype.y2;
/**
* 指标3
* @type {?|undefined}
*/
G2TimelineMap.prototype.y3;
/**
* 指标4
* @type {?|undefined}
*/
G2TimelineMap.prototype.y4;
/**
* 指标5
* @type {?|undefined}
*/
G2TimelineMap.prototype.y5;
/* Skipping unhandled member: [key: string]: string | undefined;*/
}
/**
* @record
*/
function G2TimelineClickItem() { }
if (false) {
/** @type {?} */
G2TimelineClickItem.prototype.item;
/** @type {?} */
G2TimelineClickItem.prototype.ev;
}
class G2TimelineComponent {
// #endregion
/**
* @param {?} ngZone
* @param {?} configSrv
* @param {?} platform
*/
constructor(ngZone, configSrv, platform) {
this.ngZone = ngZone;
this.platform = platform;
// #region fields
this.delay = 0;
this.maxAxis = 2;
this.data = [];
this.colorMap = { y1: '#5B8FF9', y2: '#5AD8A6', y3: '#5D7092', y4: '#F6BD16', y5: '#E86452' };
this.mask = 'HH:mm';
this.maskSlider = 'HH:mm';
this.position = 'top';
this.height = 450;
this.padding = [40, 8, 64, 40];
this.borderWidth = 2;
this.slider = true;
this.clickItem = new EventEmitter();
configSrv.attachKey(this, 'chart', 'theme');
}
/**
* @return {?}
*/
get chart() {
return this._chart;
}
/**
* @return {?}
*/
ngOnInit() {
if (!this.platform.isBrowser) {
return;
}
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => setTimeout((/**
* @return {?}
*/
() => this.install()), this.delay)));
}
/**
* @private
* @return {?}
*/
install() {
const { node, height, padding, slider, maxAxis, theme, maskSlider } = this;
/** @type {?} */
const chart = (this._chart = new Chart({
container: node.nativeElement,
autoFit: true,
height,
padding,
theme,
}));
chart.axis('time', { title: null });
chart.axis('y1', { title: null });
for (let i = 2; i <= maxAxis; i++) {
chart.axis(`y${i}`, false);
}
chart.line().position('time*y1');
for (let i = 2; i <= maxAxis; i++) {
chart.line().position(`time*y${i}`);
}
chart.tooltip({
showCrosshairs: true,
shared: true,
});
/** @type {?} */
const sliderPadding = Object.assign(Object.assign({}, []), padding);
sliderPadding[0] = 0;
if (slider) {
chart.option('slider', {
height: 26,
start: 0,
end: 1,
trendCfg: {
isArea: false,
},
minLimit: 2,
formatter: (/**
* @param {?} val
* @return {?}
*/
(val) => format(val, maskSlider)),
});
}
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.on(`legend-item:click`, (/**
* @param {?} ev
* @return {?}
*/
(ev) => {
var _a;
/** @type {?} */
const item = (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.get('delegateObject').item;
/** @type {?} */
const id = item === null || item === void 0 ? void 0 : item.id;
/** @type {?} */
const line = chart.geometries.find((/**
* @param {?} w
* @return {?}
*/
w => w.getAttribute('position').getFields()[1] === id));
if (line) {
line.changeVisible(!item.unchecked);
}
}));
this.attachChart();
}
/**
* @private
* @return {?}
*/
attachChart() {
const { _chart, height, padding, mask, titleMap, position, colorMap, borderWidth, maxAxis } = this;
/** @type {?} */
let data = [...this.data];
if (!_chart || !data || data.length <= 0)
return;
/** @type {?} */
const arrAxis = [...Array(maxAxis)].map((/**
* @param {?} _
* @param {?} index
* @return {?}
*/
(_, index) => index + 1));
_chart.legend({
position,
custom: true,
items: arrAxis.map((/**
* @param {?} id
* @return {?}
*/
id => {
/** @type {?} */
const key = `y${id}`;
return (/** @type {?} */ ({ id: key, name: titleMap[key], value: key, marker: { style: { fill: colorMap[key] } } }));
})),
});
// border
_chart.geometries.forEach((/**
* @param {?} v
* @param {?} idx
* @return {?}
*/
(v, idx) => {
v.color(((/** @type {?} */ (colorMap)))[`y${idx + 1}`]).size(borderWidth);
}));
_chart.height = height;
_chart.padding = padding;
// 转换成日期类型
data = data
.map((/**
* @param {?} item
* @return {?}
*/
item => {
item.time = toDate((/** @type {?} */ (item.time)));
item._time = +item.time;
return item;
}))
.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => a._time - b._time));
/** @type {?} */
const max = Math.max(...arrAxis.map((/**
* @param {?} id
* @return {?}
*/
id => [...data].sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => b[`y${id}`] - a[`y${id}`]))[0][`y${id}`])));
/** @type {?} */
const scaleOptions = {};
arrAxis.forEach((/**
* @param {?} id
* @return {?}
*/
id => {
/** @type {?} */
const key = `y${id}`;
scaleOptions[key] = {
alias: titleMap[key],
max,
min: 0,
};
}));
_chart.scale(Object.assign({ time: {
type: 'time',
mask,
range: [0, 1],
} }, scaleOptions));
/** @type {?} */
const initialRange = {
start: data[0]._time,
end: data[data.length - 1]._time,
};
/** @type {?} */
const filterData = data.filter((/**
* @param {?} val
* @return {?}
*/
val => val._time >= initialRange.start && val._time <= initialRange.end));
_chart.changeData(filterData);
_chart.render();
}
/**
* @return {?}
*/
ngOnChanges() {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => this.attachChart()));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._chart) {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => this._chart.destroy()));
}
}
}
G2TimelineComponent.decorators = [
{ type: Component, args: [{
selector: 'g2-timeline',
exportAs: 'g2Timeline',
template: "<ng-container *nzStringTemplateOutlet=\"title\">\n <h4>{{ title }}</h4>\n</ng-container>\n<div #container></div>\n",
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
G2TimelineComponent.ctorParameters = () => [
{ type: NgZone },
{ type: OhayoConfigService },
{ type: Platform }
];
G2TimelineComponent.propDecorators = {
node: [{ type: ViewChild, args: ['container', { static: false },] }],
delay: [{ type: Input }],
title: [{ type: Input }],
maxAxis: [{ type: Input }],
data: [{ type: Input }],
titleMap: [{ type: Input }],
colorMap: [{ type: Input }],
mask: [{ type: Input }],
maskSlider: [{ type: Input }],
position: [{ type: Input }],
height: [{ type: Input }],
padding: [{ type: Input }],
borderWidth: [{ type: Input }],
slider: [{ type: Input }],
theme: [{ type: Input }],
clickItem: [{ type: Output }]
};
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2TimelineComponent.prototype, "delay", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2TimelineComponent.prototype, "maxAxis", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2TimelineComponent.prototype, "height", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2TimelineComponent.prototype, "borderWidth", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], G2TimelineComponent.prototype, "slider", void 0);
if (false) {
/** @type {?} */
G2TimelineComponent.ngAcceptInputType_delay;
/** @type {?} */
G2TimelineComponent.ngAcceptInputType_height;
/** @type {?} */
G2TimelineComponent.ngAcceptInputType_maxAxis;
/** @type {?} */
G2TimelineComponent.ngAcceptInputType_borderWidth;
/** @type {?} */
G2TimelineComponent.ngAcceptInputType_slider;
/**
* @type {?}
* @private
*/
G2TimelineComponent.prototype.node;
/**
* @type {?}
* @private
*/
G2TimelineComponent.prototype._chart;
/** @type {?} */
G2TimelineComponent.prototype.delay;
/** @type {?} */
G2TimelineComponent.prototype.title;
/** @type {?} */
G2TimelineComponent.prototype.maxAxis;
/** @type {?} */
G2TimelineComponent.prototype.data;
/** @type {?} */
G2TimelineComponent.prototype.titleMap;
/** @type {?} */
G2TimelineComponent.prototype.colorMap;
/** @type {?} */
G2TimelineComponent.prototype.mask;
/** @type {?} */
G2TimelineComponent.prototype.maskSlider;
/** @type {?} */
G2TimelineComponent.prototype.position;
/** @type {?} */
G2TimelineComponent.prototype.height;
/** @type {?} */
G2TimelineComponent.prototype.padding;
/** @type {?} */
G2TimelineComponent.prototype.borderWidth;
/** @type {?} */
G2TimelineComponent.prototype.slider;
/** @type {?} */
G2TimelineComponent.prototype.theme;
/** @type {?} */
G2TimelineComponent.prototype.clickItem;
/**
* @type {?}
* @private
*/
G2TimelineComponent.prototype.ngZone;
/**
* @type {?}
* @private
*/
G2TimelineComponent.prototype.platform;
}
/**
* @fileoverview added by tsickle
* Generated from: timeline.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [G2TimelineComponent];
class G2TimelineModule {
}
G2TimelineModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, OhayoUtilModule, NzOutletModule],
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: timeline.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { G2TimelineComponent, G2TimelineModule };
//# sourceMappingURL=timeline.js.map