@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
128 lines • 6.28 kB
JavaScript
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { max } from 'd3-array';
import { arc, pie } from 'd3-shape';
import { formatLabel } from '../common/label.helper';
var PieSeriesComponent = (function () {
function PieSeriesComponent() {
this.series = [];
this.innerRadius = 60;
this.outerRadius = 80;
this.tooltipDisabled = false;
this.select = new EventEmitter();
this.activate = new EventEmitter();
this.deactivate = new EventEmitter();
}
PieSeriesComponent.prototype.ngOnChanges = function (changes) {
this.update();
};
PieSeriesComponent.prototype.update = function () {
var pieGenerator = pie()
.value(function (d) { return d.value; })
.sort(null);
var arcData = pieGenerator(this.series);
this.max = max(arcData, function (d) {
return d.value;
});
this.data = this.calculateLabelPositions(arcData);
this.tooltipText = this.tooltipText || this.defaultTooltipText;
};
PieSeriesComponent.prototype.midAngle = function (d) {
return d.startAngle + (d.endAngle - d.startAngle) / 2;
};
PieSeriesComponent.prototype.outerArc = function () {
var factor = 1.5;
return arc()
.innerRadius(this.outerRadius * factor)
.outerRadius(this.outerRadius * factor);
};
PieSeriesComponent.prototype.calculateLabelPositions = function (pieData) {
var _this = this;
var factor = 1.5;
var minDistance = 10;
var labelPositions = pieData;
labelPositions.forEach(function (d) {
d.pos = _this.outerArc().centroid(d);
d.pos[0] = factor * _this.outerRadius * (_this.midAngle(d) < Math.PI ? 1 : -1);
});
for (var i = 0; i < labelPositions.length - 1; i++) {
var a = labelPositions[i];
for (var j = i + 1; j < labelPositions.length; j++) {
var b = labelPositions[j];
// if they're on the same side
if (b.pos[0] * a.pos[0] > 0) {
// if they're overlapping
var o = minDistance - Math.abs(b.pos[1] - a.pos[1]);
if (o > 0) {
// push the second up or down
b.pos[1] += Math.sign(b.pos[0]) * o;
}
}
}
}
return labelPositions;
};
PieSeriesComponent.prototype.labelVisible = function (arc) {
return this.showLabels && (arc.endAngle - arc.startAngle > Math.PI / 30);
};
PieSeriesComponent.prototype.labelText = function (arc) {
if (this.labelFormatting) {
return this.labelFormatting(arc.data.name);
}
return this.label(arc);
};
PieSeriesComponent.prototype.label = function (arc) {
return formatLabel(arc.data.name);
};
PieSeriesComponent.prototype.defaultTooltipText = function (arc) {
var label = this.label(arc);
var val = formatLabel(arc.data.value);
return "\n <span class=\"tooltip-label\">" + label + "</span>\n <span class=\"tooltip-val\">" + val + "</span>\n ";
};
PieSeriesComponent.prototype.color = function (arc) {
return this.colors.getColor(this.label(arc));
};
PieSeriesComponent.prototype.trackBy = function (index, item) {
return item.data.name;
};
PieSeriesComponent.prototype.onClick = function (data) {
this.select.emit(data);
};
PieSeriesComponent.prototype.isActive = function (entry) {
if (!this.activeEntries)
return false;
var item = this.activeEntries.find(function (d) {
return entry.name === d.name && entry.series === d.series;
});
return item !== undefined;
};
return PieSeriesComponent;
}());
export { PieSeriesComponent };
PieSeriesComponent.decorators = [
{ type: Component, args: [{
selector: 'g[ngx-charts-pie-series]',
template: "\n <svg:g *ngFor=\"let arc of data; trackBy:trackBy\">\n <svg:g ngx-charts-pie-label\n *ngIf=\"labelVisible(arc)\"\n [data]=\"arc\"\n [radius]=\"outerRadius\"\n [color]=\"color(arc)\"\n [label]=\"labelText(arc)\"\n [max]=\"max\"\n [value]=\"arc.value\"\n [explodeSlices]=\"explodeSlices\">\n </svg:g>\n <svg:g\n ngx-charts-pie-arc\n [startAngle]=\"arc.startAngle\"\n [endAngle]=\"arc.endAngle\"\n [innerRadius]=\"innerRadius\"\n [outerRadius]=\"outerRadius\"\n [fill]=\"color(arc)\"\n [value]=\"arc.data.value\"\n [gradient]=\"gradient\"\n [data]=\"arc.data\"\n [max]=\"max\"\n [explodeSlices]=\"explodeSlices\"\n [isActive]=\"isActive(arc.data)\"\n (select)=\"onClick($event)\"\n (activate)=\"activate.emit($event)\"\n (deactivate)=\"deactivate.emit($event)\"\n ngx-tooltip\n [tooltipDisabled]=\"tooltipDisabled\"\n [tooltipPlacement]=\"'top'\"\n [tooltipType]=\"'tooltip'\"\n [tooltipTitle]=\"tooltipTemplate ? undefined : tooltipText(arc)\"\n [tooltipTemplate]=\"tooltipTemplate\"\n [tooltipContext]=\"arc.data\">\n </svg:g>\n </svg:g>\n ",
changeDetection: ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
PieSeriesComponent.ctorParameters = function () { return []; };
PieSeriesComponent.propDecorators = {
'colors': [{ type: Input },],
'series': [{ type: Input },],
'dims': [{ type: Input },],
'innerRadius': [{ type: Input },],
'outerRadius': [{ type: Input },],
'explodeSlices': [{ type: Input },],
'showLabels': [{ type: Input },],
'gradient': [{ type: Input },],
'activeEntries': [{ type: Input },],
'labelFormatting': [{ type: Input },],
'tooltipText': [{ type: Input },],
'tooltipDisabled': [{ type: Input },],
'tooltipTemplate': [{ type: Input },],
'select': [{ type: Output },],
'activate': [{ type: Output },],
'deactivate': [{ type: Output },],
};
//# sourceMappingURL=pie-series.component.js.map