ngx-beautiful-charts
Version:
A library to create charts in Angular
113 lines • 13.7 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
import { ClusteredBarChartService } from '../clustered-bar-chart.service';
export class CbcChartBaseComponent {
/**
* @param {?} clusteredBarChartService
*/
constructor(clusteredBarChartService) {
this.clusteredBarChartService = clusteredBarChartService;
}
/**
* @return {?}
*/
computeGrid() {
this.yLevelPaths = [];
this.xAxis = [];
this.yAxis = [];
for (let y = this.clusteredBarChartService.minY; y <= this.clusteredBarChartService.maxY; y = y + this.clusteredBarChartService.diff) {
/** @type {?} */
const rectEnd = this.clusteredBarChartService.xPadding + this.clusteredBarChartService.rectWidth;
/** @type {?} */
const yTransformed = this.clusteredBarChartService.transformY(this.clusteredBarChartService.maxY - y)
+ this.clusteredBarChartService.yPadding;
/** @type {?} */
const path = 'M ' + this.clusteredBarChartService.xPadding + ' ' + yTransformed + ' L ' + rectEnd + ' ' + yTransformed;
this.yLevelPaths.push(path);
this.yAxis.push({ yPos: yTransformed, value: y });
}
// console.log('diff: ' + this.clusteredBarChartService.diff);
// console.log(this.yAxis);
// now the x axis :)
// let noOfXAxisValues;
// noOfXAxisValues = this.clusteredBarChartService.data.length;
// const eachWidth = this.clusteredBarChartService.rectWidth / noOfXAxisValues;
// let cnt = -1;
// for (const bcD of this.clusteredBarChartService.data) {
// cnt ++;
// const xPos = cnt * eachWidth + eachWidth / 2 + this.clusteredBarChartService.xPadding;
// this.xAxis.push({xPos, value: bcD.name});
// }
/** @type {?} */
let noOfXAxisValues;
/** @type {?} */
let uniqueXAxisValues;
uniqueXAxisValues = new Set();
for (const series of this.clusteredBarChartService.data) {
/** @type {?} */
const seriesData = series.data;
for (const sData of seriesData) {
uniqueXAxisValues.add(sData.name);
}
}
noOfXAxisValues = uniqueXAxisValues.size;
/** @type {?} */
const eachWidth = this.clusteredBarChartService.rectWidth / noOfXAxisValues;
/** @type {?} */
let cnt = -1;
for (const xAxisValue of uniqueXAxisValues) {
cnt++;
/** @type {?} */
const xPos = cnt * eachWidth + eachWidth / 2 + this.clusteredBarChartService.xPadding;
this.xAxis.push({ xPos, value: xAxisValue });
}
}
/**
* @return {?}
*/
ngOnInit() {
this.computeGrid();
}
/**
* @return {?}
*/
ngOnChanges() {
this.computeGrid();
}
}
CbcChartBaseComponent.decorators = [
{ type: Component, args: [{
selector: 'g[ngx-cbc-chart-base]',
template: "<!-- <svg:pattern [attr.id]=\"gridID\" \n[attr.x]=\"clusteredBarChartService.xPadding\" [attr.y]=\"clusteredBarChartService.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]=\"clusteredBarChartService.xPadding\" \n[attr.y]=\"clusteredBarChartService.yPadding\" \n[attr.width]=\"clusteredBarChartService.rectWidth\" \n[attr.height]=\"clusteredBarChartService.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]=\"clusteredBarChartService.rectHeight+clusteredBarChartService.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]=\"clusteredBarChartService.xPadding-30\" class=\"small\">{{ y.value }}</svg:text>\n\n<!-- x Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"clusteredBarChartService.rectWidth/2+clusteredBarChartService.xPadding\" \n [attr.y]=\"clusteredBarChartService.rectHeight+clusteredBarChartService.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]=\"-clusteredBarChartService.rectHeight/2-clusteredBarChartService.yPadding\" \n [attr.y]=\"clusteredBarChartService.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*clusteredBarChartService.xPadding + clusteredBarChartService.rectWidth\" \n[attr.y]=\"clusteredBarChartService.yPadding\" \n[attr.width]=\"clusteredBarChartService.legionWidth\" \n[attr.height]=\"clusteredBarChartService.legionHeight\" \nfill=\"#f1f1f1\" />\n\n\n<svg:g *ngFor=\"let x of clusteredBarChartService.data; index as i\">\n <svg:rect *ngIf=\"clusteredBarChartService.legionWidth\" \n [attr.x]=\"clusteredBarChartService.rectWidth + 2*clusteredBarChartService.xPadding + clusteredBarChartService.legionWidth / 4 * .3\" \n [attr.y]=\"clusteredBarChartService.yPadding+25+30*i\" \n [attr.width]=\"clusteredBarChartService.legionWidth / 4 * .4\" \n [attr.height]=\"clusteredBarChartService.legionWidth / 4 * .4\" \n [attr.fill]=\"x.color\" />\n <svg:text class=\"axis-text\" *ngIf=\"clusteredBarChartService.legionWidth\" \n [attr.x]=\"clusteredBarChartService.rectWidth + 2*clusteredBarChartService.xPadding + clusteredBarChartService.legionWidth / 4\" \n [attr.y]=\"clusteredBarChartService.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 */
CbcChartBaseComponent.ctorParameters = () => [
{ type: ClusteredBarChartService }
];
CbcChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
showGridLines: [{ type: Input }]
};
if (false) {
/** @type {?} */
CbcChartBaseComponent.prototype.xAxisTitle;
/** @type {?} */
CbcChartBaseComponent.prototype.yAxisTitle;
/** @type {?} */
CbcChartBaseComponent.prototype.showGridLines;
/** @type {?} */
CbcChartBaseComponent.prototype.yLevelPaths;
/** @type {?} */
CbcChartBaseComponent.prototype.xAxis;
/** @type {?} */
CbcChartBaseComponent.prototype.yAxis;
/** @type {?} */
CbcChartBaseComponent.prototype.clusteredBarChartService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2JjLWNoYXJ0LWJhc2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWJlYXV0aWZ1bC1jaGFydHMvIiwic291cmNlcyI6WyJsaWIvY2x1c3RlcmVkLWJhci1jaGFydC9jYmMtY2hhcnQtYmFzZS9jYmMtY2hhcnQtYmFzZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBTzFFLE1BQU0sT0FBTyxxQkFBcUI7Ozs7SUEyRGhDLFlBQW1CLHdCQUFrRDtRQUFsRCw2QkFBd0IsR0FBeEIsd0JBQXdCLENBQTBCO0lBQUksQ0FBQzs7OztJQWpEMUUsV0FBVztRQUNULElBQUksQ0FBQyxXQUFXLEdBQUcsRUFBRSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ2hCLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBRWhCLEtBQUssSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLElBQUksRUFBRSxDQUFDLElBQUksSUFBSSxDQUFDLHdCQUF3QixDQUFDLElBQUksRUFBRSxDQUFDLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxJQUFJLEVBQUU7O2tCQUM5SCxPQUFPLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsd0JBQXdCLENBQUMsU0FBUzs7a0JBQzFGLFlBQVksR0FBRyxJQUFJLENBQUMsd0JBQXdCLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDO2tCQUMvRSxJQUFJLENBQUMsd0JBQXdCLENBQUMsUUFBUTs7a0JBQ3RELElBQUksR0FBRyxJQUFJLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLFFBQVEsR0FBRyxHQUFHLEdBQUcsWUFBWSxHQUFHLEtBQUssR0FBRyxPQUFPLEdBQUcsR0FBRyxHQUFHLFlBQVk7WUFDdEgsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDNUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBQyxJQUFJLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1NBQ2xEOzs7Ozs7Ozs7Ozs7OztZQWlCRyxlQUFlOztZQUNmLGlCQUFpQjtRQUNyQixpQkFBaUIsR0FBRyxJQUFJLEdBQUcsRUFBRSxDQUFDO1FBQzlCLEtBQUssTUFBTSxNQUFNLElBQUksSUFBSSxDQUFDLHdCQUF3QixDQUFDLElBQUksRUFBRTs7a0JBQ2pELFVBQVUsR0FBRyxNQUFNLENBQUMsSUFBSTtZQUM5QixLQUFLLE1BQU0sS0FBSyxJQUFJLFVBQVUsRUFBRTtnQkFDOUIsaUJBQWlCLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQzthQUNuQztTQUNGO1FBQ0QsZUFBZSxHQUFHLGlCQUFpQixDQUFDLElBQUksQ0FBQzs7Y0FDbkMsU0FBUyxHQUFHLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxTQUFTLEdBQUcsZUFBZTs7WUFDdkUsR0FBRyxHQUFHLENBQUMsQ0FBQztRQUNaLEtBQUssTUFBTSxVQUFVLElBQUksaUJBQWlCLEVBQUU7WUFDMUMsR0FBRyxFQUFHLENBQUM7O2tCQUNELElBQUksR0FBRyxHQUFHLEdBQUcsU0FBUyxHQUFHLFNBQVMsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLFFBQVE7WUFDckYsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxDQUFDLENBQUM7U0FDN0M7SUFFSCxDQUFDOzs7O0lBSUQsUUFBUTtRQUNOLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDOzs7O0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDOzs7WUF4RUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSx1QkFBdUI7Z0JBQ2pDLGsrRkFBOEM7O2FBRS9DOzs7O1lBTlEsd0JBQXdCOzs7eUJBUzlCLEtBQUs7eUJBQ0wsS0FBSzs0QkFDTCxLQUFLOzs7O0lBRk4sMkNBQTRCOztJQUM1QiwyQ0FBNEI7O0lBQzVCLDhDQUFnQzs7SUFFaEMsNENBQXNCOztJQUN0QixzQ0FBTTs7SUFDTixzQ0FBTTs7SUFtRE0seURBQXlEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPbkNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENsdXN0ZXJlZEJhckNoYXJ0U2VydmljZSB9IGZyb20gJy4uL2NsdXN0ZXJlZC1iYXItY2hhcnQuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dbbmd4LWNiYy1jaGFydC1iYXNlXScsXG4gIHRlbXBsYXRlVXJsOiAnLi9jYmMtY2hhcnQtYmFzZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NiYy1jaGFydC1iYXNlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ2JjQ2hhcnRCYXNlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuXG4gIEBJbnB1dCgpIHhBeGlzVGl0bGU6IHN0cmluZztcbiAgQElucHV0KCkgeUF4aXNUaXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBzaG93R3JpZExpbmVzOiBib29sZWFuO1xuXG4gIHlMZXZlbFBhdGhzOiBzdHJpbmdbXTtcbiAgeEF4aXM7XG4gIHlBeGlzO1xuXG4gIGNvbXB1dGVHcmlkKCkge1xuICAgIHRoaXMueUxldmVsUGF0aHMgPSBbXTtcbiAgICB0aGlzLnhBeGlzID0gW107XG4gICAgdGhpcy55QXhpcyA9IFtdO1xuXG4gICAgZm9yIChsZXQgeSA9IHRoaXMuY2x1c3RlcmVkQmFyQ2hhcnRTZXJ2aWNlLm1pblk7IHkgPD0gdGhpcy5jbHVzdGVyZWRCYXJDaGFydFNlcnZpY2UubWF4WTsgeSA9IHkgKyB0aGlzLmNsdXN0ZXJlZEJhckNoYXJ0U2VydmljZS5kaWZmKSB7XG4gICAgICBjb25zdCByZWN0RW5kID0gdGhpcy5jbHVzdGVyZWRCYXJDaGFydFNlcnZpY2UueFBhZGRpbmcgKyB0aGlzLmNsdXN0ZXJlZEJhckNoYXJ0U2VydmljZS5yZWN0V2lkdGg7XG4gICAgICBjb25zdCB5VHJhbnNmb3JtZWQgPSB0aGlzLmNsdXN0ZXJlZEJhckNoYXJ0U2VydmljZS50cmFuc2Zvcm1ZKHRoaXMuY2x1c3RlcmVkQmFyQ2hhcnRTZXJ2aWNlLm1heFkgLSB5KVxuICAgICAgICAgICAgICAgICAgICAgICAgICArIHRoaXMuY2x1c3RlcmVkQmFyQ2hhcnRTZXJ2aWNlLnlQYWRkaW5nO1xuICAgICAgY29uc3QgcGF0aCA9ICdNICcgKyB0aGlzLmNsdXN0ZXJlZEJhckNoYXJ0U2VydmljZS54UGFkZGluZyArICcgJyArIHlUcmFuc2Zvcm1lZCArICcgTCAnICsgcmVjdEVuZCArICcgJyArIHlUcmFuc2Zvcm1lZDtcbiAgICAgIHRoaXMueUxldmVsUGF0aHMucHVzaChwYXRoKTtcbiAgICAgIHRoaXMueUF4aXMucHVzaCh7eVBvczogeVRyYW5zZm9ybWVkLCB2YWx1ZTogeSB9KTtcbiAgICB9XG5cbiAgICAvLyBjb25zb2xlLmxvZygnZGlmZjogJyArIHRoaXMuY2x1c3RlcmVkQmFyQ2hhcnRTZXJ2aWNlLmRpZmYpO1xuICAgIC8vIGNvbnNvbGUubG9nKHRoaXMueUF4aXMpO1xuXG4gICAgLy8gbm93IHRoZSB4IGF4aXMgOilcblxuICAgIC8vIGxldCBub09mWEF4aXNWYWx1ZXM7XG4gICAgLy8gbm9PZlhBeGlzVmFsdWVzID0gdGhpcy5jbHVzdGVyZWRCYXJDaGFydFNlcnZpY2UuZGF0YS5sZW5ndGg7XG4gICAgLy8gY29uc3QgZWFjaFdpZHRoID0gdGhpcy5jbHVzdGVyZWRCYXJDaGFydFNlcnZpY2UucmVjdFdpZHRoIC8gbm9PZlhBeGlzVmFsdWVzO1xuICAgIC8vIGxldCBjbnQgPSAtMTtcbiAgICAvLyBmb3IgKGNvbnN0IGJjRCBvZiB0aGlzLmNsdXN0ZXJlZEJhckNoYXJ0U2VydmljZS5kYXRhKSB7XG4gICAgLy8gICBjbnQgKys7XG4gICAgLy8gICBjb25zdCB4UG9zID0gY250ICogZWFjaFdpZHRoICsgZWFjaFdpZHRoIC8gMiArIHRoaXMuY2x1c3RlcmVkQmFyQ2hhcnRTZXJ2aWNlLnhQYWRkaW5nO1xuICAgIC8vICAgdGhpcy54QXhpcy5wdXNoKHt4UG9zLCB2YWx1ZTogYmNELm5hbWV9KTtcbiAgICAvLyB9XG5cbiAgICBsZXQgbm9PZlhBeGlzVmFsdWVzO1xuICAgIGxldCB1bmlxdWVYQXhpc1ZhbHVlcztcbiAgICB1bmlxdWVYQXhpc1ZhbHVlcyA9IG5ldyBTZXQoKTtcbiAgICBmb3IgKGNvbnN0IHNlcmllcyBvZiB0aGlzLmNsdXN0ZXJlZEJhckNoYXJ0U2VydmljZS5kYXRhKSB7XG4gICAgICBjb25zdCBzZXJpZXNEYXRhID0gc2VyaWVzLmRhdGE7XG4gICAgICBmb3IgKGNvbnN0IHNEYXRhIG9mIHNlcmllc0RhdGEpIHtcbiAgICAgICAgdW5pcXVlWEF4aXNWYWx1ZXMuYWRkKHNEYXRhLm5hbWUpO1xuICAgICAgfVxuICAgIH1cbiAgICBub09mWEF4aXNWYWx1ZXMgPSB1bmlxdWVYQXhpc1ZhbHVlcy5zaXplO1xuICAgIGNvbnN0IGVhY2hXaWR0aCA9IHRoaXMuY2x1c3RlcmVkQmFyQ2hhcnRTZXJ2aWNlLnJlY3RXaWR0aCAvIG5vT2ZYQXhpc1ZhbHVlcztcbiAgICBsZXQgY250ID0gLTE7XG4gICAgZm9yIChjb25zdCB4QXhpc1ZhbHVlIG9mIHVuaXF1ZVhBeGlzVmFsdWVzKSB7XG4gICAgICBjbnQgKys7XG4gICAgICBjb25zdCB4UG9zID0gY250ICogZWFjaFdpZHRoICsgZWFjaFdpZHRoIC8gMiArIHRoaXMuY2x1c3RlcmVkQmFyQ2hhcnRTZXJ2aWNlLnhQYWRkaW5nO1xuICAgICAgdGhpcy54QXhpcy5wdXNoKHt4UG9zLCB2YWx1ZTogeEF4aXNWYWx1ZSB9KTtcbiAgICB9XG5cbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBjbHVzdGVyZWRCYXJDaGFydFNlcnZpY2U6IENsdXN0ZXJlZEJhckNoYXJ0U2VydmljZSkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5jb21wdXRlR3JpZCgpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5jb21wdXRlR3JpZCgpO1xuICB9XG5cbn1cbiJdfQ==