ngx-beautiful-charts
Version:
A library to create charts in Angular
3,585 lines • 149 kB
JavaScript
import { Injectable, ɵɵdefineInjectable, Component, ElementRef, Input, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const 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
*/
class GlobalParametersService {
constructor() {
this.componentCounter = 0;
this.componentCounter = 0;
}
/**
* @return {?}
*/
addNewComponent() {
return ++this.componentCounter;
}
/**
* @return {?}
*/
getCurrentComponentCounter() {
return this.componentCounter;
}
}
GlobalParametersService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
GlobalParametersService.ctorParameters = () => [];
/** @nocollapse */ GlobalParametersService.ngInjectableDef = ɵɵdefineInjectable({ factory: function GlobalParametersService_Factory() { return new GlobalParametersService(); }, token: GlobalParametersService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
class LineGraphService {
constructor() {
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 {?}
*/
computeRectDimensions() {
this.rectHeight = this.height - this.yPadding * 4;
this.rectWidth = this.width - this.xPadding * 2;
}
/**
* @param {?} x
* @return {?}
*/
transformX(x) {
return this.rectWidth * x / (this.maxX - this.minX);
}
/**
* @param {?} y
* @return {?}
*/
transformY(y) {
return this.rectHeight * y / (this.maxY - this.minY);
}
/**
* @param {?} __0
* @return {?}
*/
setValues({ componentID: componentID, width: width, height: height, minX: minX, minY: minY, maxX: maxX, maxY: maxY, xPadding: xPadding, yPadding: 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 {?}
*/
printAll() {
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);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class LineGraphComponent {
/**
* @param {?} lineGraphService
* @param {?} globalParametersService
* @param {?} currentElement
*/
constructor(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 {?}
*/
setDimensions() {
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 {?} */
const host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
const 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 {?}
*/
setMinandMax() {
if (this.minX == null)
this.minX = Math.min(...this.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.x)));
if (this.maxX == null)
this.maxX = Math.max(...this.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.x)));
if (this.minY == null)
this.minY = Math.min(...this.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.y)));
if (this.maxY == null)
this.maxY = Math.max(...this.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.y)));
}
/**
* @return {?}
*/
transformData() {
this.transformedData = [];
for (const point of this.data) {
/** @type {?} */
const x = this.lineGraphService.transformX(point.x) + this.xPadding;
/** @type {?} */
const y = this.lineGraphService.transformY(this.lineGraphService.maxY - point.y) + this.yPadding;
/** @type {?} */
const toolTipX = x;
/** @type {?} */
const toolTipY = y - 30;
/** @type {?} */
const toolTip = point.info && (point.info !== '') ? 'block' : 'none';
this.transformedData.push({
x,
y,
info: point.info,
originalX: point.x,
originalY: point.y,
toolTipTranslate: 'translate(' + toolTipX + 'px, ' + toolTipY + 'px)',
toolTip
});
}
// console.log(this.transformedData);
}
/**
* @return {?}
*/
printAllInput() {
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 {?}
*/
setLinePath() {
// console.log(this.printAllInput());
this.graphLinePath = 'M';
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => a.x < b.x ? -1 : a.x > b.x ? 1 : 0));
for (const point of this.transformedData) {
// console.log(point);
/** @type {?} */
const coordX = point.x;
/** @type {?} */
const coordY = point.y;
this.graphLinePath += ' ' + coordX + ' ' + coordY;
// console.log(this.graphLinePath);
}
}
/**
* @return {?}
*/
setColor() {
if (!this.color) {
if (this.customColorScheme.length > 0) {
this.color = this.customColorScheme[0];
}
else {
this.color = colorSchemes[this.colorScheme][0];
}
}
}
/**
* @return {?}
*/
ngOnInit() {
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 {?}
*/
ngOnChanges() {
// 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: 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 = () => [
{ type: LineGraphService },
{ type: GlobalParametersService },
{ type: ElementRef }
];
LineGraphComponent.propDecorators = {
data: [{ type: Input }],
chartBase: [{ type: Input }],
width: [{ type: Input }],
height: [{ type: Input }],
color: [{ type: Input }],
colorScheme: [{ type: Input }],
minX: [{ type: Input }],
minY: [{ type: Input }],
maxX: [{ type: Input }],
maxY: [{ type: Input }],
gridPrecisionX: [{ type: Input }],
gridPrecisionY: [{ type: Input }],
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
customColorScheme: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class LgChartBaseComponent {
/**
* @param {?} lineGraphService
*/
constructor(lineGraphService) {
this.lineGraphService = lineGraphService;
}
/**
* @return {?}
*/
computeGrid() {
// 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 (let x = this.lineGraphService.minX; x <= this.lineGraphService.maxX; x = x + this.gridPrecisionX) {
/** @type {?} */
const xPos = this.lineGraphService.transformX(x) + this.lineGraphService.xPadding;
this.xAxis.push({ xPos, value: x });
}
for (let y = this.lineGraphService.minY; y <= this.lineGraphService.maxY; y = y + this.gridPrecisionY) {
/** @type {?} */
const yPos = this.lineGraphService.transformY(y) + this.lineGraphService.yPadding + 7;
this.yAxis.push({ yPos, value: this.lineGraphService.maxY - y });
}
}
/**
* @return {?}
*/
ngOnInit() {
this.computeGrid();
this.gridID = 'grid' + this.lineGraphService.componentID;
}
/**
* @return {?}
*/
ngOnChanges() {
this.computeGrid();
}
}
LgChartBaseComponent.decorators = [
{ type: 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 = () => [
{ type: LineGraphService }
];
LgChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
gridPrecisionX: [{ type: Input }],
gridPrecisionY: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
class MultiLineGraphService {
constructor() { }
/**
* @return {?}
*/
computeRectDimensions() {
this.rectHeight = this.height - this.yPadding * 4;
this.rectWidth = this.width * .6 - this.xPadding * 2;
}
/**
* @return {?}
*/
computeLegionDimensions() {
/** @type {?} */
const noOfLines = this.dataLength;
this.legionWidth = this.width * .4 - this.xPadding * 2;
this.legionHeight = 60 + 30 * noOfLines - 19;
}
/**
* @param {?} x
* @return {?}
*/
transformX(x) {
return this.rectWidth * x / (this.maxX - this.minX);
}
/**
* @param {?} y
* @return {?}
*/
transformY(y) {
return this.rectHeight * y / (this.maxY - this.minY);
}
/**
* @param {?} __0
* @return {?}
*/
setValues({ componentID: componentID, width: width, height: height, minX: minX, minY: minY, maxX: maxX, maxY: maxY, dataLength: dataLength, xPadding: xPadding, yPadding: 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 {?}
*/
printAll() {
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);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MultiLineGraphComponent {
/**
* @param {?} multiLineGraphService
* @param {?} globalParametersService
* @param {?} currentElement
*/
constructor(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 {?}
*/
setDimensions() {
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 {?} */
const host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
const 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 {?}
*/
setMinandMax() {
if (this.minX == null)
this.minX = Math.min(...this.data.map((/**
* @param {?} line
* @return {?}
*/
line => Math.min(...line.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.x))))));
if (this.maxX == null)
this.maxX = Math.max(...this.data.map((/**
* @param {?} line
* @return {?}
*/
line => Math.max(...line.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.x))))));
if (this.minY == null)
this.minY = Math.min(...this.data.map((/**
* @param {?} line
* @return {?}
*/
line => Math.min(...line.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.y))))));
if (this.maxY == null)
this.maxY = Math.max(...this.data.map((/**
* @param {?} line
* @return {?}
*/
line => Math.max(...line.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.y))))));
}
/**
* @return {?}
*/
transformData() {
this.transformedData = [];
for (const singleLine of this.data) {
/** @type {?} */
let lineData;
lineData = [];
for (const point of singleLine.data) {
/** @type {?} */
const x = this.multiLineGraphService.transformX(point.x) + this.xPadding;
/** @type {?} */
const y = this.multiLineGraphService.transformY(this.multiLineGraphService.maxY - point.y) + this.yPadding;
/** @type {?} */
const toolTipX = x;
/** @type {?} */
const toolTipY = y - 30;
/** @type {?} */
const toolTip = point.info && (point.info !== '') ? 'block' : 'none';
lineData.push({
x,
y,
info: point.info,
originalX: point.x,
originalY: point.y,
toolTipTranslate: 'translate(' + toolTipX + 'px, ' + toolTipY + 'px)',
toolTip
});
}
this.transformedData.push({
name: singleLine.name,
color: singleLine.color,
data: lineData
});
}
}
/**
* @return {?}
*/
setLinePath() {
// console.log(this.printAllInput());
this.graphLinePaths = [];
for (const singleLine of this.transformedData) {
/** @type {?} */
let graphLinePath = 'M';
/** @type {?} */
let singleLineData;
singleLineData = singleLine.data;
singleLineData.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => a.x < b.x ? -1 : a.x > b.x ? 1 : 0));
for (const point of singleLineData) {
// console.log(point);
/** @type {?} */
const coordX = point.x;
/** @type {?} */
const coordY = point.y;
graphLinePath += ' ' + coordX + ' ' + coordY;
// console.log(graphLinePath);
}
this.graphLinePaths.push({
color: singleLine.color,
path: graphLinePath
});
}
}
/**
* @return {?}
*/
setColors() {
/** @type {?} */
let cnt = 0;
for (const line of this.data) {
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++;
}
}
/**
* @return {?}
*/
ngOnInit() {
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 {?}
*/
ngOnChanges() {
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: 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 = () => [
{ type: MultiLineGraphService },
{ type: GlobalParametersService },
{ type: ElementRef }
];
MultiLineGraphComponent.propDecorators = {
data: [{ type: Input }],
width: [{ type: Input }],
height: [{ type: Input }],
colorScheme: [{ type: Input }],
minX: [{ type: Input }],
minY: [{ type: Input }],
maxX: [{ type: Input }],
maxY: [{ type: Input }],
gridPrecisionX: [{ type: Input }],
gridPrecisionY: [{ type: Input }],
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
customColorScheme: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MlgChartBaseComponent {
/**
* @param {?} multiLineGraphService
*/
constructor(multiLineGraphService) {
this.multiLineGraphService = multiLineGraphService;
}
/**
* @return {?}
*/
computeLegionXs() {
this.x1 = this.multiLineGraphService.rectWidth
+ 2 * this.multiLineGraphService.xPadding
+ this.multiLineGraphService.legionWidth / 4 * .2;
this.x2 = this.multiLineGraphService.rectWidth
+ 2 * this.multiLineGraphService.xPadding
+ this.multiLineGraphService.legionWidth / 4 * .8;
}
/**
* @return {?}
*/
computeGrid() {
// maxX - minX --> gridPrecisionX
// width --> gridWidthX
this.gridWidthX = this.multiLineGraphService.transformX(this.gridPrecisionX);
this.gridWidthY = this.multiLineGraphService.transformY(this.gridPrecisionY);
this.gridPath = 'M ' + this.gridWidthX + ' 0 L 0 0 0 ' + this.gridWidthY;
this.xAxis = [];
this.yAxis = [];
for (let x = this.multiLineGraphService.minX; x <= this.multiLineGraphService.maxX; x = x + this.gridPrecisionX) {
/** @type {?} */
const xPos = this.multiLineGraphService.transformX(x) + this.multiLineGraphService.xPadding;
this.xAxis.push({ xPos, value: x });
}
for (let y = this.multiLineGraphService.minY; y <= this.multiLineGraphService.maxY; y = y + this.gridPrecisionY) {
/** @type {?} */
const yPos = this.multiLineGraphService.transformY(y) + this.multiLineGraphService.yPadding + 7;
this.yAxis.push({ yPos, value: this.multiLineGraphService.maxY - y });
}
}
/**
* @param {?} i
* @return {?}
*/
computeLegionPath(i) {
/** @type {?} */
let path = 'M ';
/** @type {?} */
const y = this.multiLineGraphService.yPadding + 35 + 30 * i;
path = path + this.x1 + ' ' + y + ' ' + this.x2 + ' ' + y;
return path;
}
/**
* @return {?}
*/
ngOnInit() {
this.computeGrid();
this.gridID = 'grid' + this.multiLineGraphService.componentID;
this.computeLegionXs();
}
/**
* @return {?}
*/
ngOnChanges() {
this.computeGrid();
this.computeLegionXs();
}
}
MlgChartBaseComponent.decorators = [
{ type: Component, args: [{
selector: 'g[ngx-mlg-chart-base]',
template: "<svg:pattern [attr.id]=\"gridID\" \n[attr.x]=\"multiLineGraphService.xPadding\" [attr.y]=\"multiLineGraphService.yPadding\" \n[attr.width]=\"gridWidthX\" [attr.height]=\"gridWidthY\" \npatternUnits=\"userSpaceOnUse\">\n <svg:path [attr.d]=\"gridPath\" fill=\"none\" stroke=\"#444444\" stroke-width=\"0.5\" />\n</svg:pattern>\n\n<svg:rect [attr.x]=\"multiLineGraphService.xPadding\" \n[attr.y]=\"multiLineGraphService.yPadding\" \n[attr.width]=\"multiLineGraphService.rectWidth\" \n[attr.height]=\"multiLineGraphService.rectHeight\" \nstroke=\"#444444\" [attr.fill]=\"'url(#' + gridID + ')'\" stroke-width=\"1\"/>\n\n<svg:text\n*ngFor=\"let x of xAxis\" class=\"axis-text\" \n[attr.x]=\"x.xPos\" [attr.y]=\"multiLineGraphService.rectHeight+multiLineGraphService.yPadding+30\" class=\"small\" text-anchor=\"middle\"> {{ x.value }} </svg:text>\n\n<svg:text\n*ngFor=\"let y of yAxis\" class=\"axis-text\" \n[attr.y]=\"y.yPos\" [attr.x]=\"multiLineGraphService.xPadding-30\" class=\"small\">{{ y.value }}</svg:text>\n\n<!-- x Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"multiLineGraphService.rectWidth/2+multiLineGraphService.xPadding\" [attr.y]=\"multiLineGraphService.rectHeight+multiLineGraphService.yPadding+60\" dominant-baseline=\"middle\" text-anchor=\"middle\"> \n {{ xAxisTitle }} \n</svg:text>\n\n<!-- y Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"-multiLineGraphService.rectHeight/2-multiLineGraphService.yPadding\" [attr.y]=\"multiLineGraphService.xPadding-50\" dominant-baseline=\"middle\" text-anchor=\"middle\" transform=\"rotate(270)\"> \n {{ yAxisTitle }} \n</svg:text>\n\n\n<!-- Legion -->\n<svg:rect [attr.x]=\"2*multiLineGraphService.xPadding + multiLineGraphService.rectWidth\" \n[attr.y]=\"multiLineGraphService.yPadding\" \n[attr.width]=\"multiLineGraphService.legionWidth\" \n[attr.height]=\"multiLineGraphService.legionHeight\" \nfill=\"#f1f1f1\" />\n\n\n<svg:g *ngFor=\"let x of data; index as i\">\n <svg:path class=\"legion-line\" [attr.d]=\"computeLegionPath(i)\" fill=\"none\" [attr.stroke]=\"x.color\" />\n <svg:text class=\"axis-text\" \n [attr.x]=\"multiLineGraphService.rectWidth + 2*multiLineGraphService.xPadding + multiLineGraphService.legionWidth / 4\" \n [attr.y]=\"multiLineGraphService.yPadding+40+30*i\" class=\"small\"> {{ x.name }} </svg:text>\n</svg:g>\n\n\n",
styles: [".legion-line{stroke-width:3px}"]
}] }
];
/** @nocollapse */
MlgChartBaseComponent.ctorParameters = () => [
{ type: MultiLineGraphService }
];
MlgChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
gridPrecisionX: [{ type: Input }],
gridPrecisionY: [{ type: Input }],
data: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
class BarChartService {
constructor() { }
/**
* @return {?}
*/
computeRectDimensions() {
this.rectHeight = this.height - this.yPadding * 4;
this.rectWidth = this.width - this.xPadding * 2;
}
/**
* @param {?} y
* @return {?}
*/
transformY(y) {
return this.rectHeight * y / (this.maxY - this.minY);
}
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
closestMultipleLessThanEqualTo(factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleLessThanEqualTo(factor, num - 1);
}
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
closestMultipleMoreThanEqualTo(factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleMoreThanEqualTo(factor, num + 1);
}
/**
* @param {?} __0
* @return {?}
*/
setValues({ componentID: componentID, width: width, height: height, xPadding: xPadding, yPadding: yPadding, data: 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 {?} */
const minVal = Math.min(...this.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.value)));
/** @type {?} */
const maxVal = Math.max(...this.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.value)));
/** @type {?} */
const range = maxVal - minVal;
/** @type {?} */
const limInc = 10;
/** @type {?} */
let 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 {?}
*/
printAll() {
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);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class BarChartComponent {
/**
* @param {?} barChartService
* @param {?} globalParametersService
* @param {?} currentElement
*/
constructor(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 {?}
*/
computeBarPaths() {
this.barPaths = [];
/** @type {?} */
const noOfXAxisValues = this.data.length;
/** @type {?} */
const eachWidth = this.barChartService.rectWidth / noOfXAxisValues;
/** @type {?} */
const barWidth = eachWidth * .25;
/** @type {?} */
let cnt = -1;
/** @type {?} */
let barPath = '';
for (const bcD of this.data) {
cnt++;
/** @type {?} */
const xPos = cnt * eachWidth + eachWidth / 2 + this.xPadding;
/** @type {?} */
const yPos = this.barChartService.transformY(this.barChartService.maxY - bcD.value) + this.yPadding;
/** @type {?} */
const xStart = xPos - barWidth / 2;
/** @type {?} */
const xEnd = xPos + barWidth / 2;
/** @type {?} */
const yStart = this.barChartService.rectHeight + this.yPadding;
barPath = 'M ';
barPath = barPath + ' ' + xStart + ' ' + yStart + ' L ' + xStart
+ ' ' + yPos + ' ' + xEnd + ' ' + yPos + ' ' + xEnd + ' ' + yStart + ' Z';
this.barPaths.push(barPath);
}
}
/**
* @return {?}
*/
setColor() {
if (!this.color) {
if (this.customColorScheme.length > 0) {
this.color = this.customColorScheme[0];
}
else {
this.color = colorSchemes[this.colorScheme][0];
}
}
}
/**
* @return {?}
*/
setDimensions() {
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 {?} */
const host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
const 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 {?}
*/
ngOnInit() {
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 {?}
*/
ngOnChanges() {
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: 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 = () => [
{ type: BarChartService },
{ type: GlobalParametersService },
{ type: ElementRef }
];
BarChartComponent.propDecorators = {
data: [{ type: Input }],
width: [{ type: Input }],
height: [{ type: Input }],
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
showGridLines: [{ type: Input }],
color: [{ type: Input }],
colorScheme: [{ type: Input }],
customColorScheme: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class BcChartBaseComponent {
/**
* @param {?} barChartService
*/
constructor(barChartService) {
this.barChartService = barChartService;
}
/**
* @return {?}
*/
computeGrid() {
this.yLevelPaths = [];
this.xAxis = [];
this.yAxis = [];
for (let y = this.barChartService.minY; y <= this.barChartService.maxY; y = y + this.barChartService.diff) {
/** @type {?} */
const rectEnd = this.barChartService.xPadding + this.barChartService.rectWidth;
/** @type {?} */
const yTransformed = this.barChartService.transformY(this.barChartService.maxY - y) + this.barChartService.yPadding;
/** @type {?} */
const 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 {?} */
let noOfXAxisValues;
noOfXAxisValues = this.barChartService.data.length;
/** @type {?} */
const eachWidth = this.barChartService.rectWidth / noOfXAxisValues;
/** @type {?} */
let cnt = -1;
for (const bcD of this.barChartService.data) {
cnt++;
/** @type {?} */
const xPos = cnt * eachWidth + eachWidth / 2 + this.barChartService.xPadding;
this.xAxis.push({ xPos, value: bcD.name });
}
// 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 {?}
*/
ngOnInit() {
this.computeGrid();
}
/**
* @return {?}
*/
ngOnChanges() {
this.computeGrid();
}
}
BcChartBaseComponent.decorators = [
{ type: Component, args: [{
selector: 'g[ngx-bc-chart-base]',
template: "<!-- <svg:pattern [attr.id]=\"gridID\" \n[attr.x]=\"barChartService.xPadding\" [attr.y]=\"barChartService.yPadding\" \n[attr.width]=\"gridWidthX\" [attr.height]=\"gridWidthY\" \npatternUnits=\"userSpaceOnUse\">\n <svg:path [attr.d]=\"gridPath\" fill=\"none\" stroke=\"#444444\" stroke-width=\"0.5\" />\n</svg:pattern> -->\n\n<svg:rect [attr.x]=\"barChartService.xPadding\" \n[attr.y]=\"barChartService.yPadding\" \n[attr.width]=\"barChartService.rectWidth\" \n[attr.height]=\"barChartService.rectHeight\" \nstroke=\"#444444\" fill=\"none\" stroke-width=\"1\"/>\n\n<svg:g *ngIf=\"showGridLines\">\n <svg:path *ngFor=\"let yLevelPath of yLevelPaths\"\n class=\"bar-chart-level\"\n [attr.d]=\"yLevelPath\" fill=\"none\" stroke=\"#444444\" />\n</svg:g>\n\n<svg:text\n*ngFor=\"let x of xAxis\" class=\"axis-text\" \n[attr.x]=\"x.xPos\" [attr.y]=\"barChartService.rectHeight+barChartService.yPadding+30\" class=\"small\"\ntext-anchor=\"middle\" dominant-baseline=\"middle\"> {{ x.value }} </svg:text>\n\n<svg:text\n*ngFor=\"let y of yAxis\" class=\"axis-text\" \n[attr.y]=\"y.yPos\" [attr.x]=\"barChartService.xPadding-30\" class=\"small\">{{ y.value }}</svg:text>\n\n<!-- x Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"barChartService.rectWidth/2+barChartService.xPadding\" \n [attr.y]=\"barChartService.rectHeight+barChartService.yPadding+60\" dominant-baseline=\"middle\" text-anchor=\"middle\"> \n {{ xAxisTitle }} \n</svg:text>\n\n<!-- y Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"-barChartService.rectHeight/2-barChartService.yPadding\" \n [attr.y]=\"barChartService.xPadding-50\" dominant-baseline=\"middle\" text-anchor=\"middle\" transform=\"rotate(270)\"> \n {{ yAxisTitle }} \n</svg:text>\n\n\n<!-- Legion -->\n<!-- <svg:rect [attr.x]=\"2*barChartService.xPadding + barChartService.rectWidth\" \n[attr.y]=\"barChartService.yPadding\" \n[attr.width]=\"beautifulChartsService.legionWidth\" \n[attr.height]=\"beautifulChartsService.legionHeight\" \nfill=\"#f1f1f1\" />\n\n\n<svg:g *ngFor=\"let x of beautifulChartsService.data; index as i\">\n <svg:rect *ngIf=\"beautifulChartsService.legionWidth\" \n [attr.x]=\"barChartService.rectWidth + 2*barChartService.xPadding + beautifulChartsService.legionWidth / 4 * .3\" \n [attr.y]=\"barChartService.yPadding+25+30*i\" \n [attr.width]=\"beautifulChartsService.legionWidth / 4 * .4\" \n [attr.height]=\"beautifulChartsService.legionWidth / 4 * .4\" \n [attr.fill]=\"x.color\" />\n <svg:text class=\"axis-text\" *ngIf=\"beautifulChartsService.legionWidth\" \n [attr.x]=\"barChartService.rectWidth + 2*barChartService.xPadding + beautifulChartsService.legionWidth / 4\" \n [attr.y]=\"barChartService.yPadding+40+30*i\" class=\"small\"> {{ x.series }} </svg:text>\n</svg:g> -->\n\n",
styles: [".bar-chart-level{stroke-width:.3;stroke-dasharray:5}"]
}] }
];
/** @nocollapse */
BcChartBaseComponent.ctorParameters = () => [
{ type: BarChartService }
];
BcChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
showGridLines: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
class ClusteredBarChartService {
constructor() { }
/**
* @return {?}
*/
computeRectDimensions() {
this.rectHeight = this.height - this.yPadding * 4;
this.rectWidth = this.width * .7 - this.xPadding * 2;
}
/**
* @return {?}
*/
computeLegionDimensions() {
/** @type {?} */
const noOfLines = this.data.length;
this.legionWidth = this.width * .3 - this.xPadding * 2;
this.legionHeight = 60 + 30 * noOfLines - 19;
}
/**
* @param {?} y
* @return {?}
*/
transformY(y) {
return this.rectHeight * y / (this.maxY - this.minY);
}
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
closestMultipleLessThanEqualTo(factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleLessThanEqualTo(factor, num - 1);
}
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
closestMultipleMoreThanEqualTo(factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleMoreThanEqualTo(factor, num + 1);
}
/**
* @param {?} __0
* @return {?}
*/
setValues({ componentID: componentID, width: width, height: height, xPadding: xPadding, yPadding: yPadding, data: 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 {?} */
let minVals = [];
/** @type {?} */
let maxVals = [];
minVals = [];
maxVals = [];
for (const bcD of this.data) {
/** @type {?} */
const min = Math.min(...bcD.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.value)));
/** @type {?} */
const max = Math.max(...bcD.data.map((/**
* @param {?} oneData
* @return {?}
*/
oneData => oneData.value)));
minVals.push(min);
maxVals.push(max);
}
/** @type {?} */
const minVal = Math.min(...minVals);
/** @type {?} */
const maxVal = Math.max(...maxVals);
/** @type {?} */
const range = maxVal - minVal;
/** @type {?} */
const limInc = 10;
/** @type {?} */
let 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 {?}
*/
printAll() {
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);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ClusteredBarChartComponent {
/**
* @param {?} clusteredBarChartService
* @param {?} globalParametersService
* @param {?} currentElement
*/
constructor(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[]}];
/**
* @return {?}
*/
setDimensions() {
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 {?} */
const host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
const 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 {?}
*/
computeBarPaths() {
this.barPaths = [];
/** @type {?} */
let uniqueXAxisValues;
/** @type {?} */
let noOfXAxisValues;
uniqueXAxisValues = new Set();
for (const series of this.data) {
/** @type {?} */
const seriesData = series.data;
for (const sData of seriesData) {
uniqueXAxisValues.add(sData.name);
}
}
noOfXAxisValues = uniqueXAxisValues.size;
/** @type {?} */
const noOfSeries = this.data.length;
/** @type {?} */
const eachWidth = this.clusteredBarChartService.rectWidth / noOfXAxisValues;
/** @type {?} */
const categoryWidth = eachWidth * .5;
/** @type {?} */
const barWidth = categoryWidth / noOfSeries;
/** @type {?} */
let cnt = -1;
/** @type {?} */
let barPath = '';
/** @type {?} */
let cntSeries = -1;
for (const bcS of this.data) {
cntSeries++;
cnt = -1;
/** @type {?} */
let seriesPaths;
seriesPaths = [];
for (const bcD of bcS.data) {
cnt++;
/** @type {?} */
const xPos = cnt * eachWidth + .25 * eachWidth + cntSeries * barWidth + .5 * barWidth + this.xPadding;
/** @type {?} */
const yPos = this.clusteredBarChartService.transformY(this.clusteredBarChartService.maxY - bcD.value) + this.yPadding;
/** @type {?} */
const xStart = xPos - barWidth / 2;
/** @type {?} */
const xEnd = xPos + barWidth / 2;
/** @type {?} */
const yStart = this.clusteredBarChartService.rectHeight + this.yPadding;
barPath = 'M ';
barPath = barPath + ' ' + xStart + ' ' + yStart + ' L ' + xStart
+ ' ' + yPos + ' ' + xEnd + ' ' + yPos + ' ' + xEnd + ' ' + yStart + ' Z';
seriesPaths.push(barPath);
}
this.barPaths.push({ color: bcS.color, paths: seriesPaths });
}
}
/**
* @return {?}
*/
setColors() {
/** @type {?} */
let cnt = 0;
for (const seriesData of this.data) {
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++;
}
}
}
/**
* @return {?}
*/
ngOnInit() {
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 {?}
*/
ngOnChanges() {
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: 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 = () => [
{ type: ClusteredBarChartService },
{ type: GlobalParametersService },
{ type: ElementRef }
];
ClusteredBarChartComponent.propDecorators = {
data: [{ type: Input }],
width: [{ type: Input }],
height: [{ type: Input }],
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
showGridLines: [{ type: Input }],
colorScheme: [{ type: Input }],
customColorScheme: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CbcChartBaseComponent {
/**
* @param {?} clusteredBarChartService
*/
constructor(clusteredBarChartService) {
this.clusteredBarChartService = clusteredBarChartService;
}
/**
* @return {?}
*/
computeGrid() {
this.yLevelPaths = [];
this.xAxis = [];
this.yAxis = [];
for (let y = this.clusteredBarChartService.minY; y <= this.clusteredBarChartService.maxY; y = y + this.clusteredBarChartService.diff) {
/** @type {?} */
const rectEnd = this.clusteredBarChartService.xPadding + this.clusteredBarChartService.rectWidth;
/** @type {?} */
const yTransformed = this.clusteredBarChartService.transformY(this.clusteredBarChartService.maxY - y)
+ this.clusteredBarChartService.yPadding;
/** @type {?} */
const path = 'M ' + this.clusteredBarChartService.xPadding + ' ' + yTransformed + ' L ' + rectEnd + ' ' + yTransformed;
this.yLevelPaths.push(path);
this.yAxis.push({ yPos: yTransformed, value: y });
}
// console.log('diff: ' + this.clusteredBarChartService.diff);
// console.log(this.yAxis);
// now the x axis :)
// let noOfXAxisValues;
// noOfXAxisValues = this.clusteredBarChartService.data.length;
// const eachWidth = this.clusteredBarChartService.rectWidth / noOfXAxisValues;
// let cnt = -1;
// for (const bcD of this.clusteredBarChartService.data) {
// cnt ++;
// const xPos = cnt * eachWidth + eachWidth / 2 + this.clusteredBarChartService.xPadding;
// this.xAxis.push({xPos, value: bcD.name});
// }
/** @type {?} */
let noOfXAxisValues;
/** @type {?} */
let uniqueXAxisValues;
uniqueXAxisValues = new Set();
for (const series of this.clusteredBarChartService.data) {
/** @type {?} */
const seriesData = series.data;
for (const sData of seriesData) {
uniqueXAxisValues.add(sData.name);
}
}
noOfXAxisValues = uniqueXAxisValues.size;
/** @type {?} */
const eachWidth = this.clusteredBarChartService.rectWidth / noOfXAxisValues;
/** @type {?} */
let cnt = -1;
for (const xAxisValue of uniqueXAxisValues) {
cnt++;
/** @type {?} */
const xPos = cnt * eachWidth + eachWidth / 2 + this.clusteredBarChartService.xPadding;
this.xAxis.push({ xPos, value: xAxisValue });
}
}
/**
* @return {?}
*/
ngOnInit() {
this.computeGrid();
}
/**
* @return {?}
*/
ngOnChanges() {
this.computeGrid();
}
}
CbcChartBaseComponent.decorators = [
{ type: Component, args: [{
selector: 'g[ngx-cbc-chart-base]',
template: "<!-- <svg:pattern [attr.id]=\"gridID\" \n[attr.x]=\"clusteredBarChartService.xPadding\" [attr.y]=\"clusteredBarChartService.yPadding\" \n[attr.width]=\"gridWidthX\" [attr.height]=\"gridWidthY\" \npatternUnits=\"userSpaceOnUse\">\n <svg:path [attr.d]=\"gridPath\" fill=\"none\" stroke=\"#444444\" stroke-width=\"0.5\" />\n</svg:pattern> -->\n\n<svg:rect [attr.x]=\"clusteredBarChartService.xPadding\" \n[attr.y]=\"clusteredBarChartService.yPadding\" \n[attr.width]=\"clusteredBarChartService.rectWidth\" \n[attr.height]=\"clusteredBarChartService.rectHeight\" \nstroke=\"#444444\" fill=\"none\" stroke-width=\"1\"/>\n\n<svg:g *ngIf=\"showGridLines\">\n <svg:path *ngFor=\"let yLevelPath of yLevelPaths\"\n class=\"bar-chart-level\"\n [attr.d]=\"yLevelPath\" fill=\"none\" stroke=\"#444444\" />\n</svg:g>\n\n<svg:text\n*ngFor=\"let x of xAxis\" class=\"axis-text\" \n[attr.x]=\"x.xPos\" [attr.y]=\"clusteredBarChartService.rectHeight+clusteredBarChartService.yPadding+30\" class=\"small\"\ntext-anchor=\"middle\" dominant-baseline=\"middle\"> {{ x.value }} </svg:text>\n\n<svg:text\n*ngFor=\"let y of yAxis\" class=\"axis-text\" \n[attr.y]=\"y.yPos\" [attr.x]=\"clusteredBarChartService.xPadding-30\" class=\"small\">{{ y.value }}</svg:text>\n\n<!-- x Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"clusteredBarChartService.rectWidth/2+clusteredBarChartService.xPadding\" \n [attr.y]=\"clusteredBarChartService.rectHeight+clusteredBarChartService.yPadding+60\" dominant-baseline=\"middle\" text-anchor=\"middle\"> \n {{ xAxisTitle }} \n</svg:text>\n\n<!-- y Axis Title -->\n<svg:text class=\"axis-text\" \n [attr.x]=\"-clusteredBarChartService.rectHeight/2-clusteredBarChartService.yPadding\" \n [attr.y]=\"clusteredBarChartService.xPadding-50\" dominant-baseline=\"middle\" text-anchor=\"middle\" transform=\"rotate(270)\"> \n {{ yAxisTitle }} \n</svg:text>\n\n\n<!-- Legion -->\n<svg:rect [attr.x]=\"2*clusteredBarChartService.xPadding + clusteredBarChartService.rectWidth\" \n[attr.y]=\"clusteredBarChartService.yPadding\" \n[attr.width]=\"clusteredBarChartService.legionWidth\" \n[attr.height]=\"clusteredBarChartService.legionHeight\" \nfill=\"#f1f1f1\" />\n\n\n<svg:g *ngFor=\"let x of clusteredBarChartService.data; index as i\">\n <svg:rect *ngIf=\"clusteredBarChartService.legionWidth\" \n [attr.x]=\"clusteredBarChartService.rectWidth + 2*clusteredBarChartService.xPadding + clusteredBarChartService.legionWidth / 4 * .3\" \n [attr.y]=\"clusteredBarChartService.yPadding+25+30*i\" \n [attr.width]=\"clusteredBarChartService.legionWidth / 4 * .4\" \n [attr.height]=\"clusteredBarChartService.legionWidth / 4 * .4\" \n [attr.fill]=\"x.color\" />\n <svg:text class=\"axis-text\" *ngIf=\"clusteredBarChartService.legionWidth\" \n [attr.x]=\"clusteredBarChartService.rectWidth + 2*clusteredBarChartService.xPadding + clusteredBarChartService.legionWidth / 4\" \n [attr.y]=\"clusteredBarChartService.yPadding+40+30*i\" class=\"small\"> {{ x.series }} </svg:text>\n</svg:g>\n\n",
styles: [".bar-chart-level{stroke-width:.3;stroke-dasharray:5}"]
}] }
];
/** @nocollapse */
CbcChartBaseComponent.ctorParameters = () => [
{ type: ClusteredBarChartService }
];
CbcChartBaseComponent.propDecorators = {
xAxisTitle: [{ type: Input }],
yAxisTitle: [{ type: Input }],
showGridLines: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
class PieChartService {
constructor() { }
/**
* @return {?}
*/
computeRectDimensions() {
this.rectWidth = this.width * .6 - this.xPadding * 2;
this.rectHeight = this.rectWidth;
}
/**
* @return {?}
*/
computeLegionDimensions() {
/** @type {?} */
const noOfLines = this.data.length;
this.legionWidth = this.width * .4 - this.xPadding * 2;
this.legionHeight = 60 + 30 * noOfLines - 19;
}
/**
* @param {?} __0
* @return {?}
*/
setValues({ componentID: componentID, width: width, height: height, xPadding: xPadding, yPadding: yPadding, data: 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 {?}
*/
printAll() {
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);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class PieChartComponent {
/**
* @param {?} pieChartService
* @param {?} globalParametersService
* @param {?} currentElement
*/
constructor(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 {?}
*/
generatePieSlices(pieCompletion) {
if (this.pieSlicesInit === 0)
this.pieSlices = [];
/** @type {?} */
let sum = 0;
for (const val of this.data) {
sum = sum + val.value;
}
/** @type {?} */
let rotation = 0;
/** @type {?} */
let rotationRad = 0;
/** @type {?} */
let cnt = 0;
for (const val of this.data) {
// console.log(val);
/** @type {?} */
const perc = val.value / sum * pieCompletion;
/** @type {?} */
const angle = 360 * perc;
// const angleMod = (angle > 180 ) ? 360 - angle : angle;
/** @type {?} */
const angleRad = angle * Math.PI / 180;
/** @type {?} */
const largeArc = (angle > 180) ? 1 : 0;
/** @type {?} */
const 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 {?} */
const 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 {?} */
const pieInteriorX = this.pieRadius * 2 / 3 * Math.sin(rotationRad + angleRad / 2);
/** @type {?} */
const pieInteriorY = -this.pieRadius * 2 / 3 * Math.cos(rotationRad + angleRad / 2);
/** @type {?} */
const toolTipText = (Math.round(perc * 10000) / 100).toString() + '%';
/** @type {?} */
const pieSlice = {
perc,
name: val.name,
color: val.color,
hoverD: hoverPath,
rotation: 'rotate(' + rotation + 'deg)',
d: path,
hover: false,
toolTipTranslate: 'translate(' + pieInteriorX + 'px, ' + pieInteriorY + 'px)',
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++;
}
}
/**
* @return {?}
*/
setDimensions() {
if (this.width)
this.height = this.width * .6 - this.xPadding;
else {
/** @type {?} */
const host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
const 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 {?}
*/
setColors() {
/** @type {?} */
let cnt = 0;
for (const slice of this.data) {
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++;
}
}
/**
* @return {?}
*/
ngOnInit() {
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 {?}
*/
(a, b) => 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 {?} */
let pieCompletion = 0;
/** @type {?} */
const intervalID = setInterval((/**
* @return {?}
*/
() => {
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 {?} */
const translateX = this.xPadding + this.pieRadius;
/** @type {?} */
const translateY = this.yPadding + this.pieRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
const hoverTranslateXY = this.pieRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
}
/**
* @return {?}
*/
ngOnChanges() {
this.data = JSON.parse(JSON.stringify(this.data));
// console.log('x: ' + this.x);
this.setDimensions();
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => 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 {?} */
let pieCompletion = 0;
/** @type {?} */
const intervalID = setInterval((/**
* @return {?}
*/
() => {
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 {?} */
const translateX = this.xPadding + this.pieRadius;
/** @type {?} */
const translateY = this.yPadding + this.pieRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
const hoverTranslateXY = this.pieRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
}
}
PieChartComponent.decorators = [
{ type: 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 = () => [
{ type: PieChartService },
{ type: GlobalParametersService },
{ type: ElementRef }
];
PieChartComponent.propDecorators = {
data: [{ type: Input }],
width: [{ type: Input }],
colorScheme: [{ type: Input }],
customColorScheme: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class PieChartBaseComponent {
/**
* @param {?} pieChartService
*/
constructor(pieChartService) {
this.pieChartService = pieChartService;
}
/**
* @return {?}
*/
computeLegionXs() {
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 {?}
*/
computeLegionPath(i) {
/** @type {?} */
let path = 'M ';
/** @type {?} */
const y = this.pieChartService.yPadding + 25 + 30 * i;
path = path + this.x1 + ' ' + y + ' ' + this.x2 + ' ' + y;
return path;
}
/**
* @return {?}
*/
ngOnInit() {
this.computeLegionXs();
}
/**
* @return {?}
*/
ngOnChanges() {
this.computeLegionXs();
}
}
PieChartBaseComponent.decorators = [
{ type: 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 = () => [
{ type: PieChartService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
class DonutChartService {
constructor() { }
/**
* @return {?}
*/
computeRectDimensions() {
this.rectWidth = this.width * .6 - this.xPadding * 2;
this.rectHeight = this.rectWidth;
}
/**
* @return {?}
*/
computeLegionDimensions() {
/** @type {?} */
const noOfLines = this.data.length;
this.legionWidth = this.width * .4 - this.xPadding * 2;
this.legionHeight = 60 + 30 * noOfLines - 19;
}
/**
* @param {?} __0
* @return {?}
*/
setValues({ componentID: componentID, width: width, height: height, xPadding: xPadding, yPadding: yPadding, data: 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 {?}
*/
printAll() {
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);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DonutChartComponent {
/**
* @param {?} donutChartService
* @param {?} globalParametersService
* @param {?} currentElement
*/
constructor(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 {?}
*/
generateDonutSlices(donutCompletion) {
if (this.donutSlicesInit === 0)
this.donutSlices = [];
/** @type {?} */
let sum = 0;
for (const val of this.data) {
sum = sum + val.value;
}
/** @type {?} */
let rotation = 0;
/** @type {?} */
let cnt = 0;
for (const val of this.data) {
// console.log(val);
/** @type {?} */
const perc = val.value / sum * donutCompletion;
/** @type {?} */
const angle = 360 * perc;
/** @type {?} */
const angleRad = angle * Math.PI / 180;
/** @type {?} */
const largeArc = (angle > 180) ? 1 : 0;
/** @type {?} */
const 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 {?} */
const 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 {?} */
const donutSlice = {
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++;
}
}
/**
* @return {?}
*/
setDimensions() {
if (this.width)
this.height = this.width * .6 - this.xPadding;
else {
/** @type {?} */
const host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
const 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 {?}
*/
setColors() {
/** @type {?} */
let cnt = 0;
for (const slice of this.data) {
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++;
}
}
}
/**
* @return {?}
*/
ngOnInit() {
this.data = JSON.parse(JSON.stringify(this.data));
this.componentID = this.globalParametersService.addNewComponent();
this.setDimensions();
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => 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 {?} */
let donutCompletion = 0;
/** @type {?} */
const intervalID = setInterval((/**
* @return {?}
*/
() => {
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 {?} */
const translateX = this.xPadding + this.donutRadius;
/** @type {?} */
const translateY = this.yPadding + this.donutRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
const hoverTranslateXY = this.donutRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
}
/**
* @return {?}
*/
ngOnChanges() {
this.data = JSON.parse(JSON.stringify(this.data));
this.setDimensions();
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => 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 {?} */
let donutCompletion = 0;
/** @type {?} */
const intervalID = setInterval((/**
* @return {?}
*/
() => {
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 {?} */
const translateX = this.xPadding + this.donutRadius;
/** @type {?} */
const translateY = this.yPadding + this.donutRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
const hoverTranslateXY = this.donutRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
}
}
DonutChartComponent.decorators = [
{ type: 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 = () => [
{ type: DonutChartService },
{ type: GlobalParametersService },
{ type: ElementRef }
];
DonutChartComponent.propDecorators = {
data: [{ type: Input }],
width: [{ type: Input }],
colorScheme: [{ type: Input }],
customColorScheme: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DonutChartBaseComponent {
/**
* @param {?} donutChartService
*/
constructor(donutChartService) {
this.donutChartService = donutChartService;
}
/**
* @return {?}
*/
computeLegionXs() {
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 {?}
*/
computeLegionPath(i) {
/** @type {?} */
let path = 'M ';
/** @type {?} */
const y = this.donutChartService.yPadding + 25 + 30 * i;
path = path + this.x1 + ' ' + y + ' ' + this.x2 + ' ' + y;
return path;
}
/**
* @return {?}
*/
ngOnInit() {
this.computeLegionXs();
}
/**
* @return {?}
*/
ngOnChanges() {
this.computeLegionXs();
}
}
DonutChartBaseComponent.decorators = [
{ type: 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 = () => [
{ type: DonutChartService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
class SunburstChartService {
constructor() { }
/**
* @return {?}
*/
computeRectDimensions() {
this.rectWidth = this.width - this.xPadding * 2;
this.rectHeight = this.rectWidth;
}
/**
* @param {?} __0
* @return {?}
*/
setValues({ componentID: componentID, width: width, height: height, xPadding: xPadding, yPadding: yPadding, data: 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 {?}
*/
printAll() {
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);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SunburstChartComponent {
/**
* @param {?} sunburstChartService
* @param {?} globalParametersService
* @param {?} currentElement
*/
constructor(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 {?}
*/
getRefinedData(data, i, color = null) {
for (const sbData of data) {
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 {?}
*/
child => child.value)).reduce((/**
* @param {?} sum
* @param {?} curr
* @return {?}
*/
(sum, curr) => sum + curr));
}
else {
if (!sbData.value)
sbData.value = 0;
}
}
else if (!sbData.value)
sbData.value = 0;
}
return data;
}
/**
* @return {?}
*/
setDimensions() {
if (this.width)
this.height = this.width - this.xPadding;
else {
/** @type {?} */
const host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
const 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 {?}
*/
generateSlice(data, sum, angleRange, rotation) {
/** @type {?} */
const perc = data.value / sum;
/** @type {?} */
const angle = angleRange * perc;
// const angleMod = (angle > 180 ) ? 360 - angle : angle;
/** @type {?} */
const angleRad = angle * Math.PI / 180;
/** @type {?} */
const largeArc = (angle > 180) ? 1 : 0;
/** @type {?} */
const textRotation = (270 + angle / 2) % 360;
/** @type {?} */
const textX = (data.level - 1) * this.sunSliceWidth + this.sunSliceWidth / 2;
/** @type {?} */
let textRotationString = 'rotate(' + textRotation + 'deg)';
if (rotation > 180) {
/** @type {?} */
const x = textX * 2;
textRotationString = textRotationString + ' scale(-1,-1) translateX(' + -x + 'px)';
}
/** @type {?} */
let path;
/** @type {?} */
let 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 {?} */
const 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 {?} */
const sunSliceInnerRadius = this.sunRadius / (this.sunDepth) * (data.level - 1);
/** @type {?} */
const 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 {?} */
const 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 {?} */
const sunSlice = {
perc,
name: data.name,
color: data.color,
hoverD: hoverPath,
rotation: 'rotate(' + rotation + 'deg)',
textRotation: textRotationString,
textX,
d: path,
angle,
hover: false,
children: null
};
this.levelSunSlices[data.level - 1].push(sunSlice);
return sunSlice;
}
/**
* @param {?} data
* @param {?} angleRange
* @param {?} rotation
* @return {?}
*/
generateSunSlicesForAngle(data, angleRange, rotation) {
/** @type {?} */
const sunSlices = [];
/** @type {?} */
let sum = 0;
for (const val of data) {
sum = sum + val.value;
}
for (const val of data) {
/** @type {?} */
const 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;
}
return sunSlices;
}
/**
* @param {?} data
* @return {?}
*/
generateSunSlices(data) {
return this.generateSunSlicesForAngle(data, 360, 0);
}
/**
* @return {?}
*/
initiateLevelSunSlices() {
this.levelSunSlices = [];
for (let level = 1; level <= this.sunDepth; level++) {
this.levelSunSlices.push([]);
}
}
/**
* @return {?}
*/
setColors() {
/** @type {?} */
let cnt = 0;
for (const slice of this.data) {
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++;
}
}
}
/**
* @return {?}
*/
ngOnInit() {
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 {?} */
const translateX = this.xPadding + this.sunRadius;
/** @type {?} */
const translateY = this.yPadding + this.sunRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
const hoverTranslateXY = this.sunRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
}
/**
* @return {?}
*/
ngOnChanges() {
// 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 {?} */
const translateX = this.xPadding + this.sunRadius;
/** @type {?} */
const translateY = this.yPadding + this.sunRadius;
this.gTranslate = 'translate(' + translateX + 'px, ' + translateY + 'px)';
/** @type {?} */
const hoverTranslateXY = this.sunRadius * 0.08;
this.hoverTranslate = 'translate(' + hoverTranslateXY + 'px, ' + -hoverTranslateXY + 'px)';
}
}
SunburstChartComponent.decorators = [
{ type: 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 = () => [
{ type: SunburstChartService },
{ type: GlobalParametersService },
{ type: ElementRef }
];
SunburstChartComponent.propDecorators = {
data: [{ type: Input }],
width: [{ type: Input }],
colorScheme: [{ type: Input }],
customColorScheme: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
class GanttChartService {
constructor() {
this.monthNames = [
'January', 'February', 'March',
'April', 'May', 'June', 'July',
'August', 'September', 'October',
'November', 'December'
];
}
/**
* @return {?}
*/
computeRectDimensions() {
this.rectWidth = this.width - this.xPadding * 2 - 150;
this.rectHeight = this.ganttPhases.length * 60;
}
/**
* @return {?}
*/
computeLegionDimensions() {
/** @type {?} */
const noOfLines = Math.ceil(this.data.length / 3);
this.legionWidth = this.width - this.xPadding * 2 - 150;
this.legionHeight = 40 + 40 * noOfLines;
}
/**
* @param {?} x
* @return {?}
*/
transformX(x) {
return this.rectWidth * x / (this.maxX - this.minX);
}
/**
* @return {?}
*/
computeLegion() {
/** @type {?} */
const noOfLines = Math.ceil(this.data.length / 3);
this.legion = [];
/** @type {?} */
let cnt = 0;
for (let line = 0; line < noOfLines; line++) {
/** @type {?} */
const legionLine = [];
for (let 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 {?}
*/
transformGanttDate(d) {
/** @type {?} */
const oneDay = 24 * 60 * 60 * 1000;
/** @type {?} */
const 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 {?}
*/
closestMultipleLessThanEqualTo(factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleLessThanEqualTo(factor, num - 1);
}
/**
* @param {?} factor
* @param {?} num
* @return {?}
*/
closestMultipleMoreThanEqualTo(factor, num) {
if (num % factor === 0)
return num;
else
return this.closestMultipleMoreThanEqualTo(factor, num + 1);
}
/**
* @param {?} __0
* @return {?}
*/
setValues({ componentID: componentID, width: width, xPadding: xPadding, yPadding: yPadding, data: data }) {
this.componentID = componentID;
this.width = width;
this.xPadding = xPadding;
this.yPadding = yPadding;
this.data = data;
// console.log('service color scheme: ' + this.colorScheme)
/** @type {?} */
const froms = [];
/** @type {?} */
const tos = [];
/** @type {?} */
const phases = new Set();
this.ganttTeams = [];
// this.setColors();
// console.log(this.data);
for (const team of this.data) {
this.ganttTeams.push({ name: team.name, color: team.color });
for (const phase of Object.keys(team.timelines)) {
phases.add(phase);
for (const timeline of team.timelines[phase]) {
froms.push(timeline.from);
tos.push(timeline.to);
}
}
}
this.ganttPhases = Array.from(phases);
// console.log('phase timelines: ');
// console.log(this.phaseTimelines);
/** @type {?} */
const minDate = froms.reduce((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => new Date(a) < new Date(b) ? a : b));
/** @type {?} */
const maxDate = tos.reduce((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => new Date(a) > new Date(b) ? a : b));
this.ganttMinDate = minDate;
this.ganttMaxDate = maxDate;
// console.log(this.ganttMinDate + ' - ' + this.ganttMaxDate);
/** @type {?} */
const noOfLines = Math.ceil(this.data.length / 3);
this.height = this.ganttPhases.length * 60 + this.yPadding * 3 + 100 + 40 + 30 * noOfLines;
/** @type {?} */
const 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 {?} */
let flag = 0;
/** @type {?} */
let 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 {?}
*/
addDays(date, days) {
/** @type {?} */
const newdate = new Date(date);
newdate.setDate((new Date(date)).getDate() + days);
/** @type {?} */
const day = newdate.getDate();
/** @type {?} */
const monthIndex = newdate.getMonth();
/** @type {?} */
const year = newdate.getFullYear();
return this.monthNames[monthIndex] + ' ' + day + ', ' + year;
}
/**
* @return {?}
*/
printAll() {
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);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class GanttChartComponent {
// setColors() {
// let cnt = 0;
// for (const team of this.ganttChartService.data) {
// if (!team.color) team.color = colorSchemes[this.ganttChartService.colorScheme][cnt % 10];
// cnt++;
// }
// }
/**
* @param {?} ganttChartService
* @param {?} globalParametersService
* @param {?} currentElement
*/
constructor(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 {?}
*/
setDimensions() {
if (this.width)
this.height = this.width - this.xPadding;
else {
/** @type {?} */
const host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
const 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 {?}
*/
setColors() {
/** @type {?} */
let cnt = 0;
for (const team of this.data) {
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++;
}
}
}
/**
* @return {?}
*/
definePhaseTimelines() {
this.phaseTimelines = {};
for (const phase of this.ganttChartService.ganttPhases) {
this.phaseTimelines[phase] = [];
}
for (const team of this.ganttChartService.data) {
for (const phase of Object.keys(team.timelines)) {
for (const timeline of team.timelines[phase]) {
this.phaseTimelines[phase].push({ from: timeline.from,
to: timeline.to,
color: team.color,
info: timeline.info,
toolTip: (timeline.info ? 'block' : 'none') });
}
}
}
// console.log('phase timelines: ');
// console.log(this.phaseTimelines);
}
/**
* @return {?}
*/
ngOnInit() {
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 {?}
*/
ngOnChanges() {
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: 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 = () => [
{ type: GanttChartService },
{ type: GlobalParametersService },
{ type: ElementRef }
];
GanttChartComponent.propDecorators = {
data: [{ type: Input }],
width: [{ type: Input }],
colorScheme: [{ type: Input }],
customColorScheme: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class GcChartBaseComponent {
// 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')}
// ]
// }
// }
// ];
/**
* @param {?} ganttChartService
*/
constructor(ganttChartService) {
this.ganttChartService = ganttChartService;
this.monthNames = [
'January', 'February', 'March',
'April', 'May', 'June', 'July',
'August', 'September', 'October',
'November', 'December'
];
}
/**
* @param {?} date
* @param {?} days
* @return {?}
*/
addDays(date, days) {
/** @type {?} */
const newdate = new Date(date);
newdate.setDate((new Date(date)).getDate() + days);
/** @type {?} */
const day = newdate.getDate();
/** @type {?} */
const monthIndex = newdate.getMonth();
/** @type {?} */
const year = newdate.getFullYear();
return this.monthNames[monthIndex] + ' ' + day + ', ' + year;
}
/**
* @param {?} date
* @return {?}
*/
shortenDate(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 {?}
*/
computeGrid() {
// 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 {?} */
let flag = 0;
/** @type {?} */
let 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 {?} */
let date = this.ganttChartService.ganttMinDate;
// let xPos = this.ganttChartService.transformGanttDate(date) + this.ganttChartService.xPadding + 150;
/** @type {?} */
const 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 {?} */
const xPos = this.ganttChartService.transformGanttDate(date) + this.ganttChartService.xPadding + 150;
/** @type {?} */
const transform = 'translate(' + xPos + 'px, ' + yTrans + 'px)';
this.xAxis.push({ xPos, value: this.shortenDate(date), transform });
date = this.addDays(date, this.gridPrecisionX);
}
// console.log(this.xAxis);
/** @type {?} */
let cnt = 0;
for (const phase of this.ganttChartService.ganttPhases) {
/** @type {?} */
const yPos = this.gridWidthY * cnt + this.gridWidthY * 0.5 + this.ganttChartService.yPadding;
this.yAxis.push({ yPos, value: phase });
cnt++;
}
}
/**
* @return {?}
*/
ngOnInit() {
this.computeGrid();
this.gridID = 'grid' + this.ganttChartService.componentID;
}
/**
* @return {?}
*/
ngOnChanges() {
this.computeGrid();
}
}
GcChartBaseComponent.decorators = [
{ type: 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 = () => [
{ type: GanttChartService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @Injectable({
// providedIn: BeautifulChartsModule
// })
class TimelineChartService {
constructor() { }
/**
* @return {?}
*/
computeRectDimensions() {
this.rectHeight = this.height - this.yPadding * 4;
this.rectWidth = this.width - this.xPadding * 2;
}
/**
* @param {?} __0
* @return {?}
*/
setValues({ componentID: componentID, width: width, height: height, xPadding: xPadding, yPadding: 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 {?}
*/
printAll() {
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);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TimelineChartComponent {
/**
* @param {?} timelineChartService
* @param {?} globalParametersService
* @param {?} currentElement
*/
constructor(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 {?}
*/
computeBarDimensions() {
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 {?}
*/
setColors() {
/** @type {?} */
let cnt = 0;
for (const oneTimeData of this.data) {
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++;
}
}
}
/**
* @return {?}
*/
setDimensions() {
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 {?} */
const host = this.currentElement.nativeElement;
if (host.parentNode != null) {
/** @type {?} */
const 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 {?}
*/
textWrap(text, width) {
/** @type {?} */
const noOfCharactersPerLine = width / 10;
/** @type {?} */
const newLineStr = '\n';
/** @type {?} */
let done = false;
/** @type {?} */
const res = [];
do {
/** @type {?} */
let found = false;
for (let 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 {?}
*/
computeTimeData() {
// const distanceBetweenTimeBubbles = this.width * .8 / (this.data.length - 1);
/** @type {?} */
const minTime = Math.min(...this.data.map((/**
* @param {?} timeData
* @return {?}
*/
timeData => timeData.time)));
/** @type {?} */
const maxTime = Math.max(...this.data.map((/**
* @param {?} timeData
* @return {?}
*/
timeData => timeData.time)));
/** @type {?} */
const perTimeWidth = this.timelineChartService.rectWidth * .8 / (maxTime - minTime);
this.data.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => a.time < b.time ? -1 : a.time > b.time ? 1 : 0));
/** @type {?} */
const diffs = [];
for (let i = 1; i < this.data.length; i++) {
diffs.push(this.data[i].time - this.data[i - 1].time);
}
/** @type {?} */
const minDiff = Math.min(...diffs);
this.timeBubbleRadius = Math.min(minDiff * perTimeWidth * .4);
/** @type {?} */
const maxRadius = this.timelineChartService.rectWidth * .8 / (this.data.length - 1) * .25;
/** @type {?} */
const 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 {?} */
let up = 1;
for (const oneTimeData of this.data) {
/** @type {?} */
const color = oneTimeData.color;
/** @type {?} */
const x = (oneTimeData.time - minTime) * perTimeWidth;
/** @type {?} */
const timeBubble = {
centre: {
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 {?} */
const start = {
x,
y: (up === 1) ? this.barStartY : this.barEndY
};
/** @type {?} */
const end = {
x,
y: (up === 1) ? this.barStartY - this.timelineChartService.rectHeight / 4 : this.barEndY + this.timelineChartService.rectHeight / 4
};
/** @type {?} */
const line = 'M ' + start.x + ' ' + start.y + ' ' + end.x + ' ' + end.y;
/** @type {?} */
const textBlock = {
position: {
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,
line,
textBlock,
color
});
up = up * -1;
}
}
/**
* @return {?}
*/
ngOnInit() {
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 {?} */
const transX = this.xPadding + this.timelineChartService.rectWidth * .1;
this.gTranslate = 'translate(' + transX + 'px, ' + this.yPadding + 'px)';
this.computeBarDimensions();
this.computeTimeData();
}
/**
* @return {?}
*/
ngOnChanges() {
this.computeBarDimensions();
this.setColors();
this.timelineChartService.setValues({
componentID: this.componentID,
width: this.width,
height: this.height,
xPadding: this.xPadding,
yPadding: this.yPadding
});
/** @type {?} */
const transX = this.xPadding + this.timelineChartService.rectWidth * .1;
this.gTranslate = 'translate(' + transX + 'px, ' + this.yPadding + 'px)';
this.computeBarDimensions();
this.computeTimeData();
}
}
TimelineChartComponent.decorators = [
{ type: 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 = () => [
{ type: TimelineChartService },
{ type: GlobalParametersService },
{ type: ElementRef }
];
TimelineChartComponent.propDecorators = {
data: [{ type: Input }],
width: [{ type: Input }],
height: [{ type: Input }],
colorScheme: [{ type: Input }],
customColorScheme: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class BeautifulChartsModule {
}
BeautifulChartsModule.decorators = [
{ type: NgModule, args: [{
declarations: [
LineGraphComponent,
MultiLineGraphComponent, LgChartBaseComponent,
MlgChartBaseComponent, BcChartBaseComponent,
CbcChartBaseComponent, DonutChartBaseComponent,
BarChartComponent, ClusteredBarChartComponent,
PieChartComponent, PieChartBaseComponent,
DonutChartComponent, SunburstChartComponent, GcChartBaseComponent,
GanttChartComponent, TimelineChartComponent
],
imports: [
BrowserModule,
CommonModule
],
exports: [
LineGraphComponent,
MultiLineGraphComponent,
BarChartComponent,
ClusteredBarChartComponent,
PieChartComponent,
DonutChartComponent,
SunburstChartComponent,
GanttChartComponent,
TimelineChartComponent
]
},] }
];
export { BeautifulChartsModule, LineGraphComponent as ɵa, LineGraphService as ɵb, GlobalParametersService as ɵc, MultiLineGraphComponent as ɵd, MultiLineGraphService as ɵe, LgChartBaseComponent as ɵf, MlgChartBaseComponent as ɵg, BcChartBaseComponent as ɵh, BarChartService as ɵi, CbcChartBaseComponent as ɵj, ClusteredBarChartService as ɵk, DonutChartBaseComponent as ɵl, DonutChartService as ɵm, BarChartComponent as ɵn, ClusteredBarChartComponent as ɵo, PieChartComponent as ɵp, PieChartService as ɵq, PieChartBaseComponent as ɵr, DonutChartComponent as ɵs, SunburstChartComponent as ɵt, SunburstChartService as ɵu, GcChartBaseComponent as ɵv, GanttChartService as ɵw, GanttChartComponent as ɵx, TimelineChartComponent as ɵy, TimelineChartService as ɵz };
//# sourceMappingURL=ngx-beautiful-charts.js.map