@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular
120 lines • 5.6 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
import { formatLabel } from '../label.helper';
var LegendComponent = /** @class */ (function () {
function LegendComponent(cd) {
this.cd = cd;
this.horizontal = false;
this.labelClick = new EventEmitter();
this.labelActivate = new EventEmitter();
this.labelDeactivate = new EventEmitter();
this.legendEntries = [];
}
LegendComponent.prototype.ngOnChanges = function (changes) {
this.update();
};
LegendComponent.prototype.update = function () {
this.cd.markForCheck();
this.legendEntries = this.getLegendEntries();
};
LegendComponent.prototype.getLegendEntries = function () {
var items = [];
var _loop_1 = function (label) {
var formattedLabel = 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) {
this.labelActivate.emit(item);
};
LegendComponent.prototype.deactivate = function (item) {
this.labelDeactivate.emit(item);
};
LegendComponent.prototype.trackBy = function (index, item) {
return item.label;
};
__decorate([
Input(),
__metadata("design:type", Object)
], LegendComponent.prototype, "data", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], LegendComponent.prototype, "title", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], LegendComponent.prototype, "colors", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], LegendComponent.prototype, "height", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], LegendComponent.prototype, "width", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], LegendComponent.prototype, "activeEntries", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], LegendComponent.prototype, "horizontal", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], LegendComponent.prototype, "labelClick", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], LegendComponent.prototype, "labelActivate", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], LegendComponent.prototype, "labelDeactivate", void 0);
LegendComponent = __decorate([
Component({
selector: 'ngx-charts-legend',
template: "\n <div [style.width.px]=\"width\">\n <header class=\"legend-title\" *ngIf=\"title?.length > 0\">\n <span class=\"legend-title-text\">{{title}}</span>\n </header>\n <div class=\"legend-wrap\">\n <ul class=\"legend-labels\"\n [class.horizontal-legend]=\"horizontal\"\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 ",
styleUrls: ['./legend.component.css'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
}),
__metadata("design:paramtypes", [ChangeDetectorRef])
], LegendComponent);
return LegendComponent;
}());
export { LegendComponent };
//# sourceMappingURL=legend.component.js.map