yoyo-ng-modulewindy
Version:
服务于52ABP模板的前端开源的相关组件内容。整合了ng-alain和你NG ZORRO的内容
211 lines • 7.4 kB
JavaScript
import { Component, Input, ViewChild, ElementRef, NgZone, TemplateRef, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
import { toNumber } from 'yoyo-ng-module/util';
var G2TimelineComponent = /** @class */ (function () {
function G2TimelineComponent(cd, zone) {
this.cd = cd;
this.zone = zone;
// region: fields
this._title = '';
this.colorMap = { y1: '#1890FF', y2: '#2FC25B' };
this.mask = 'HH:mm';
this.position = 'top';
this._height = 400;
this.padding = [60, 20, 40, 40];
this._borderWidth = 2;
this.initFlag = false;
}
Object.defineProperty(G2TimelineComponent.prototype, "title", {
set: function (value) {
if (value instanceof TemplateRef) {
this._title = null;
this._titleTpl = value;
}
else {
this._title = value;
}
this.cd.detectChanges();
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2TimelineComponent.prototype, "height", {
get: function () {
return this._height;
},
set: function (value) {
this._height = toNumber(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2TimelineComponent.prototype, "borderWidth", {
get: function () {
return this._borderWidth;
},
set: function (value) {
this._borderWidth = toNumber(value);
},
enumerable: true,
configurable: true
});
G2TimelineComponent.prototype.ngOnInit = function () {
this.initFlag = true;
};
G2TimelineComponent.prototype.ngAfterViewInit = function () {
this.runInstall();
};
G2TimelineComponent.prototype.runInstall = function () {
var _this = this;
this.zone.runOutsideAngular(function () {
setTimeout(function () { return _this.install(); }, 100);
});
};
G2TimelineComponent.prototype.install = function () {
if (!this.data || (this.data && this.data.length < 1))
return;
// clean
this.sliderNode.nativeElement.innerHTML = '';
this.node.nativeElement.innerHTML = '';
var MAX = 8;
var begin = this.data.length > MAX ? (this.data.length - MAX) / 2 : 0;
var ds = new DataSet({
state: {
start: this.data[begin - 1].x,
end: this.data[begin - 1 + MAX].x,
},
});
var dv = ds.createView().source(this.data);
dv.source(this.data).transform({
type: 'filter',
callback: function (obj) {
var time = new Date(obj.x).getTime(); // !注意：时间格式，建议转换为时间戳进行比较
return time >= ds.state.start && time <= ds.state.end;
},
});
var chart = new G2.Chart({
container: this.node.nativeElement,
forceFit: true,
height: +this.height,
padding: this.padding,
});
chart.axis('x', { title: false });
chart.axis('y1', {
title: false,
});
chart.axis('y2', false);
var max;
if (this.data[0] && this.data[0].y1 && this.data[0].y2) {
max = Math.max(this.data.sort(function (a, b) { return b.y1 - a.y1; })[0].y1, this.data.sort(function (a, b) { return b.y2 - a.y2; })[0].y2);
}
chart.source(dv, {
x: {
type: 'timeCat',
tickCount: MAX,
mask: this.mask,
range: [0, 1],
},
y1: {
alias: this.titleMap.y1,
max: max,
min: 0,
},
y2: {
alias: this.titleMap.y2,
max: max,
min: 0,
},
});
chart.legend({
position: this.position,
custom: true,
clickable: false,
items: [
{ value: this.titleMap.y1, fill: this.colorMap.y1 },
{ value: this.titleMap.y2, fill: this.colorMap.y2 },
],
});
chart
.line()
.position('x*y1')
.color(this.colorMap.y1)
.size(this.borderWidth);
chart
.line()
.position('x*y2')
.color(this.colorMap.y2)
.size(this.borderWidth);
chart.render();
var sliderPadding = Object.assign([], this.padding);
sliderPadding[0] = 0;
var slider = new Slider({
container: this.sliderNode.nativeElement,
height: 26,
padding: sliderPadding,
scales: {
x: {
type: 'time',
tickCount: 16,
mask: this.mask,
},
},
backgroundChart: {
type: 'line',
},
start: ds.state.start,
end: ds.state.end,
xAxis: 'x',
yAxis: 'y1',
data: this.data,
onChange: function (_a) {
var startValue = _a.startValue, endValue = _a.endValue;
ds.setState('start', startValue);
ds.setState('end', endValue);
},
});
slider.render();
this.chart = chart;
this.slider = slider;
};
G2TimelineComponent.prototype.uninstall = function () {
if (this.chart)
this.chart.destroy();
if (this.slider)
this.slider.destroy();
};
G2TimelineComponent.prototype.ngOnChanges = function () {
if (this.initFlag)
this.runInstall();
};
G2TimelineComponent.prototype.ngOnDestroy = function () {
this.uninstall();
};
G2TimelineComponent.decorators = [
{ type: Component, args: [{
selector: 'g2-timeline',
template: "\n <ng-container *ngIf=\"_title; else _titleTpl\"><h4>{{_title}}</h4></ng-container>\n <div #container></div>\n <div #slider></div>",
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
G2TimelineComponent.ctorParameters = function () { return [
{ type: ChangeDetectorRef },
{ type: NgZone }
]; };
G2TimelineComponent.propDecorators = {
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 }],
node: [{ type: ViewChild, args: ['container',] }],
sliderNode: [{ type: ViewChild, args: ['slider',] }]
};
return G2TimelineComponent;
}());
export { G2TimelineComponent };
//# sourceMappingURL=timeline.component.js.map