ngx-beautiful-charts
Version:
A library to create charts in Angular
123 lines • 13.5 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
import { MultiLineGraphService } from '../multi-line-graph.service';
export class MlgChartBaseComponent {
/**
* @param {?} multiLineGraphService
*/
constructor(multiLineGraphService) {
this.multiLineGraphService = multiLineGraphService;
}
/**
* @return {?}
*/
computeLegionXs() {
this.x1 = this.multiLineGraphService.rectWidth
+ 2 * this.multiLineGraphService.xPadding
+ this.multiLineGraphService.legionWidth / 4 * .2;
this.x2 = this.multiLineGraphService.rectWidth
+ 2 * this.multiLineGraphService.xPadding
+ this.multiLineGraphService.legionWidth / 4 * .8;
}
/**
* @return {?}
*/
computeGrid() {
// maxX - minX --> gridPrecisionX
// width --> gridWidthX
this.gridWidthX = this.multiLineGraphService.transformX(this.gridPrecisionX);
this.gridWidthY = this.multiLineGraphService.transformY(this.gridPrecisionY);
this.gridPath = 'M ' + this.gridWidthX + ' 0 L 0 0 0 ' + this.gridWidthY;
this.xAxis = [];
this.yAxis = [];
for (let x = this.multiLineGraphService.minX; x <= this.multiLineGraphService.maxX; x = x + this.gridPrecisionX) {
/** @type {?} */
const xPos = this.multiLineGraphService.transformX(x) + this.multiLineGraphService.xPadding;
this.xAxis.push({ xPos, value: x });
}
for (let y = this.multiLineGraphService.minY; y <= this.multiLineGraphService.maxY; y = y + this.gridPrecisionY) {
/** @type {?} */
const yPos = this.multiLineGraphService.transformY(y) + this.multiLineGraphService.yPadding + 7;
this.yAxis.push({ yPos, value: this.multiLineGraphService.maxY - y });
}
}
/**
* @param {?} i
* @return {?}
*/
computeLegionPath(i) {
/** @type {?} */
let path = 'M ';
/** @type {?} */
const y = this.multiLineGraphService.yPadding + 35 + 30 * i;
path = path + this.x1 + ' ' + y + ' ' + this.x2 + ' ' + y;
return path;
}
/**
* @return {?}
*/
ngOnInit() {
this.computeGrid();
this.gridID = 'grid' + this.multiLineGraphService.componentID;
this.computeLegionXs();
}
/**
* @return {?}
*/
ngOnChanges() {
this.computeGrid();
this.computeLegionXs();
}
}
MlgChartBaseComponent.decorators = [
{ type: Component, args: [{
selector: 'g[ngx-mlg-chart-base]',
template: "<svg:pattern [attr.id]=\"gridID\" \n[attr.x]=\"multiLineGraphService.xPadding\" [attr.y]=\"multiLineGraphService.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]=\"multiLineGraphService.xPadding\" \n[attr.y]=\"multiLineGraphService.yPadding\" \n[attr.width]=\"multiLineGraphService.rectWidth\" \n[attr.height]=\"multiLineGraphService.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]=\"multiLineGraphService.rectHeight+multiLineGraphService.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]=\"multiLineGraphService.xPadding-30\" class=\"small\">{{ y.value }}</svg:text>\n\n<!-- x Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"multiLineGraphService.rectWidth/2+multiLineGraphService.xPadding\" [attr.y]=\"multiLineGraphService.rectHeight+multiLineGraphService.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]=\"-multiLineGraphService.rectHeight/2-multiLineGraphService.yPadding\" [attr.y]=\"multiLineGraphService.xPadding-50\" dominant-baseline=\"middle\" text-anchor=\"middle\" transform=\"rotate(270)\"> \n {{ yAxisTitle }} \n</svg:text>\n\n\n<!-- Legion -->\n<svg:rect [attr.x]=\"2*multiLineGraphService.xPadding + multiLineGraphService.rectWidth\" \n[attr.y]=\"multiLineGraphService.yPadding\" \n[attr.width]=\"multiLineGraphService.legionWidth\" \n[attr.height]=\"multiLineGraphService.legionHeight\" \nfill=\"#f1f1f1\" />\n\n\n<svg:g *ngFor=\"let x of data; index as i\">\n <svg:path class=\"legion-line\" [attr.d]=\"computeLegionPath(i)\" fill=\"none\" [attr.stroke]=\"x.color\" />\n <svg:text class=\"axis-text\" \n [attr.x]=\"multiLineGraphService.rectWidth + 2*multiLineGraphService.xPadding + multiLineGraphService.legionWidth / 4\" \n [attr.y]=\"multiLineGraphService.yPadding+40+30*i\" class=\"small\"> {{ x.name }} </svg:text>\n</svg:g>\n\n\n",
styles: [".legion-line{stroke-width:3px}"]
}] }
];
/** @nocollapse */
MlgChartBaseComponent.ctorParameters = () => [
{ type: MultiLineGraphService }
];
MlgChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
gridPrecisionX: [{ type: Input }],
gridPrecisionY: [{ type: Input }],
data: [{ type: Input }]
};
if (false) {
/** @type {?} */
MlgChartBaseComponent.prototype.xAxisTitle;
/** @type {?} */
MlgChartBaseComponent.prototype.yAxisTitle;
/** @type {?} */
MlgChartBaseComponent.prototype.gridPrecisionX;
/** @type {?} */
MlgChartBaseComponent.prototype.gridPrecisionY;
/** @type {?} */
MlgChartBaseComponent.prototype.data;
/** @type {?} */
MlgChartBaseComponent.prototype.gridWidthX;
/** @type {?} */
MlgChartBaseComponent.prototype.gridWidthY;
/** @type {?} */
MlgChartBaseComponent.prototype.gridID;
/** @type {?} */
MlgChartBaseComponent.prototype.gridPath;
/** @type {?} */
MlgChartBaseComponent.prototype.x1;
/** @type {?} */
MlgChartBaseComponent.prototype.x2;
/** @type {?} */
MlgChartBaseComponent.prototype.xAxis;
/** @type {?} */
MlgChartBaseComponent.prototype.yAxis;
/** @type {?} */
MlgChartBaseComponent.prototype.multiLineGraphService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWxnLWNoYXJ0LWJhc2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWJlYXV0aWZ1bC1jaGFydHMvIiwic291cmNlcyI6WyJsaWIvbXVsdGktbGluZS1ncmFwaC9tbGctY2hhcnQtYmFzZS9tbGctY2hhcnQtYmFzZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQXFCLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQU9wRSxNQUFNLE9BQU8scUJBQXFCOzs7O0lBcURoQyxZQUFtQixxQkFBNEM7UUFBNUMsMEJBQXFCLEdBQXJCLHFCQUFxQixDQUF1QjtJQUFJLENBQUM7Ozs7SUFuQ3BFLGVBQWU7UUFDYixJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxTQUFTO2NBQzVDLENBQUMsR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUMsUUFBUTtjQUN2QyxJQUFJLENBQUMscUJBQXFCLENBQUMsV0FBVyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUM7UUFDbEQsSUFBSSxDQUFDLEVBQUUsR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUMsU0FBUztjQUM1QyxDQUFDLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFFBQVE7Y0FDdkMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFdBQVcsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDO0lBQ3BELENBQUM7Ozs7SUFFRCxXQUFXO1FBQ1QsaUNBQWlDO1FBQ2pDLHVCQUF1QjtRQUN2QixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQzdFLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDN0UsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLEdBQUcsSUFBSSxDQUFDLFVBQVUsR0FBRyxhQUFhLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQztRQUN6RSxJQUFJLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztRQUNoQixJQUFJLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztRQUNoQixLQUFLLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsY0FBYyxFQUFFOztrQkFDekcsSUFBSSxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFFBQVE7WUFDM0YsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBQyxDQUFDLENBQUM7U0FDbkM7UUFFRCxLQUFLLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsY0FBYyxFQUFFOztrQkFDekcsSUFBSSxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFFBQVEsR0FBRyxDQUFDO1lBQy9GLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMscUJBQXFCLENBQUMsSUFBSSxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDdEU7SUFDSCxDQUFDOzs7OztJQUVELGlCQUFpQixDQUFDLENBQVM7O1lBQ3JCLElBQUksR0FBRyxJQUFJOztjQUNULENBQUMsR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUMsUUFBUSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsQ0FBQztRQUMzRCxJQUFJLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQyxFQUFFLEdBQUcsR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDLEVBQUUsR0FBRyxHQUFHLEdBQUcsQ0FBQyxDQUFDO1FBQzFELE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQzs7OztJQUlELFFBQVE7UUFDTixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFdBQVcsQ0FBQztRQUM5RCxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDekIsQ0FBQzs7OztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3pCLENBQUM7OztZQXJFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHVCQUF1QjtnQkFDakMseXpFQUE4Qzs7YUFFL0M7Ozs7WUFOUSxxQkFBcUI7Ozt5QkFTM0IsS0FBSzt5QkFDTCxLQUFLOzZCQUNMLEtBQUs7NkJBQ0wsS0FBSzttQkFDTCxLQUFLOzs7O0lBSk4sMkNBQTRCOztJQUM1QiwyQ0FBNEI7O0lBQzVCLCtDQUFnQzs7SUFDaEMsK0NBQWdDOztJQUNoQyxxQ0FBYzs7SUFHZCwyQ0FBbUI7O0lBQ25CLDJDQUFtQjs7SUFDbkIsdUNBQWU7O0lBQ2YseUNBQWlCOztJQUNqQixtQ0FBVzs7SUFDWCxtQ0FBVzs7SUFDWCxzQ0FBVzs7SUFDWCxzQ0FBVzs7SUFxQ0Msc0RBQW1EIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIE9uQ2hhbmdlcywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE11bHRpTGluZUdyYXBoU2VydmljZSB9IGZyb20gJy4uL211bHRpLWxpbmUtZ3JhcGguc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dbbmd4LW1sZy1jaGFydC1iYXNlXScsXG4gIHRlbXBsYXRlVXJsOiAnLi9tbGctY2hhcnQtYmFzZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL21sZy1jaGFydC1iYXNlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTWxnQ2hhcnRCYXNlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuXG4gIEBJbnB1dCgpIHhBeGlzVGl0bGU6IHN0cmluZztcbiAgQElucHV0KCkgeUF4aXNUaXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBncmlkUHJlY2lzaW9uWDogbnVtYmVyO1xuICBASW5wdXQoKSBncmlkUHJlY2lzaW9uWTogbnVtYmVyO1xuICBASW5wdXQoKSBkYXRhO1xuXG5cbiAgZ3JpZFdpZHRoWDogbnVtYmVyO1xuICBncmlkV2lkdGhZOiBudW1iZXI7XG4gIGdyaWRJRDogc3RyaW5nO1xuICBncmlkUGF0aDogc3RyaW5nO1xuICB4MTogbnVtYmVyO1xuICB4MjogbnVtYmVyO1xuICB4QXhpczogYW55O1xuICB5QXhpczogYW55O1xuXG4gIGNvbXB1dGVMZWdpb25YcygpIHtcbiAgICB0aGlzLngxID0gdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UucmVjdFdpZHRoXG4gICAgKyAyICogdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UueFBhZGRpbmdcbiAgICArIHRoaXMubXVsdGlMaW5lR3JhcGhTZXJ2aWNlLmxlZ2lvbldpZHRoIC8gNCAqIC4yO1xuICAgIHRoaXMueDIgPSB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS5yZWN0V2lkdGhcbiAgICArIDIgKiB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS54UGFkZGluZ1xuICAgICsgdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UubGVnaW9uV2lkdGggLyA0ICogLjg7XG4gIH1cblxuICBjb21wdXRlR3JpZCgpIHtcbiAgICAvLyBtYXhYIC0gbWluWCAtLT4gZ3JpZFByZWNpc2lvblhcbiAgICAvLyB3aWR0aCAtLT4gZ3JpZFdpZHRoWFxuICAgIHRoaXMuZ3JpZFdpZHRoWCA9IHRoaXMubXVsdGlMaW5lR3JhcGhTZXJ2aWNlLnRyYW5zZm9ybVgodGhpcy5ncmlkUHJlY2lzaW9uWCk7XG4gICAgdGhpcy5ncmlkV2lkdGhZID0gdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UudHJhbnNmb3JtWSh0aGlzLmdyaWRQcmVjaXNpb25ZKTtcbiAgICB0aGlzLmdyaWRQYXRoID0gJ00gJyArIHRoaXMuZ3JpZFdpZHRoWCArICcgMCBMIDAgMCAwICcgKyB0aGlzLmdyaWRXaWR0aFk7XG4gICAgdGhpcy54QXhpcyA9IFtdO1xuICAgIHRoaXMueUF4aXMgPSBbXTtcbiAgICBmb3IgKGxldCB4ID0gdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UubWluWDsgeCA8PSB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS5tYXhYOyB4ID0geCArIHRoaXMuZ3JpZFByZWNpc2lvblgpIHtcbiAgICAgIGNvbnN0IHhQb3MgPSB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS50cmFuc2Zvcm1YKHgpICsgdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UueFBhZGRpbmc7XG4gICAgICB0aGlzLnhBeGlzLnB1c2goe3hQb3MsIHZhbHVlOiB4fSk7XG4gICAgfVxuXG4gICAgZm9yIChsZXQgeSA9IHRoaXMubXVsdGlMaW5lR3JhcGhTZXJ2aWNlLm1pblk7IHkgPD0gdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UubWF4WTsgeSA9IHkgKyB0aGlzLmdyaWRQcmVjaXNpb25ZKSB7XG4gICAgICBjb25zdCB5UG9zID0gdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UudHJhbnNmb3JtWSh5KSArIHRoaXMubXVsdGlMaW5lR3JhcGhTZXJ2aWNlLnlQYWRkaW5nICsgNztcbiAgICAgIHRoaXMueUF4aXMucHVzaCh7eVBvcywgdmFsdWU6IHRoaXMubXVsdGlMaW5lR3JhcGhTZXJ2aWNlLm1heFkgLSB5IH0pO1xuICAgIH1cbiAgfVxuXG4gIGNvbXB1dGVMZWdpb25QYXRoKGk6IG51bWJlcikge1xuICAgIGxldCBwYXRoID0gJ00gJztcbiAgICBjb25zdCB5ID0gdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UueVBhZGRpbmcgKyAzNSArIDMwICogaTtcbiAgICBwYXRoID0gcGF0aCArIHRoaXMueDEgKyAnICcgKyB5ICsgJyAnICsgdGhpcy54MiArICcgJyArIHk7XG4gICAgcmV0dXJuIHBhdGg7XG4gIH1cblxuICBjb25zdHJ1Y3RvcihwdWJsaWMgbXVsdGlMaW5lR3JhcGhTZXJ2aWNlOiBNdWx0aUxpbmVHcmFwaFNlcnZpY2UpIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuY29tcHV0ZUdyaWQoKTtcbiAgICB0aGlzLmdyaWRJRCA9ICdncmlkJyArIHRoaXMubXVsdGlMaW5lR3JhcGhTZXJ2aWNlLmNvbXBvbmVudElEO1xuICAgIHRoaXMuY29tcHV0ZUxlZ2lvblhzKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLmNvbXB1dGVHcmlkKCk7XG4gICAgdGhpcy5jb21wdXRlTGVnaW9uWHMoKTtcbiAgfVxuXG59XG4iXX0=