@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular
191 lines • 9.76 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, ElementRef, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef, NgZone } from '@angular/core';
import { trimLabel } from '../common/trim-label.helper';
import { roundedRect } from '../common/shape.helper';
import { count, decimalChecker } from '../common/count';
var CardComponent = /** @class */ (function () {
function CardComponent(element, cd, zone) {
this.cd = cd;
this.zone = zone;
this.animations = true;
this.select = new EventEmitter();
this.value = '';
this.textFontSize = 12;
this.textTransform = '';
this.initialized = false;
this.bandHeight = 10;
this.textPadding = [10, 20, 5, 20];
this.labelFontSize = 15;
this.element = element.nativeElement;
}
CardComponent.prototype.ngOnChanges = function (changes) {
this.update();
};
CardComponent.prototype.ngOnDestroy = function () {
cancelAnimationFrame(this.animationReq);
};
CardComponent.prototype.update = function () {
var _this = this;
this.zone.run(function () {
var hasValue = _this.data && typeof _this.data.value !== 'undefined';
var valueFormatting = _this.valueFormatting || (function (card) { return card.value.toLocaleString(); });
var labelFormatting = _this.labelFormatting || (function (card) { return trimLabel(card.label, 55); });
_this.transform = "translate(" + _this.x + " , " + _this.y + ")";
_this.textWidth = Math.max(0, _this.width) - _this.textPadding[1] - _this.textPadding[3];
_this.cardWidth = Math.max(0, _this.width);
_this.cardHeight = Math.max(0, _this.height);
_this.label = _this.label ? _this.label : _this.data.name;
var cardData = {
label: _this.label,
data: _this.data,
value: _this.data.value
};
_this.formattedLabel = labelFormatting(cardData);
_this.transformBand = "translate(0 , " + (_this.cardHeight - _this.bandHeight) + ")";
var value = hasValue ? valueFormatting(cardData) : '';
_this.value = _this.paddedValue(value);
_this.setPadding();
_this.bandPath = roundedRect(0, 0, _this.cardWidth, _this.bandHeight, 3, [false, false, true, true]);
setTimeout(function () {
_this.scaleText();
_this.value = value;
if (hasValue && !_this.initialized) {
setTimeout(function () { return _this.startCount(); }, 20);
}
}, 8);
});
};
CardComponent.prototype.paddedValue = function (value) {
if (this.medianSize && this.medianSize > value.length) {
value += '\u2007'.repeat(this.medianSize - value.length);
}
return value;
};
CardComponent.prototype.startCount = function () {
var _this = this;
if (!this.initialized && this.animations) {
cancelAnimationFrame(this.animationReq);
var val_1 = this.data.value;
var decs = decimalChecker(val_1);
var valueFormatting_1 = this.valueFormatting || (function (card) { return card.value.toLocaleString(); });
var callback = function (_a) {
var value = _a.value, finished = _a.finished;
_this.zone.run(function () {
value = finished ? val_1 : value;
_this.value = valueFormatting_1({ label: _this.label, data: _this.data, value: value });
if (!finished) {
_this.value = _this.paddedValue(_this.value);
}
_this.cd.markForCheck();
});
};
this.animationReq = count(0, val_1, decs, 1, callback);
this.initialized = true;
}
};
CardComponent.prototype.scaleText = function () {
var _this = this;
this.zone.run(function () {
var _a = _this.textEl.nativeElement.getBoundingClientRect(), width = _a.width, height = _a.height;
if (width === 0 || height === 0) {
return;
}
var textPadding = (_this.textPadding[1] = _this.textPadding[3] = _this.cardWidth / 8);
var availableWidth = _this.cardWidth - 2 * textPadding;
var availableHeight = _this.cardHeight / 3;
var resizeScale = Math.min(availableWidth / width, availableHeight / height);
_this.textFontSize = Math.floor(_this.textFontSize * resizeScale);
_this.labelFontSize = Math.min(_this.textFontSize, 15);
_this.setPadding();
_this.cd.markForCheck();
});
};
CardComponent.prototype.setPadding = function () {
this.textPadding[1] = this.textPadding[3] = this.cardWidth / 8;
var padding = this.cardHeight / 2;
this.textPadding[0] = padding - this.textFontSize - this.labelFontSize / 2;
this.textPadding[2] = padding - this.labelFontSize;
};
CardComponent.prototype.onClick = function () {
this.select.emit(this.data);
};
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "color", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "bandColor", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "textColor", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "x", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "y", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "width", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "height", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "label", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "data", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], CardComponent.prototype, "medianSize", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "valueFormatting", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], CardComponent.prototype, "labelFormatting", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CardComponent.prototype, "animations", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], CardComponent.prototype, "select", void 0);
__decorate([
ViewChild('textEl', { static: false }),
__metadata("design:type", ElementRef)
], CardComponent.prototype, "textEl", void 0);
CardComponent = __decorate([
Component({
selector: 'g[ngx-charts-card]',
template: "\n <svg:g [attr.transform]=\"transform\" class=\"cell\" (click)=\"onClick()\">\n <svg:rect class=\"card\" [style.fill]=\"color\" [attr.width]=\"cardWidth\" [attr.height]=\"cardHeight\" rx=\"3\" ry=\"3\" />\n <svg:path\n *ngIf=\"bandColor && bandColor !== color\"\n class=\"card-band\"\n [attr.fill]=\"bandColor\"\n [attr.transform]=\"transformBand\"\n stroke=\"none\"\n [attr.d]=\"bandPath\"\n />\n <title>{{ label }}</title>\n <svg:foreignObject\n class=\"trimmed-label\"\n x=\"5\"\n [attr.x]=\"textPadding[3]\"\n [attr.y]=\"cardHeight - textPadding[2]\"\n [attr.width]=\"textWidth\"\n [attr.height]=\"labelFontSize + textPadding[2]\"\n alignment-baseline=\"hanging\"\n >\n <xhtml:p\n [style.color]=\"textColor\"\n [style.fontSize.px]=\"labelFontSize\"\n [style.lineHeight.px]=\"labelFontSize\"\n [innerHTML]=\"formattedLabel\"\n >\n </xhtml:p>\n </svg:foreignObject>\n <svg:text\n #textEl\n class=\"value-text\"\n [attr.x]=\"textPadding[3]\"\n [attr.y]=\"textPadding[0]\"\n [style.fill]=\"textColor\"\n text-anchor=\"start\"\n alignment-baseline=\"hanging\"\n [style.font-size.pt]=\"textFontSize\"\n >\n {{ value }}\n </svg:text>\n </svg:g>\n ",
changeDetection: ChangeDetectionStrategy.OnPush
}),
__metadata("design:paramtypes", [ElementRef, ChangeDetectorRef, NgZone])
], CardComponent);
return CardComponent;
}());
export { CardComponent };
//# sourceMappingURL=card.component.js.map