@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
95 lines • 4.7 kB
JavaScript
;
var core_1 = require('@angular/core');
var d3_1 = require('../d3');
var GaugeAxisComponent = (function () {
function GaugeAxisComponent() {
this.rotate = '';
}
GaugeAxisComponent.prototype.ngOnChanges = function () {
this.update();
};
GaugeAxisComponent.prototype.update = function () {
this.rotationAngle = -90 + this.startAngle;
this.rotate = "rotate(" + this.rotationAngle + ")";
this.ticks = this.getTicks();
};
GaugeAxisComponent.prototype.getTicks = function () {
var bigTickSegment = this.angleSpan / this.bigSegments;
var smallTickSegment = bigTickSegment / (this.smallSegments);
var tickLength = 20;
var ticks = {
big: [],
small: []
};
var startDistance = this.radius + 10;
var textDist = startDistance + tickLength + 10;
for (var i = 0; i <= this.bigSegments; i++) {
var angleDeg = i * bigTickSegment;
var angle = angleDeg * Math.PI / 180;
var textAnchor = this.getTextAnchor(angleDeg);
ticks.big.push({
line: this.getTickPath(startDistance, tickLength, angle),
textAnchor: textAnchor,
text: Number.parseInt(this.valueScale.invert(angleDeg).toString()).toLocaleString(),
textTransform: "\n translate(" + textDist * Math.cos(angle) + ", " + textDist * Math.sin(angle) + ") rotate(" + -this.rotationAngle + ")\n "
});
if (i === this.bigSegments) {
continue;
}
for (var j = 1; j <= this.smallSegments; j++) {
var smallAngleDeg = angleDeg + j * smallTickSegment;
var smallAngle = smallAngleDeg * Math.PI / 180;
ticks.small.push({
line: this.getTickPath(startDistance, tickLength / 2, smallAngle)
});
}
}
return ticks;
};
GaugeAxisComponent.prototype.getTextAnchor = function (angle) {
// [0, 45] = 'middle';
// [46, 135] = 'start';
// [136, 225] = 'middle';
// [226, 315] = 'end';
angle = (this.startAngle + angle) % 360;
var textAnchor = 'middle';
if (angle > 45 && angle <= 135) {
textAnchor = 'start';
}
else if (angle > 225 && angle <= 315) {
textAnchor = 'end';
}
return textAnchor;
};
GaugeAxisComponent.prototype.getTickPath = function (startDistance, tickLength, angle) {
var y1 = startDistance * Math.sin(angle);
var y2 = (startDistance + tickLength) * Math.sin(angle);
var x1 = startDistance * Math.cos(angle);
var x2 = (startDistance + tickLength) * Math.cos(angle);
var points = [{ x: x1, y: y1 }, { x: x2, y: y2 }];
var line = d3_1.default.line().x(function (d) { return d.x; }).y(function (d) { return d.y; });
return line(points);
};
GaugeAxisComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'g[ngx-charts-gauge-axis]',
template: "\n <svg:g [attr.transform]=\"rotate\">\n <svg:g *ngFor=\"let tick of ticks.big\"\n class=\"gauge-tick gauge-tick-large\">\n <svg:path [attr.d]=\"tick.line\" />\n </svg:g>\n <svg:g *ngFor=\"let tick of ticks.big\"\n class=\"gauge-tick gauge-tick-large\">\n <svg:text\n [style.textAnchor]=\"tick.textAnchor\"\n [attr.transform]=\"tick.textTransform\"\n alignment-baseline=\"central\">\n {{tick.text}}\n </svg:text>\n </svg:g>\n <svg:g *ngFor=\"let tick of ticks.small\"\n class=\"gauge-tick gauge-tick-small\">\n <svg:path [attr.d]=\"tick.line\" />\n </svg:g>\n </svg:g>\n ",
changeDetection: core_1.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
GaugeAxisComponent.ctorParameters = function () { return []; };
GaugeAxisComponent.propDecorators = {
'bigSegments': [{ type: core_1.Input },],
'smallSegments': [{ type: core_1.Input },],
'min': [{ type: core_1.Input },],
'max': [{ type: core_1.Input },],
'angleSpan': [{ type: core_1.Input },],
'startAngle': [{ type: core_1.Input },],
'radius': [{ type: core_1.Input },],
'valueScale': [{ type: core_1.Input },],
};
return GaugeAxisComponent;
}());
exports.GaugeAxisComponent = GaugeAxisComponent;
//# sourceMappingURL=gauge-axis.component.js.map