@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
154 lines • 7.02 kB
JavaScript
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { trigger, style, animate, transition } from '@angular/animations';
import { formatLabel } from '../common/label.helper';
var SeriesHorizontal = (function () {
function SeriesHorizontal() {
this.type = 'standard';
this.tooltipDisabled = false;
this.select = new EventEmitter();
this.activate = new EventEmitter();
this.deactivate = new EventEmitter();
}
SeriesHorizontal.prototype.ngOnChanges = function (changes) {
this.update();
};
SeriesHorizontal.prototype.update = function () {
var _this = this;
this.updateTooltipSettings();
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 = formatLabel(label);
var roundEdges = _this.roundEdges;
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);
}
}
var tooltipLabel = formattedLabel;
if (_this.seriesName) {
tooltipLabel = _this.seriesName + " \u2022 " + formattedLabel;
bar.data.series = _this.seriesName;
}
bar.tooltipText = _this.tooltipDisabled ? undefined : "\n <span class=\"tooltip-label\">" + tooltipLabel + "</span>\n <span class=\"tooltip-val\">" + value.toLocaleString() + "</span>\n ";
return bar;
});
};
SeriesHorizontal.prototype.updateTooltipSettings = function () {
this.tooltipPlacement = this.tooltipDisabled ? undefined : 'top';
this.tooltipType = this.tooltipDisabled ? undefined : 'tooltip';
};
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);
};
return SeriesHorizontal;
}());
export { SeriesHorizontal };
SeriesHorizontal.decorators = [
{ type: 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 [tooltipDisabled]=\"tooltipDisabled\"\n [tooltipPlacement]=\"tooltipPlacement\"\n [tooltipType]=\"tooltipType\"\n [tooltipTitle]=\"tooltipTemplate ? undefined : bar.tooltipText\"\n [tooltipTemplate]=\"tooltipTemplate\"\n [tooltipContext]=\"bar.data\">\n </svg:g>\n ",
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [
trigger('animationState', [
transition(':leave', [
style({
opacity: 1
}),
animate(500, style({ opacity: 0 }))
])
])
]
},] },
];
/** @nocollapse */
SeriesHorizontal.ctorParameters = function () { return []; };
SeriesHorizontal.propDecorators = {
'dims': [{ type: Input },],
'type': [{ type: Input },],
'series': [{ type: Input },],
'xScale': [{ type: Input },],
'yScale': [{ type: Input },],
'colors': [{ type: Input },],
'tooltipDisabled': [{ type: Input },],
'gradient': [{ type: Input },],
'activeEntries': [{ type: Input },],
'seriesName': [{ type: Input },],
'tooltipTemplate': [{ type: Input },],
'roundEdges': [{ type: Input },],
'select': [{ type: Output },],
'activate': [{ type: Output },],
'deactivate': [{ type: Output },],
};
//# sourceMappingURL=series-horizontal.component.js.map