@lxlib/chart
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.
333 lines (327 loc) • 9.47 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, NgZone, ViewChild, Input, NgModule } from '@angular/core';
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
import { InputNumber, InputBoolean, LxlibUtilModule } from '@lxlib/util';
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,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class G2TimelineData {
}
if (false) {
/**
* 非 `Date` 格式，自动使用 `new Date` 转换，因此，支持时间格式字符串、数字型时间戳
* @type {?}
*/
G2TimelineData.prototype.x;
/**
* 指标1数据
* @type {?}
*/
G2TimelineData.prototype.y1;
/**
* 指标2数据
* @type {?}
*/
G2TimelineData.prototype.y2;
/* Skipping unhandled member: [key: string]: any;*/
}
class G2TimelineComponent {
// #endregion
/**
* @param {?} ngZone
*/
constructor(ngZone) {
this.ngZone = ngZone;
// #region fields
this.delay = 0;
this.data = [];
this.colorMap = { y1: '#1890FF', y2: '#2FC25B' };
this.mask = 'HH:mm';
this.position = 'top';
this.height = 450;
this.padding = [60, 20, 64, 40];
this.borderWidth = 2;
this.slider = true;
}
/**
* @return {?}
*/
ngOnInit() {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => setTimeout((/**
* @return {?}
*/
() => this.install()), this.delay)));
}
/**
* @private
* @return {?}
*/
install() {
const { node, height, padding, mask, slider } = this;
/** @type {?} */
const chart = (this.chart = new Chart({
container: node.nativeElement,
autoFit: true,
height,
padding,
}));
chart.axis('x', { title: null });
chart.axis('y1', { title: null });
chart.axis('y2', false);
chart.line().position('x*y1');
chart.line().position('x*y2');
/** @type {?} */
const sliderPadding = Object.assign(Object.assign({}, []), padding);
sliderPadding[0] = 0;
if (slider) {
chart.option('slider', {
height: 26,
start: 0.1,
end: 0.8,
trendCfg: {
isArea: false,
},
mask,
});
}
this.attachChart();
}
/**
* @private
* @return {?}
*/
attachChart() {
const { chart, height, padding, data, mask, titleMap, position, colorMap, borderWidth } = this;
if (!chart || !data || data.length <= 0)
return;
chart.legend({
position,
custom: true,
// clickable: false,
items: [
{ name: titleMap.y1, value: titleMap.y1, marker: { style: { fill: colorMap.y1 } } },
{ name: titleMap.y1, value: titleMap.y2, marker: { style: { fill: colorMap.y2 } } },
],
});
// 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
.filter((/**
* @param {?} v
* @return {?}
*/
v => !(v.x instanceof Number)))
.forEach((/**
* @param {?} v
* @return {?}
*/
v => {
v.x = +new Date(v.x);
}));
data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => +a.x - +b.x));
/** @type {?} */
const max = Math.max([...data].sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => b.y1 - a.y1))[0].y1, [...data].sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => b.y2 - a.y2))[0].y2);
/** @type {?} */
const ds = new DataSet({
state: {
start: data[0].x,
end: data[data.length - 1].x,
},
});
/** @type {?} */
const dv = ds.createView('origin').source(data);
dv.transform({
type: 'filter',
callback: (/**
* @param {?} val
* @return {?}
*/
(val) => {
/** @type {?} */
const time = +val.x;
return time >= ds.state.start && time <= ds.state.end;
}),
});
chart.scale({
x: {
type: 'timeCat',
mask,
range: [0, 1],
},
y1: {
alias: titleMap.y1,
max,
min: 0,
},
y2: {
alias: titleMap.y2,
max,
min: 0,
},
});
chart.changeData(dv.rows);
}
/**
* @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 }
];
G2TimelineComponent.propDecorators = {
node: [{ type: ViewChild, args: ['container', { static: false },] }],
delay: [{ type: Input }],
title: [{ type: Input }],
data: [{ type: Input }],
titleMap: [{ type: Input }],
colorMap: [{ type: Input }],
mask: [{ type: Input }],
position: [{ type: Input }],
height: [{ type: Input }],
padding: [{ type: Input }],
borderWidth: [{ type: Input }],
slider: [{ type: Input }]
};
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2TimelineComponent.prototype, "delay", 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 {?}
* @private
*/
G2TimelineComponent.prototype.node;
/**
* @type {?}
* @private
*/
G2TimelineComponent.prototype.chart;
/** @type {?} */
G2TimelineComponent.prototype.delay;
/** @type {?} */
G2TimelineComponent.prototype.title;
/** @type {?} */
G2TimelineComponent.prototype.data;
/** @type {?} */
G2TimelineComponent.prototype.titleMap;
/** @type {?} */
G2TimelineComponent.prototype.colorMap;
/** @type {?} */
G2TimelineComponent.prototype.mask;
/** @type {?} */
G2TimelineComponent.prototype.position;
/** @type {?} */
G2TimelineComponent.prototype.height;
/** @type {?} */
G2TimelineComponent.prototype.padding;
/** @type {?} */
G2TimelineComponent.prototype.borderWidth;
/** @type {?} */
G2TimelineComponent.prototype.slider;
/**
* @type {?}
* @private
*/
G2TimelineComponent.prototype.ngZone;
}
/**
* @fileoverview added by tsickle
* Generated from: timeline.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [G2TimelineComponent];
class G2TimelineModule {
}
G2TimelineModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, LxlibUtilModule, NzOutletModule],
declarations: [...COMPONENTS],
exports: [...COMPONENTS],
},] }
];
/**
* @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: timeline.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { G2TimelineComponent, G2TimelineData, G2TimelineModule };
//# sourceMappingURL=timeline.js.map