@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
140 lines • 6.4 kB
JavaScript
;
var core_1 = require('@angular/core');
var label_helper_1 = require('../common/label.helper');
var SeriesHorizontal = (function () {
function SeriesHorizontal() {
this.type = 'standard';
this.select = new core_1.EventEmitter();
this.activate = new core_1.EventEmitter();
this.deactivate = new core_1.EventEmitter();
}
SeriesHorizontal.prototype.ngOnChanges = function (changes) {
this.update();
};
SeriesHorizontal.prototype.update = function () {
var _this = this;
var d0 = 0;
var total;
if (this.type === 'normalized') {
total = this.series.map(function (d) { return d.value; }).reduce(function (sum, d) { return sum + d; }, 0);
}
this.bars = this.series.map(function (d, index) {
var value = d.value;
var label = d.name;
var formattedLabel = label_helper_1.formatLabel(label);
var roundEdges = _this.type === 'standard';
var bar = {
value: value,
label: label,
roundEdges: roundEdges,
data: d,
formattedLabel: formattedLabel
};
bar.height = _this.yScale.bandwidth();
if (_this.type === 'standard') {
bar.width = Math.abs(_this.xScale(value) - _this.xScale(0));
if (value < 0) {
bar.x = _this.xScale(value);
}
else {
bar.x = _this.xScale(0);
}
bar.y = _this.yScale(label);
}
else if (_this.type === 'stacked') {
var offset0 = d0;
var offset1 = offset0 + value;
d0 += value;
bar.width = _this.xScale(offset1) - _this.xScale(offset0);
bar.x = _this.xScale(offset0);
bar.y = 0;
bar.offset0 = offset0;
bar.offset1 = offset1;
}
else if (_this.type === 'normalized') {
var offset0 = d0;
var offset1 = offset0 + value;
d0 += value;
if (total > 0) {
offset0 = (offset0 * 100) / total;
offset1 = (offset1 * 100) / total;
}
else {
offset0 = 0;
offset1 = 0;
}
bar.width = _this.xScale(offset1) - _this.xScale(offset0);
bar.x = _this.xScale(offset0);
bar.y = 0;
bar.offset0 = offset0;
bar.offset1 = offset1;
value = (offset1 - offset0).toFixed(2) + '%';
}
if (_this.colors.scaleType === 'ordinal') {
bar.color = _this.colors.getColor(label);
}
else {
if (_this.type === 'standard') {
bar.color = _this.colors.getColor(value);
bar.gradientStops = _this.colors.getLinearGradientStops(value);
}
else {
bar.color = _this.colors.getColor(bar.offset1);
bar.gradientStops = _this.colors.getLinearGradientStops(bar.offset1, bar.offset0);
}
}
bar.tooltipText = "\n <span class=\"tooltip-label\">" + formattedLabel + "</span>\n <span class=\"tooltip-val\">" + value.toLocaleString() + "</span>\n ";
return bar;
});
};
SeriesHorizontal.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;
};
SeriesHorizontal.prototype.trackBy = function (index, bar) {
return bar.label;
};
SeriesHorizontal.prototype.click = function (data) {
this.select.emit(data);
};
SeriesHorizontal.decorators = [
{ type: core_1.Component, args: [{
selector: 'g[ngx-charts-series-horizontal]',
template: "\n <svg:g ngx-charts-bar\n *ngFor=\"let bar of bars; trackBy:trackBy\"\n [@animationState]=\"'active'\"\n [width]=\"bar.width\"\n [height]=\"bar.height\"\n [x]=\"bar.x\"\n [y]=\"bar.y\"\n [fill]=\"bar.color\"\n [stops]=\"bar.gradientStops\"\n [data]=\"bar.data\"\n [orientation]=\"'horizontal'\"\n [roundEdges]=\"bar.roundEdges\"\n (select)=\"click($event)\"\n [gradient]=\"gradient\"\n [isActive]=\"isActive(bar.data)\"\n (activate)=\"activate.emit($event)\"\n (deactivate)=\"deactivate.emit($event)\"\n ngx-tooltip\n [tooltipPlacement]=\"'top'\"\n [tooltipType]=\"'tooltip'\"\n [tooltipTitle]=\"bar.tooltipText\">\n </svg:g>\n ",
changeDetection: core_1.ChangeDetectionStrategy.OnPush,
animations: [
core_1.trigger('animationState', [
core_1.transition('* => void', [
core_1.style({
opacity: 1,
transform: '*',
}),
core_1.animate(500, core_1.style({ opacity: 0, transform: 'scale(0)' }))
])
])
]
},] },
];
/** @nocollapse */
SeriesHorizontal.ctorParameters = function () { return []; };
SeriesHorizontal.propDecorators = {
'dims': [{ type: core_1.Input },],
'type': [{ type: core_1.Input },],
'series': [{ type: core_1.Input },],
'xScale': [{ type: core_1.Input },],
'yScale': [{ type: core_1.Input },],
'colors': [{ type: core_1.Input },],
'gradient': [{ type: core_1.Input },],
'activeEntries': [{ type: core_1.Input },],
'select': [{ type: core_1.Output },],
'activate': [{ type: core_1.Output },],
'deactivate': [{ type: core_1.Output },],
};
return SeriesHorizontal;
}());
exports.SeriesHorizontal = SeriesHorizontal;
//# sourceMappingURL=series-horizontal.component.js.map