ngx-beautiful-charts
Version:
A library to create charts in Angular
4,557 lines • 205 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ngx-beautiful-charts', ['exports', '@angular/core', '@angular/platform-browser', '@angular/common'], factory) :
(global = global || self, factory(global['ngx-beautiful-charts'] = {}, global.ng.core, global.ng.platformBrowser, global.ng.common));
}(this, function (exports, core, platformBrowser, common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var colorSchemes = {
colorful: [
'#EAC435', '#345995', '#03CEA4', '#FF6B6B', '#CA1551',
'#3A3335', '#FFE19C', '#C1FFF2', '#511730', '#8789C0'
],
cool: [
'#5680E9', '#84CEEB', '#5AB9EA', '#C1C8E4', '#8860D0',
'#7555E8', '#69C6EA', '#5971EA', '#AAACE2', '#C060D1'
],
warm: [
'#BA9434', '#FFE899', '#FFAC47', '#FF813D', '#E55730',
'#BA9948', '#A38B3C', '#A36E2E', '#A35327', '#92381F'
]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var GlobalParametersService = /** @class */ (function () {
function GlobalParametersService() {
this.componentCounter = 0;
this.componentCounter = 0;
}
/**
* @return {?}
*/
GlobalParametersService.prototype.addNewComponent = /**
* @return {?}
*/
function () {
return ++this.componentCounter;
};
/**
* @return {?}
*/
GlobalParametersService.prototype.getCurrentComponentCounter = /**
* @return {?}
*/
function () {
return this.componentCounter;
};
GlobalParametersService.decorators = [
{ type: core.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
GlobalParametersService.ctorParameters = function () { return []; };
/** @nocollapse */ GlobalParametersService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function GlobalParametersService_Factory() { return new GlobalParametersService(); }, token: GlobalParametersService, providedIn: "root" });
return GlobalParametersService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
var
// @Injectable({
// providedIn: BeautifulChartsModule
// })
LineGraphService = /** @class */ (function () {
function LineGraphService() {
this.width = 0;
this.height = 0;
this.minX = 0;
this.minY = 0;
this.maxX = 0;
this.maxY = 0;
this.xPadding = 0;
this.yPadding = 0;
this.componentID = 0;
this.rectWidth = 0;
this.rectHeight = 0;
}
/**
* @return {?}
*/
LineGraphService.prototype.computeRectDimensions = /**
* @return {?}
*/
function () {
this.rectHeight = this.height - this.yPadding * 4;
this.rectWidth = this.width - this.xPadding * 2;
};
/**
* @param {?} x
* @return {?}
*/
LineGraphService.prototype.transformX = /**
* @param {?} x
* @return {?}
*/
function (x) {
return this.rectWidth * x / (this.maxX - this.minX);
};
/**
* @param {?} y
* @return {?}
*/
LineGraphService.prototype.transformY = /**
* @param {?} y
* @return {?}
*/
function (y) {
return this.rectHeight * y / (this.maxY - this.minY);
};
/**
* @param {?} __0
* @return {?}
*/
LineGraphService.prototype.setValues = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var componentID = _a.componentID, width = _a.width, height = _a.height, minX = _a.minX, minY = _a.minY, maxX = _a.maxX, maxY = _a.maxY, xPadding = _a.xPadding, yPadding = _a.yPadding;
this.componentID = componentID;
this.width = width;
this.height = height;
this.minX = minX;
this.minY = minY;
this.maxX = maxX;
this.maxY = maxY;
this.xPadding = xPadding;
this.yPadding = yPadding;
// console.log('service color scheme: ' + this.colorScheme)
this.computeRectDimensions();
// this.printAll();
};
/**
* @return {?}
*/
LineGraphService.prototype.printAll = /**
* @return {?}
*/
function () {
console.log('line-graph-service');
console.log('component ID: ' + this.componentID);
console.log('width: ' + this.width);
console.log('height: ' + this.height);
console.log('minX: ' + this.minX);
console.log('minY: ' + this.minY);
console.log('maxX: ' + this.maxX);
console.log('maxY: ' + this.maxY);
console.log('xPadding: ' + this.xPadding);
console.log('yPadding: ' + this.yPadding);
console.log('rectWidth: ' + this.rectWidth);
console.log('rectHeight: ' + this.rectHeight);
};
return LineGraphService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LineGraphComponent = /** @class */ (function () {
function LineGraphComponent(lineGraphService, globalParametersService, currentElement) {
this.lineGraphService = lineGraphService;
this.globalParametersService = globalParametersService;
this.currentElement = currentElement;
this.data = null;
this.chartBase = true;
this.colorScheme = 'colorful';
this.minX = null;
this.minY = null;
this.maxX = null;
this.maxY = null;
this.customColorScheme = [];
this.xPadding = 60;
this.yPadding = this.xPadding / 2;
}
/**
* @return {?}
*/
LineGraphComponent.prototype.setDimensions = /**
* @return {?}
*/
function () {
if (this.width && !this.height)
this.height = this.width / 3;
else if (!this.width && this.height)
this.width = this.height * 3;
else if (!this.width && !this.height) {
/** @type {?} */
var host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
var dims = host.parentNode.getBoundingClientRect();
this.width = dims.width;
this.height = dims.width / 3;
}
}
// console.log('---set dimensions---');
// console.log('width: ' + this.width);
// console.log('height: ' + this.height);
// console.log('--------------------');
};
/**
* @return {?}
*/
LineGraphComponent.prototype.setMinandMax = /**
* @return {?}
*/
function () {
if (this.minX == null)
this.minX = Math.min.apply(Math, __spread(this.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.x; }))));
if (this.maxX == null)
this.maxX = Math.max.apply(Math, __spread(this.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.x; }))));
if (this.minY == null)
this.minY = Math.min.apply(Math, __spread(this.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.y; }))));
if (this.maxY == null)
this.maxY = Math.max.apply(Math, __spread(this.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.y; }))));
};
/**
* @return {?}
*/
LineGraphComponent.prototype.transformData = /**
* @return {?}
*/
function () {
var e_1, _a;
this.transformedData = [];
try {
for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var point = _c.value;
/** @type {?} */
var x = this.lineGraphService.transformX(point.x) + this.xPadding;
/** @type {?} */
var y = this.lineGraphService.transformY(this.lineGraphService.maxY - point.y) + this.yPadding;
/** @type {?} */
var toolTipX = x;
/** @type {?} */
var toolTipY = y - 30;
/** @type {?} */
var toolTip = point.info && (point.info !== '') ? 'block' : 'none';
this.transformedData.push({
x: x,
y: y,
info: point.info,
originalX: point.x,
originalY: point.y,
toolTipTranslate: 'translate(' + toolTipX + 'px, ' + toolTipY + 'px)',
toolTip: toolTip
});
}
}
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; }
}
// console.log(this.transformedData);
};
/**
* @return {?}
*/
LineGraphComponent.prototype.printAllInput = /**
* @return {?}
*/
function () {
console.log('width: ' + this.width);
console.log('height: ' + this.height);
console.log('minX: ' + this.minX);
console.log('maxX: ' + this.maxX);
console.log('minY: ' + this.minY);
console.log('maxY: ' + this.maxY);
console.log('x: ' + this.xPadding);
console.log('y: ' + this.yPadding);
console.log('data: ' + this.data);
};
/**
* @return {?}
*/
LineGraphComponent.prototype.setLinePath = /**
* @return {?}
*/
function () {
var e_2, _a;
// console.log(this.printAllInput());
this.graphLinePath = 'M';
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a.x < b.x ? -1 : a.x > b.x ? 1 : 0; }));
try {
for (var _b = __values(this.transformedData), _c = _b.next(); !_c.done; _c = _b.next()) {
var point = _c.value;
// console.log(point);
/** @type {?} */
var coordX = point.x;
/** @type {?} */
var coordY = point.y;
this.graphLinePath += ' ' + coordX + ' ' + coordY;
// console.log(this.graphLinePath);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
};
/**
* @return {?}
*/
LineGraphComponent.prototype.setColor = /**
* @return {?}
*/
function () {
if (!this.color) {
if (this.customColorScheme.length > 0) {
this.color = this.customColorScheme[0];
}
else {
this.color = colorSchemes[this.colorScheme][0];
}
}
};
/**
* @return {?}
*/
LineGraphComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.componentID = this.globalParametersService.addNewComponent();
// console.log('init..');
this.setDimensions();
// this.printAllInput();
this.setMinandMax();
// this.printAllInput();
this.dataCopy = JSON.parse(JSON.stringify(this.data));
this.lineGraphService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
minX: this.minX,
maxX: this.maxX,
minY: this.minY,
maxY: this.maxY,
xPadding: this.xPadding,
yPadding: this.yPadding
});
this.setColor();
this.transformData();
this.setLinePath();
};
/**
* @return {?}
*/
LineGraphComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
// console.log('changes..');
// this.printAllInput();
this.setMinandMax();
// this.printAllInput();
this.dataCopy = JSON.parse(JSON.stringify(this.data));
this.lineGraphService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
minX: this.minX,
maxX: this.maxX,
minY: this.minY,
maxY: this.maxY,
xPadding: this.xPadding,
yPadding: this.yPadding
});
this.setColor();
this.transformData();
this.setLinePath();
};
LineGraphComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-line-graph',
template: "<svg [attr.width]=\"lineGraphService.width\" [attr.height]=\"lineGraphService.height\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\n <g ngx-lg-chart-base *ngIf=\"chartBase\"\n [gridPrecisionX]=\"gridPrecisionX\" [gridPrecisionY]=\"gridPrecisionY\"\n [xAxisTitle]=\"xAxisTitle\" [yAxisTitle]=\"yAxisTitle\"\n />\n \n <path class=\"line-path\"\n [attr.d]=\"graphLinePath\" fill=\"none\" [attr.stroke]=\"color\"\n />\n\n <g id=\"component\" *ngFor=\"let point of transformedData;\">\n <circle class=\"point\" [attr.cx]=\"point.x\" [attr.cy]=\"point.y\" r=\"4\" [attr.fill]=\"color\">\n </circle>\n \n <g class=\"tooltip\" [ngStyle]=\"{'transform': point.toolTipTranslate, 'display': point.toolTip}\" \n opacity=\"0.9\">\n <rect rx=\"5\" width=\"100\" height=\"25\"></rect>\n <text x=\"15\" y=\"16\">{{ point.info }}</text>\n </g>\n </g>\n\n</svg>",
providers: [LineGraphService],
styles: [".line-path{opacity:.6;stroke-width:3;z-index:999999}.line-path:hover{opacity:1}.point{stroke:#fff;stroke-width:2px}.point:hover{stroke-width:.5}#component .tooltip{visibility:hidden}#component:hover .tooltip{visibility:visible;position:absolute}#component:hover:after .tooltip{position:relative;left:0;top:100%;white-space:nowrap}.tooltip text{fill:#eee;font-size:12px;font-family:sans-serif}.tooltip rect{fill:#222;stroke:#111}"]
}] }
];
/** @nocollapse */
LineGraphComponent.ctorParameters = function () { return [
{ type: LineGraphService },
{ type: GlobalParametersService },
{ type: core.ElementRef }
]; };
LineGraphComponent.propDecorators = {
data: [{ type: core.Input }],
chartBase: [{ type: core.Input }],
width: [{ type: core.Input }],
height: [{ type: core.Input }],
color: [{ type: core.Input }],
colorScheme: [{ type: core.Input }],
minX: [{ type: core.Input }],
minY: [{ type: core.Input }],
maxX: [{ type: core.Input }],
maxY: [{ type: core.Input }],
gridPrecisionX: [{ type: core.Input }],
gridPrecisionY: [{ type: core.Input }],
xAxisTitle: [{ type: core.Input }],
yAxisTitle: [{ type: core.Input }],
customColorScheme: [{ type: core.Input }]
};
return LineGraphComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LgChartBaseComponent = /** @class */ (function () {
function LgChartBaseComponent(lineGraphService) {
this.lineGraphService = lineGraphService;
}
/**
* @return {?}
*/
LgChartBaseComponent.prototype.computeGrid = /**
* @return {?}
*/
function () {
// 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 (var x = this.lineGraphService.minX; x <= this.lineGraphService.maxX; x = x + this.gridPrecisionX) {
/** @type {?} */
var xPos = this.lineGraphService.transformX(x) + this.lineGraphService.xPadding;
this.xAxis.push({ xPos: xPos, value: x });
}
for (var y = this.lineGraphService.minY; y <= this.lineGraphService.maxY; y = y + this.gridPrecisionY) {
/** @type {?} */
var yPos = this.lineGraphService.transformY(y) + this.lineGraphService.yPadding + 7;
this.yAxis.push({ yPos: yPos, value: this.lineGraphService.maxY - y });
}
};
/**
* @return {?}
*/
LgChartBaseComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.computeGrid();
this.gridID = 'grid' + this.lineGraphService.componentID;
};
/**
* @return {?}
*/
LgChartBaseComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.computeGrid();
};
LgChartBaseComponent.decorators = [
{ type: core.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 = function () { return [
{ type: LineGraphService }
]; };
LgChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: core.Input }],
yAxisTitle: [{ type: core.Input }],
gridPrecisionX: [{ type: core.Input }],
gridPrecisionY: [{ type: core.Input }]
};
return LgChartBaseComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
var
// @Injectable({
// providedIn: BeautifulChartsModule
// })
MultiLineGraphService = /** @class */ (function () {
function MultiLineGraphService() {
}
/**
* @return {?}
*/
MultiLineGraphService.prototype.computeRectDimensions = /**
* @return {?}
*/
function () {
this.rectHeight = this.height - this.yPadding * 4;
this.rectWidth = this.width * .6 - this.xPadding * 2;
};
/**
* @return {?}
*/
MultiLineGraphService.prototype.computeLegionDimensions = /**
* @return {?}
*/
function () {
/** @type {?} */
var noOfLines = this.dataLength;
this.legionWidth = this.width * .4 - this.xPadding * 2;
this.legionHeight = 60 + 30 * noOfLines - 19;
};
/**
* @param {?} x
* @return {?}
*/
MultiLineGraphService.prototype.transformX = /**
* @param {?} x
* @return {?}
*/
function (x) {
return this.rectWidth * x / (this.maxX - this.minX);
};
/**
* @param {?} y
* @return {?}
*/
MultiLineGraphService.prototype.transformY = /**
* @param {?} y
* @return {?}
*/
function (y) {
return this.rectHeight * y / (this.maxY - this.minY);
};
/**
* @param {?} __0
* @return {?}
*/
MultiLineGraphService.prototype.setValues = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var componentID = _a.componentID, width = _a.width, height = _a.height, minX = _a.minX, minY = _a.minY, maxX = _a.maxX, maxY = _a.maxY, dataLength = _a.dataLength, xPadding = _a.xPadding, yPadding = _a.yPadding;
this.componentID = componentID;
this.width = width;
this.height = height;
this.minX = minX;
this.minY = minY;
this.maxX = maxX;
this.maxY = maxY;
this.dataLength = dataLength;
this.xPadding = xPadding;
this.yPadding = yPadding;
// console.log('service color scheme: ' + this.colorScheme)
this.computeRectDimensions();
this.computeLegionDimensions();
// this.printAll();
};
/**
* @return {?}
*/
MultiLineGraphService.prototype.printAll = /**
* @return {?}
*/
function () {
console.log('multi-line-graph-service');
console.log('component ID: ' + this.componentID);
console.log('width: ' + this.width);
console.log('height: ' + this.height);
console.log('minX: ' + this.minX);
console.log('minY: ' + this.minY);
console.log('maxX: ' + this.maxX);
console.log('maxY: ' + this.maxY);
console.log('xPadding: ' + this.xPadding);
console.log('yPadding: ' + this.yPadding);
console.log('rectWidth: ' + this.rectWidth);
console.log('rectHeight: ' + this.rectHeight);
console.log('legionWidth: ' + this.legionWidth);
console.log('legionHeight: ' + this.legionHeight);
};
return MultiLineGraphService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MultiLineGraphComponent = /** @class */ (function () {
function MultiLineGraphComponent(multiLineGraphService, globalParametersService, currentElement) {
this.multiLineGraphService = multiLineGraphService;
this.globalParametersService = globalParametersService;
this.currentElement = currentElement;
this.colorScheme = 'colorful';
this.minX = null;
this.minY = null;
this.maxX = null;
this.maxY = null;
this.customColorScheme = [];
this.xPadding = 60;
this.yPadding = this.xPadding / 2;
this.transformedData = [];
}
/**
* @return {?}
*/
MultiLineGraphComponent.prototype.setDimensions = /**
* @return {?}
*/
function () {
if (this.width && !this.height)
this.height = this.width / 3;
else if (!this.width && this.height)
this.width = this.height * 3;
else if (!this.width && !this.height) {
/** @type {?} */
var host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
var dims = host.parentNode.getBoundingClientRect();
this.width = dims.width;
this.height = dims.width / 3;
}
}
// console.log('---set dimensions---');
// console.log('width: ' + this.width);
// console.log('height: ' + this.height);
// console.log('--------------------');
};
/**
* @return {?}
*/
MultiLineGraphComponent.prototype.setMinandMax = /**
* @return {?}
*/
function () {
if (this.minX == null)
this.minX = Math.min.apply(Math, __spread(this.data.map((/**
* @param {?} line
* @return {?}
*/
function (line) { return Math.min.apply(Math, __spread(line.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.x; })))); }))));
if (this.maxX == null)
this.maxX = Math.max.apply(Math, __spread(this.data.map((/**
* @param {?} line
* @return {?}
*/
function (line) { return Math.max.apply(Math, __spread(line.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.x; })))); }))));
if (this.minY == null)
this.minY = Math.min.apply(Math, __spread(this.data.map((/**
* @param {?} line
* @return {?}
*/
function (line) { return Math.min.apply(Math, __spread(line.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.y; })))); }))));
if (this.maxY == null)
this.maxY = Math.max.apply(Math, __spread(this.data.map((/**
* @param {?} line
* @return {?}
*/
function (line) { return Math.max.apply(Math, __spread(line.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.y; })))); }))));
};
/**
* @return {?}
*/
MultiLineGraphComponent.prototype.transformData = /**
* @return {?}
*/
function () {
var e_1, _a, e_2, _b;
this.transformedData = [];
try {
for (var _c = __values(this.data), _d = _c.next(); !_d.done; _d = _c.next()) {
var singleLine = _d.value;
/** @type {?} */
var lineData = void 0;
lineData = [];
try {
for (var _e = __values(singleLine.data), _f = _e.next(); !_f.done; _f = _e.next()) {
var point = _f.value;
/** @type {?} */
var x = this.multiLineGraphService.transformX(point.x) + this.xPadding;
/** @type {?} */
var y = this.multiLineGraphService.transformY(this.multiLineGraphService.maxY - point.y) + this.yPadding;
/** @type {?} */
var toolTipX = x;
/** @type {?} */
var toolTipY = y - 30;
/** @type {?} */
var toolTip = point.info && (point.info !== '') ? 'block' : 'none';
lineData.push({
x: x,
y: y,
info: point.info,
originalX: point.x,
originalY: point.y,
toolTipTranslate: 'translate(' + toolTipX + 'px, ' + toolTipY + 'px)',
toolTip: toolTip
});
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_2) throw e_2.error; }
}
this.transformedData.push({
name: singleLine.name,
color: singleLine.color,
data: lineData
});
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_1) throw e_1.error; }
}
};
/**
* @return {?}
*/
MultiLineGraphComponent.prototype.setLinePath = /**
* @return {?}
*/
function () {
var e_3, _a, e_4, _b;
// console.log(this.printAllInput());
this.graphLinePaths = [];
try {
for (var _c = __values(this.transformedData), _d = _c.next(); !_d.done; _d = _c.next()) {
var singleLine = _d.value;
/** @type {?} */
var graphLinePath = 'M';
/** @type {?} */
var singleLineData = void 0;
singleLineData = singleLine.data;
singleLineData.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a.x < b.x ? -1 : a.x > b.x ? 1 : 0; }));
try {
for (var singleLineData_1 = __values(singleLineData), singleLineData_1_1 = singleLineData_1.next(); !singleLineData_1_1.done; singleLineData_1_1 = singleLineData_1.next()) {
var point = singleLineData_1_1.value;
// console.log(point);
/** @type {?} */
var coordX = point.x;
/** @type {?} */
var coordY = point.y;
graphLinePath += ' ' + coordX + ' ' + coordY;
// console.log(graphLinePath);
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (singleLineData_1_1 && !singleLineData_1_1.done && (_b = singleLineData_1.return)) _b.call(singleLineData_1);
}
finally { if (e_4) throw e_4.error; }
}
this.graphLinePaths.push({
color: singleLine.color,
path: graphLinePath
});
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_3) throw e_3.error; }
}
};
/**
* @return {?}
*/
MultiLineGraphComponent.prototype.setColors = /**
* @return {?}
*/
function () {
var e_5, _a;
/** @type {?} */
var cnt = 0;
try {
for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var line = _c.value;
if (!line.color) {
if (this.customColorScheme.length > 0) {
line.color = this.customColorScheme[cnt % this.customColorScheme.length];
}
else {
line.color = colorSchemes[this.colorScheme][cnt % 10];
}
}
cnt++;
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_5) throw e_5.error; }
}
};
/**
* @return {?}
*/
MultiLineGraphComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.componentID = this.globalParametersService.addNewComponent();
console.log('init..');
this.setDimensions();
this.setMinandMax();
this.setColors();
this.dataCopy = JSON.parse(JSON.stringify(this.data));
this.multiLineGraphService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
minX: this.minX,
maxX: this.maxX,
minY: this.minY,
maxY: this.maxY,
dataLength: this.data.length,
xPadding: this.xPadding,
yPadding: this.yPadding
});
this.transformData();
this.setLinePath();
};
/**
* @return {?}
*/
MultiLineGraphComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
console.log('changes..');
this.setMinandMax();
this.setColors();
this.dataCopy = JSON.parse(JSON.stringify(this.data));
this.multiLineGraphService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
minX: this.minX,
maxX: this.maxX,
minY: this.minY,
maxY: this.maxY,
dataLength: this.data.length,
xPadding: this.xPadding,
yPadding: this.yPadding
});
this.transformData();
this.setLinePath();
};
MultiLineGraphComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-multi-line-graph',
template: "<svg [attr.width]=\"width\" [attr.height]=\"height\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <g ngx-mlg-chart-base [data]=\"data\"\n [gridPrecisionX]=\"gridPrecisionX\" [gridPrecisionY]=\"gridPrecisionY\"\n [xAxisTitle]=\"xAxisTitle\" [yAxisTitle]=\"yAxisTitle\"\n />\n \n\n <!-- <g *ngFor=\"let line of data\">\n <g ngx-line-graph chartBase=\"false\" [data]=\"line.data\" [minX]=\"0\" [maxX]=\"100\" \n [minY]=\"0\" [maxY]=\"50\" \n [gridPrecisionX]=\"10\" \n [gridPrecisionY]=\"10\"\n xAxisTitle=\"Time\"\n yAxisTitle=\"Distance\"\n [data]=\"data\"\n color=\"#ff4444\"\n\n [width]=\"beautifulChartsService.rectWidth\" [height]=\"beautifulChartsService.rectHeight\" [color]=\"line.color\" />\n </g> -->\n\n\n <path *ngFor=\"let singleLine of graphLinePaths\" class=\"line-path\"\n [attr.d]=\"singleLine.path\" fill=\"none\" [attr.stroke]=\"singleLine.color\"\n />\n \n \n <g *ngFor=\"let line of transformedData;\">\n <g id=\"component\" *ngFor=\"let point of line.data\">\n <circle class=\"point\" [attr.cx]=\"point.x\" [attr.cy]=\"point.y\" r=\"4\" [attr.fill]=\"line.color\">\n </circle>\n \n <g class=\"tooltip\" [ngStyle]=\"{'transform': point.toolTipTranslate, 'display': point.toolTip}\" \n opacity=\"0.9\">\n <rect rx=\"5\" width=\"100\" height=\"25\"></rect>\n <text x=\"15\" y=\"16\">{{ point.info }}</text>\n </g>\n </g>\n \n </g>\n\n</svg>",
providers: [MultiLineGraphService],
styles: [".line-path{opacity:.6;stroke-width:3;z-index:999999}.line-path:hover{opacity:1}.point{stroke:#fff;stroke-width:2px}.point:hover{stroke-width:.5}#component .tooltip{visibility:hidden}#component:hover .tooltip{visibility:visible;position:absolute}#component:hover:after .tooltip{position:relative;left:0;top:100%;white-space:nowrap}.tooltip text{fill:#eee;font-size:12px;font-family:sans-serif}.tooltip rect{fill:#222;stroke:#111}"]
}] }
];
/** @nocollapse */
MultiLineGraphComponent.ctorParameters = function () { return [
{ type: MultiLineGraphService },
{ type: GlobalParametersService },
{ type: core.ElementRef }
]; };
MultiLineGraphComponent.propDecorators = {
data: [{ type: core.Input }],
width: [{ type: core.Input }],
height: [{ type: core.Input }],
colorScheme: [{ type: core.Input }],
minX: [{ type: core.Input }],
minY: [{ type: core.Input }],
maxX: [{ type: core.Input }],
maxY: [{ type: core.Input }],
gridPrecisionX: [{ type: core.Input }],
gridPrecisionY: [{ type: core.Input }],
xAxisTitle: [{ type: core.Input }],
yAxisTitle: [{ type: core.Input }],
customColorScheme: [{ type: core.Input }]
};
return MultiLineGraphComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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: core.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: core.Input }],
yAxisTitle: [{ type: core.Input }],
gridPrecisionX: [{ type: core.Input }],
gridPrecisionY: [{ type: core.Input }],
data: [{ type: core.Input }]
};
return MlgChartBaseComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
var
// @Injectable({
// providedIn: BeautifulChartsModule
// })
BarChartService = /** @class */ (function () {
function BarChartService() {
}
/**
* @return {?}
*/
BarChartService.prototype.computeRectDimensions = /**
* @return {?}
*/
function () {
this.rectHeight = this.height - this.yPadding * 4;
this.rectWidth = this.width - this.xPadding * 2;
};
/**
* @param {?} y
* @return {?}
*/
BarChartService.prototype.transformY = /**
* @param {?} y
* @return {?}
*/
function (y) {
return this.rectHeight * y / (this.maxY - this.minY);
};
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
BarChartService.prototype.closestMultipleLessThanEqualTo = /**
* @param {?} factor
* @param {?} num
* @return {?}
*/
function (factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleLessThanEqualTo(factor, num - 1);
};
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
BarChartService.prototype.closestMultipleMoreThanEqualTo = /**
* @param {?} factor
* @param {?} num
* @return {?}
*/
function (factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleMoreThanEqualTo(factor, num + 1);
};
/**
* @param {?} __0
* @return {?}
*/
BarChartService.prototype.setValues = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var componentID = _a.componentID, width = _a.width, height = _a.height, xPadding = _a.xPadding, yPadding = _a.yPadding, data = _a.data;
this.componentID = componentID;
this.width = width;
this.height = height;
this.xPadding = xPadding;
this.yPadding = yPadding;
this.data = data;
// console.log('service color scheme: ' + this.colorScheme)
/** @type {?} */
var minVal = Math.min.apply(Math, __spread(this.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.value; }))));
/** @type {?} */
var maxVal = Math.max.apply(Math, __spread(this.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.value; }))));
/** @type {?} */
var range = maxVal - minVal;
/** @type {?} */
var limInc = 10;
/** @type {?} */
var lim = 10;
this.diff = 1;
while (range > lim) {
this.diff++;
lim += limInc;
}
this.minY = this.closestMultipleLessThanEqualTo(this.diff, minVal);
this.minY = this.minY - this.diff * 2;
this.maxY = this.closestMultipleMoreThanEqualTo(this.diff, maxVal);
this.maxY = this.maxY + this.diff * 2;
this.computeRectDimensions();
// this.printAll();
};
/**
* @return {?}
*/
BarChartService.prototype.printAll = /**
* @return {?}
*/
function () {
console.log('line-graph-service');
console.log('component ID: ' + this.componentID);
console.log('width: ' + this.width);
console.log('height: ' + this.height);
console.log('minY: ' + this.minY);
console.log('maxY: ' + this.maxY);
console.log('xPadding: ' + this.xPadding);
console.log('yPadding: ' + this.yPadding);
console.log('rectWidth: ' + this.rectWidth);
console.log('rectHeight: ' + this.rectHeight);
};
return BarChartService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BarChartComponent = /** @class */ (function () {
function BarChartComponent(barChartService, globalParametersService, currentElement) {
this.barChartService = barChartService;
this.globalParametersService = globalParametersService;
this.currentElement = currentElement;
this.showGridLines = false;
this.colorScheme = 'colorful';
this.customColorScheme = [];
this.xPadding = 60;
this.yPadding = this.xPadding / 2;
}
/**
* @return {?}
*/
BarChartComponent.prototype.computeBarPaths = /**
* @return {?}
*/
function () {
var e_1, _a;
this.barPaths = [];
/** @type {?} */
var noOfXAxisValues = this.data.length;
/** @type {?} */
var eachWidth = this.barChartService.rectWidth / noOfXAxisValues;
/** @type {?} */
var barWidth = eachWidth * .25;
/** @type {?} */
var cnt = -1;
/** @type {?} */
var barPath = '';
try {
for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var bcD = _c.value;
cnt++;
/** @type {?} */
var xPos = cnt * eachWidth + eachWidth / 2 + this.xPadding;
/** @type {?} */
var yPos = this.barChartService.transformY(this.barChartService.maxY - bcD.value) + this.yPadding;
/** @type {?} */
var xStart = xPos - barWidth / 2;
/** @type {?} */
var xEnd = xPos + barWidth / 2;
/** @type {?} */
var yStart = this.barChartService.rectHeight + this.yPadding;
barPath = 'M ';
barPath = barPath + ' ' + xStart + ' ' + yStart + ' L ' + xStart
+ ' ' + yPos + ' ' + xEnd + ' ' + yPos + ' ' + xEnd + ' ' + yStart + ' Z';
this.barPaths.push(barPath);
}
}
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; }
}
};
/**
* @return {?}
*/
BarChartComponent.prototype.setColor = /**
* @return {?}
*/
function () {
if (!this.color) {
if (this.customColorScheme.length > 0) {
this.color = this.customColorScheme[0];
}
else {
this.color = colorSchemes[this.colorScheme][0];
}
}
};
/**
* @return {?}
*/
BarChartComponent.prototype.setDimensions = /**
* @return {?}
*/
function () {
if (this.width && !this.height)
this.height = this.width / 3;
else if (!this.width && this.height)
this.width = this.height * 3;
else if (!this.width && !this.height) {
/** @type {?} */
var host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
var dims = host.parentNode.getBoundingClientRect();
this.width = dims.width;
this.height = dims.width / 3;
}
}
// console.log('---set dimensions---');
// console.log('width: ' + this.width);
// console.log('height: ' + this.height);
// console.log('--------------------');
};
/**
* @return {?}
*/
BarChartComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.componentID = this.globalParametersService.addNewComponent();
// console.log('init..');
this.setDimensions();
this.dataCopy = JSON.parse(JSON.stringify(this.data));
this.barChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
this.setColor();
// console.log(this.color);
this.computeBarPaths();
};
/**
* @return {?}
*/
BarChartComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.dataCopy = JSON.parse(JSON.stringify(this.data));
this.barChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
this.setColor();
// console.log(this.color);
this.computeBarPaths();
};
BarChartComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-bar-chart',
template: "<svg [attr.width]=\"width\" [attr.height]=\"height\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\n <g ngx-bc-chart-base\n [showGridLines]=\"showGridLines\"\n [xAxisTitle]=\"xAxisTitle\" [yAxisTitle]=\"yAxisTitle\"\n />\n\n <g *ngFor=\"let barPath of barPaths\">\n <path class=\"chart-bar\"\n [attr.d]=\"barPath\" [attr.fill]=\"color\" />\n </g>\n\n</svg>",
providers: [BarChartService],
styles: [".chart-bar:hover{stroke-width:1;stroke:#444}"]
}] }
];
/** @nocollapse */
BarChartComponent.ctorParameters = function () { return [
{ type: BarChartService },
{ type: GlobalParametersService },
{ type: core.ElementRef }
]; };
BarChartComponent.propDecorators = {
data: [{ type: core.Input }],
width: [{ type: core.Input }],
height: [{ type: core.Input }],
xAxisTitle: [{ type: core.Input }],
yAxisTitle: [{ type: core.Input }],
showGridLines: [{ type: core.Input }],
color: [{ type: core.Input }],
colorScheme: [{ type: core.Input }],
customColorScheme: [{ type: core.Input }]
};
return BarChartComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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 = __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: core.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: core.Input }],
yAxisTitle: [{ type: core.Input }],
showGridLines: [{ type: core.Input }]
};
return BcChartBaseComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
var
// @Injectable({
// providedIn: BeautifulChartsModule
// })
ClusteredBarChartService = /** @class */ (function () {
function ClusteredBarChartService() {
}
/**
* @return {?}
*/
ClusteredBarChartService.prototype.computeRectDimensions = /**
* @return {?}
*/
function () {
this.rectHeight = this.height - this.yPadding * 4;
this.rectWidth = this.width * .7 - this.xPadding * 2;
};
/**
* @return {?}
*/
ClusteredBarChartService.prototype.computeLegionDimensions = /**
* @return {?}
*/
function () {
/** @type {?} */
var noOfLines = this.data.length;
this.legionWidth = this.width * .3 - this.xPadding * 2;
this.legionHeight = 60 + 30 * noOfLines - 19;
};
/**
* @param {?} y
* @return {?}
*/
ClusteredBarChartService.prototype.transformY = /**
* @param {?} y
* @return {?}
*/
function (y) {
return this.rectHeight * y / (this.maxY - this.minY);
};
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
ClusteredBarChartService.prototype.closestMultipleLessThanEqualTo = /**
* @param {?} factor
* @param {?} num
* @return {?}
*/
function (factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleLessThanEqualTo(factor, num - 1);
};
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
ClusteredBarChartService.prototype.closestMultipleMoreThanEqualTo = /**
* @param {?} factor
* @param {?} num
* @return {?}
*/
function (factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleMoreThanEqualTo(factor, num + 1);
};
/**
* @param {?} __0
* @return {?}
*/
ClusteredBarChartService.prototype.setValues = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var e_1, _b;
var componentID = _a.componentID, width = _a.width, height = _a.height, xPadding = _a.xPadding, yPadding = _a.yPadding, data = _a.data;
this.componentID = componentID;
this.width = width;
this.height = height;
this.xPadding = xPadding;
this.yPadding = yPadding;
this.data = data;
// console.log('service color scheme: ' + this.colorScheme)
/** @type {?} */
var minVals = [];
/** @type {?} */
var maxVals = [];
minVals = [];
maxVals = [];
try {
for (var _c = __values(this.data), _d = _c.next(); !_d.done; _d = _c.next()) {
var bcD = _d.value;
/** @type {?} */
var min = Math.min.apply(Math, __spread(bcD.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.value; }))));
/** @type {?} */
var max = Math.max.apply(Math, __spread(bcD.data.map((/**
* @param {?} oneData
* @return {?}
*/
function (oneData) { return oneData.value; }))));
minVals.push(min);
maxVals.push(max);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
}
finally { if (e_1) throw e_1.error; }
}
/** @type {?} */
var minVal = Math.min.apply(Math, __spread(minVals));
/** @type {?} */
var maxVal = Math.max.apply(Math, __spread(maxVals));
/** @type {?} */
var range = maxVal - minVal;
/** @type {?} */
var limInc = 10;
/** @type {?} */
var lim = 10;
this.diff = 1;
while (range > lim) {
this.diff++;
lim += limInc;
}
this.minY = this.closestMultipleLessThanEqualTo(this.diff, minVal);
this.minY = this.minY - this.diff * 2;
this.maxY = this.closestMultipleMoreThanEqualTo(this.diff, maxVal);
this.maxY = this.maxY + this.diff * 2;
this.computeRectDimensions();
this.computeLegionDimensions();
// this.printAll();
};
/**
* @return {?}
*/
ClusteredBarChartService.prototype.printAll = /**
* @return {?}
*/
function () {
console.log('line-graph-service');
console.log('component ID: ' + this.componentID);
console.log('width: ' + this.width);
console.log('height: ' + this.height);
console.log('minY: ' + this.minY);
console.log('maxY: ' + this.maxY);
console.log('xPadding: ' + this.xPadding);
console.log('yPadding: ' + this.yPadding);
console.log('rectWidth: ' + this.rectWidth);
console.log('rectHeight: ' + this.rectHeight);
};
return ClusteredBarChartService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ClusteredBarChartComponent = /** @class */ (function () {
function ClusteredBarChartComponent(clusteredBarChartService, globalParametersService, currentElement) {
this.clusteredBarChartService = clusteredBarChartService;
this.globalParametersService = globalParametersService;
this.currentElement = currentElement;
this.showGridLines = false;
this.colorScheme = 'colorful';
this.customColorScheme = [];
this.xPadding = 60;
this.yPadding = this.xPadding / 2;
}
// [{color: string, paths: string[]}];
// [{color: string, paths: string[]}];
/**
* @return {?}
*/
ClusteredBarChartComponent.prototype.setDimensions =
// [{color: string, paths: string[]}];
/**
* @return {?}
*/
function () {
if (this.width && !this.height)
this.height = this.width / 3;
else if (!this.width && this.height)
this.width = this.height * 3;
else if (!this.width && !this.height) {
/** @type {?} */
var host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
var dims = host.parentNode.getBoundingClientRect();
this.width = dims.width;
this.height = dims.width / 3;
}
}
// console.log('---set dimensions---');
// console.log('width: ' + this.width);
// console.log('height: ' + this.height);
// console.log('--------------------');
};
/**
* @return {?}
*/
ClusteredBarChartComponent.prototype.computeBarPaths = /**
* @return {?}
*/
function () {
var e_1, _a, e_2, _b, e_3, _c, e_4, _d;
this.barPaths = [];
/** @type {?} */
var uniqueXAxisValues;
/** @type {?} */
var noOfXAxisValues;
uniqueXAxisValues = new Set();
try {
for (var _e = __values(this.data), _f = _e.next(); !_f.done; _f = _e.next()) {
var series = _f.value;
/** @type {?} */
var seriesData = series.data;
try {
for (var seriesData_1 = __values(seriesData), seriesData_1_1 = seriesData_1.next(); !seriesData_1_1.done; seriesData_1_1 = seriesData_1.next()) {
var sData = seriesData_1_1.value;
uniqueXAxisValues.add(sData.name);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (seriesData_1_1 && !seriesData_1_1.done && (_b = seriesData_1.return)) _b.call(seriesData_1);
}
finally { if (e_2) throw e_2.error; }
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
}
finally { if (e_1) throw e_1.error; }
}
noOfXAxisValues = uniqueXAxisValues.size;
/** @type {?} */
var noOfSeries = this.data.length;
/** @type {?} */
var eachWidth = this.clusteredBarChartService.rectWidth / noOfXAxisValues;
/** @type {?} */
var categoryWidth = eachWidth * .5;
/** @type {?} */
var barWidth = categoryWidth / noOfSeries;
/** @type {?} */
var cnt = -1;
/** @type {?} */
var barPath = '';
/** @type {?} */
var cntSeries = -1;
try {
for (var _g = __values(this.data), _h = _g.next(); !_h.done; _h = _g.next()) {
var bcS = _h.value;
cntSeries++;
cnt = -1;
/** @type {?} */
var seriesPaths = void 0;
seriesPaths = [];
try {
for (var _j = __values(bcS.data), _k = _j.next(); !_k.done; _k = _j.next()) {
var bcD = _k.value;
cnt++;
/** @type {?} */
var xPos = cnt * eachWidth + .25 * eachWidth + cntSeries * barWidth + .5 * barWidth + this.xPadding;
/** @type {?} */
var yPos = this.clusteredBarChartService.transformY(this.clusteredBarChartService.maxY - bcD.value) + this.yPadding;
/** @type {?} */
var xStart = xPos - barWidth / 2;
/** @type {?} */
var xEnd = xPos + barWidth / 2;
/** @type {?} */
var yStart = this.clusteredBarChartService.rectHeight + this.yPadding;
barPath = 'M ';
barPath = barPath + ' ' + xStart + ' ' + yStart + ' L ' + xStart
+ ' ' + yPos + ' ' + xEnd + ' ' + yPos + ' ' + xEnd + ' ' + yStart + ' Z';
seriesPaths.push(barPath);
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_k && !_k.done && (_d = _j.return)) _d.call(_j);
}
finally { if (e_4) throw e_4.error; }
}
this.barPaths.push({ color: bcS.color, paths: seriesPaths });
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_h && !_h.done && (_c = _g.return)) _c.call(_g);
}
finally { if (e_3) throw e_3.error; }
}
};
/**
* @return {?}
*/
ClusteredBarChartComponent.prototype.setColors = /**
* @return {?}
*/
function () {
var e_5, _a;
/** @type {?} */
var cnt = 0;
try {
for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var seriesData = _c.value;
if (!seriesData.color) {
if (this.customColorScheme.length > 0) {
seriesData.color = this.customColorScheme[cnt % this.customColorScheme.length];
}
else {
seriesData.color = colorSchemes[this.colorScheme][cnt % 10];
}
cnt++;
}
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_5) throw e_5.error; }
}
};
/**
* @return {?}
*/
ClusteredBarChartComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.componentID = this.globalParametersService.addNewComponent();
console.log('init..');
this.setDimensions();
this.dataCopy = JSON.parse(JSON.stringify(this.data));
this.setColors();
this.clusteredBarChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
this.computeBarPaths();
};
/**
* @return {?}
*/
ClusteredBarChartComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.setColors();
this.clusteredBarChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
this.computeBarPaths();
};
ClusteredBarChartComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-clustered-bar-chart',
template: "<svg [attr.width]=\"width\" [attr.height]=\"height\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\n <g ngx-cbc-chart-base\n [showGridLines]=\"showGridLines\"\n [xAxisTitle]=\"xAxisTitle\" [yAxisTitle]=\"yAxisTitle\"\n />\n\n <g *ngFor=\"let series of barPaths\">\n <g *ngFor=\"let barPath of series.paths\">\n <path class=\"chart-bar\"\n [attr.d]=\"barPath\" [attr.fill]=\"series.color\" />\n </g>\n </g>\n\n</svg>",
providers: [ClusteredBarChartService],
styles: [".chart-bar:hover{stroke-width:1;stroke:#444}"]
}] }
];
/** @nocollapse */
ClusteredBarChartComponent.ctorParameters = function () { return [
{ type: ClusteredBarChartService },
{ type: GlobalParametersService },
{ type: core.ElementRef }
]; };
ClusteredBarChartComponent.propDecorators = {
data: [{ type: core.Input }],
width: [{ type: core.Input }],
height: [{ type: core.Input }],
xAxisTitle: [{ type: core.Input }],
yAxisTitle: [{ type: core.Input }],
showGridLines: [{ type: core.Input }],
colorScheme: [{ type: core.Input }],
customColorScheme: [{ type: core.Input }]
};
return ClusteredBarChartComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CbcChartBaseComponent = /** @class */ (function () {
function CbcChartBaseComponent(clusteredBarChartService) {
this.clusteredBarChartService = clusteredBarChartService;
}
/**
* @return {?}
*/
CbcChartBaseComponent.prototype.computeGrid = /**
* @return {?}
*/
function () {
var e_1, _a, e_2, _b, e_3, _c;
this.yLevelPaths = [];
this.xAxis = [];
this.yAxis = [];
for (var y = this.clusteredBarChartService.minY; y <= this.clusteredBarChartService.maxY; y = y + this.clusteredBarChartService.diff) {
/** @type {?} */
var rectEnd = this.clusteredBarChartService.xPadding + this.clusteredBarChartService.rectWidth;
/** @type {?} */
var yTransformed = this.clusteredBarChartService.transformY(this.clusteredBarChartService.maxY - y)
+ this.clusteredBarChartService.yPadding;
/** @type {?} */
var 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 {?} */
var noOfXAxisValues;
/** @type {?} */
var uniqueXAxisValues;
uniqueXAxisValues = new Set();
try {
for (var _d = __values(this.clusteredBarChartService.data), _e = _d.next(); !_e.done; _e = _d.next()) {
var series = _e.value;
/** @type {?} */
var seriesData = series.data;
try {
for (var seriesData_1 = __values(seriesData), seriesData_1_1 = seriesData_1.next(); !seriesData_1_1.done; seriesData_1_1 = seriesData_1.next()) {
var sData = seriesData_1_1.value;
uniqueXAxisValues.add(sData.name);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (seriesData_1_1 && !seriesData_1_1.done && (_b = seriesData_1.return)) _b.call(seriesData_1);
}
finally { if (e_2) throw e_2.error; }
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
}
finally { if (e_1) throw e_1.error; }
}
noOfXAxisValues = uniqueXAxisValues.size;
/** @type {?} */
var eachWidth = this.clusteredBarChartService.rectWidth / noOfXAxisValues;
/** @type {?} */
var cnt = -1;
try {
for (var uniqueXAxisValues_1 = __values(uniqueXAxisValues), uniqueXAxisValues_1_1 = uniqueXAxisValues_1.next(); !uniqueXAxisValues_1_1.done; uniqueXAxisValues_1_1 = uniqueXAxisValues_1.next()) {
var xAxisValue = uniqueXAxisValues_1_1.value;
cnt++;
/** @type {?} */
var xPos = cnt * eachWidth + eachWidth / 2 + this.clusteredBarChartService.xPadding;
this.xAxis.push({ xPos: xPos, value: xAxisValue });
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (uniqueXAxisValues_1_1 && !uniqueXAxisValues_1_1.done && (_c = uniqueXAxisValues_1.return)) _c.call(uniqueXAxisValues_1);
}
finally { if (e_3) throw e_3.error; }
}
};
/**
* @return {?}
*/
CbcChartBaseComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.computeGrid();
};
/**
* @return {?}
*/
CbcChartBaseComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.computeGrid();
};
CbcChartBaseComponent.decorators = [
{ type: core.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 = function () { return [
{ type: ClusteredBarChartService }
]; };
CbcChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: core.Input }],
yAxisTitle: [{ type: core.Input }],
showGridLines: [{ type: core.Input }]
};
return CbcChartBaseComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
var
// @Injectable({
// providedIn: BeautifulChartsModule
// })
PieChartService = /** @class */ (function () {
function PieChartService() {
}
/**
* @return {?}
*/
PieChartService.prototype.computeRectDimensions = /**
* @return {?}
*/
function () {
this.rectWidth = this.width * .6 - this.xPadding * 2;
this.rectHeight = this.rectWidth;
};
/**
* @return {?}
*/
PieChartService.prototype.computeLegionDimensions = /**
* @return {?}
*/
function () {
/** @type {?} */
var noOfLines = this.data.length;
this.legionWidth = this.width * .4 - this.xPadding * 2;
this.legionHeight = 60 + 30 * noOfLines - 19;
};
/**
* @param {?} __0
* @return {?}
*/
PieChartService.prototype.setValues = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var componentID = _a.componentID, width = _a.width, height = _a.height, xPadding = _a.xPadding, yPadding = _a.yPadding, data = _a.data;
this.componentID = componentID;
this.width = width;
this.height = height;
this.xPadding = xPadding;
this.yPadding = yPadding;
this.data = data;
// console.log('service color scheme: ' + this.colorScheme)
this.pieRadius = (this.width * .6 - this.xPadding * 2) / 2;
this.computeRectDimensions();
this.computeLegionDimensions();
// this.printAll();
};
/**
* @return {?}
*/
PieChartService.prototype.printAll = /**
* @return {?}
*/
function () {
console.log('line-graph-service');
console.log('component ID: ' + this.componentID);
console.log('width: ' + this.width);
console.log('height: ' + this.height);
console.log('xPadding: ' + this.xPadding);
console.log('yPadding: ' + this.yPadding);
console.log('rectWidth: ' + this.rectWidth);
console.log('rectHeight: ' + this.rectHeight);
};
return PieChartService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PieChartComponent = /** @class */ (function () {
function PieChartComponent(pieChartService, globalParametersService, currentElement) {
this.pieChartService = pieChartService;
this.globalParametersService = globalParametersService;
this.currentElement = currentElement;
this.colorScheme = 'colorful';
this.customColorScheme = [];
this.xPadding = 60;
this.yPadding = this.xPadding / 2;
this.pieSlicesInit = 0;
}
/**
* @param {?} pieCompletion
* @return {?}
*/
PieChartComponent.prototype.generatePieSlices = /**
* @param {?} pieCompletion
* @return {?}
*/
function (pieCompletion) {
var e_1, _a, e_2, _b;
if (this.pieSlicesInit === 0)
this.pieSlices = [];
/** @type {?} */
var sum = 0;
try {
for (var _c = __values(this.data), _d = _c.next(); !_d.done; _d = _c.next()) {
var val = _d.value;
sum = sum + val.value;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_1) throw e_1.error; }
}
/** @type {?} */
var rotation = 0;
/** @type {?} */
var rotationRad = 0;
/** @type {?} */
var cnt = 0;
try {
for (var _e = __values(this.data), _f = _e.next(); !_f.done; _f = _e.next()) {
var val = _f.value;
// console.log(val);
/** @type {?} */
var perc = val.value / sum * pieCompletion;
/** @type {?} */
var angle = 360 * perc;
// const angleMod = (angle > 180 ) ? 360 - angle : angle;
/** @type {?} */
var angleRad = angle * Math.PI / 180;
/** @type {?} */
var largeArc = (angle > 180) ? 1 : 0;
/** @type {?} */
var path = 'M 0 0 0 ' + -this.pieRadius + ' A '
+ this.pieRadius + ' ' + this.pieRadius
+ ' 0 ' + largeArc + ' 1' + this.pieRadius * Math.sin(angleRad) + ' '
+ -this.pieRadius * Math.cos(angleRad) + ' z';
/** @type {?} */
var hoverPath = 'M 0 0 0 ' + -this.hoverPieRadius + ' A '
+ this.hoverPieRadius + ' ' + this.hoverPieRadius
+ ' 0 ' + largeArc + ' 1' + this.hoverPieRadius * Math.sin(angleRad) + ' '
+ -this.hoverPieRadius * Math.cos(angleRad) + ' z';
/** @type {?} */
var pieInteriorX = this.pieRadius * 2 / 3 * Math.sin(rotationRad + angleRad / 2);
/** @type {?} */
var pieInteriorY = -this.pieRadius * 2 / 3 * Math.cos(rotationRad + angleRad / 2);
/** @type {?} */
var toolTipText = (Math.round(perc * 10000) / 100).toString() + '%';
/** @type {?} */
var pieSlice = {
perc: perc,
name: val.name,
color: val.color,
hoverD: hoverPath,
rotation: 'rotate(' + rotation + 'deg)',
d: path,
hover: false,
toolTipTranslate: 'translate(' + pieInteriorX + 'px, ' + pieInteriorY + 'px)',
toolTipText: toolTipText
};
// console.log(hoverPath);
// console.log(pieSlice);
if (this.pieSlicesInit === 0)
this.pieSlices.push(pieSlice);
else
this.pieSlices[cnt] = pieSlice;
// this.pieSlices.push(pieSlice);
rotation += angle;
rotationRad = rotation * Math.PI / 180;
cnt++;
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_2) throw e_2.error; }
}
};
/**
* @return {?}
*/
PieChartComponent.prototype.setDimensions = /**
* @return {?}
*/
function () {
if (this.width)
this.height = this.width * .6 - this.xPadding;
else {
/** @type {?} */
var host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
var dims = host.parentNode.getBoundingClientRect();
this.width = dims.width;
this.height = this.width * .6 - this.xPadding;
}
}
// console.log('---set dimensions---');
// console.log('width: ' + this.width);
// console.log('height: ' + this.height);
// console.log('--------------------');
};
/**
* @return {?}
*/
PieChartComponent.prototype.setColors = /**
* @return {?}
*/
function () {
var e_3, _a;
/** @type {?} */
var cnt = 0;
try {
for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var slice = _c.value;
if (!slice.color) {
if (this.customColorScheme.length > 0) {
slice.color = this.customColorScheme[cnt % this.customColorScheme.length];
}
else {
slice.color = colorSchemes[this.colorScheme][cnt % 10];
}
}
cnt++;
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_3) throw e_3.error; }
}
};
/**
* @return {?}
*/
PieChartComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.data = JSON.parse(JSON.stringify(this.data));
this.componentID = this.globalParametersService.addNewComponent();
// console.log('x: ' + this.x);
this.setDimensions();
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a.value > b.value ? -1 : a.value < b.value ? 1 : 0; }));
this.setColors();
this.pieSlicesInit = 0;
this.pieChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
this.pieRadius = this.pieChartService.pieRadius;
this.hoverPieRadius = this.pieChartService.pieRadius * 1.05;
/** @type {?} */
var pieCompletion = 0;
/** @type {?} */
var intervalID = setInterval((/**
* @return {?}
*/
function () {
_this.generatePieSlices(pieCompletion);
_this.pieSlicesInit = 1;
pieCompletion = pieCompletion + 0.01;
pieCompletion = Math.round(pieCompletion * 100) / 100;
if (pieCompletion > 1)
clearInterval(intervalID);
}), 5);
// console.log(this.hoverPieRadius);
this.cX = this.xPadding + this.pieRadius;
this.cY = this.yPadding + this.pieRadius;
/** @type {?} */
var translateX = this.xPadding + this.pieRadius;
/** @type {?} */
var translateY = this.yPadding + this.pieRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
var hoverTranslateXY = this.pieRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
};
/**
* @return {?}
*/
PieChartComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
var _this = this;
this.data = JSON.parse(JSON.stringify(this.data));
// console.log('x: ' + this.x);
this.setDimensions();
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a.value > b.value ? -1 : a.value < b.value ? 1 : 0; }));
this.setColors();
this.pieSlicesInit = 0;
this.pieChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
this.pieRadius = this.pieChartService.pieRadius;
this.hoverPieRadius = this.pieChartService.pieRadius * 1.05;
/** @type {?} */
var pieCompletion = 0;
/** @type {?} */
var intervalID = setInterval((/**
* @return {?}
*/
function () {
_this.generatePieSlices(pieCompletion);
_this.pieSlicesInit = 1;
pieCompletion = pieCompletion + 0.01;
pieCompletion = Math.round(pieCompletion * 100) / 100;
if (pieCompletion > 1)
clearInterval(intervalID);
}), 5);
// console.log(this.hoverPieRadius);
this.cX = this.xPadding + this.pieRadius;
this.cY = this.yPadding + this.pieRadius;
/** @type {?} */
var translateX = this.xPadding + this.pieRadius;
/** @type {?} */
var translateY = this.yPadding + this.pieRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
var hoverTranslateXY = this.pieRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
};
PieChartComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-pie-chart',
template: "<svg [attr.width]=\"width\" [attr.height]=\"height\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\n <g ngx-pie-chart-base />\n <g *ngFor=\"let pieSlice of pieSlices\">\n <g id=\"component\" [ngStyle]=\"{'transform': gTranslate}\">\n <g class=\"pie-g\" [ngStyle]=\"{'transform': pieSlice.rotation, 'position': 'relative'}\">\n <path class=\"pie-slice\" (mouseover)=\"pieSlice.hover=true\" (mouseout)=\"pieSlice.hover=false\"\n [ngStyle]=\"{'opacity': pieSlice.hover ? 0.7 : 1.0}\"\n [attr.d]=\"pieSlice.hover ? pieSlice.hoverD : pieSlice.d\" [attr.fill]=\"pieSlice.color\" />\n </g>\n <g class=\"tooltip\" [ngStyle]=\"{'transform': pieSlice.toolTipTranslate}\" \n opacity=\"0.9\">\n <rect rx=\"5\" width=\"70\" height=\"25\"></rect>\n <text x=\"15\" y=\"16\">{{ pieSlice.toolTipText }}</text>\n </g>\n </g>\n </g>\n \n</svg>\n\n<!-- 'transform': pieSlice.hover ? hoverTranslate + ' ' + pieSlice.rotation : pieSlice.rotation, -->",
providers: [PieChartService],
styles: [".pie-slice{transition:.3s ease-in}#component .tooltip{visibility:hidden;position:relative!important}#component:hover .tooltip{visibility:visible;position:absolute;z-index:9999999!important}#component:hover:after .tooltip{position:relative;left:0;top:100%;white-space:nowrap;z-index:9999999!important}.tooltip text{fill:#eee;font-size:12px;font-family:sans-serif;z-index:9999999!important}.tooltip rect{fill:#222;stroke:#111;z-index:9999998!important}"]
}] }
];
/** @nocollapse */
PieChartComponent.ctorParameters = function () { return [
{ type: PieChartService },
{ type: GlobalParametersService },
{ type: core.ElementRef }
]; };
PieChartComponent.propDecorators = {
data: [{ type: core.Input }],
width: [{ type: core.Input }],
colorScheme: [{ type: core.Input }],
customColorScheme: [{ type: core.Input }]
};
return PieChartComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PieChartBaseComponent = /** @class */ (function () {
function PieChartBaseComponent(pieChartService) {
this.pieChartService = pieChartService;
}
/**
* @return {?}
*/
PieChartBaseComponent.prototype.computeLegionXs = /**
* @return {?}
*/
function () {
this.x1 = this.pieChartService.rectWidth + 2 * this.pieChartService.xPadding + this.pieChartService.legionWidth / 4 * .2;
this.x2 = this.pieChartService.rectHeight + 2 * this.pieChartService.xPadding + this.pieChartService.legionWidth / 4 * .8;
};
/**
* @param {?} i
* @return {?}
*/
PieChartBaseComponent.prototype.computeLegionPath = /**
* @param {?} i
* @return {?}
*/
function (i) {
/** @type {?} */
var path = 'M ';
/** @type {?} */
var y = this.pieChartService.yPadding + 25 + 30 * i;
path = path + this.x1 + ' ' + y + ' ' + this.x2 + ' ' + y;
return path;
};
/**
* @return {?}
*/
PieChartBaseComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.computeLegionXs();
};
/**
* @return {?}
*/
PieChartBaseComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.computeLegionXs();
};
PieChartBaseComponent.decorators = [
{ type: core.Component, args: [{
selector: 'g[ngx-pie-chart-base]',
template: "<!-- Legion -->\n<svg:rect [attr.x]=\"2*pieChartService.xPadding + pieChartService.rectWidth\" \n[attr.y]=\"pieChartService.yPadding\" \n[attr.width]=\"pieChartService.legionWidth\" \n[attr.height]=\"pieChartService.legionHeight\" \nfill=\"#f1f1f1\" />\n\n\n<svg:g *ngFor=\"let x of pieChartService.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]=\"pieChartService.rectWidth + 2*pieChartService.xPadding + pieChartService.legionWidth / 4\" \n [attr.y]=\"pieChartService.yPadding+30+30*i\" class=\"small\"> {{ x.name }} </svg:text>\n</svg:g>\n",
styles: [".legion-line{stroke-width:5}"]
}] }
];
/** @nocollapse */
PieChartBaseComponent.ctorParameters = function () { return [
{ type: PieChartService }
]; };
return PieChartBaseComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
var
// @Injectable({
// providedIn: BeautifulChartsModule
// })
DonutChartService = /** @class */ (function () {
function DonutChartService() {
}
/**
* @return {?}
*/
DonutChartService.prototype.computeRectDimensions = /**
* @return {?}
*/
function () {
this.rectWidth = this.width * .6 - this.xPadding * 2;
this.rectHeight = this.rectWidth;
};
/**
* @return {?}
*/
DonutChartService.prototype.computeLegionDimensions = /**
* @return {?}
*/
function () {
/** @type {?} */
var noOfLines = this.data.length;
this.legionWidth = this.width * .4 - this.xPadding * 2;
this.legionHeight = 60 + 30 * noOfLines - 19;
};
/**
* @param {?} __0
* @return {?}
*/
DonutChartService.prototype.setValues = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var componentID = _a.componentID, width = _a.width, height = _a.height, xPadding = _a.xPadding, yPadding = _a.yPadding, data = _a.data;
this.componentID = componentID;
this.width = width;
this.height = height;
this.xPadding = xPadding;
this.yPadding = yPadding;
this.data = data;
// console.log('service color scheme: ' + this.colorScheme)
this.donutRadius = (this.width * .6 - this.xPadding * 2) / 2;
this.computeRectDimensions();
this.computeLegionDimensions();
// this.printAll();
};
/**
* @return {?}
*/
DonutChartService.prototype.printAll = /**
* @return {?}
*/
function () {
console.log('line-graph-service');
console.log('component ID: ' + this.componentID);
console.log('width: ' + this.width);
console.log('height: ' + this.height);
console.log('xPadding: ' + this.xPadding);
console.log('yPadding: ' + this.yPadding);
console.log('rectWidth: ' + this.rectWidth);
console.log('rectHeight: ' + this.rectHeight);
};
return DonutChartService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DonutChartComponent = /** @class */ (function () {
function DonutChartComponent(donutChartService, globalParametersService, currentElement) {
this.donutChartService = donutChartService;
this.globalParametersService = globalParametersService;
this.currentElement = currentElement;
this.colorScheme = 'colorful';
this.customColorScheme = [];
this.xPadding = 60;
this.yPadding = this.xPadding / 2;
this.donutWidthPerc = 0.4;
this.donutSlicesInit = 0;
}
/**
* @param {?} donutCompletion
* @return {?}
*/
DonutChartComponent.prototype.generateDonutSlices = /**
* @param {?} donutCompletion
* @return {?}
*/
function (donutCompletion) {
var e_1, _a, e_2, _b;
if (this.donutSlicesInit === 0)
this.donutSlices = [];
/** @type {?} */
var sum = 0;
try {
for (var _c = __values(this.data), _d = _c.next(); !_d.done; _d = _c.next()) {
var val = _d.value;
sum = sum + val.value;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_1) throw e_1.error; }
}
/** @type {?} */
var rotation = 0;
/** @type {?} */
var cnt = 0;
try {
for (var _e = __values(this.data), _f = _e.next(); !_f.done; _f = _e.next()) {
var val = _f.value;
// console.log(val);
/** @type {?} */
var perc = val.value / sum * donutCompletion;
/** @type {?} */
var angle = 360 * perc;
/** @type {?} */
var angleRad = angle * Math.PI / 180;
/** @type {?} */
var largeArc = (angle > 180) ? 1 : 0;
/** @type {?} */
var path = 'M 0 ' + -this.donutInnerRadius + ' 0 ' + -this.donutRadius
+ ' A ' + this.donutRadius + ' ' + this.donutRadius
+ ' 0 ' + largeArc + ' 1' + this.donutRadius * Math.sin(angleRad) + ' '
+ -this.donutRadius * Math.cos(angleRad)
+ ' L ' + this.donutInnerRadius * Math.sin(angleRad) + ' '
+ -this.donutInnerRadius * Math.cos(angleRad) + ' A '
+ this.donutInnerRadius + ' ' + this.donutInnerRadius
+ ' 0 ' + largeArc + ' 0 0 ' + -this.donutInnerRadius + ' z';
/** @type {?} */
var hoverPath = 'M 0 ' + -this.hoverDonutInnerRadius + ' 0 ' + -this.hoverDonutRadius
+ ' A ' + this.hoverDonutRadius + ' ' + this.hoverDonutRadius
+ ' 0 ' + largeArc + ' 1' + this.hoverDonutRadius * Math.sin(angleRad) + ' '
+ -this.hoverDonutRadius * Math.cos(angleRad)
+ ' L ' + this.hoverDonutInnerRadius * Math.sin(angleRad) + ' '
+ -this.hoverDonutInnerRadius * Math.cos(angleRad) + ' A '
+ this.hoverDonutInnerRadius + ' ' + this.hoverDonutInnerRadius
+ ' 0 ' + largeArc + ' 0 0 ' + -this.hoverDonutInnerRadius + ' z';
/** @type {?} */
var donutSlice = {
perc: perc,
name: val.name,
color: val.color,
hoverD: hoverPath,
rotation: 'rotate(' + rotation + 'deg)',
d: path,
hover: false
};
// console.log(hoverPath);
// console.log(donutSlice);
if (this.donutSlicesInit === 0)
this.donutSlices.push(donutSlice);
else
this.donutSlices[cnt] = donutSlice;
// this.donutSlices.push(donutSlice);
rotation += angle;
cnt++;
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_2) throw e_2.error; }
}
};
/**
* @return {?}
*/
DonutChartComponent.prototype.setDimensions = /**
* @return {?}
*/
function () {
if (this.width)
this.height = this.width * .6 - this.xPadding;
else {
/** @type {?} */
var host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
var dims = host.parentNode.getBoundingClientRect();
this.width = dims.width;
this.height = this.width * .6 - this.xPadding;
}
}
// console.log('---set dimensions---');
// console.log('width: ' + this.width);
// console.log('height: ' + this.height);
// console.log('--------------------');
};
/**
* @return {?}
*/
DonutChartComponent.prototype.setColors = /**
* @return {?}
*/
function () {
var e_3, _a;
/** @type {?} */
var cnt = 0;
try {
for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var slice = _c.value;
if (!slice.color) {
if (this.customColorScheme.length > 0) {
slice.color = this.customColorScheme[cnt % this.customColorScheme.length];
}
else {
slice.color = colorSchemes[this.colorScheme][cnt % 10];
}
cnt++;
}
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_3) throw e_3.error; }
}
};
/**
* @return {?}
*/
DonutChartComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.data = JSON.parse(JSON.stringify(this.data));
this.componentID = this.globalParametersService.addNewComponent();
this.setDimensions();
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a.value > b.value ? -1 : a.value < b.value ? 1 : 0; }));
this.setColors();
this.donutChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
// console.log('x: ' + this.x);
this.donutRadius = this.donutChartService.donutRadius;
this.donutInnerRadius = (1 - this.donutWidthPerc) * this.donutChartService.donutRadius;
this.hoverDonutRadius = this.donutChartService.donutRadius * 1.05;
this.hoverDonutInnerRadius = this.donutInnerRadius;
// this.generateDonutSlices();
/** @type {?} */
var donutCompletion = 0;
/** @type {?} */
var intervalID = setInterval((/**
* @return {?}
*/
function () {
_this.generateDonutSlices(donutCompletion);
_this.donutSlicesInit = 1;
donutCompletion = donutCompletion + 0.01;
donutCompletion = Math.round(donutCompletion * 100) / 100;
if (donutCompletion > 1)
clearInterval(intervalID);
}), 5);
// console.log(this.hoverDonutRadius);
this.cX = this.xPadding + this.donutRadius;
this.cY = this.yPadding + this.donutRadius;
/** @type {?} */
var translateX = this.xPadding + this.donutRadius;
/** @type {?} */
var translateY = this.yPadding + this.donutRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
var hoverTranslateXY = this.donutRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
};
/**
* @return {?}
*/
DonutChartComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
var _this = this;
this.data = JSON.parse(JSON.stringify(this.data));
this.setDimensions();
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a.value > b.value ? -1 : a.value < b.value ? 1 : 0; }));
this.setColors();
this.donutChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
// console.log('x: ' + this.x);
this.donutRadius = this.donutChartService.donutRadius;
this.donutInnerRadius = (1 - this.donutWidthPerc) * this.donutChartService.donutRadius;
this.hoverDonutRadius = this.donutChartService.donutRadius * 1.05;
this.hoverDonutInnerRadius = this.donutInnerRadius;
/** @type {?} */
var donutCompletion = 0;
/** @type {?} */
var intervalID = setInterval((/**
* @return {?}
*/
function () {
_this.generateDonutSlices(donutCompletion);
_this.donutSlicesInit = 1;
donutCompletion = donutCompletion + 0.01;
donutCompletion = Math.round(donutCompletion * 100) / 100;
if (donutCompletion > 1)
clearInterval(intervalID);
}), 5);
// console.log(this.hoverDonutRadius);
this.cX = this.xPadding + this.donutRadius;
this.cY = this.yPadding + this.donutRadius;
/** @type {?} */
var translateX = this.xPadding + this.donutRadius;
/** @type {?} */
var translateY = this.yPadding + this.donutRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
var hoverTranslateXY = this.donutRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
};
DonutChartComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-donut-chart',
template: "<svg [attr.width]=\"width\" [attr.height]=\"height\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\n <g ngx-donut-chart-base />\n <g *ngFor=\"let donutSlice of donutSlices\">\n <g [ngStyle]=\"{'transform': gTranslate}\">\n <path class=\"donut-slice\" (mouseover)=\"donutSlice.hover=true\" (mouseout)=\"donutSlice.hover=false\"\n [ngStyle]=\"{'opacity': donutSlice.hover ? 0.7 : 1.0, 'transform': donutSlice.rotation}\"\n [attr.d]=\"donutSlice.hover ? donutSlice.hoverD : donutSlice.d\" [attr.fill]=\"donutSlice.color\" />\n <text class=\"donut-text\" [ngStyle]=\"{'display': donutSlice.hover ? 'block' : 'none'}\" \n x=\"0\" y=\"0\" class=\"small\"\n text-anchor=\"middle\" dominant-baseline=\"middle\">\n <tspan x=\"0\" dy=\"0em\">{{ donutSlice.name }}</tspan>\n <tspan x=\"0\" dy=\"1.2em\">{{ donutSlice.perc * 100 | number: '1.0-2' }}%</tspan>\n </text>\n </g>\n </g>\n\n</svg>",
providers: [DonutChartService],
styles: [".donut-slice{transition:.3s ease-in}"]
}] }
];
/** @nocollapse */
DonutChartComponent.ctorParameters = function () { return [
{ type: DonutChartService },
{ type: GlobalParametersService },
{ type: core.ElementRef }
]; };
DonutChartComponent.propDecorators = {
data: [{ type: core.Input }],
width: [{ type: core.Input }],
colorScheme: [{ type: core.Input }],
customColorScheme: [{ type: core.Input }]
};
return DonutChartComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DonutChartBaseComponent = /** @class */ (function () {
function DonutChartBaseComponent(donutChartService) {
this.donutChartService = donutChartService;
}
/**
* @return {?}
*/
DonutChartBaseComponent.prototype.computeLegionXs = /**
* @return {?}
*/
function () {
this.x1 = this.donutChartService.rectWidth + 2 * this.donutChartService.xPadding
+ this.donutChartService.legionWidth / 4 * .2;
this.x2 = this.donutChartService.rectHeight + 2 * this.donutChartService.xPadding
+ this.donutChartService.legionWidth / 4 * .8;
};
/**
* @param {?} i
* @return {?}
*/
DonutChartBaseComponent.prototype.computeLegionPath = /**
* @param {?} i
* @return {?}
*/
function (i) {
/** @type {?} */
var path = 'M ';
/** @type {?} */
var y = this.donutChartService.yPadding + 25 + 30 * i;
path = path + this.x1 + ' ' + y + ' ' + this.x2 + ' ' + y;
return path;
};
/**
* @return {?}
*/
DonutChartBaseComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.computeLegionXs();
};
/**
* @return {?}
*/
DonutChartBaseComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.computeLegionXs();
};
DonutChartBaseComponent.decorators = [
{ type: core.Component, args: [{
selector: 'g[ngx-donut-chart-base]',
template: "<!-- Legion -->\n<svg:rect [attr.x]=\"2*donutChartService.xPadding + donutChartService.rectWidth\" \n[attr.y]=\"donutChartService.yPadding\" \n[attr.width]=\"donutChartService.legionWidth\" \n[attr.height]=\"donutChartService.legionHeight\" \nfill=\"#f1f1f1\" />\n\n\n<svg:g *ngFor=\"let x of donutChartService.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]=\"donutChartService.rectWidth + 2*donutChartService.xPadding + donutChartService.legionWidth / 4\" \n [attr.y]=\"donutChartService.yPadding+30+30*i\" class=\"small\"> {{ x.name }} </svg:text>\n</svg:g>\n",
styles: [".legion-line{stroke-width:5}"]
}] }
];
/** @nocollapse */
DonutChartBaseComponent.ctorParameters = function () { return [
{ type: DonutChartService }
]; };
return DonutChartBaseComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
var
// @Injectable({
// providedIn: BeautifulChartsModule
// })
SunburstChartService = /** @class */ (function () {
function SunburstChartService() {
}
/**
* @return {?}
*/
SunburstChartService.prototype.computeRectDimensions = /**
* @return {?}
*/
function () {
this.rectWidth = this.width - this.xPadding * 2;
this.rectHeight = this.rectWidth;
};
/**
* @param {?} __0
* @return {?}
*/
SunburstChartService.prototype.setValues = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var componentID = _a.componentID, width = _a.width, height = _a.height, xPadding = _a.xPadding, yPadding = _a.yPadding, data = _a.data;
this.componentID = componentID;
this.width = width;
this.height = height;
this.xPadding = xPadding;
this.yPadding = yPadding;
this.data = data;
// console.log('service color scheme: ' + this.colorScheme)
this.sunRadius = (this.width - this.xPadding * 2) / 2;
this.computeRectDimensions();
// this.printAll();
};
/**
* @return {?}
*/
SunburstChartService.prototype.printAll = /**
* @return {?}
*/
function () {
console.log('line-graph-service');
console.log('component ID: ' + this.componentID);
console.log('width: ' + this.width);
console.log('height: ' + this.height);
console.log('xPadding: ' + this.xPadding);
console.log('yPadding: ' + this.yPadding);
console.log('rectWidth: ' + this.rectWidth);
console.log('rectHeight: ' + this.rectHeight);
};
return SunburstChartService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SunburstChartComponent = /** @class */ (function () {
function SunburstChartComponent(sunburstChartService, globalParametersService, currentElement) {
this.sunburstChartService = sunburstChartService;
this.globalParametersService = globalParametersService;
this.currentElement = currentElement;
this.colorScheme = 'colorful';
this.customColorScheme = [];
this.xPadding = 60;
this.yPadding = this.xPadding / 2;
this.sunDepth = 0;
}
/**
* @param {?} data
* @param {?} i
* @param {?=} color
* @return {?}
*/
SunburstChartComponent.prototype.getRefinedData = /**
* @param {?} data
* @param {?} i
* @param {?=} color
* @return {?}
*/
function (data, i, color) {
var e_1, _a;
if (color === void 0) { color = null; }
try {
for (var data_1 = __values(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
var sbData = data_1_1.value;
sbData.level = i;
if (color && !sbData.color)
sbData.color = color;
if (sbData.level > this.sunDepth)
this.sunDepth = sbData.level;
if (sbData.children) {
if (sbData.children.length > 0) {
sbData.children = this.getRefinedData(sbData.children, i + 1, sbData.color);
sbData.value = sbData.children.map((/**
* @param {?} child
* @return {?}
*/
function (child) { return child.value; })).reduce((/**
* @param {?} sum
* @param {?} curr
* @return {?}
*/
function (sum, curr) { return sum + curr; }));
}
else {
if (!sbData.value)
sbData.value = 0;
}
}
else if (!sbData.value)
sbData.value = 0;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (data_1_1 && !data_1_1.done && (_a = data_1.return)) _a.call(data_1);
}
finally { if (e_1) throw e_1.error; }
}
return data;
};
/**
* @return {?}
*/
SunburstChartComponent.prototype.setDimensions = /**
* @return {?}
*/
function () {
if (this.width)
this.height = this.width - this.xPadding;
else {
/** @type {?} */
var host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
var dims = host.parentNode.getBoundingClientRect();
this.width = dims.width;
this.height = this.width - this.xPadding;
}
}
// console.log('---set dimensions---');
// console.log('width: ' + this.width);
// console.log('height: ' + this.height);
// console.log('--------------------');
};
/**
* @param {?} data
* @param {?} sum
* @param {?} angleRange
* @param {?} rotation
* @return {?}
*/
SunburstChartComponent.prototype.generateSlice = /**
* @param {?} data
* @param {?} sum
* @param {?} angleRange
* @param {?} rotation
* @return {?}
*/
function (data, sum, angleRange, rotation) {
/** @type {?} */
var perc = data.value / sum;
/** @type {?} */
var angle = angleRange * perc;
// const angleMod = (angle > 180 ) ? 360 - angle : angle;
/** @type {?} */
var angleRad = angle * Math.PI / 180;
/** @type {?} */
var largeArc = (angle > 180) ? 1 : 0;
/** @type {?} */
var textRotation = (270 + angle / 2) % 360;
/** @type {?} */
var textX = (data.level - 1) * this.sunSliceWidth + this.sunSliceWidth / 2;
/** @type {?} */
var textRotationString = 'rotate(' + textRotation + 'deg)';
if (rotation > 180) {
/** @type {?} */
var x = textX * 2;
textRotationString = textRotationString + ' scale(-1,-1) translateX(' + -x + 'px)';
}
/** @type {?} */
var path;
/** @type {?} */
var hoverPath;
if (data.level === 1) {
path = 'M 0 0 0 ' + -this.sunSliceWidth + ' A '
+ this.sunSliceWidth + ' ' + this.sunSliceWidth
+ ' 0 ' + largeArc + ' 1 ' + this.sunSliceWidth * Math.sin(angleRad) + ' '
+ -this.sunSliceWidth * Math.cos(angleRad) + ' z';
/** @type {?} */
var hoverRadius = this.sunSliceWidth * 1.1;
hoverPath = 'M 0 0 0 ' + -hoverRadius + ' A '
+ hoverRadius + ' ' + hoverRadius
+ ' 0 ' + largeArc + ' 1 ' + hoverRadius * Math.sin(angleRad) + ' '
+ -hoverRadius * Math.cos(angleRad) + ' z';
}
else if (data.level > 1) {
/** @type {?} */
var sunSliceInnerRadius = this.sunRadius / (this.sunDepth) * (data.level - 1);
/** @type {?} */
var sunSliceOuterRadius = this.sunRadius / (this.sunDepth) * data.level;
path = 'M 0 ' + -sunSliceInnerRadius + ' 0 ' + -sunSliceOuterRadius
+ ' A ' + sunSliceOuterRadius + ' ' + sunSliceOuterRadius
+ ' 0 ' + largeArc + ' 1 ' + sunSliceOuterRadius * Math.sin(angleRad) + ' '
+ -sunSliceOuterRadius * Math.cos(angleRad)
+ ' L ' + sunSliceInnerRadius * Math.sin(angleRad) + ' '
+ -sunSliceInnerRadius * Math.cos(angleRad) + ' A '
+ sunSliceInnerRadius + ' ' + sunSliceInnerRadius
+ ' 0 ' + largeArc + ' 0 0 ' + -sunSliceInnerRadius + ' z';
/** @type {?} */
var hoverSliceOuterRadius = sunSliceOuterRadius + this.sunSliceWidth * 0.1;
hoverPath = 'M 0 ' + -sunSliceInnerRadius + ' 0 ' + -hoverSliceOuterRadius
+ ' A ' + hoverSliceOuterRadius + ' ' + hoverSliceOuterRadius
+ ' 0 ' + largeArc + ' 1 ' + hoverSliceOuterRadius * Math.sin(angleRad) + ' '
+ -hoverSliceOuterRadius * Math.cos(angleRad)
+ ' L ' + sunSliceInnerRadius * Math.sin(angleRad) + ' '
+ -sunSliceInnerRadius * Math.cos(angleRad) + ' A '
+ sunSliceInnerRadius + ' ' + sunSliceInnerRadius
+ ' 0 ' + largeArc + ' 0 0 ' + -sunSliceInnerRadius + ' z';
}
// console.log(hoverPath);
/** @type {?} */
var sunSlice = {
perc: perc,
name: data.name,
color: data.color,
hoverD: hoverPath,
rotation: 'rotate(' + rotation + 'deg)',
textRotation: textRotationString,
textX: textX,
d: path,
angle: angle,
hover: false,
children: null
};
this.levelSunSlices[data.level - 1].push(sunSlice);
return sunSlice;
};
/**
* @param {?} data
* @param {?} angleRange
* @param {?} rotation
* @return {?}
*/
SunburstChartComponent.prototype.generateSunSlicesForAngle = /**
* @param {?} data
* @param {?} angleRange
* @param {?} rotation
* @return {?}
*/
function (data, angleRange, rotation) {
var e_2, _a, e_3, _b;
/** @type {?} */
var sunSlices = [];
/** @type {?} */
var sum = 0;
try {
for (var data_2 = __values(data), data_2_1 = data_2.next(); !data_2_1.done; data_2_1 = data_2.next()) {
var val = data_2_1.value;
sum = sum + val.value;
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (data_2_1 && !data_2_1.done && (_a = data_2.return)) _a.call(data_2);
}
finally { if (e_2) throw e_2.error; }
}
try {
for (var data_3 = __values(data), data_3_1 = data_3.next(); !data_3_1.done; data_3_1 = data_3.next()) {
var val = data_3_1.value;
/** @type {?} */
var sunSlice = this.generateSlice(val, sum, angleRange, rotation);
if (val.children && val.children.length > 0) {
sunSlice.children = this.generateSunSlicesForAngle(val.children, sunSlice.angle, rotation);
}
// console.log(val);
// console.log(sunSlice);
sunSlices.push(sunSlice);
rotation += sunSlice.angle;
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (data_3_1 && !data_3_1.done && (_b = data_3.return)) _b.call(data_3);
}
finally { if (e_3) throw e_3.error; }
}
return sunSlices;
};
/**
* @param {?} data
* @return {?}
*/
SunburstChartComponent.prototype.generateSunSlices = /**
* @param {?} data
* @return {?}
*/
function (data) {
return this.generateSunSlicesForAngle(data, 360, 0);
};
/**
* @return {?}
*/
SunburstChartComponent.prototype.initiateLevelSunSlices = /**
* @return {?}
*/
function () {
this.levelSunSlices = [];
for (var level = 1; level <= this.sunDepth; level++) {
this.levelSunSlices.push([]);
}
};
/**
* @return {?}
*/
SunburstChartComponent.prototype.setColors = /**
* @return {?}
*/
function () {
var e_4, _a;
/** @type {?} */
var cnt = 0;
try {
for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var slice = _c.value;
if (!slice.color) {
if (this.customColorScheme.length > 0) {
slice.color = this.customColorScheme[cnt % this.customColorScheme.length];
}
else {
slice.color = colorSchemes[this.colorScheme][cnt % 10];
}
cnt++;
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_4) throw e_4.error; }
}
};
/**
* @return {?}
*/
SunburstChartComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.componentID = this.globalParametersService.addNewComponent();
// console.log('service (oninitsun) color scheme: ' + this.sunburstChartService.colorScheme);
this.setColors();
this.setDimensions();
this.sunburstChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
this.sunRadius = this.sunburstChartService.sunRadius;
this.dataRefined = this.getRefinedData(this.data, 1);
// console.log('data refined: ');
// console.log(this.dataRefined);
this.initiateLevelSunSlices();
// console.log(this.sunDepth);
// console.log('level sun slices: ');
// console.log(this.levelSunSlices);
// this.hoverPieRadius = this.sunburstChartService.sunRadius / this.sunDepth * 1.05;
this.sunSliceWidth = this.sunRadius / this.sunDepth;
this.sunSlices = this.generateSunSlices(this.dataRefined);
// console.log(this.hoverPieRadius);
this.cX = this.xPadding + this.sunRadius;
this.cY = this.yPadding + this.sunRadius;
/** @type {?} */
var translateX = this.xPadding + this.sunRadius;
/** @type {?} */
var translateY = this.yPadding + this.sunRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
var hoverTranslateXY = this.sunRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
};
/**
* @return {?}
*/
SunburstChartComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
// console.log('service (onchangessun) color scheme: ' + this.sunburstChartService.colorScheme);
this.setColors();
this.setDimensions();
this.sunburstChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
this.sunRadius = this.sunburstChartService.sunRadius;
this.dataRefined = this.getRefinedData(this.data, 1);
// console.log('data refined: ');
// console.log(this.dataRefined);
this.initiateLevelSunSlices();
// console.log(this.sunDepth);
// console.log('level sun slices: ');
// console.log(this.levelSunSlices);
// this.hoverPieRadius = this.sunburstChartService.sunRadius / this.sunDepth * 1.05;
this.sunSliceWidth = this.sunRadius / this.sunDepth;
this.sunSlices = this.generateSunSlices(this.dataRefined);
// console.log(this.hoverPieRadius);
this.cX = this.xPadding + this.sunRadius;
this.cY = this.yPadding + this.sunRadius;
/** @type {?} */
var translateX = this.xPadding + this.sunRadius;
/** @type {?} */
var translateY = this.yPadding + this.sunRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
var hoverTranslateXY = this.sunRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
};
SunburstChartComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-sunburst-chart',
template: "<svg [attr.width]=\"width\" [attr.height]=\"height\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\n <g *ngFor=\"let level of levelSunSlices\">\n <g *ngFor=\"let slice of level\">\n <g [ngStyle]=\"{'transform': gTranslate + ' ' + slice.rotation}\">\n <path class=\"sun-slice\" (mouseover)=\"slice.hover=true\" (mouseout)=\"slice.hover=false\"\n [ngStyle]=\"{'opacity': slice.hover ? 0.7 : 1.0}\"\n [attr.d]=\"slice.hover ? slice.hoverD : slice.d\" [attr.fill]=\"slice.color\" />\n <text class=\"slice-text\" [attr.x]=\"slice.textX\" \n [attr.y]=\"0\" dominant-baseline=\"middle\" text-anchor=\"middle\" [ngStyle]=\"{'transform': slice.textRotation}\"> \n {{ slice.name }} \n </text>\n </g>\n </g>\n </g>\n</svg>\n",
providers: [SunburstChartService],
styles: [".sun-slice{transition:.3s ease-in;stroke:#fff;stroke-width:.5}.slice-text{color:#fff}"]
}] }
];
/** @nocollapse */
SunburstChartComponent.ctorParameters = function () { return [
{ type: SunburstChartService },
{ type: GlobalParametersService },
{ type: core.ElementRef }
]; };
SunburstChartComponent.propDecorators = {
data: [{ type: core.Input }],
width: [{ type: core.Input }],
colorScheme: [{ type: core.Input }],
customColorScheme: [{ type: core.Input }]
};
return SunburstChartComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
var
// @Injectable({
// providedIn: BeautifulChartsModule
// })
GanttChartService = /** @class */ (function () {
function GanttChartService() {
this.monthNames = [
'January', 'February', 'March',
'April', 'May', 'June', 'July',
'August', 'September', 'October',
'November', 'December'
];
}
/**
* @return {?}
*/
GanttChartService.prototype.computeRectDimensions = /**
* @return {?}
*/
function () {
this.rectWidth = this.width - this.xPadding * 2 - 150;
this.rectHeight = this.ganttPhases.length * 60;
};
/**
* @return {?}
*/
GanttChartService.prototype.computeLegionDimensions = /**
* @return {?}
*/
function () {
/** @type {?} */
var noOfLines = Math.ceil(this.data.length / 3);
this.legionWidth = this.width - this.xPadding * 2 - 150;
this.legionHeight = 40 + 40 * noOfLines;
};
/**
* @param {?} x
* @return {?}
*/
GanttChartService.prototype.transformX = /**
* @param {?} x
* @return {?}
*/
function (x) {
return this.rectWidth * x / (this.maxX - this.minX);
};
/**
* @return {?}
*/
GanttChartService.prototype.computeLegion = /**
* @return {?}
*/
function () {
/** @type {?} */
var noOfLines = Math.ceil(this.data.length / 3);
this.legion = [];
/** @type {?} */
var cnt = 0;
for (var line = 0; line < noOfLines; line++) {
/** @type {?} */
var legionLine = [];
for (var i = 0; i < 3; i++) {
if (this.ganttTeams[cnt])
legionLine.push(this.ganttTeams[cnt]);
cnt++;
}
this.legion.push(legionLine);
}
// console.log(this.legion);
};
/**
* @param {?} d
* @return {?}
*/
GanttChartService.prototype.transformGanttDate = /**
* @param {?} d
* @return {?}
*/
function (d) {
/** @type {?} */
var oneDay = 24 * 60 * 60 * 1000;
/** @type {?} */
var daysSinceMinDate = Math.round(Math.abs((new Date(d).getTime()
- (new Date(this.ganttMinDate)).getTime()) / (oneDay)));
return this.rectWidth * daysSinceMinDate / (this.maxX - this.minX);
};
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
GanttChartService.prototype.closestMultipleLessThanEqualTo = /**
* @param {?} factor
* @param {?} num
* @return {?}
*/
function (factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleLessThanEqualTo(factor, num - 1);
};
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
GanttChartService.prototype.closestMultipleMoreThanEqualTo = /**
* @param {?} factor
* @param {?} num
* @return {?}
*/
function (factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleMoreThanEqualTo(factor, num + 1);
};
/**
* @param {?} __0
* @return {?}
*/
GanttChartService.prototype.setValues = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var e_1, _b, e_2, _c, e_3, _d;
var componentID = _a.componentID, width = _a.width, xPadding = _a.xPadding, yPadding = _a.yPadding, data = _a.data;
this.componentID = componentID;
this.width = width;
this.xPadding = xPadding;
this.yPadding = yPadding;
this.data = data;
// console.log('service color scheme: ' + this.colorScheme)
/** @type {?} */
var froms = [];
/** @type {?} */
var tos = [];
/** @type {?} */
var phases = new Set();
this.ganttTeams = [];
try {
// this.setColors();
// console.log(this.data);
for (var _e = __values(this.data), _f = _e.next(); !_f.done; _f = _e.next()) {
var team = _f.value;
this.ganttTeams.push({ name: team.name, color: team.color });
try {
for (var _g = __values(Object.keys(team.timelines)), _h = _g.next(); !_h.done; _h = _g.next()) {
var phase = _h.value;
phases.add(phase);
try {
for (var _j = __values(team.timelines[phase]), _k = _j.next(); !_k.done; _k = _j.next()) {
var timeline = _k.value;
froms.push(timeline.from);
tos.push(timeline.to);
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_k && !_k.done && (_d = _j.return)) _d.call(_j);
}
finally { if (e_3) throw e_3.error; }
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_h && !_h.done && (_c = _g.return)) _c.call(_g);
}
finally { if (e_2) throw e_2.error; }
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_1) throw e_1.error; }
}
this.ganttPhases = Array.from(phases);
// console.log('phase timelines: ');
// console.log(this.phaseTimelines);
/** @type {?} */
var minDate = froms.reduce((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return new Date(a) < new Date(b) ? a : b; }));
/** @type {?} */
var maxDate = tos.reduce((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return new Date(a) > new Date(b) ? a : b; }));
this.ganttMinDate = minDate;
this.ganttMaxDate = maxDate;
// console.log(this.ganttMinDate + ' - ' + this.ganttMaxDate);
/** @type {?} */
var noOfLines = Math.ceil(this.data.length / 3);
this.height = this.ganttPhases.length * 60 + this.yPadding * 3 + 100 + 40 + 30 * noOfLines;
/** @type {?} */
var oneDay = 24 * 60 * 60 * 1000;
this.ganttDateRange = Math.round(Math.abs((new Date(this.ganttMaxDate).getTime()
- new Date(this.ganttMinDate).getTime()) / (oneDay)));
// console.log('Date Range: ');
// console.log(this.ganttDateRange);
this.minX = 0;
// this.maxX = this.ganttDateRange;
/** @type {?} */
var flag = 0;
/** @type {?} */
var qts = 1;
while (flag === 0) {
if (this.ganttDateRange <= 90 * qts) {
flag = 1;
break;
}
else {
qts = qts + 1;
}
}
this.maxX = this.closestMultipleMoreThanEqualTo(7 * qts, this.ganttDateRange);
this.ganttMaxDate = this.addDays(this.ganttMinDate, this.maxX);
this.computeRectDimensions();
this.computeLegionDimensions();
this.computeLegion();
// this.printAll();
};
/**
* @param {?} date
* @param {?} days
* @return {?}
*/
GanttChartService.prototype.addDays = /**
* @param {?} date
* @param {?} days
* @return {?}
*/
function (date, days) {
/** @type {?} */
var newdate = new Date(date);
newdate.setDate((new Date(date)).getDate() + days);
/** @type {?} */
var day = newdate.getDate();
/** @type {?} */
var monthIndex = newdate.getMonth();
/** @type {?} */
var year = newdate.getFullYear();
return this.monthNames[monthIndex] + ' ' + day + ', ' + year;
};
/**
* @return {?}
*/
GanttChartService.prototype.printAll = /**
* @return {?}
*/
function () {
console.log('line-graph-service');
console.log('component ID: ' + this.componentID);
console.log('width: ' + this.width);
console.log('height: ' + this.height);
console.log('xPadding: ' + this.xPadding);
console.log('yPadding: ' + this.yPadding);
console.log('rectWidth: ' + this.rectWidth);
console.log('rectHeight: ' + this.rectHeight);
};
return GanttChartService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var GanttChartComponent = /** @class */ (function () {
// setColors() {
// let cnt = 0;
// for (const team of this.ganttChartService.data) {
// if (!team.color) team.color = colorSchemes[this.ganttChartService.colorScheme][cnt % 10];
// cnt++;
// }
// }
function GanttChartComponent(ganttChartService, globalParametersService, currentElement) {
this.ganttChartService = ganttChartService;
this.globalParametersService = globalParametersService;
this.currentElement = currentElement;
this.colorScheme = 'colorful';
this.customColorScheme = [];
this.xPadding = 60;
this.yPadding = this.xPadding / 2;
}
/**
* @return {?}
*/
GanttChartComponent.prototype.setDimensions = /**
* @return {?}
*/
function () {
if (this.width)
this.height = this.width - this.xPadding;
else {
/** @type {?} */
var host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
var dims = host.parentNode.getBoundingClientRect();
this.width = dims.width;
this.height = this.width - this.xPadding;
}
}
// console.log('---set dimensions---');
// console.log('width: ' + this.width);
// console.log('height: ' + this.height);
// console.log('--------------------');
};
/**
* @return {?}
*/
GanttChartComponent.prototype.setColors = /**
* @return {?}
*/
function () {
var e_1, _a;
/** @type {?} */
var cnt = 0;
try {
for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var team = _c.value;
if (!team.color) {
if (this.customColorScheme.length > 0) {
team.color = this.customColorScheme[cnt % this.customColorScheme.length];
}
else {
team.color = colorSchemes[this.colorScheme][cnt % 10];
}
cnt++;
}
}
}
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; }
}
};
/**
* @return {?}
*/
GanttChartComponent.prototype.definePhaseTimelines = /**
* @return {?}
*/
function () {
var e_2, _a, e_3, _b, e_4, _c, e_5, _d;
this.phaseTimelines = {};
try {
for (var _e = __values(this.ganttChartService.ganttPhases), _f = _e.next(); !_f.done; _f = _e.next()) {
var phase = _f.value;
this.phaseTimelines[phase] = [];
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
}
finally { if (e_2) throw e_2.error; }
}
try {
for (var _g = __values(this.ganttChartService.data), _h = _g.next(); !_h.done; _h = _g.next()) {
var team = _h.value;
try {
for (var _j = __values(Object.keys(team.timelines)), _k = _j.next(); !_k.done; _k = _j.next()) {
var phase = _k.value;
try {
for (var _l = __values(team.timelines[phase]), _m = _l.next(); !_m.done; _m = _l.next()) {
var timeline = _m.value;
this.phaseTimelines[phase].push({ from: timeline.from,
to: timeline.to,
color: team.color,
info: timeline.info,
toolTip: (timeline.info ? 'block' : 'none') });
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_m && !_m.done && (_d = _l.return)) _d.call(_l);
}
finally { if (e_5) throw e_5.error; }
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
}
finally { if (e_4) throw e_4.error; }
}
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
}
finally { if (e_3) throw e_3.error; }
}
// console.log('phase timelines: ');
// console.log(this.phaseTimelines);
};
/**
* @return {?}
*/
GanttChartComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.componentID = this.globalParametersService.addNewComponent();
this.setDimensions();
this.setColors();
this.ganttChartService.setValues({
componentID: this.componentID,
width: this.width,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
this.height = this.ganttChartService.height;
this.definePhaseTimelines();
};
/**
* @return {?}
*/
GanttChartComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.setDimensions();
this.setColors();
this.ganttChartService.setValues({
componentID: this.componentID,
width: this.width,
xPadding: this.xPadding,
yPadding: this.yPadding,
data: this.data
});
this.height = this.ganttChartService.height;
this.definePhaseTimelines();
};
GanttChartComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-gantt-chart',
template: "<svg [attr.width]=\"width\" [attr.height]=\"height\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <g ngx-gc-chart-base />\n <g *ngFor=\"let phase of ganttChartService.ganttPhases; index as i\">\n <g id=\"component\" *ngFor=\"let ganttEntry of phaseTimelines[phase]; index as j\">\n <rect class=\"gantt-entry\"\n [attr.x]=\"xPadding + 150 + ganttChartService.transformGanttDate(ganttEntry.from)\" \n [attr.y]=\"i * 60 + yPadding + 20\" \n [attr.width]=\"ganttChartService.transformGanttDate(ganttEntry.to) - ganttChartService.transformGanttDate(ganttEntry.from)\" \n [attr.height]=\"20\" \n rx=\"6\" ry=\"6\"\n [attr.fill]=\"ganttEntry.color\" />\n\n <!-- [attr.x]=\"x + 150 + ganttChartService.transformGanttDate(ganttEntry.from)\" \n [attr.y]=\"i * 60 + y + 20\" -->\n <g class=\"tooltip\" [ngStyle]=\"{\n 'transform': 'translate(' + (xPadding + 150 + ganttChartService.transformGanttDate(ganttEntry.to) - ((ganttChartService.transformGanttDate(ganttEntry.to) - ganttChartService.transformGanttDate(ganttEntry.from)) / 2)) + 'px, ' + (i * 60 + yPadding - 5) + 'px)',\n 'display': ganttEntry.toolTip}\" \n opacity=\"0.9\">\n <rect rx=\"5\" width=\"200\" height=\"25\"></rect>\n <text x=\"15\" y=\"16\">{{ ganttEntry.info }}</text>\n </g>\n </g>\n </g>\n</svg>",
providers: [GanttChartService],
styles: [".gantt-entry{opacity:.8}.gantt-entry:hover{opacity:1}#component .tooltip{visibility:hidden}#component:hover .tooltip{visibility:visible;position:absolute}#component:hover:after .tooltip{position:relative;left:0;top:100%;white-space:nowrap}.tooltip text{fill:#eee;font-size:12px;font-family:sans-serif}.tooltip rect{fill:#222;stroke:#111}"]
}] }
];
/** @nocollapse */
GanttChartComponent.ctorParameters = function () { return [
{ type: GanttChartService },
{ type: GlobalParametersService },
{ type: core.ElementRef }
]; };
GanttChartComponent.propDecorators = {
data: [{ type: core.Input }],
width: [{ type: core.Input }],
colorScheme: [{ type: core.Input }],
customColorScheme: [{ type: core.Input }]
};
return GanttChartComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var GcChartBaseComponent = /** @class */ (function () {
// ganttChartData = [
// {
// name: 'Market Team',
// color: '#EAC435',
// timelines: {
// 'Market Research': [
// {from: new Date('June 9, 2019'), to: new Date('July 20, 2019')},
// {from: new Date('October 9, 2019'), to: new Date('November 20, 2019')}
// ],
// 'User Documentation': [
// {from: new Date('August 10, 2019'), to: new Date('September 15, 2019')}
// ]
// }
// },
// {
// name: 'Development Team',
// color: '#345995',
// timelines: {
// 'Software Development': [
// {from: new Date('July 9, 2019'), to: new Date('October 20, 2019')}
// ],
// 'Testing': [
// {from: new Date('October 25, 2019'), to: new Date('November 15, 2019')}
// ],
// 'User Documentation': [
// {from: new Date('August 1, 2019'), to: new Date('August 15, 2019')}
// ]
// }
// }
// ];
function GcChartBaseComponent(ganttChartService) {
this.ganttChartService = ganttChartService;
this.monthNames = [
'January', 'February', 'March',
'April', 'May', 'June', 'July',
'August', 'September', 'October',
'November', 'December'
];
}
/**
* @param {?} date
* @param {?} days
* @return {?}
*/
GcChartBaseComponent.prototype.addDays = /**
* @param {?} date
* @param {?} days
* @return {?}
*/
function (date, days) {
/** @type {?} */
var newdate = new Date(date);
newdate.setDate((new Date(date)).getDate() + days);
/** @type {?} */
var day = newdate.getDate();
/** @type {?} */
var monthIndex = newdate.getMonth();
/** @type {?} */
var year = newdate.getFullYear();
return this.monthNames[monthIndex] + ' ' + day + ', ' + year;
};
/**
* @param {?} date
* @return {?}
*/
GcChartBaseComponent.prototype.shortenDate = /**
* @param {?} date
* @return {?}
*/
function (date) {
date = date.replace('January', 'Jan');
date = date.replace('February', 'Feb');
date = date.replace('March', 'Mar');
date = date.replace('April', 'Apr');
date = date.replace('May', 'May');
date = date.replace('June', 'Jun');
date = date.replace('July', 'Jul');
date = date.replace('August', 'Aug');
date = date.replace('September', 'Sep');
date = date.replace('October', 'Oct');
date = date.replace('November', 'Nov');
date = date.replace('December', 'Dec');
return date;
};
/**
* @return {?}
*/
GcChartBaseComponent.prototype.computeGrid = /**
* @return {?}
*/
function () {
var e_1, _a;
// compute the min date and max date
// const oneDay = 24 * 60 * 60 * 1000;
// const dateRange = Math.round(Math.abs(
// (this.ganttChartService.ganttMaxDate.getTime()
// - this.ganttChartService.ganttMinDate.getTime()
// ) / (oneDay)));
/** @type {?} */
var flag = 0;
/** @type {?} */
var qts = 1;
// 3m --> 1 week --> 12
// 6m --> 2 weeks --> 12
// 9m --> 3 weeks --> 12
while (flag === 0) {
if (this.ganttChartService.ganttDateRange <= 90 * qts) {
this.gridPrecisionX = 7 * qts;
flag = 1;
}
else
qts = qts + 1;
}
// console.log(this.gridPrecisionX);
this.gridWidthX = this.ganttChartService.transformX(this.gridPrecisionX);
this.gridWidthY = this.ganttChartService.rectHeight / this.ganttChartService.ganttPhases.length;
this.gridPath = 'M ' + this.gridWidthX + ' 0 L 0 0 0 ' + this.gridWidthY;
this.xAxis = [];
this.yAxis = [];
/** @type {?} */
var date = this.ganttChartService.ganttMinDate;
// let xPos = this.ganttChartService.transformGanttDate(date) + this.ganttChartService.xPadding + 150;
/** @type {?} */
var yTrans = this.ganttChartService.rectHeight + this.ganttChartService.yPadding + 10;
// let transform = 'translate(' + xPos + 'px, ' + yTrans + 'px)';
// this.xAxis.push({xPos: xPos, value: date, transform: transform});
// console.log(date);
// console.log('max date: ' + this.ganttChartService.ganttMaxDate);
// console.log('date: ' + date);
while (new Date(date) <= new Date(this.ganttChartService.ganttMaxDate)) {
// console.log('date: ' + date);
// console.log(date);
/** @type {?} */
var xPos = this.ganttChartService.transformGanttDate(date) + this.ganttChartService.xPadding + 150;
/** @type {?} */
var transform = 'translate(' + xPos + 'px, ' + yTrans + 'px)';
this.xAxis.push({ xPos: xPos, value: this.shortenDate(date), transform: transform });
date = this.addDays(date, this.gridPrecisionX);
}
// console.log(this.xAxis);
/** @type {?} */
var cnt = 0;
try {
for (var _b = __values(this.ganttChartService.ganttPhases), _c = _b.next(); !_c.done; _c = _b.next()) {
var phase = _c.value;
/** @type {?} */
var yPos = this.gridWidthY * cnt + this.gridWidthY * 0.5 + this.ganttChartService.yPadding;
this.yAxis.push({ yPos: yPos, value: phase });
cnt++;
}
}
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; }
}
};
/**
* @return {?}
*/
GcChartBaseComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.computeGrid();
this.gridID = 'grid' + this.ganttChartService.componentID;
};
/**
* @return {?}
*/
GcChartBaseComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.computeGrid();
};
GcChartBaseComponent.decorators = [
{ type: core.Component, args: [{
selector: 'g[ngx-gc-chart-base]',
template: "<svg:pattern [attr.id]=\"gridID\" \n[attr.x]=\"ganttChartService.xPadding + 150\" [attr.y]=\"ganttChartService.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]=\"ganttChartService.xPadding + 150\" \n[attr.y]=\"ganttChartService.yPadding\" \n[attr.width]=\"ganttChartService.rectWidth\" \n[attr.height]=\"ganttChartService.rectHeight\" \nstroke=\"#444444\" [attr.fill]=\"'url(#' + gridID + ')'\" stroke-width=\"1\"/>\n\n<svg:g *ngFor=\"let x of xAxis\" [ngStyle]=\"{'transform': x.transform}\">\n<svg:text class=\"x-axis-text small\" text-anchor=\"end\" dominant-baseline=\"middle\"> {{ x.value }} </svg:text>\n</svg:g>\n\n<svg:text\n*ngFor=\"let y of yAxis\" class=\"y-axis-text small\" text-anchor=\"end\"\n[attr.y]=\"y.yPos\" [attr.x]=\"150+ganttChartService.xPadding-30\">{{ y.value }}</svg:text>\n\n\n<!-- Legion -->\n<svg:rect [attr.x]=\"ganttChartService.xPadding + 150\" \n[attr.y]=\"ganttChartService.yPadding * 2 + 100 + ganttChartService.rectHeight\" \n[attr.width]=\"ganttChartService.legionWidth\" \n[attr.height]=\"ganttChartService.legionHeight\" \nfill=\"#f1f1f1\" />\n\n\n<svg:g *ngFor=\"let legionLine of ganttChartService.legion; index as i\">\n <svg:g *ngFor=\"let legionEntry of legionLine; index as j\">\n <svg:rect *ngIf=\"ganttChartService.legionWidth\" \n [attr.x]=\"ganttChartService.xPadding + 150 + ganttChartService.legionWidth / 3 * 0.1 + ganttChartService.legionWidth / 3 * j\" \n [attr.y]=\"ganttChartService.yPadding * 2 + 100 + ganttChartService.rectHeight + 20 + 40*i + 10\" \n [attr.width]=\"ganttChartService.legionWidth / 3 * 0.2\" \n [attr.height]=\"20\" \n rx=\"6\" ry=\"6\"\n [attr.fill]=\"legionEntry.color\" />\n\n <!-- <svg:path class=\"legion-line\" [attr.d]=\"computeLegionPath(i)\" fill=\"none\" [attr.stroke]=\"x.color\" /> -->\n <svg:text class=\"axis-text\" dominant-baseline=\"middle\"\n [attr.x]=\"ganttChartService.xPadding + 150 + ganttChartService.legionWidth / 3 * j + ganttChartService.legionWidth / 3 * 0.4\" \n [attr.y]=\"ganttChartService.yPadding * 2 + 100 + ganttChartService.rectHeight + 20 + 40*i + 20\" class=\"small\"> {{ legionEntry.name }} </svg:text>\n </svg:g>\n</svg:g>\n",
styles: [".x-axis-text{-webkit-transform:rotate(320deg);transform:rotate(320deg)}"]
}] }
];
/** @nocollapse */
GcChartBaseComponent.ctorParameters = function () { return [
{ type: GanttChartService }
]; };
return GcChartBaseComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
var
// @Injectable({
// providedIn: BeautifulChartsModule
// })
TimelineChartService = /** @class */ (function () {
function TimelineChartService() {
}
/**
* @return {?}
*/
TimelineChartService.prototype.computeRectDimensions = /**
* @return {?}
*/
function () {
this.rectHeight = this.height - this.yPadding * 4;
this.rectWidth = this.width - this.xPadding * 2;
};
/**
* @param {?} __0
* @return {?}
*/
TimelineChartService.prototype.setValues = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var componentID = _a.componentID, width = _a.width, height = _a.height, xPadding = _a.xPadding, yPadding = _a.yPadding;
this.componentID = componentID;
this.width = width;
this.height = height;
this.xPadding = xPadding;
this.yPadding = yPadding;
// console.log('service color scheme: ' + this.colorScheme)
this.computeRectDimensions();
// this.printAll();
};
/**
* @return {?}
*/
TimelineChartService.prototype.printAll = /**
* @return {?}
*/
function () {
console.log('line-graph-service');
console.log('component ID: ' + this.componentID);
console.log('width: ' + this.width);
console.log('height: ' + this.height);
console.log('xPadding: ' + this.xPadding);
console.log('yPadding: ' + this.yPadding);
console.log('rectWidth: ' + this.rectWidth);
console.log('rectHeight: ' + this.rectHeight);
};
return TimelineChartService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TimelineChartComponent = /** @class */ (function () {
function TimelineChartComponent(timelineChartService, globalParametersService, currentElement) {
this.timelineChartService = timelineChartService;
this.globalParametersService = globalParametersService;
this.currentElement = currentElement;
this.colorScheme = 'colorful';
this.customColorScheme = [];
this.xPadding = 60;
this.yPadding = this.xPadding / 2;
this.timeData = [];
}
/**
* @return {?}
*/
TimelineChartComponent.prototype.computeBarDimensions = /**
* @return {?}
*/
function () {
this.barWidth = this.timelineChartService.rectHeight * .05;
this.barStartY = this.yPadding + this.timelineChartService.rectHeight / 2 - this.barWidth / 2;
this.barEndY = this.yPadding + this.timelineChartService.rectHeight / 2 + this.barWidth / 2;
};
/**
* @return {?}
*/
TimelineChartComponent.prototype.setColors = /**
* @return {?}
*/
function () {
var e_1, _a;
/** @type {?} */
var cnt = 0;
try {
for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var oneTimeData = _c.value;
if (!oneTimeData.color) {
if (this.customColorScheme.length > 0) {
oneTimeData.color = this.customColorScheme[cnt % this.customColorScheme.length];
}
else {
oneTimeData.color = colorSchemes[this.colorScheme][cnt % 10];
}
cnt++;
}
}
}
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; }
}
};
/**
* @return {?}
*/
TimelineChartComponent.prototype.setDimensions = /**
* @return {?}
*/
function () {
if (this.width && !this.height)
this.height = this.width / 2;
else if (!this.width && this.height)
this.width = this.height * 2;
else if (!this.width && !this.height) {
/** @type {?} */
var host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
var dims = host.parentNode.getBoundingClientRect();
this.width = dims.width;
this.height = dims.width / 2;
}
}
// console.log('---set dimensions---');
// console.log('width: ' + this.width);
// console.log('height: ' + this.height);
// console.log('--------------------');
};
/**
* @param {?} text
* @param {?} width
* @return {?}
*/
TimelineChartComponent.prototype.textWrap = /**
* @param {?} text
* @param {?} width
* @return {?}
*/
function (text, width) {
/** @type {?} */
var noOfCharactersPerLine = width / 10;
/** @type {?} */
var newLineStr = '\n';
/** @type {?} */
var done = false;
/** @type {?} */
var res = [];
do {
/** @type {?} */
var found = false;
for (var i = noOfCharactersPerLine - 1; i >= 0; i--) {
if ((text.charAt(i) === ' ')) {
res.push([text.slice(0, i), newLineStr].join(''));
text = text.slice(i + 1);
found = true;
break;
}
}
if (!found) {
res.push([text.slice(0, noOfCharactersPerLine), newLineStr].join(''));
text = text.slice(noOfCharactersPerLine);
}
if (text.length < noOfCharactersPerLine)
done = true;
} while (!done);
res.push(text);
return res;
};
/**
* @return {?}
*/
TimelineChartComponent.prototype.computeTimeData = /**
* @return {?}
*/
function () {
var e_2, _a;
// const distanceBetweenTimeBubbles = this.width * .8 / (this.data.length - 1);
/** @type {?} */
var minTime = Math.min.apply(Math, __spread(this.data.map((/**
* @param {?} timeData
* @return {?}
*/
function (timeData) { return timeData.time; }))));
/** @type {?} */
var maxTime = Math.max.apply(Math, __spread(this.data.map((/**
* @param {?} timeData
* @return {?}
*/
function (timeData) { return timeData.time; }))));
/** @type {?} */
var perTimeWidth = this.timelineChartService.rectWidth * .8 / (maxTime - minTime);
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a.time < b.time ? -1 : a.time > b.time ? 1 : 0; }));
/** @type {?} */
var diffs = [];
for (var i = 1; i < this.data.length; i++) {
diffs.push(this.data[i].time - this.data[i - 1].time);
}
/** @type {?} */
var minDiff = Math.min.apply(Math, __spread(diffs));
this.timeBubbleRadius = Math.min(minDiff * perTimeWidth * .4);
/** @type {?} */
var maxRadius = this.timelineChartService.rectWidth * .8 / (this.data.length - 1) * .25;
/** @type {?} */
var minRadius = this.timelineChartService.rectWidth * .8 * .04;
// console.log('max: ' + maxRadius);
// console.log('min: ' + minRadius);
if (this.timeBubbleRadius > maxRadius)
this.timeBubbleRadius = maxRadius;
if (this.timeBubbleRadius < minRadius)
this.timeBubbleRadius = minRadius;
this.textBlockHeight = this.timelineChartService.rectHeight * 2 / 16;
this.timeData = [];
/** @type {?} */
var cnt = 0;
/** @type {?} */
var up = 1;
try {
for (var _b = __values(this.data), _c = _b.next(); !_c.done; _c = _b.next()) {
var oneTimeData = _c.value;
/** @type {?} */
var color = oneTimeData.color;
/** @type {?} */
var x = (oneTimeData.time - minTime) * perTimeWidth;
/** @type {?} */
var timeBubble = {
centre: {
x: x,
y: this.barStartY + this.barWidth / 2
},
text: oneTimeData.displayTime ? oneTimeData.displayTime : oneTimeData.time
// oneTimeData.displayTime ?
// this.textWrap(oneTimeData.displayTime, this.timeBubbleRadius * 2) :
// [oneTimeData.time]
};
/** @type {?} */
var start = {
x: x,
y: (up === 1) ? this.barStartY : this.barEndY
};
/** @type {?} */
var end = {
x: x,
y: (up === 1) ? this.barStartY - this.timelineChartService.rectHeight / 4 : this.barEndY + this.timelineChartService.rectHeight / 4
};
/** @type {?} */
var line = 'M ' + start.x + ' ' + start.y + ' ' + end.x + ' ' + end.y;
/** @type {?} */
var textBlock = {
position: {
x: x,
y: (up === 1) ?
this.barStartY - this.timelineChartService.rectHeight * 7 / 16 :
this.barEndY + this.timelineChartService.rectHeight * 4 / 16
},
text: this.textWrap(oneTimeData.text, this.timeBubbleRadius * 4)
};
this.timeData.push({
timeBubble: timeBubble,
line: line,
textBlock: textBlock,
color: color
});
up = up * -1;
cnt++;
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
};
/**
* @return {?}
*/
TimelineChartComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.componentID = this.globalParametersService.addNewComponent();
this.computeBarDimensions();
this.setColors();
this.timelineChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding
});
/** @type {?} */
var transX = this.xPadding + this.timelineChartService.rectWidth * .1;
this.gTranslate = 'translate(' + transX + 'px, ' + this.yPadding + 'px)';
this.computeBarDimensions();
this.computeTimeData();
};
/**
* @return {?}
*/
TimelineChartComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.computeBarDimensions();
this.setColors();
this.timelineChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding
});
/** @type {?} */
var transX = this.xPadding + this.timelineChartService.rectWidth * .1;
this.gTranslate = 'translate(' + transX + 'px, ' + this.yPadding + 'px)';
this.computeBarDimensions();
this.computeTimeData();
};
TimelineChartComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-timeline-chart',
template: "<svg [attr.width]=\"width\" [attr.height]=\"height\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <g [ngStyle]=\"{'transform': gTranslate}\">\n <rect x=\"0\" \n [attr.y]=\"barStartY\" \n [attr.width]=\"timelineChartService.rectWidth * .8\" \n [attr.height]=\"barWidth\" \n fill=\"grey\" />\n\n <g *ngFor=\"let timeDataInst of timeData\">\n <circle class=\"time-bubble\" [attr.cx]=\"timeDataInst.timeBubble.centre.x\" \n [attr.cy]=\"timeDataInst.timeBubble.centre.y\" \n [attr.r]=\"timeBubbleRadius\" [attr.fill]=\"timeDataInst.color\">\n </circle>\n\n <text class=\"time-bubble-text\" [attr.x]=\"timeDataInst.timeBubble.centre.x\"\n [attr.y]=\"timeDataInst.timeBubble.centre.y\"\n text-anchor=\"middle\" dominant-baseline=\"middle\">\n {{ timeDataInst.timeBubble.text }}\n <!-- <tspan *ngFor=\"let line of timeDataInst.timeBubble.text\" \n [attr.x]=\"timeDataInst.timeBubble.centre.x\"\n [attr.dx]=\"0\"\n [attr.dy]=\"14\">\n {{ line }}\n </tspan> -->\n </text>\n \n <path class=\"line-path\"\n [attr.d]=\"timeDataInst.line\" fill=\"none\" [attr.stroke]=\"timeDataInst.color\" />\n\n <text class=\"time-block-text\" [attr.x]=\"timeDataInst.textBlock.position.x\"\n [attr.y]=\"timeDataInst.textBlock.position.y\"\n [attr.height]=\"textBlockHeight\"\n text-anchor=\"middle\" dominant-baseline=\"middle\">\n <tspan *ngFor=\"let line of timeDataInst.textBlock.text\" \n [attr.x]=\"timeDataInst.textBlock.position.x\"\n [attr.dx]=\"0\"\n [attr.dy]=\"14\">\n {{ line }}\n </tspan>\n </text>\n\n </g>\n </g>\n</svg>\n\n",
providers: [TimelineChartService],
styles: [".time-bubble-text{font-size:12px}"]
}] }
];
/** @nocollapse */
TimelineChartComponent.ctorParameters = function () { return [
{ type: TimelineChartService },
{ type: GlobalParametersService },
{ type: core.ElementRef }
]; };
TimelineChartComponent.propDecorators = {
data: [{ type: core.Input }],
width: [{ type: core.Input }],
height: [{ type: core.Input }],
colorScheme: [{ type: core.Input }],
customColorScheme: [{ type: core.Input }]
};
return TimelineChartComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BeautifulChartsModule = /** @class */ (function () {
function BeautifulChartsModule() {
}
BeautifulChartsModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
LineGraphComponent,
MultiLineGraphComponent, LgChartBaseComponent,
MlgChartBaseComponent, BcChartBaseComponent,
CbcChartBaseComponent, DonutChartBaseComponent,
BarChartComponent, ClusteredBarChartComponent,
PieChartComponent, PieChartBaseComponent,
DonutChartComponent, SunburstChartComponent, GcChartBaseComponent,
GanttChartComponent, TimelineChartComponent
],
imports: [
platformBrowser.BrowserModule,
common.CommonModule
],
exports: [
LineGraphComponent,
MultiLineGraphComponent,
BarChartComponent,
ClusteredBarChartComponent,
PieChartComponent,
DonutChartComponent,
SunburstChartComponent,
GanttChartComponent,
TimelineChartComponent
]
},] }
];
return BeautifulChartsModule;
}());
exports.BeautifulChartsModule = BeautifulChartsModule;
exports.ɵa = LineGraphComponent;
exports.ɵb = LineGraphService;
exports.ɵc = GlobalParametersService;
exports.ɵd = MultiLineGraphComponent;
exports.ɵe = MultiLineGraphService;
exports.ɵf = LgChartBaseComponent;
exports.ɵg = MlgChartBaseComponent;
exports.ɵh = BcChartBaseComponent;
exports.ɵi = BarChartService;
exports.ɵj = CbcChartBaseComponent;
exports.ɵk = ClusteredBarChartService;
exports.ɵl = DonutChartBaseComponent;
exports.ɵm = DonutChartService;
exports.ɵn = BarChartComponent;
exports.ɵo = ClusteredBarChartComponent;
exports.ɵp = PieChartComponent;
exports.ɵq = PieChartService;
exports.ɵr = PieChartBaseComponent;
exports.ɵs = DonutChartComponent;
exports.ɵt = SunburstChartComponent;
exports.ɵu = SunburstChartService;
exports.ɵv = GcChartBaseComponent;
exports.ɵw = GanttChartService;
exports.ɵx = GanttChartComponent;
exports.ɵy = TimelineChartComponent;
exports.ɵz = TimelineChartService;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ngx-beautiful-charts.umd.js.map