@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
105 lines • 4.96 kB
JavaScript
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { line } from 'd3-shape';
var GaugeAxisComponent = (function () {
function GaugeAxisComponent() {
this.rotate = '';
}
GaugeAxisComponent.prototype.ngOnChanges = function (changes) {
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);
var skip = false;
if (i === 0 && this.angleSpan === 360) {
skip = true;
}
if (!skip) {
var text = Number.parseFloat(this.valueScale.invert(angleDeg).toString()).toLocaleString();
if (this.tickFormatting) {
text = this.tickFormatting(text);
}
ticks.big.push({
line: this.getTickPath(startDistance, tickLength, angle),
textAnchor: textAnchor,
text: text,
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 lineGenerator = line().x(function (d) { return d.x; }).y(function (d) { return d.y; });
return lineGenerator(points);
};
return GaugeAxisComponent;
}());
export { GaugeAxisComponent };
GaugeAxisComponent.decorators = [
{ type: 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: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
GaugeAxisComponent.ctorParameters = function () { return []; };
GaugeAxisComponent.propDecorators = {
'bigSegments': [{ type: Input },],
'smallSegments': [{ type: Input },],
'min': [{ type: Input },],
'max': [{ type: Input },],
'angleSpan': [{ type: Input },],
'startAngle': [{ type: Input },],
'radius': [{ type: Input },],
'valueScale': [{ type: Input },],
'tickFormatting': [{ type: Input },],
};
//# sourceMappingURL=gauge-axis.component.js.map