@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
160 lines • 7.23 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 YAxisTicksComponent = (function () {
function YAxisTicksComponent() {
this.tickArguments = [5];
this.tickStroke = '#ccc';
this.showGridLines = false;
this.dimensionsChanged = new core_1.EventEmitter();
this.innerTickSize = 6;
this.tickPadding = 3;
this.verticalSpacing = 20;
this.textAnchor = 'middle';
this.width = 0;
this.outerTickSize = 6;
this.rotateLabels = false;
this.trimLabel = trim_label_helper_1.trimLabel;
}
YAxisTicksComponent.prototype.ngOnChanges = function (changes) {
this.update();
};
YAxisTicksComponent.prototype.ngAfterViewInit = function () {
var _this = this;
setTimeout(function () { return _this.updateDims(); });
};
YAxisTicksComponent.prototype.updateDims = function () {
var _this = this;
var width = parseInt(this.ticksElement.nativeElement.getBoundingClientRect().width, 10);
if (width !== this.width) {
this.width = width;
this.dimensionsChanged.emit({ width: width });
setTimeout(function () { return _this.updateDims(); });
}
};
YAxisTicksComponent.prototype.update = function () {
var _this = this;
var scale;
var sign = this.orient === 'top' || this.orient === 'right' ? -1 : 1;
this.tickSpacing = Math.max(this.innerTickSize, 0) + this.tickPadding;
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();
};
}
this.adjustedScale = scale.bandwidth ? function (d) {
return scale(d) + scale.bandwidth() * 0.5;
} : scale;
switch (this.orient) {
case 'top':
this.transform = function (tick) {
return 'translate(' + this.adjustedScale(tick) + ',0)';
};
this.textAnchor = 'middle';
this.y2 = this.innerTickSize * sign;
this.y1 = this.tickSpacing * sign;
this.dy = sign < 0 ? '0em' : '.71em';
break;
case 'bottom':
this.transform = function (tick) {
return 'translate(' + this.adjustedScale(tick) + ',0)';
};
this.textAnchor = 'middle';
this.y2 = this.innerTickSize * sign;
this.y1 = this.tickSpacing * sign;
this.dy = sign < 0 ? '0em' : '.71em';
break;
case 'left':
this.transform = function (tick) {
return 'translate(0,' + this.adjustedScale(tick) + ')';
};
this.textAnchor = 'end';
this.x2 = this.innerTickSize * -sign;
this.x1 = this.tickSpacing * -sign;
this.dy = '.32em';
break;
case 'right':
this.transform = function (tick) {
return 'translate(0,' + this.adjustedScale(tick) + ')';
};
this.textAnchor = 'start';
this.x2 = this.innerTickSize * -sign;
this.x1 = this.tickSpacing * -sign;
this.dy = '.32em';
break;
default:
}
setTimeout(function () { return _this.updateDims(); });
};
YAxisTicksComponent.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;
};
YAxisTicksComponent.prototype.getMaxTicks = function () {
var tickHeight = 20;
return Math.floor(this.height / tickHeight);
};
YAxisTicksComponent.prototype.tickTransform = function (tick) {
return 'translate(' + this.adjustedScale(tick) + ',' + this.verticalSpacing + ')';
};
YAxisTicksComponent.prototype.gridLineTransform = function () {
return "translate(5,0)";
};
YAxisTicksComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'g[ngx-charts-y-axis-ticks]',
template: "\n <svg:g #ticksel>\n <svg:g *ngFor=\"let tick of ticks\" class=\"tick\"\n [attr.transform]=\"transform(tick)\" >\n <title>{{tickFormat(tick)}}</title>\n <svg:text\n stroke-width=\"0.01\"\n [attr.dy]=\"dy\"\n [attr.x]=\"x1\"\n [attr.y]=\"y1\"\n [attr.text-anchor]=\"textAnchor\"\n [style.font-size]=\"'12px'\">\n {{trimLabel(tickFormat(tick))}}\n </svg:text>\n </svg:g>\n </svg:g>\n <svg:g *ngFor=\"let tick of ticks\"\n [attr.transform]=\"transform(tick)\">\n <svg:g\n *ngIf=\"showGridLines\"\n [attr.transform]=\"gridLineTransform()\">\n <svg:line\n class=\"gridline-path gridline-path-horizontal\"\n x1=\"0\"\n [attr.x2]=\"gridLineWidth\" />\n </svg:g>\n </svg:g>\n ",
changeDetection: core_1.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
YAxisTicksComponent.ctorParameters = function () { return []; };
YAxisTicksComponent.propDecorators = {
'scale': [{ type: core_1.Input },],
'orient': [{ type: core_1.Input },],
'tickArguments': [{ type: core_1.Input },],
'tickValues': [{ type: core_1.Input },],
'tickStroke': [{ type: core_1.Input },],
'tickFormatting': [{ type: core_1.Input },],
'showGridLines': [{ type: core_1.Input },],
'gridLineWidth': [{ type: core_1.Input },],
'height': [{ type: core_1.Input },],
'dimensionsChanged': [{ type: core_1.Output },],
'ticksElement': [{ type: core_1.ViewChild, args: ['ticksel',] },],
};
return YAxisTicksComponent;
}());
exports.YAxisTicksComponent = YAxisTicksComponent;
//# sourceMappingURL=y-axis-ticks.component.js.map