@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
149 lines • 6.62 kB
JavaScript
"use strict";
var core_1 = require('@angular/core');
var trim_label_helper_1 = require('../trim-label.helper');
var ticks_helper_1 = require('./ticks.helper');
var XAxisTicksComponent = (function () {
function XAxisTicksComponent() {
this.tickArguments = [5];
this.tickStroke = '#ccc';
this.showGridLines = false;
this.dimensionsChanged = new core_1.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;
this.trimLabel = trim_label_helper_1.trimLabel;
}
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.getRotationAngle(this.ticks);
this.adjustedScale = this.scale.bandwidth ? function (d) {
return this.scale(d) + this.scale.bandwidth() * 0.5;
} : this.scale;
this.textTransform = '';
if (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;
for (var i = 0; i < ticks.length; i++) {
var tick = ticks[i].toString();
if (tick.length > this.maxTicksLength) {
this.maxTicksLength = tick.length;
}
}
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();
if (this.tickValues) {
ticks = this.tickValues;
}
else if (this.scale.ticks) {
ticks = this.scale.ticks.apply(this.scale, this.tickArguments);
if (ticks.length > maxTicks) {
if (this.tickArguments) {
this.tickArguments[0] = Math.min(this.tickArguments[0], maxTicks);
}
else {
this.tickArguments = [maxTicks];
}
ticks = this.scale.ticks.apply(this.scale, this.tickArguments);
}
}
else {
ticks = this.scale.domain();
ticks = ticks_helper_1.reduceTicks(ticks, maxTicks);
}
return ticks;
};
XAxisTicksComponent.prototype.getMaxTicks = function () {
var tickWidth = 20;
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.decorators = [
{ type: core_1.Component, args: [{
selector: 'g[ngx-charts-x-axis-ticks]',
template: "\n <svg:g #ticksel>\n <svg:g *ngFor=\"let tick of ticks\" class=\"tick\"\n [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 {{trimLabel(tickFormat(tick))}}\n </svg:text>\n </svg:g>\n </svg:g>\n\n <svg:g *ngFor=\"let tick of ticks\"\n [attr.transform]=\"tickTransform(tick)\">\n <svg:g *ngIf=\"showGridLines\"\n [attr.transform]=\"gridLineTransform()\">\n <svg:line\n class=\"gridline-path gridline-path-vertical\"\n [attr.y1]=\"-gridLineHeight\"\n y2=\"0\" />\n </svg:g>\n </svg:g>\n ",
changeDetection: core_1.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
XAxisTicksComponent.ctorParameters = function () { return []; };
XAxisTicksComponent.propDecorators = {
'scale': [{ type: core_1.Input },],
'orient': [{ type: core_1.Input },],
'tickArguments': [{ type: core_1.Input },],
'tickStroke': [{ type: core_1.Input },],
'tickFormatting': [{ type: core_1.Input },],
'showGridLines': [{ type: core_1.Input },],
'gridLineHeight': [{ type: core_1.Input },],
'width': [{ type: core_1.Input },],
'dimensionsChanged': [{ type: core_1.Output },],
'ticksElement': [{ type: core_1.ViewChild, args: ['ticksel',] },],
};
return XAxisTicksComponent;
}());
exports.XAxisTicksComponent = XAxisTicksComponent;
//# sourceMappingURL=x-axis-ticks.component.js.map