@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
94 lines • 4.22 kB
JavaScript
;
var core_1 = require('@angular/core');
var label_helper_1 = require('../label.helper');
var LegendComponent = (function () {
function LegendComponent(cd, zone) {
this.cd = cd;
this.zone = zone;
this.labelClick = new core_1.EventEmitter();
this.labelActivate = new core_1.EventEmitter();
this.labelDeactivate = new core_1.EventEmitter();
this.legendEntries = [];
}
LegendComponent.prototype.ngOnChanges = function (changes) {
this.update();
};
LegendComponent.prototype.update = function () {
var _this = this;
this.zone.run(function () {
_this.cd.markForCheck();
_this.legendEntries = _this.getLegendEntries();
});
};
LegendComponent.prototype.getLegendEntries = function () {
var items = [];
var _loop_1 = function(label) {
var formattedLabel = label_helper_1.formatLabel(label);
var idx = items.findIndex(function (i) {
return i.label === formattedLabel;
});
if (idx === -1) {
items.push({
label: label,
formattedLabel: formattedLabel,
color: this_1.colors.getColor(label)
});
}
};
var this_1 = this;
for (var _i = 0, _a = this.data; _i < _a.length; _i++) {
var label = _a[_i];
_loop_1(label);
}
return items;
};
LegendComponent.prototype.isActive = function (entry) {
if (!this.activeEntries)
return false;
var item = this.activeEntries.find(function (d) {
return entry.label === d.name;
});
return item !== undefined;
};
LegendComponent.prototype.activate = function (item) {
var _this = this;
this.zone.run(function () {
_this.labelActivate.emit(item);
});
};
LegendComponent.prototype.deactivate = function (item) {
var _this = this;
this.zone.run(function () {
_this.labelDeactivate.emit(item);
});
};
LegendComponent.prototype.trackBy = function (index, item) {
return item.label;
};
LegendComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'ngx-charts-legend',
template: "\n <div [style.width.px]=\"width\">\n <header class=\"legend-title\">\n <span class=\"legend-icon icon-eye\"></span>\n <span class=\"legend-title-text\">{{title}}</span>\n </header>\n <div class=\"legend-wrap\">\n <ul class=\"legend-labels\"\n [style.max-height.px]=\"height - 45\">\n <li\n *ngFor=\"let entry of legendEntries; trackBy: trackBy\"\n class=\"legend-label\">\n <ngx-charts-legend-entry\n [label]=\"entry.label\"\n [formattedLabel]=\"entry.formattedLabel\"\n [color]=\"entry.color\"\n [isActive]=\"isActive(entry)\"\n (select)=\"labelClick.emit($event)\"\n (activate)=\"activate($event)\"\n (deactivate)=\"deactivate($event)\">\n </ngx-charts-legend-entry>\n </li>\n </ul>\n </div>\n </div>\n ",
changeDetection: core_1.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
LegendComponent.ctorParameters = function () { return [
{ type: core_1.ChangeDetectorRef, },
{ type: core_1.NgZone, },
]; };
LegendComponent.propDecorators = {
'data': [{ type: core_1.Input },],
'title': [{ type: core_1.Input },],
'colors': [{ type: core_1.Input },],
'height': [{ type: core_1.Input },],
'width': [{ type: core_1.Input },],
'activeEntries': [{ type: core_1.Input },],
'labelClick': [{ type: core_1.Output },],
'labelActivate': [{ type: core_1.Output },],
'labelDeactivate': [{ type: core_1.Output },],
};
return LegendComponent;
}());
exports.LegendComponent = LegendComponent;
//# sourceMappingURL=legend.component.js.map