ngx-beautiful-charts
Version:
A library to create charts in Angular
103 lines • 10.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
import { LineGraphService } from '../line-graph.service';
var LgChartBaseComponent = /** @class */ (function () {
function LgChartBaseComponent(lineGraphService) {
this.lineGraphService = lineGraphService;
}
/**
* @return {?}
*/
LgChartBaseComponent.prototype.computeGrid = /**
* @return {?}
*/
function () {
// maxX - minX --> gridPrecisionX
// width --> gridWidthX
this.gridWidthX = this.lineGraphService.transformX(this.gridPrecisionX);
this.gridWidthY = this.lineGraphService.transformY(this.gridPrecisionY);
this.gridPath = 'M ' + this.gridWidthX + ' 0 L 0 0 0 ' + this.gridWidthY;
this.xAxis = [];
this.yAxis = [];
for (var x = this.lineGraphService.minX; x <= this.lineGraphService.maxX; x = x + this.gridPrecisionX) {
/** @type {?} */
var xPos = this.lineGraphService.transformX(x) + this.lineGraphService.xPadding;
this.xAxis.push({ xPos: xPos, value: x });
}
for (var y = this.lineGraphService.minY; y <= this.lineGraphService.maxY; y = y + this.gridPrecisionY) {
/** @type {?} */
var yPos = this.lineGraphService.transformY(y) + this.lineGraphService.yPadding + 7;
this.yAxis.push({ yPos: yPos, value: this.lineGraphService.maxY - y });
}
};
/**
* @return {?}
*/
LgChartBaseComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.computeGrid();
this.gridID = 'grid' + this.lineGraphService.componentID;
};
/**
* @return {?}
*/
LgChartBaseComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.computeGrid();
};
LgChartBaseComponent.decorators = [
{ type: Component, args: [{
selector: 'g[ngx-lg-chart-base]',
template: "<svg:pattern [attr.id]=\"gridID\" \n[attr.x]=\"lineGraphService.xPadding\" [attr.y]=\"lineGraphService.yPadding\" \n[attr.width]=\"gridWidthX\" [attr.height]=\"gridWidthY\" \npatternUnits=\"userSpaceOnUse\">\n <svg:path [attr.d]=\"gridPath\" fill=\"none\" stroke=\"#444444\" stroke-width=\"0.5\" />\n</svg:pattern>\n\n<svg:rect [attr.x]=\"lineGraphService.xPadding\" \n[attr.y]=\"lineGraphService.yPadding\" \n[attr.width]=\"lineGraphService.rectWidth\" \n[attr.height]=\"lineGraphService.rectHeight\" \nstroke=\"#444444\" [attr.fill]=\"'url(#' + gridID + ')'\" stroke-width=\"1\"/>\n\n<svg:text\n*ngFor=\"let x of xAxis\" class=\"axis-text\" \n[attr.x]=\"x.xPos\" [attr.y]=\"lineGraphService.rectHeight+lineGraphService.yPadding+30\" class=\"small\" text-anchor=\"middle\"> {{ x.value }} </svg:text>\n\n<svg:text\n*ngFor=\"let y of yAxis\" class=\"axis-text\" \n[attr.y]=\"y.yPos\" [attr.x]=\"lineGraphService.xPadding-30\" class=\"small\">{{ y.value }}</svg:text>\n\n<!-- x Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"lineGraphService.rectWidth/2+lineGraphService.xPadding\" [attr.y]=\"lineGraphService.rectHeight+lineGraphService.yPadding+60\" dominant-baseline=\"middle\" text-anchor=\"middle\"> \n {{ xAxisTitle }} \n</svg:text>\n\n<!-- y Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"-lineGraphService.rectHeight/2-lineGraphService.yPadding\" [attr.y]=\"lineGraphService.xPadding-50\" dominant-baseline=\"middle\" text-anchor=\"middle\" transform=\"rotate(270)\"> \n {{ yAxisTitle }} \n</svg:text>\n\n\n",
styles: [""]
}] }
];
/** @nocollapse */
LgChartBaseComponent.ctorParameters = function () { return [
{ type: LineGraphService }
]; };
LgChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
gridPrecisionX: [{ type: Input }],
gridPrecisionY: [{ type: Input }]
};
return LgChartBaseComponent;
}());
export { LgChartBaseComponent };
if (false) {
/** @type {?} */
LgChartBaseComponent.prototype.xAxisTitle;
/** @type {?} */
LgChartBaseComponent.prototype.yAxisTitle;
/** @type {?} */
LgChartBaseComponent.prototype.gridPrecisionX;
/** @type {?} */
LgChartBaseComponent.prototype.gridPrecisionY;
/** @type {?} */
LgChartBaseComponent.prototype.gridWidthX;
/** @type {?} */
LgChartBaseComponent.prototype.gridWidthY;
/** @type {?} */
LgChartBaseComponent.prototype.gridID;
/** @type {?} */
LgChartBaseComponent.prototype.gridPath;
/** @type {?} */
LgChartBaseComponent.prototype.x1;
/** @type {?} */
LgChartBaseComponent.prototype.x2;
/** @type {?} */
LgChartBaseComponent.prototype.xAxis;
/** @type {?} */
LgChartBaseComponent.prototype.yAxis;
/** @type {?} */
LgChartBaseComponent.prototype.lineGraphService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGctY2hhcnQtYmFzZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtYmVhdXRpZnVsLWNoYXJ0cy8iLCJzb3VyY2VzIjpbImxpYi9saW5lLWdyYXBoL2xnLWNoYXJ0LWJhc2UvbGctY2hhcnQtYmFzZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBRXpEO0lBd0NFLDhCQUFtQixnQkFBa0M7UUFBbEMscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtJQUFJLENBQUM7Ozs7SUFuQjFELDBDQUFXOzs7SUFBWDtRQUNFLGlDQUFpQztRQUNqQyx1QkFBdUI7UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUN4RSxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQ3hFLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQyxVQUFVLEdBQUcsYUFBYSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUM7UUFDekUsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDaEIsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDaEIsS0FBSyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLENBQUMsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLENBQUMsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRTs7Z0JBQy9GLElBQUksR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRO1lBQ2pGLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUMsSUFBSSxNQUFBLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBQyxDQUFDLENBQUM7U0FDbkM7UUFFRCxLQUFLLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsY0FBYyxFQUFFOztnQkFDL0YsSUFBSSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsR0FBRyxDQUFDO1lBQ3JGLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUMsSUFBSSxNQUFBLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLEdBQUcsQ0FBQyxFQUFFLENBQUMsQ0FBQztTQUNqRTtJQUNILENBQUM7Ozs7SUFJRCx1Q0FBUTs7O0lBQVI7UUFDRSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsQ0FBQztJQUMzRCxDQUFDOzs7O0lBRUQsMENBQVc7OztJQUFYO1FBQ0UsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7O2dCQWpERixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtvQkFDaEMsc2hEQUE2Qzs7aUJBRTlDOzs7O2dCQU5RLGdCQUFnQjs7OzZCQVN0QixLQUFLOzZCQUNMLEtBQUs7aUNBQ0wsS0FBSztpQ0FDTCxLQUFLOztJQXlDUiwyQkFBQztDQUFBLEFBbkRELElBbURDO1NBOUNZLG9CQUFvQjs7O0lBRS9CLDBDQUE0Qjs7SUFDNUIsMENBQTRCOztJQUM1Qiw4Q0FBZ0M7O0lBQ2hDLDhDQUFnQzs7SUFFaEMsMENBQW1COztJQUNuQiwwQ0FBbUI7O0lBQ25CLHNDQUFlOztJQUNmLHdDQUFpQjs7SUFDakIsa0NBQVc7O0lBQ1gsa0NBQVc7O0lBQ1gscUNBQVc7O0lBQ1gscUNBQVc7O0lBcUJDLGdEQUF5QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT25DaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMaW5lR3JhcGhTZXJ2aWNlIH0gZnJvbSAnLi4vbGluZS1ncmFwaC5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ1tuZ3gtbGctY2hhcnQtYmFzZV0nLFxuICB0ZW1wbGF0ZVVybDogJy4vbGctY2hhcnQtYmFzZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2xnLWNoYXJ0LWJhc2UuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBMZ0NoYXJ0QmFzZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcblxuICBASW5wdXQoKSB4QXhpc1RpdGxlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHlBeGlzVGl0bGU6IHN0cmluZztcbiAgQElucHV0KCkgZ3JpZFByZWNpc2lvblg6IG51bWJlcjtcbiAgQElucHV0KCkgZ3JpZFByZWNpc2lvblk6IG51bWJlcjtcblxuICBncmlkV2lkdGhYOiBudW1iZXI7XG4gIGdyaWRXaWR0aFk6IG51bWJlcjtcbiAgZ3JpZElEOiBzdHJpbmc7XG4gIGdyaWRQYXRoOiBzdHJpbmc7XG4gIHgxOiBudW1iZXI7XG4gIHgyOiBudW1iZXI7XG4gIHhBeGlzOiBhbnk7XG4gIHlBeGlzOiBhbnk7XG5cbiAgY29tcHV0ZUdyaWQoKSB7XG4gICAgLy8gbWF4WCAtIG1pblggLS0+IGdyaWRQcmVjaXNpb25YXG4gICAgLy8gd2lkdGggLS0+IGdyaWRXaWR0aFhcbiAgICB0aGlzLmdyaWRXaWR0aFggPSB0aGlzLmxpbmVHcmFwaFNlcnZpY2UudHJhbnNmb3JtWCh0aGlzLmdyaWRQcmVjaXNpb25YKTtcbiAgICB0aGlzLmdyaWRXaWR0aFkgPSB0aGlzLmxpbmVHcmFwaFNlcnZpY2UudHJhbnNmb3JtWSh0aGlzLmdyaWRQcmVjaXNpb25ZKTtcbiAgICB0aGlzLmdyaWRQYXRoID0gJ00gJyArIHRoaXMuZ3JpZFdpZHRoWCArICcgMCBMIDAgMCAwICcgKyB0aGlzLmdyaWRXaWR0aFk7XG4gICAgdGhpcy54QXhpcyA9IFtdO1xuICAgIHRoaXMueUF4aXMgPSBbXTtcbiAgICBmb3IgKGxldCB4ID0gdGhpcy5saW5lR3JhcGhTZXJ2aWNlLm1pblg7IHggPD0gdGhpcy5saW5lR3JhcGhTZXJ2aWNlLm1heFg7IHggPSB4ICsgdGhpcy5ncmlkUHJlY2lzaW9uWCkge1xuICAgICAgY29uc3QgeFBvcyA9IHRoaXMubGluZUdyYXBoU2VydmljZS50cmFuc2Zvcm1YKHgpICsgdGhpcy5saW5lR3JhcGhTZXJ2aWNlLnhQYWRkaW5nO1xuICAgICAgdGhpcy54QXhpcy5wdXNoKHt4UG9zLCB2YWx1ZTogeH0pO1xuICAgIH1cblxuICAgIGZvciAobGV0IHkgPSB0aGlzLmxpbmVHcmFwaFNlcnZpY2UubWluWTsgeSA8PSB0aGlzLmxpbmVHcmFwaFNlcnZpY2UubWF4WTsgeSA9IHkgKyB0aGlzLmdyaWRQcmVjaXNpb25ZKSB7XG4gICAgICBjb25zdCB5UG9zID0gdGhpcy5saW5lR3JhcGhTZXJ2aWNlLnRyYW5zZm9ybVkoeSkgKyB0aGlzLmxpbmVHcmFwaFNlcnZpY2UueVBhZGRpbmcgKyA3O1xuICAgICAgdGhpcy55QXhpcy5wdXNoKHt5UG9zLCB2YWx1ZTogdGhpcy5saW5lR3JhcGhTZXJ2aWNlLm1heFkgLSB5IH0pO1xuICAgIH1cbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBsaW5lR3JhcGhTZXJ2aWNlOiBMaW5lR3JhcGhTZXJ2aWNlKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNvbXB1dGVHcmlkKCk7XG4gICAgdGhpcy5ncmlkSUQgPSAnZ3JpZCcgKyB0aGlzLmxpbmVHcmFwaFNlcnZpY2UuY29tcG9uZW50SUQ7XG4gIH1cblxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLmNvbXB1dGVHcmlkKCk7XG4gIH1cblxufVxuIl19