@lxlib/chart
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.
357 lines (351 loc) • 10.8 kB
JavaScript
import { __assign, __spread, __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
*/
var G2TimelineData = /** @class */ (function () {
function G2TimelineData() {
}
return 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;*/
}
var G2TimelineComponent = /** @class */ (function () {
// #endregion
function G2TimelineComponent(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 {?}
*/
G2TimelineComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () { return setTimeout((/**
* @return {?}
*/
function () { return _this.install(); }), _this.delay); }));
};
/**
* @private
* @return {?}
*/
G2TimelineComponent.prototype.install = /**
* @private
* @return {?}
*/
function () {
var _a = this, node = _a.node, height = _a.height, padding = _a.padding, mask = _a.mask, slider = _a.slider;
/** @type {?} */
var chart = (this.chart = new Chart({
container: node.nativeElement,
autoFit: true,
height: height,
padding: 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 {?} */
var sliderPadding = __assign(__assign({}, []), padding);
sliderPadding[0] = 0;
if (slider) {
chart.option('slider', {
height: 26,
start: 0.1,
end: 0.8,
trendCfg: {
isArea: false,
},
mask: mask,
});
}
this.attachChart();
};
/**
* @private
* @return {?}
*/
G2TimelineComponent.prototype.attachChart = /**
* @private
* @return {?}
*/
function () {
var _a = this, chart = _a.chart, height = _a.height, padding = _a.padding, data = _a.data, mask = _a.mask, titleMap = _a.titleMap, position = _a.position, colorMap = _a.colorMap, borderWidth = _a.borderWidth;
if (!chart || !data || data.length <= 0)
return;
chart.legend({
position: 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 {?}
*/
function (v, idx) {
v.color(((/** @type {?} */ (colorMap)))["y" + (idx + 1)]).size(borderWidth);
}));
chart.height = height;
chart.padding = padding;
data
.filter((/**
* @param {?} v
* @return {?}
*/
function (v) { return !(v.x instanceof Number); }))
.forEach((/**
* @param {?} v
* @return {?}
*/
function (v) {
v.x = +new Date(v.x);
}));
data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return +a.x - +b.x; }));
/** @type {?} */
var max = Math.max(__spread(data).sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return b.y1 - a.y1; }))[0].y1, __spread(data).sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return b.y2 - a.y2; }))[0].y2);
/** @type {?} */
var ds = new DataSet({
state: {
start: data[0].x,
end: data[data.length - 1].x,
},
});
/** @type {?} */
var dv = ds.createView('origin').source(data);
dv.transform({
type: 'filter',
callback: (/**
* @param {?} val
* @return {?}
*/
function (val) {
/** @type {?} */
var time = +val.x;
return time >= ds.state.start && time <= ds.state.end;
}),
});
chart.scale({
x: {
type: 'timeCat',
mask: mask,
range: [0, 1],
},
y1: {
alias: titleMap.y1,
max: max,
min: 0,
},
y2: {
alias: titleMap.y2,
max: max,
min: 0,
},
});
chart.changeData(dv.rows);
};
/**
* @return {?}
*/
G2TimelineComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () { return _this.attachChart(); }));
};
/**
* @return {?}
*/
G2TimelineComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _this = this;
if (this.chart) {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () { 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 = function () { return [
{ 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);
return G2TimelineComponent;
}());
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 {?} */
var COMPONENTS = [G2TimelineComponent];
var G2TimelineModule = /** @class */ (function () {
function G2TimelineModule() {
}
G2TimelineModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, LxlibUtilModule, NzOutletModule],
declarations: __spread(COMPONENTS),
exports: __spread(COMPONENTS),
},] }
];
return G2TimelineModule;
}());
/**
* @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