yoyo-ng-modulewindy
Version:
服务于52ABP模板的前端开源的相关组件内容。整合了ng-alain和你NG ZORRO的内容
287 lines • 10.6 kB
JavaScript
import { Component, Input, HostBinding, ViewChild, ElementRef, NgZone, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { toNumber, toBoolean } from 'yoyo-ng-module/util';
var G2PieComponent = /** @class */ (function () {
function G2PieComponent(el, cd, zone) {
this.el = el;
this.cd = cd;
this.zone = zone;
this._animate = true;
this.color = 'rgba(24, 144, 255, 0.85)';
this._height = 0;
this._hasLegend = false;
this._legendBlock = false;
this.inner = 0.75;
this.padding = [12, 0, 12, 0];
this._tooltip = true;
this._lineWidth = 0;
this._select = true;
this.initFlag = false;
this.legendData = [];
// region: resize
this.scroll$ = null;
}
Object.defineProperty(G2PieComponent.prototype, "animate", {
// region: fields
get: function () {
return this._animate;
},
set: function (value) {
this._animate = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2PieComponent.prototype, "height", {
get: function () {
return this._height;
},
set: function (value) {
this._height = toNumber(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2PieComponent.prototype, "hasLegend", {
get: function () {
return this._hasLegend;
},
set: function (value) {
this._hasLegend = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2PieComponent.prototype, "legendBlock", {
get: function () {
return this._legendBlock;
},
set: function (value) {
this._legendBlock = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2PieComponent.prototype, "percent", {
get: function () {
return this._percent;
},
set: function (value) {
this._percent = toNumber(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2PieComponent.prototype, "tooltip", {
get: function () {
return this._tooltip;
},
set: function (value) {
this._tooltip = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2PieComponent.prototype, "lineWidth", {
get: function () {
return this._lineWidth;
},
set: function (value) {
this._lineWidth = toNumber(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2PieComponent.prototype, "select", {
get: function () {
return this._select;
},
set: function (value) {
this._select = toBoolean(value);
},
enumerable: true,
configurable: true
});
G2PieComponent.prototype.runInstall = function () {
var _this = this;
this.zone.runOutsideAngular(function () { return setTimeout(function () { return _this.install(); }, 100); });
};
G2PieComponent.prototype.install = function () {
var _this = this;
var formatColor;
var isPercent = typeof this.percent !== 'undefined';
if (isPercent) {
this.select = false;
this.tooltip = false;
formatColor = function (value) {
return value === '占比' ? _this.color || 'rgba(24, 144, 255, 0.85)' : '#F0F2F5';
};
this.data = [
{
x: '占比',
y: this.percent,
},
{
x: '反比',
y: 100 - this.percent,
},
];
}
if (!this.data || (this.data && this.data.length < 1))
return;
this.node.nativeElement.innerHTML = '';
var chart = new G2.Chart({
container: this.node.nativeElement,
forceFit: true,
height: this.height,
padding: this.padding,
animate: this.animate,
});
if (!this.tooltip) {
chart.tooltip(false);
}
else {
chart.tooltip({
showTitle: false,
itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value} %</li>',
});
}
chart.axis(false);
chart.legend(false);
var dv = new DataSet.DataView();
dv.source(this.data).transform({
type: 'percent',
field: 'y',
dimension: 'x',
as: 'percent',
});
chart.source(dv, {
x: {
type: 'cat',
range: [0, 1],
},
y: {
min: 0,
},
});
chart.coord('theta', { innerRadius: this.inner });
chart
.intervalStack()
.position('y')
.style({ lineWidth: this.lineWidth, stroke: '#fff' })
.tooltip('x*percent', function (item, percent) {
return {
name: item,
value: percent,
};
})
.color('x', isPercent ? formatColor : this.colors)
.select(this.select);
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;
origin.color = item[0].color;
origin.checked = true;
origin.percent = (origin.percent * 100).toFixed(2);
return origin;
});
_this.cd.detectChanges();
});
}
};
G2PieComponent.prototype.uninstall = function () {
if (this.chart) {
this.chart.destroy();
this.chart = null;
}
};
G2PieComponent.prototype.handleLegendClick = function (i) {
this.legendData[i].checked = !this.legendData[i].checked;
if (this.chart) {
this.chart.filter('x', function (val, item) { return item.checked; });
this.chart.repaint();
}
};
G2PieComponent.prototype.ngOnInit = function () {
this.installResizeEvent();
};
G2PieComponent.prototype.ngAfterViewInit = function () {
this.initFlag = true;
this.runInstall();
};
G2PieComponent.prototype.ngOnChanges = function () {
if (this.initFlag)
this.runInstall();
};
G2PieComponent.prototype.ngOnDestroy = function () {
this.uninstallResizeEvent();
this.uninstall();
};
G2PieComponent.prototype.installResizeEvent = function () {
var _this = this;
if (!this.hasLegend)
return;
this.scroll$ = fromEvent(window, 'resize')
.pipe(debounceTime(200))
.subscribe(function () { return _this.resize(); });
};
G2PieComponent.prototype.uninstallResizeEvent = function () {
if (this.scroll$)
this.scroll$.unsubscribe();
};
G2PieComponent.prototype.resize = function () {
if (this.el.nativeElement.clientWidth <= 380) {
if (!this.legendBlock) {
this.legendBlock = true;
}
}
else if (this.legendBlock) {
this.legendBlock = false;
}
if (!this.chart)
this.runInstall();
};
G2PieComponent.decorators = [
{ type: Component, args: [{
selector: 'g2-pie',
template: "\n <div class=\"chart\">\n <div #container></div>\n <div *ngIf=\"subTitle || total\" class=\"total\">\n <h4 *ngIf=\"subTitle\" class=\"pie-sub-title\" [innerHTML]=\"subTitle\"></h4>\n <div *ngIf=\"total\" class=\"pie-stat\" [innerHTML]=\"total\"></div>\n </div>\n </div>\n <ul *ngIf=\"hasLegend && legendData?.length\" class=\"legend\">\n <li *ngFor=\"let item of legendData; let index = index\" (click)=\"handleLegendClick(index)\">\n <span class=\"dot\" [ngStyle]=\"{'background-color': !item.checked ? '#aaa' : item.color}\"></span>\n <span class=\"legend-title\">{{item.x}}</span>\n <nz-divider nzType=\"vertical\"></nz-divider>\n <span class=\"percent\">{{item.percent}}%</span>\n <span class=\"value\" [innerHTML]=\"valueFormat ? valueFormat(item.y) : item.y\"></span>\n </li>\n </ul>",
host: { '[class.ad-pie]': 'true' },
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
G2PieComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: NgZone }
]; };
G2PieComponent.propDecorators = {
animate: [{ type: Input }],
color: [{ type: Input }],
subTitle: [{ type: Input }],
total: [{ type: Input }],
height: [{ type: Input }],
hasLegend: [{ type: HostBinding, args: ['class.has-legend',] }, { type: Input }],
legendBlock: [{ type: HostBinding, args: ['class.legend-block',] }, { type: Input }],
inner: [{ type: Input }],
padding: [{ type: Input }],
percent: [{ type: Input }],
tooltip: [{ type: Input }],
lineWidth: [{ type: Input }],
select: [{ type: Input }],
data: [{ type: Input }],
valueFormat: [{ type: Input }],
colors: [{ type: Input }],
node: [{ type: ViewChild, args: ['container',] }]
};
return G2PieComponent;
}());
export { G2PieComponent };
//# sourceMappingURL=pie.component.js.map