ngx-beautiful-charts
Version:
A library to create charts in Angular
138 lines • 14.2 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';
var MlgChartBaseComponent = /** @class */ (function () {
function MlgChartBaseComponent(multiLineGraphService) {
this.multiLineGraphService = multiLineGraphService;
}
/**
* @return {?}
*/
MlgChartBaseComponent.prototype.computeLegionXs = /**
* @return {?}
*/
function () {
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 {?}
*/
MlgChartBaseComponent.prototype.computeGrid = /**
* @return {?}
*/
function () {
// 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 (var x = this.multiLineGraphService.minX; x <= this.multiLineGraphService.maxX; x = x + this.gridPrecisionX) {
/** @type {?} */
var xPos = this.multiLineGraphService.transformX(x) + this.multiLineGraphService.xPadding;
this.xAxis.push({ xPos: xPos, value: x });
}
for (var y = this.multiLineGraphService.minY; y <= this.multiLineGraphService.maxY; y = y + this.gridPrecisionY) {
/** @type {?} */
var yPos = this.multiLineGraphService.transformY(y) + this.multiLineGraphService.yPadding + 7;
this.yAxis.push({ yPos: yPos, value: this.multiLineGraphService.maxY - y });
}
};
/**
* @param {?} i
* @return {?}
*/
MlgChartBaseComponent.prototype.computeLegionPath = /**
* @param {?} i
* @return {?}
*/
function (i) {
/** @type {?} */
var path = 'M ';
/** @type {?} */
var y = this.multiLineGraphService.yPadding + 35 + 30 * i;
path = path + this.x1 + ' ' + y + ' ' + this.x2 + ' ' + y;
return path;
};
/**
* @return {?}
*/
MlgChartBaseComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.computeGrid();
this.gridID = 'grid' + this.multiLineGraphService.componentID;
this.computeLegionXs();
};
/**
* @return {?}
*/
MlgChartBaseComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
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 = function () { return [
{ type: MultiLineGraphService }
]; };
MlgChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
gridPrecisionX: [{ type: Input }],
gridPrecisionY: [{ type: Input }],
data: [{ type: Input }]
};
return MlgChartBaseComponent;
}());
export { MlgChartBaseComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWxnLWNoYXJ0LWJhc2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWJlYXV0aWZ1bC1jaGFydHMvIiwic291cmNlcyI6WyJsaWIvbXVsdGktbGluZS1ncmFwaC9tbGctY2hhcnQtYmFzZS9tbGctY2hhcnQtYmFzZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQXFCLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUVwRTtJQTBERSwrQkFBbUIscUJBQTRDO1FBQTVDLDBCQUFxQixHQUFyQixxQkFBcUIsQ0FBdUI7SUFBSSxDQUFDOzs7O0lBbkNwRSwrQ0FBZTs7O0lBQWY7UUFDRSxJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxTQUFTO2NBQzVDLENBQUMsR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUMsUUFBUTtjQUN2QyxJQUFJLENBQUMscUJBQXFCLENBQUMsV0FBVyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUM7UUFDbEQsSUFBSSxDQUFDLEVBQUUsR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUMsU0FBUztjQUM1QyxDQUFDLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFFBQVE7Y0FDdkMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFdBQVcsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDO0lBQ3BELENBQUM7Ozs7SUFFRCwyQ0FBVzs7O0lBQVg7UUFDRSxpQ0FBaUM7UUFDakMsdUJBQXVCO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDN0UsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxj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b21wb25lbnQsIE9uSW5pdCwgT25DaGFuZ2VzLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTXVsdGlMaW5lR3JhcGhTZXJ2aWNlIH0gZnJvbSAnLi4vbXVsdGktbGluZS1ncmFwaC5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ1tuZ3gtbWxnLWNoYXJ0LWJhc2VdJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21sZy1jaGFydC1iYXNlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbWxnLWNoYXJ0LWJhc2UuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBNbGdDaGFydEJhc2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG5cbiAgQElucHV0KCkgeEF4aXNUaXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSB5QXhpc1RpdGxlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGdyaWRQcmVjaXNpb25YOiBudW1iZXI7XG4gIEBJbnB1dCgpIGdyaWRQcmVjaXNpb25ZOiBudW1iZXI7XG4gIEBJbnB1dCgpIGRhdGE7XG5cblxuICBncmlkV2lkdGhYOiBudW1iZXI7XG4gIGdyaWRXaWR0aFk6IG51bWJlcjtcbiAgZ3JpZElEOiBzdHJpbmc7XG4gIGdyaWRQYXRoOiBzdHJpbmc7XG4gIHgxOiBudW1iZXI7XG4gIHgyOiBudW1iZXI7XG4gIHhBeGlzOiBhbnk7XG4gIHlBeGlzOiBhbnk7XG5cbiAgY29tcHV0ZUxlZ2lvblhzKCkge1xuICAgIHRoaXMueDEgPSB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS5yZWN0V2lkdGhcbiAgICArIDIgKiB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS54UGFkZGluZ1xuICAgICsgdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UubGVnaW9uV2lkdGggLyA0ICogLjI7XG4gICAgdGhpcy54MiA9IHRoaXMubXVsdGlMaW5lR3JhcGhTZXJ2aWNlLnJlY3RXaWR0aFxuICAgICsgMiAqIHRoaXMubXVsdGlMaW5lR3JhcGhTZXJ2aWNlLnhQYWRkaW5nXG4gICAgKyB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS5sZWdpb25XaWR0aCAvIDQgKiAuODtcbiAgfVxuXG4gIGNvbXB1dGVHcmlkKCkge1xuICAgIC8vIG1heFggLSBtaW5YIC0tPiBncmlkUHJlY2lzaW9uWFxuICAgIC8vIHdpZHRoIC0tPiBncmlkV2lkdGhYXG4gICAgdGhpcy5ncmlkV2lkdGhYID0gdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UudHJhbnNmb3JtWCh0aGlzLmdyaWRQcmVjaXNpb25YKTtcbiAgICB0aGlzLmdyaWRXaWR0aFkgPSB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS50cmFuc2Zvcm1ZKHRoaXMuZ3JpZFByZWNpc2lvblkpO1xuICAgIHRoaXMuZ3JpZFBhdGggPSAnTSAnICsgdGhpcy5ncmlkV2lkdGhYICsgJyAwIEwgMCAwIDAgJyArIHRoaXMuZ3JpZFdpZHRoWTtcbiAgICB0aGlzLnhBeGlzID0gW107XG4gICAgdGhpcy55QXhpcyA9IFtdO1xuICAgIGZvciAobGV0IHggPSB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS5taW5YOyB4IDw9IHRoaXMubXVsdGlMaW5lR3JhcGhTZXJ2aWNlLm1heFg7IHggPSB4ICsgdGhpcy5ncmlkUHJlY2lzaW9uWCkge1xuICAgICAgY29uc3QgeFBvcyA9IHRoaXMubXVsdGlMaW5lR3JhcGhTZXJ2aWNlLnRyYW5zZm9ybVgoeCkgKyB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS54UGFkZGluZztcbiAgICAgIHRoaXMueEF4aXMucHVzaCh7eFBvcywgdmFsdWU6IHh9KTtcbiAgICB9XG5cbiAgICBmb3IgKGxldCB5ID0gdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UubWluWTsgeSA8PSB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS5tYXhZOyB5ID0geSArIHRoaXMuZ3JpZFByZWNpc2lvblkpIHtcbiAgICAgIGNvbnN0IHlQb3MgPSB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS50cmFuc2Zvcm1ZKHkpICsgdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UueVBhZGRpbmcgKyA3O1xuICAgICAgdGhpcy55QXhpcy5wdXNoKHt5UG9zLCB2YWx1ZTogdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UubWF4WSAtIHkgfSk7XG4gICAgfVxuICB9XG5cbiAgY29tcHV0ZUxlZ2lvblBhdGgoaTogbnVtYmVyKSB7XG4gICAgbGV0IHBhdGggPSAnTSAnO1xuICAgIGNvbnN0IHkgPSB0aGlzLm11bHRpTGluZUdyYXBoU2VydmljZS55UGFkZGluZyArIDM1ICsgMzAgKiBpO1xuICAgIHBhdGggPSBwYXRoICsgdGhpcy54MSArICcgJyArIHkgKyAnICcgKyB0aGlzLngyICsgJyAnICsgeTtcbiAgICByZXR1cm4gcGF0aDtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBtdWx0aUxpbmVHcmFwaFNlcnZpY2U6IE11bHRpTGluZUdyYXBoU2VydmljZSkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5jb21wdXRlR3JpZCgpO1xuICAgIHRoaXMuZ3JpZElEID0gJ2dyaWQnICsgdGhpcy5tdWx0aUxpbmVHcmFwaFNlcnZpY2UuY29tcG9uZW50SUQ7XG4gICAgdGhpcy5jb21wdXRlTGVnaW9uWHMoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKCkge1xuICAgIHRoaXMuY29tcHV0ZUdyaWQoKTtcbiAgICB0aGlzLmNvbXB1dGVMZWdpb25YcygpO1xuICB9XG5cbn1cbiJdfQ==