@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular
202 lines • 8.72 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 } from '@angular/core';
import { trimLabel } from '../trim-label.helper';
import { reduceTicks } from './ticks.helper';
var XAxisTicksComponent = /** @class */ (function () {
function XAxisTicksComponent() {
this.tickArguments = [5];
this.tickStroke = '#ccc';
this.trimTicks = true;
this.maxTickLength = 16;
this.showGridLines = false;
this.rotateTicks = true;
this.dimensionsChanged = new EventEmitter();
this.verticalSpacing = 20;
this.rotateLabels = false;
this.innerTickSize = 6;
this.outerTickSize = 6;
this.tickPadding = 3;
this.textAnchor = 'middle';
this.maxTicksLength = 0;
this.maxAllowedLength = 16;
this.height = 0;
}
XAxisTicksComponent.prototype.ngOnChanges = function (changes) {
this.update();
};
XAxisTicksComponent.prototype.ngAfterViewInit = function () {
var _this = this;
setTimeout(function () { return _this.updateDims(); });
};
XAxisTicksComponent.prototype.updateDims = function () {
var _this = this;
var height = parseInt(this.ticksElement.nativeElement.getBoundingClientRect().height, 10);
if (height !== this.height) {
this.height = height;
this.dimensionsChanged.emit({ height: height });
setTimeout(function () { return _this.updateDims(); });
}
};
XAxisTicksComponent.prototype.update = function () {
var _this = this;
var scale = this.scale;
this.ticks = this.getTicks();
if (this.tickFormatting) {
this.tickFormat = this.tickFormatting;
}
else if (scale.tickFormat) {
this.tickFormat = scale.tickFormat.apply(scale, this.tickArguments);
}
else {
this.tickFormat = function (d) {
if (d.constructor.name === 'Date') {
return d.toLocaleDateString();
}
return d.toLocaleString();
};
}
var angle = this.rotateTicks ? this.getRotationAngle(this.ticks) : null;
this.adjustedScale = this.scale.bandwidth
? function (d) {
return this.scale(d) + this.scale.bandwidth() * 0.5;
}
: this.scale;
this.textTransform = '';
if (angle && angle !== 0) {
this.textTransform = "rotate(" + angle + ")";
this.textAnchor = 'end';
this.verticalSpacing = 10;
}
else {
this.textAnchor = 'middle';
}
setTimeout(function () { return _this.updateDims(); });
};
XAxisTicksComponent.prototype.getRotationAngle = function (ticks) {
var angle = 0;
this.maxTicksLength = 0;
for (var i = 0; i < ticks.length; i++) {
var tick = this.tickFormat(ticks[i]).toString();
var tickLength = tick.length;
if (this.trimTicks) {
tickLength = this.tickTrim(tick).length;
}
if (tickLength > this.maxTicksLength) {
this.maxTicksLength = tickLength;
}
}
var len = Math.min(this.maxTicksLength, this.maxAllowedLength);
var charWidth = 8; // need to measure this
var wordWidth = len * charWidth;
var baseWidth = wordWidth;
var maxBaseWidth = Math.floor(this.width / ticks.length);
// calculate optimal angle
while (baseWidth > maxBaseWidth && angle > -90) {
angle -= 30;
baseWidth = Math.cos(angle * (Math.PI / 180)) * wordWidth;
}
return angle;
};
XAxisTicksComponent.prototype.getTicks = function () {
var ticks;
var maxTicks = this.getMaxTicks(20);
var maxScaleTicks = this.getMaxTicks(100);
if (this.tickValues) {
ticks = this.tickValues;
}
else if (this.scale.ticks) {
ticks = this.scale.ticks.apply(this.scale, [maxScaleTicks]);
}
else {
ticks = this.scale.domain();
ticks = reduceTicks(ticks, maxTicks);
}
return ticks;
};
XAxisTicksComponent.prototype.getMaxTicks = function (tickWidth) {
return Math.floor(this.width / tickWidth);
};
XAxisTicksComponent.prototype.tickTransform = function (tick) {
return 'translate(' + this.adjustedScale(tick) + ',' + this.verticalSpacing + ')';
};
XAxisTicksComponent.prototype.gridLineTransform = function () {
return "translate(0," + (-this.verticalSpacing - 5) + ")";
};
XAxisTicksComponent.prototype.tickTrim = function (label) {
return this.trimTicks ? trimLabel(label, this.maxTickLength) : label;
};
__decorate([
Input(),
__metadata("design:type", Object)
], XAxisTicksComponent.prototype, "scale", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], XAxisTicksComponent.prototype, "orient", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], XAxisTicksComponent.prototype, "tickArguments", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], XAxisTicksComponent.prototype, "tickValues", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], XAxisTicksComponent.prototype, "tickStroke", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], XAxisTicksComponent.prototype, "trimTicks", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], XAxisTicksComponent.prototype, "maxTickLength", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], XAxisTicksComponent.prototype, "tickFormatting", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], XAxisTicksComponent.prototype, "showGridLines", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], XAxisTicksComponent.prototype, "gridLineHeight", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], XAxisTicksComponent.prototype, "width", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], XAxisTicksComponent.prototype, "rotateTicks", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], XAxisTicksComponent.prototype, "dimensionsChanged", void 0);
__decorate([
ViewChild('ticksel', { static: false }),
__metadata("design:type", ElementRef)
], XAxisTicksComponent.prototype, "ticksElement", void 0);
XAxisTicksComponent = __decorate([
Component({
selector: 'g[ngx-charts-x-axis-ticks]',
template: "\n <svg:g #ticksel>\n <svg:g *ngFor=\"let tick of ticks\" class=\"tick\" [attr.transform]=\"tickTransform(tick)\">\n <title>{{ tickFormat(tick) }}</title>\n <svg:text\n stroke-width=\"0.01\"\n [attr.text-anchor]=\"textAnchor\"\n [attr.transform]=\"textTransform\"\n [style.font-size]=\"'12px'\"\n >\n {{ tickTrim(tickFormat(tick)) }}\n </svg:text>\n </svg:g>\n </svg:g>\n\n <svg:g *ngFor=\"let tick of ticks\" [attr.transform]=\"tickTransform(tick)\">\n <svg:g *ngIf=\"showGridLines\" [attr.transform]=\"gridLineTransform()\">\n <svg:line class=\"gridline-path gridline-path-vertical\" [attr.y1]=\"-gridLineHeight\" y2=\"0\" />\n </svg:g>\n </svg:g>\n ",
changeDetection: ChangeDetectionStrategy.OnPush
})
], XAxisTicksComponent);
return XAxisTicksComponent;
}());
export { XAxisTicksComponent };
//# sourceMappingURL=x-axis-ticks.component.js.map