ngx-beautiful-charts
Version:
A library to create charts in Angular
95 lines • 9.73 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';
export class LgChartBaseComponent {
/**
* @param {?} lineGraphService
*/
constructor(lineGraphService) {
this.lineGraphService = lineGraphService;
}
/**
* @return {?}
*/
computeGrid() {
// 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 (let x = this.lineGraphService.minX; x <= this.lineGraphService.maxX; x = x + this.gridPrecisionX) {
/** @type {?} */
const xPos = this.lineGraphService.transformX(x) + this.lineGraphService.xPadding;
this.xAxis.push({ xPos, value: x });
}
for (let y = this.lineGraphService.minY; y <= this.lineGraphService.maxY; y = y + this.gridPrecisionY) {
/** @type {?} */
const yPos = this.lineGraphService.transformY(y) + this.lineGraphService.yPadding + 7;
this.yAxis.push({ yPos, value: this.lineGraphService.maxY - y });
}
}
/**
* @return {?}
*/
ngOnInit() {
this.computeGrid();
this.gridID = 'grid' + this.lineGraphService.componentID;
}
/**
* @return {?}
*/
ngOnChanges() {
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 = () => [
{ type: LineGraphService }
];
LgChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
gridPrecisionX: [{ type: Input }],
gridPrecisionY: [{ type: Input }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGctY2hhcnQtYmFzZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtYmVhdXRpZnVsLWNoYXJ0cy8iLCJzb3VyY2VzIjpbImxpYi9saW5lLWdyYXBoL2xnLWNoYXJ0LWJhc2UvbGctY2hhcnQtYmFzZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBT3pELE1BQU0sT0FBTyxvQkFBb0I7Ozs7SUFtQy9CLFlBQW1CLGdCQUFrQztRQUFsQyxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO0lBQUksQ0FBQzs7OztJQW5CMUQsV0FBVztRQUNULGlDQUFpQztRQUNqQyx1QkFBdUI7UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUN4RSxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQ3hFLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQyxVQUFVLEdBQUcsYUFBYSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUM7UUFDekUsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDaEIsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDaEIsS0FBSyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLENBQUMsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLENBQUMsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRTs7a0JBQy9GLElBQUksR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRO1lBQ2pGLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDO1NBQ25DO1FBRUQsS0FBSyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLENBQUMsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLENBQUMsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRTs7a0JBQy9GLElBQUksR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRLEdBQUcsQ0FBQztZQUNyRixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksR0FBRyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1NBQ2pFO0lBQ0gsQ0FBQzs7OztJQUlELFFBQVE7UUFDTixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsQ0FBQztJQUMzRCxDQUFDOzs7O0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDOzs7WUFqREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxzQkFBc0I7Z0JBQ2hDLHNoREFBNkM7O2FBRTlDOzs7O1lBTlEsZ0JBQWdCOzs7eUJBU3RCLEtBQUs7eUJBQ0wsS0FBSzs2QkFDTCxLQUFLOzZCQUNMLEtBQUs7Ozs7SUFITiwwQ0FBNEI7O0lBQzVCLDBDQUE0Qjs7SUFDNUIsOENBQWdDOztJQUNoQyw4Q0FBZ0M7O0lBRWhDLDBDQUFtQjs7SUFDbkIsMENBQW1COztJQUNuQixzQ0FBZTs7SUFDZix3Q0FBaUI7O0lBQ2pCLGtDQUFXOztJQUNYLGtDQUFXOztJQUNYLHFDQUFXOztJQUNYLHFDQUFXOztJQXFCQyxnREFBeUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE9uQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTGluZUdyYXBoU2VydmljZSB9IGZyb20gJy4uL2xpbmUtZ3JhcGguc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dbbmd4LWxnLWNoYXJ0LWJhc2VdJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xnLWNoYXJ0LWJhc2UuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9sZy1jaGFydC1iYXNlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTGdDaGFydEJhc2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG5cbiAgQElucHV0KCkgeEF4aXNUaXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSB5QXhpc1RpdGxlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGdyaWRQcmVjaXNpb25YOiBudW1iZXI7XG4gIEBJbnB1dCgpIGdyaWRQcmVjaXNpb25ZOiBudW1iZXI7XG5cbiAgZ3JpZFdpZHRoWDogbnVtYmVyO1xuICBncmlkV2lkdGhZOiBudW1iZXI7XG4gIGdyaWRJRDogc3RyaW5nO1xuICBncmlkUGF0aDogc3RyaW5nO1xuICB4MTogbnVtYmVyO1xuICB4MjogbnVtYmVyO1xuICB4QXhpczogYW55O1xuICB5QXhpczogYW55O1xuXG4gIGNvbXB1dGVHcmlkKCkge1xuICAgIC8vIG1heFggLSBtaW5YIC0tPiBncmlkUHJlY2lzaW9uWFxuICAgIC8vIHdpZHRoIC0tPiBncmlkV2lkdGhYXG4gICAgdGhpcy5ncmlkV2lkdGhYID0gdGhpcy5saW5lR3JhcGhTZXJ2aWNlLnRyYW5zZm9ybVgodGhpcy5ncmlkUHJlY2lzaW9uWCk7XG4gICAgdGhpcy5ncmlkV2lkdGhZID0gdGhpcy5saW5lR3JhcGhTZXJ2aWNlLnRyYW5zZm9ybVkodGhpcy5ncmlkUHJlY2lzaW9uWSk7XG4gICAgdGhpcy5ncmlkUGF0aCA9ICdNICcgKyB0aGlzLmdyaWRXaWR0aFggKyAnIDAgTCAwIDAgMCAnICsgdGhpcy5ncmlkV2lkdGhZO1xuICAgIHRoaXMueEF4aXMgPSBbXTtcbiAgICB0aGlzLnlBeGlzID0gW107XG4gICAgZm9yIChsZXQgeCA9IHRoaXMubGluZUdyYXBoU2VydmljZS5taW5YOyB4IDw9IHRoaXMubGluZUdyYXBoU2VydmljZS5tYXhYOyB4ID0geCArIHRoaXMuZ3JpZFByZWNpc2lvblgpIHtcbiAgICAgIGNvbnN0IHhQb3MgPSB0aGlzLmxpbmVHcmFwaFNlcnZpY2UudHJhbnNmb3JtWCh4KSArIHRoaXMubGluZUdyYXBoU2VydmljZS54UGFkZGluZztcbiAgICAgIHRoaXMueEF4aXMucHVzaCh7eFBvcywgdmFsdWU6IHh9KTtcbiAgICB9XG5cbiAgICBmb3IgKGxldCB5ID0gdGhpcy5saW5lR3JhcGhTZXJ2aWNlLm1pblk7IHkgPD0gdGhpcy5saW5lR3JhcGhTZXJ2aWNlLm1heFk7IHkgPSB5ICsgdGhpcy5ncmlkUHJlY2lzaW9uWSkge1xuICAgICAgY29uc3QgeVBvcyA9IHRoaXMubGluZUdyYXBoU2VydmljZS50cmFuc2Zvcm1ZKHkpICsgdGhpcy5saW5lR3JhcGhTZXJ2aWNlLnlQYWRkaW5nICsgNztcbiAgICAgIHRoaXMueUF4aXMucHVzaCh7eVBvcywgdmFsdWU6IHRoaXMubGluZUdyYXBoU2VydmljZS5tYXhZIC0geSB9KTtcbiAgICB9XG4gIH1cblxuICBjb25zdHJ1Y3RvcihwdWJsaWMgbGluZUdyYXBoU2VydmljZTogTGluZUdyYXBoU2VydmljZSkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5jb21wdXRlR3JpZCgpO1xuICAgIHRoaXMuZ3JpZElEID0gJ2dyaWQnICsgdGhpcy5saW5lR3JhcGhTZXJ2aWNlLmNvbXBvbmVudElEO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5jb21wdXRlR3JpZCgpO1xuICB9XG5cbn1cbiJdfQ==