yoyo-ng-modulewindy
Version:
服务于52ABP模板的前端开源的相关组件内容。整合了ng-alain和你NG ZORRO的内容
207 lines • 7.48 kB
JavaScript
import { Component, Input, HostBinding, ViewChild, ElementRef, NgZone, TemplateRef, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
import { toNumber, toBoolean } from 'yoyo-ng-module/util';
var G2RadarComponent = /** @class */ (function () {
function G2RadarComponent(el, cd, zone) {
this.el = el;
this.cd = cd;
this.zone = zone;
// region: fields
this._title = '';
this._height = 0;
this.padding = [44, 30, 16, 30];
this._hasLegend = true;
this._tickCount = 4;
this.data = [];
this.initFlag = false;
this.legendData = [];
}
Object.defineProperty(G2RadarComponent.prototype, "title", {
set: function (value) {
if (value instanceof TemplateRef) {
this._title = null;
this._titleTpl = value;
}
else
this._title = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2RadarComponent.prototype, "height", {
get: function () {
return this._height;
},
set: function (value) {
this._height = toNumber(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2RadarComponent.prototype, "hasLegend", {
get: function () {
return this._hasLegend;
},
set: function (value) {
this._hasLegend = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2RadarComponent.prototype, "tickCount", {
get: function () {
return this._tickCount;
},
set: function (value) {
this._tickCount = toNumber(value);
},
enumerable: true,
configurable: true
});
G2RadarComponent.prototype.handleLegendClick = function (i) {
var _this = this;
this.legendData[i].checked = !this.legendData[i].checked;
if (this.chart) {
// const filterItem = this.legendData.filter(l => l.checked).map(l => l.name);
this.chart.filter('name', function (val) { return _this.legendData.find(function (w) { return w.name === val; }).checked; });
this.chart.repaint();
}
};
G2RadarComponent.prototype.runInstall = function () {
var _this = this;
this.zone.runOutsideAngular(function () { return setTimeout(function () { return _this.install(); }, 100); });
};
G2RadarComponent.prototype.install = function () {
var _this = this;
if (!this.data || (this.data && this.data.length < 1))
return;
this.node.nativeElement.innerHTML = '';
var colors = [
'#1890FF',
'#FACC14',
'#2FC25B',
'#8543E0',
'#F04864',
'#13C2C2',
'#fa8c16',
'#a0d911',
];
var chart = new G2.Chart({
container: this.node.nativeElement,
forceFit: true,
height: +this.height - (this.hasLegend ? 80 : 22),
padding: this.padding,
});
chart.source(this.data, {
value: {
min: 0,
tickCount: this.tickCount,
},
});
chart.coord('polar');
chart.legend(false);
chart.axis('label', {
line: null,
labelOffset: 8,
labels: {
label: {
fill: 'rgba(0, 0, 0, .65)',
},
},
grid: {
line: {
stroke: '#e9e9e9',
lineWidth: 1,
lineDash: [0, 0],
},
},
});
chart.axis('value', {
grid: {
type: 'polygon',
line: {
stroke: '#e9e9e9',
lineWidth: 1,
lineDash: [0, 0],
},
},
labels: {
label: {
fill: 'rgba(0, 0, 0, .65)',
},
},
});
chart
.line()
.position('label*value')
.color('name', colors);
chart
.point()
.position('label*value')
.color('name', colors)
.shape('circle')
.size(3);
chart.render();
this.chart = chart;
if (this.hasLegend) {
this.zone.run(function () {
_this.legendData = chart
.getAllGeoms()[0]
._attrs.dataArray.map(function (item) {
var origin = item[0]._origin;
var result = {
name: origin.name,
color: item[0].color,
checked: true,
value: item.reduce(function (p, n) { return p + n._origin.value; }, 0),
};
return result;
});
_this.cd.detectChanges();
});
}
};
G2RadarComponent.prototype.uninstall = function () {
if (this.chart) {
this.chart.destroy();
this.chart = null;
}
};
G2RadarComponent.prototype.ngOnInit = function () {
this.initFlag = true;
this.runInstall();
};
G2RadarComponent.prototype.ngOnChanges = function (changes) {
if (this.initFlag)
this.runInstall();
};
G2RadarComponent.prototype.ngOnDestroy = function () {
this.uninstall();
};
G2RadarComponent.decorators = [
{ type: Component, args: [{
selector: 'g2-radar',
template: "\n <h4 *ngIf=\"_title; else _titleTpl\">{{ _title }}</h4>\n <div #container></div>\n <div nz-row class=\"legend\" *ngIf=\"hasLegend\">\n <div nz-col [nzSpan]=\"24 / legendData.length\" *ngFor=\"let i of legendData; let idx = index\" (click)=\"handleLegendClick(idx)\">\n <div class=\"legend-item\">\n <p>\n <i class=\"dot\" [ngStyle]=\"{'background-color': !i.checked ? '#aaa' : i.color}\"></i>\n <span>{{i.name}}</span>\n </p>\n <h6>{{i.value}}</h6>\n </div>\n </div>\n </div>",
host: { '[class.ad-radar]': 'true' },
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
G2RadarComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: NgZone }
]; };
G2RadarComponent.propDecorators = {
title: [{ type: Input }],
height: [{ type: HostBinding, args: ['style.height.px',] }, { type: Input }],
padding: [{ type: Input }],
hasLegend: [{ type: Input }],
tickCount: [{ type: Input }],
data: [{ type: Input }],
node: [{ type: ViewChild, args: ['container',] }]
};
return G2RadarComponent;
}());
export { G2RadarComponent };
//# sourceMappingURL=radar.component.js.map