@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
107 lines • 6.25 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var core_1 = require('/core');
var d3_1 = require('../d3');
var view_dimensions_helper_1 = require('../common/view-dimensions.helper');
var color_helper_1 = require('../common/color.helper');
var base_chart_component_1 = require('../common/base-chart.component');
var trim_label_helper_1 = require('../common/trim-label.helper');
var grid_layout_helper_1 = require('../common/grid-layout.helper');
var label_helper_1 = require('../common/label.helper');
var PieGridComponent = (function (_super) {
__extends(PieGridComponent, _super);
function PieGridComponent() {
_super.apply(this, arguments);
this.margin = [20, 20, 20, 20];
}
PieGridComponent.prototype.update = function () {
var _this = this;
_super.prototype.update.call(this);
this.zone.run(function () {
_this.dims = view_dimensions_helper_1.calculateViewDimensions({
width: _this.width,
height: _this.height,
margins: _this.margin
});
_this.domain = _this.getDomain();
_this.data = grid_layout_helper_1.gridLayout(_this.dims, _this.results, 150);
_this.transform = "translate(" + _this.margin[3] + " , " + _this.margin[0] + ")";
_this.series = _this.getSeries();
_this.setColors();
});
};
PieGridComponent.prototype.getTooltipText = function (label, val) {
return "\n <span class=\"tooltip-label\">" + label + "</span>\n <span class=\"tooltip-val\">" + val + "</span>\n ";
};
PieGridComponent.prototype.getDomain = function () {
return this.results.map(function (d) { return d.name; });
};
PieGridComponent.prototype.getSeries = function () {
var _this = this;
var total = this.getTotal();
return this.data.map(function (d) {
var baselineLabelHeight = 20;
var padding = 10;
var label = label_helper_1.formatLabel(d.data.name);
var value = d.data.value;
var radius = (d3_1.default.min([d.width - padding, d.height - baselineLabelHeight]) / 2) - 5;
var innerRadius = radius * 0.9;
var count = 0;
var colors = function () {
count += 1;
if (count === 1) {
return 'rgba(100,100,100,0.3)';
}
else {
return _this.colorScale.getColor(label);
}
};
var xPos = d.x + (d.width - padding) / 2;
var yPos = d.y + (d.height - baselineLabelHeight) / 2;
return {
transform: "translate(" + xPos + ", " + yPos + ")",
colors: colors,
innerRadius: innerRadius,
outerRadius: radius,
label: trim_label_helper_1.trimLabel(label),
total: value,
value: value,
percent: d3_1.default.format('.1p')(d.data.percent),
data: [d, {
data: {
other: true,
value: total - value,
name: d.data.name
}
}]
};
});
};
PieGridComponent.prototype.getTotal = function () {
return this.results
.map(function (d) { return d.value; })
.reduce(function (sum, d) { return sum + d; }, 0);
};
PieGridComponent.prototype.onClick = function (data) {
this.select.emit(data);
};
PieGridComponent.prototype.setColors = function () {
this.colorScale = new color_helper_1.ColorHelper(this.scheme, 'ordinal', this.domain, this.customColors);
};
PieGridComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'ngx-charts-pie-grid',
template: "\n <ngx-charts-chart\n [view]=\"[width, height]\"\n [showLegend]=\"false\">\n <svg:g [attr.transform]=\"transform\" class=\"pie-grid chart\">\n <svg:g\n *ngFor=\"let series of series\"\n class=\"pie-grid-item\"\n [attr.transform]=\"series.transform\">\n <svg:g ngx-charts-pie-grid-series\n [colors]=\"series.colors\"\n [data]=\"series.data\"\n [innerRadius]=\"series.innerRadius\"\n [outerRadius]=\"series.outerRadius\"\n (select)=\"onClick($event)\"\n ngx-tooltip\n [tooltipPlacement]=\"'top'\"\n [tooltipType]=\"'tooltip'\"\n [tooltipTitle]=\"getTooltipText(series.label, series.value.toLocaleString())\"\n />\n <svg:text\n class=\"label percent-label\"\n dy=\"-0.5em\"\n x=\"0\"\n y=\"5\"\n ngx-charts-count-up \n [countTo]=\"series.percent\"\n [countSuffix]=\"'%'\"\n text-anchor=\"middle\">\n </svg:text>\n <svg:text\n class=\"label\"\n dy=\"0.5em\"\n x=\"0\"\n y=\"5\"\n text-anchor=\"middle\">\n {{series.label}}\n </svg:text>\n <svg:text\n class=\"label\"\n dy=\"1.23em\"\n x=\"0\"\n [attr.y]=\"series.outerRadius\"\n text-anchor=\"middle\"\n ngx-charts-count-up \n [countTo]=\"series.total\"\n [countPrefix]=\"'Total: '\">\n </svg:text>\n </svg:g>\n </svg:g>\n </ngx-charts-chart>\n ",
changeDetection: core_1.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
PieGridComponent.ctorParameters = function () { return []; };
return PieGridComponent;
}(base_chart_component_1.BaseChartComponent));
exports.PieGridComponent = PieGridComponent;
//# sourceMappingURL=pie-grid.component.js.map