ngx-beautiful-charts
Version:
A library to create charts in Angular
131 lines • 13.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { Component, Input } from '@angular/core';
import { BarChartService } from '../bar-chart.service';
var BcChartBaseComponent = /** @class */ (function () {
function BcChartBaseComponent(barChartService) {
this.barChartService = barChartService;
}
/**
* @return {?}
*/
BcChartBaseComponent.prototype.computeGrid = /**
* @return {?}
*/
function () {
var e_1, _a;
this.yLevelPaths = [];
this.xAxis = [];
this.yAxis = [];
for (var y = this.barChartService.minY; y <= this.barChartService.maxY; y = y + this.barChartService.diff) {
/** @type {?} */
var rectEnd = this.barChartService.xPadding + this.barChartService.rectWidth;
/** @type {?} */
var yTransformed = this.barChartService.transformY(this.barChartService.maxY - y) + this.barChartService.yPadding;
/** @type {?} */
var path = 'M ' + this.barChartService.xPadding + ' ' + yTransformed + ' L ' + rectEnd + ' ' + yTransformed;
this.yLevelPaths.push(path);
this.yAxis.push({ yPos: yTransformed, value: y });
}
// console.log('diff: ' + this.barChartService.diff);
// console.log(this.yAxis);
// now the x axis :)
/** @type {?} */
var noOfXAxisValues;
noOfXAxisValues = this.barChartService.data.length;
/** @type {?} */
var eachWidth = this.barChartService.rectWidth / noOfXAxisValues;
/** @type {?} */
var cnt = -1;
try {
for (var _b = tslib_1.__values(this.barChartService.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var bcD = _c.value;
cnt++;
/** @type {?} */
var xPos = cnt * eachWidth + eachWidth / 2 + this.barChartService.xPadding;
this.xAxis.push({ xPos: xPos, value: bcD.name });
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
// else if (this.barChartService.chartType === 'clustered-bar-chart') {
// let uniqueXAxisValues;
// uniqueXAxisValues = new Set();
// for (const series of this.barChartService.data) {
// const seriesData = series.data;
// for (const sData of seriesData) {
// uniqueXAxisValues.add(sData.name);
// }
// }
// noOfXAxisValues = uniqueXAxisValues.size;
// const eachWidth = this.width / noOfXAxisValues;
// let cnt = -1;
// for (const xAxisValue of uniqueXAxisValues) {
// cnt ++;
// const xPos = cnt * eachWidth + eachWidth / 2 + this.xPadding;
// this.xAxis.push({xPos: xPos, value: xAxisValue });
// }
// }
};
/**
* @return {?}
*/
BcChartBaseComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.computeGrid();
};
/**
* @return {?}
*/
BcChartBaseComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.computeGrid();
};
BcChartBaseComponent.decorators = [
{ type: Component, args: [{
selector: 'g[ngx-bc-chart-base]',
template: "<!-- <svg:pattern [attr.id]=\"gridID\" \n[attr.x]=\"barChartService.xPadding\" [attr.y]=\"barChartService.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]=\"barChartService.xPadding\" \n[attr.y]=\"barChartService.yPadding\" \n[attr.width]=\"barChartService.rectWidth\" \n[attr.height]=\"barChartService.rectHeight\" \nstroke=\"#444444\" fill=\"none\" stroke-width=\"1\"/>\n\n<svg:g *ngIf=\"showGridLines\">\n <svg:path *ngFor=\"let yLevelPath of yLevelPaths\"\n class=\"bar-chart-level\"\n [attr.d]=\"yLevelPath\" fill=\"none\" stroke=\"#444444\" />\n</svg:g>\n\n<svg:text\n*ngFor=\"let x of xAxis\" class=\"axis-text\" \n[attr.x]=\"x.xPos\" [attr.y]=\"barChartService.rectHeight+barChartService.yPadding+30\" class=\"small\"\ntext-anchor=\"middle\" dominant-baseline=\"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]=\"barChartService.xPadding-30\" class=\"small\">{{ y.value }}</svg:text>\n\n<!-- x Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"barChartService.rectWidth/2+barChartService.xPadding\" \n [attr.y]=\"barChartService.rectHeight+barChartService.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]=\"-barChartService.rectHeight/2-barChartService.yPadding\" \n [attr.y]=\"barChartService.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*barChartService.xPadding + barChartService.rectWidth\" \n[attr.y]=\"barChartService.yPadding\" \n[attr.width]=\"beautifulChartsService.legionWidth\" \n[attr.height]=\"beautifulChartsService.legionHeight\" \nfill=\"#f1f1f1\" />\n\n\n<svg:g *ngFor=\"let x of beautifulChartsService.data; index as i\">\n <svg:rect *ngIf=\"beautifulChartsService.legionWidth\" \n [attr.x]=\"barChartService.rectWidth + 2*barChartService.xPadding + beautifulChartsService.legionWidth / 4 * .3\" \n [attr.y]=\"barChartService.yPadding+25+30*i\" \n [attr.width]=\"beautifulChartsService.legionWidth / 4 * .4\" \n [attr.height]=\"beautifulChartsService.legionWidth / 4 * .4\" \n [attr.fill]=\"x.color\" />\n <svg:text class=\"axis-text\" *ngIf=\"beautifulChartsService.legionWidth\" \n [attr.x]=\"barChartService.rectWidth + 2*barChartService.xPadding + beautifulChartsService.legionWidth / 4\" \n [attr.y]=\"barChartService.yPadding+40+30*i\" class=\"small\"> {{ x.series }} </svg:text>\n</svg:g> -->\n\n",
styles: [".bar-chart-level{stroke-width:.3;stroke-dasharray:5}"]
}] }
];
/** @nocollapse */
BcChartBaseComponent.ctorParameters = function () { return [
{ type: BarChartService }
]; };
BcChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
showGridLines: [{ type: Input }]
};
return BcChartBaseComponent;
}());
export { BcChartBaseComponent };
if (false) {
/** @type {?} */
BcChartBaseComponent.prototype.xAxisTitle;
/** @type {?} */
BcChartBaseComponent.prototype.yAxisTitle;
/** @type {?} */
BcChartBaseComponent.prototype.showGridLines;
/** @type {?} */
BcChartBaseComponent.prototype.yLevelPaths;
/** @type {?} */
BcChartBaseComponent.prototype.xAxis;
/** @type {?} */
BcChartBaseComponent.prototype.yAxis;
/** @type {?} */
BcChartBaseComponent.prototype.barChartService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmMtY2hhcnQtYmFzZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtYmVhdXRpZnVsLWNoYXJ0cy8iLCJzb3VyY2VzIjpbImxpYi9iYXItY2hhcnQvYmMtY2hhcnQtYmFzZS9iYy1jaGFydC1iYXNlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUV2RDtJQStERSw4QkFBbUIsZUFBZ0M7UUFBaEMsb0JBQWUsR0FBZixlQUFlLENBQWlCO0lBQUksQ0FBQzs7OztJQWhEeEQsMENBQVc7OztJQUFYOztRQUNFLElBQUksQ0FBQyxXQUFXLEdBQUcsRUFBRSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ2hCLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBRWhCLEtBQUssSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxFQUFFLENBQUMsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUU7O2dCQUNuRyxPQUFPLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxTQUFTOztnQkFDeEUsWUFBWSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsUUFBUTs7Z0JBQzdHLElBQUksR0FBRyxJQUFJLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLEdBQUcsR0FBRyxHQUFHLFlBQVksR0FBRyxLQUFLLEdBQUcsT0FBTyxHQUFHLEdBQUcsR0FBRyxZQUFZO1lBQzdHLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQzVCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUMsSUFBSSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQztTQUNsRDs7Ozs7WUFPRyxlQUFlO1FBQ25CLGVBQWUsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7O1lBQzdDLFNBQVMsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLFNBQVMsR0FBRyxlQUFlOztZQUM5RCxHQUFHLEdBQUcsQ0FBQyxDQUFDOztZQUNaLEtBQWtCLElBQUEsS0FBQSxpQkFBQSxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQSxnQkFBQSw0QkFBRTtnQkFBeEMsSUFBTSxHQUFHLFdBQUE7Z0JBQ1osR0FBRyxFQUFHLENBQUM7O29CQUNELElBQUksR0FBRyxHQUFHLEdBQUcsU0FBUyxHQUFHLFNBQVMsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRO2dCQUM1RSxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFDLElBQUksTUFBQSxFQUFFLEtBQUssRUFBRSxHQUFHLENBQUMsSUFBSSxFQUFDLENBQUMsQ0FBQzthQUMxQzs7Ozs7Ozs7O1FBQ0QsdUVBQXVFO1FBQ3ZFLDJCQUEyQjtRQUMzQixtQ0FBbUM7UUFDbkMsc0RBQXNEO1FBQ3RELHNDQUFzQztRQUN0Qyx3Q0FBd0M7UUFDeEMsMkNBQTJDO1FBQzNDLFFBQVE7UUFDUixNQUFNO1FBQ04sOENBQThDO1FBQzlDLG9EQUFvRDtRQUNwRCxrQkFBa0I7UUFDbEIsa0RBQWtEO1FBQ2xELGNBQWM7UUFDZCxvRUFBb0U7UUFDcEUseURBQXlEO1FBQ3pELE1BQU07UUFDTixJQUFJO0lBRU4sQ0FBQzs7OztJQUlELHVDQUFROzs7SUFBUjtRQUNFLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDOzs7O0lBRUQsMENBQVc7OztJQUFYO1FBQ0UsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7O2dCQXZFRixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtvQkFDaEMsd3ZGQUE2Qzs7aUJBRTlDOzs7O2dCQU5RLGVBQWU7Ozs2QkFTckIsS0FBSzs2QkFDTCxLQUFLO2dDQUNMLEtBQUs7O0lBZ0VSLDJCQUFDO0NBQUEsQUF6RUQsSUF5RUM7U0FwRVksb0JBQW9COzs7SUFFL0IsMENBQTRCOztJQUM1QiwwQ0FBNEI7O0lBQzVCLDZDQUFnQzs7SUFFaEMsMkNBQXNCOztJQUN0QixxQ0FBTTs7SUFDTixxQ0FBTTs7SUFrRE0sK0NBQXVDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPbkNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJhckNoYXJ0U2VydmljZSB9IGZyb20gJy4uL2Jhci1jaGFydC5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZ1tuZ3gtYmMtY2hhcnQtYmFzZV0nLFxuICB0ZW1wbGF0ZVVybDogJy4vYmMtY2hhcnQtYmFzZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2JjLWNoYXJ0LWJhc2UuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBCY0NoYXJ0QmFzZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcblxuICBASW5wdXQoKSB4QXhpc1RpdGxlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHlBeGlzVGl0bGU6IHN0cmluZztcbiAgQElucHV0KCkgc2hvd0dyaWRMaW5lczogYm9vbGVhbjtcblxuICB5TGV2ZWxQYXRoczogc3RyaW5nW107XG4gIHhBeGlzO1xuICB5QXhpcztcblxuICBjb21wdXRlR3JpZCgpIHtcbiAgICB0aGlzLnlMZXZlbFBhdGhzID0gW107XG4gICAgdGhpcy54QXhpcyA9IFtdO1xuICAgIHRoaXMueUF4aXMgPSBbXTtcblxuICAgIGZvciAobGV0IHkgPSB0aGlzLmJhckNoYXJ0U2VydmljZS5taW5ZOyB5IDw9IHRoaXMuYmFyQ2hhcnRTZXJ2aWNlLm1heFk7IHkgPSB5ICsgdGhpcy5iYXJDaGFydFNlcnZpY2UuZGlmZikge1xuICAgICAgY29uc3QgcmVjdEVuZCA9IHRoaXMuYmFyQ2hhcnRTZXJ2aWNlLnhQYWRkaW5nICsgdGhpcy5iYXJDaGFydFNlcnZpY2UucmVjdFdpZHRoO1xuICAgICAgY29uc3QgeVRyYW5zZm9ybWVkID0gdGhpcy5iYXJDaGFydFNlcnZpY2UudHJhbnNmb3JtWSh0aGlzLmJhckNoYXJ0U2VydmljZS5tYXhZIC0geSkgKyB0aGlzLmJhckNoYXJ0U2VydmljZS55UGFkZGluZztcbiAgICAgIGNvbnN0IHBhdGggPSAnTSAnICsgdGhpcy5iYXJDaGFydFNlcnZpY2UueFBhZGRpbmcgKyAnICcgKyB5VHJhbnNmb3JtZWQgKyAnIEwgJyArIHJlY3RFbmQgKyAnICcgKyB5VHJhbnNmb3JtZWQ7XG4gICAgICB0aGlzLnlMZXZlbFBhdGhzLnB1c2gocGF0aCk7XG4gICAgICB0aGlzLnlBeGlzLnB1c2goe3lQb3M6IHlUcmFuc2Zvcm1lZCwgdmFsdWU6IHkgfSk7XG4gICAgfVxuXG4gICAgLy8gY29uc29sZS5sb2coJ2RpZmY6ICcgKyB0aGlzLmJhckNoYXJ0U2VydmljZS5kaWZmKTtcbiAgICAvLyBjb25zb2xlLmxvZyh0aGlzLnlBeGlzKTtcblxuICAgIC8vIG5vdyB0aGUgeCBheGlzIDopXG5cbiAgICBsZXQgbm9PZlhBeGlzVmFsdWVzO1xuICAgIG5vT2ZYQXhpc1ZhbHVlcyA9IHRoaXMuYmFyQ2hhcnRTZXJ2aWNlLmRhdGEubGVuZ3RoO1xuICAgIGNvbnN0IGVhY2hXaWR0aCA9IHRoaXMuYmFyQ2hhcnRTZXJ2aWNlLnJlY3RXaWR0aCAvIG5vT2ZYQXhpc1ZhbHVlcztcbiAgICBsZXQgY250ID0gLTE7XG4gICAgZm9yIChjb25zdCBiY0Qgb2YgdGhpcy5iYXJDaGFydFNlcnZpY2UuZGF0YSkge1xuICAgICAgY250ICsrO1xuICAgICAgY29uc3QgeFBvcyA9IGNudCAqIGVhY2hXaWR0aCArIGVhY2hXaWR0aCAvIDIgKyB0aGlzLmJhckNoYXJ0U2VydmljZS54UGFkZGluZztcbiAgICAgIHRoaXMueEF4aXMucHVzaCh7eFBvcywgdmFsdWU6IGJjRC5uYW1lfSk7XG4gICAgfVxuICAgIC8vIGVsc2UgaWYgKHRoaXMuYmFyQ2hhcnRTZXJ2aWNlLmNoYXJ0VHlwZSA9PT0gJ2NsdXN0ZXJlZC1iYXItY2hhcnQnKSB7XG4gICAgLy8gICBsZXQgdW5pcXVlWEF4aXNWYWx1ZXM7XG4gICAgLy8gICB1bmlxdWVYQXhpc1ZhbHVlcyA9IG5ldyBTZXQoKTtcbiAgICAvLyAgIGZvciAoY29uc3Qgc2VyaWVzIG9mIHRoaXMuYmFyQ2hhcnRTZXJ2aWNlLmRhdGEpIHtcbiAgICAvLyAgICAgY29uc3Qgc2VyaWVzRGF0YSA9IHNlcmllcy5kYXRhO1xuICAgIC8vICAgICBmb3IgKGNvbnN0IHNEYXRhIG9mIHNlcmllc0RhdGEpIHtcbiAgICAvLyAgICAgICB1bmlxdWVYQXhpc1ZhbHVlcy5hZGQoc0RhdGEubmFtZSk7XG4gICAgLy8gICAgIH1cbiAgICAvLyAgIH1cbiAgICAvLyAgIG5vT2ZYQXhpc1ZhbHVlcyA9IHVuaXF1ZVhBeGlzVmFsdWVzLnNpemU7XG4gICAgLy8gICBjb25zdCBlYWNoV2lkdGggPSB0aGlzLndpZHRoIC8gbm9PZlhBeGlzVmFsdWVzO1xuICAgIC8vICAgbGV0IGNudCA9IC0xO1xuICAgIC8vICAgZm9yIChjb25zdCB4QXhpc1ZhbHVlIG9mIHVuaXF1ZVhBeGlzVmFsdWVzKSB7XG4gICAgLy8gICAgIGNudCArKztcbiAgICAvLyAgICAgY29uc3QgeFBvcyA9IGNudCAqIGVhY2hXaWR0aCArIGVhY2hXaWR0aCAvIDIgKyB0aGlzLnhQYWRkaW5nO1xuICAgIC8vICAgICB0aGlzLnhBeGlzLnB1c2goe3hQb3M6IHhQb3MsIHZhbHVlOiB4QXhpc1ZhbHVlIH0pO1xuICAgIC8vICAgfVxuICAgIC8vIH1cblxuICB9XG5cbiAgY29uc3RydWN0b3IocHVibGljIGJhckNoYXJ0U2VydmljZTogQmFyQ2hhcnRTZXJ2aWNlKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNvbXB1dGVHcmlkKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLmNvbXB1dGVHcmlkKCk7XG4gIH1cblxufVxuIl19