@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular
141 lines • 6.78 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, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { invertColor } from '../utils/color-utils';
var CardSeriesComponent = /** @class */ (function () {
function CardSeriesComponent() {
this.innerPadding = 15;
this.emptyColor = 'rgba(0, 0, 0, 0)';
this.animations = true;
this.select = new EventEmitter();
}
CardSeriesComponent.prototype.ngOnChanges = function (changes) {
this.update();
};
CardSeriesComponent.prototype.update = function () {
if (this.data.length > 2) {
var valueFormatting_1 = this.valueFormatting || (function (card) { return card.value.toLocaleString(); });
var sortedLengths = this.data
.map(function (d) {
var hasValue = d && d.data && typeof d.data.value !== 'undefined' && d.data.value !== null;
return hasValue
? valueFormatting_1({
data: d.data,
label: d ? d.data.name : '',
value: d && d.data ? d.data.value : ''
}).length
: 0;
})
.sort(function (a, b) { return b - a; });
var idx = Math.ceil(this.data.length / 2);
this.medianSize = sortedLengths[idx];
}
var cards = this.getCards();
this.cards = cards.filter(function (d) { return d.data.value !== null; });
this.emptySlots = cards.filter(function (d) { return d.data.value === null; });
};
CardSeriesComponent.prototype.getCards = function () {
var _this = this;
var yPadding = typeof this.innerPadding === 'number' ? this.innerPadding : this.innerPadding[0] + this.innerPadding[2];
var xPadding = typeof this.innerPadding === 'number' ? this.innerPadding : this.innerPadding[1] + this.innerPadding[3];
return this.data.map(function (d, index) {
var label = d.data.name;
if (label && label.constructor.name === 'Date') {
label = label.toLocaleDateString();
}
else {
label = label ? label.toLocaleString() : label;
}
var value = d.data.value;
var valueColor = label ? _this.colors.getColor(label) : _this.emptyColor;
var color = _this.cardColor || valueColor || '#000';
return {
x: d.x,
y: d.y,
width: d.width - xPadding,
height: d.height - yPadding,
color: color,
bandColor: _this.bandColor || valueColor,
textColor: _this.textColor || invertColor(color),
label: label,
data: d.data,
tooltipText: label + ": " + value
};
});
};
CardSeriesComponent.prototype.trackBy = function (index, card) {
return card.label;
};
CardSeriesComponent.prototype.onClick = function (data) {
this.select.emit(data);
};
__decorate([
Input(),
__metadata("design:type", Array)
], CardSeriesComponent.prototype, "data", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], CardSeriesComponent.prototype, "slots", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardSeriesComponent.prototype, "dims", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardSeriesComponent.prototype, "colors", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardSeriesComponent.prototype, "innerPadding", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardSeriesComponent.prototype, "cardColor", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardSeriesComponent.prototype, "bandColor", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardSeriesComponent.prototype, "emptyColor", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardSeriesComponent.prototype, "textColor", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardSeriesComponent.prototype, "valueFormatting", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardSeriesComponent.prototype, "labelFormatting", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CardSeriesComponent.prototype, "animations", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], CardSeriesComponent.prototype, "select", void 0);
CardSeriesComponent = __decorate([
Component({
selector: 'g[ngx-charts-card-series]',
template: "\n <svg:rect\n *ngFor=\"let c of emptySlots; trackBy: trackBy\"\n class=\"card-empty\"\n [attr.x]=\"c.x\"\n [attr.y]=\"c.y\"\n [style.fill]=\"emptyColor\"\n [attr.width]=\"c.width\"\n [attr.height]=\"c.height\"\n rx=\"3\"\n ry=\"3\"\n />\n <svg:g\n ngx-charts-card\n *ngFor=\"let c of cards; trackBy: trackBy\"\n [x]=\"c.x\"\n [y]=\"c.y\"\n [width]=\"c.width\"\n [height]=\"c.height\"\n [color]=\"c.color\"\n [bandColor]=\"c.bandColor\"\n [textColor]=\"c.textColor\"\n [data]=\"c.data\"\n [label]=\"c.label\"\n [medianSize]=\"medianSize\"\n [valueFormatting]=\"valueFormatting\"\n [labelFormatting]=\"labelFormatting\"\n [animations]=\"animations\"\n (select)=\"onClick($event)\"\n />\n ",
changeDetection: ChangeDetectionStrategy.OnPush
})
], CardSeriesComponent);
return CardSeriesComponent;
}());
export { CardSeriesComponent };
//# sourceMappingURL=card-series.component.js.map