ngx-beautiful-charts
Version:
A library to create charts in Angular
1 lines • 56.6 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"BeautifulChartsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":26,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":37,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":38,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngx-line-graph","providers":[{"__symbolic":"reference","name":"ɵb"}],"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>","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}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"chartBase":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"colorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"minX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"minY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"maxX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"maxY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"gridPrecisionX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"gridPrecisionY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"xAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"yAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"customColorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":39,"character":38}]}],"setDimensions":[{"__symbolic":"method"}],"setMinandMax":[{"__symbolic":"method"}],"transformData":[{"__symbolic":"method"}],"printAllInput":[{"__symbolic":"method"}],"setLinePath":[{"__symbolic":"method"}],"setColor":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"computeRectDimensions":[{"__symbolic":"method"}],"transformX":[{"__symbolic":"method"}],"transformY":[{"__symbolic":"method"}],"setValues":[{"__symbolic":"method"}],"printAll":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"addNewComponent":[{"__symbolic":"method"}],"getCurrentComponentCounter":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"ngx-multi-line-graph","providers":[{"__symbolic":"reference","name":"ɵe"}],"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>","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}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"colorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"minX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"minY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"maxX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"maxY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"gridPrecisionX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"gridPrecisionY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"xAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"yAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"customColorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"setDimensions":[{"__symbolic":"method"}],"setMinandMax":[{"__symbolic":"method"}],"transformData":[{"__symbolic":"method"}],"setLinePath":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":119,"character":38}]}],"setColors":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"computeRectDimensions":[{"__symbolic":"method"}],"computeLegionDimensions":[{"__symbolic":"method"}],"transformX":[{"__symbolic":"method"}],"transformY":[{"__symbolic":"method"}],"setValues":[{"__symbolic":"method"}],"printAll":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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":[""]}]}],"members":{"xAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"yAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"gridPrecisionX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"gridPrecisionY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"computeGrid":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"xAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"yAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"gridPrecisionX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"gridPrecisionY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"computeLegionXs":[{"__symbolic":"method"}],"computeGrid":[{"__symbolic":"method"}],"computeLegionPath":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"xAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"yAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"showGridLines":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"computeGrid":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"computeRectDimensions":[{"__symbolic":"method"}],"transformY":[{"__symbolic":"method"}],"closestMultipleLessThanEqualTo":[{"__symbolic":"method"}],"closestMultipleMoreThanEqualTo":[{"__symbolic":"method"}],"setValues":[{"__symbolic":"method"}],"printAll":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"xAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"yAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"showGridLines":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"computeGrid":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵk"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"computeRectDimensions":[{"__symbolic":"method"}],"computeLegionDimensions":[{"__symbolic":"method"}],"transformY":[{"__symbolic":"method"}],"closestMultipleLessThanEqualTo":[{"__symbolic":"method"}],"closestMultipleMoreThanEqualTo":[{"__symbolic":"method"}],"setValues":[{"__symbolic":"method"}],"printAll":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"computeLegionXs":[{"__symbolic":"method"}],"computeLegionPath":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵm"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵm":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"computeRectDimensions":[{"__symbolic":"method"}],"computeLegionDimensions":[{"__symbolic":"method"}],"setValues":[{"__symbolic":"method"}],"printAll":[{"__symbolic":"method"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngx-bar-chart","providers":[{"__symbolic":"reference","name":"ɵi"}],"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>","styles":[".chart-bar:hover{stroke-width:1;stroke:#444}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"xAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"yAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"showGridLines":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"colorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"customColorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"computeBarPaths":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":38}]}],"setColor":[{"__symbolic":"method"}],"setDimensions":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngx-clustered-bar-chart","providers":[{"__symbolic":"reference","name":"ɵk"}],"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>","styles":[".chart-bar:hover{stroke-width:1;stroke:#444}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"xAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"yAxisTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"showGridLines":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"colorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"customColorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"setDimensions":[{"__symbolic":"method"}],"computeBarPaths":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":88,"character":38}]}],"setColors":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngx-pie-chart","providers":[{"__symbolic":"reference","name":"ɵq"}],"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, -->","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}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"colorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"customColorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":38}]}],"generatePieSlices":[{"__symbolic":"method"}],"setDimensions":[{"__symbolic":"method"}],"setColors":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"computeRectDimensions":[{"__symbolic":"method"}],"computeLegionDimensions":[{"__symbolic":"method"}],"setValues":[{"__symbolic":"method"}],"printAll":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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}"]}]}],"members":{"computeLegionXs":[{"__symbolic":"method"}],"computeLegionPath":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵq"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngx-donut-chart","providers":[{"__symbolic":"reference","name":"ɵm"}],"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>","styles":[".donut-slice{transition:.3s ease-in}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"colorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"customColorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":38}]}],"generateDonutSlices":[{"__symbolic":"method"}],"setDimensions":[{"__symbolic":"method"}],"setColors":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngx-sunburst-chart","providers":[{"__symbolic":"reference","name":"ɵu"}],"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","styles":[".sun-slice{transition:.3s ease-in;stroke:#fff;stroke-width:.5}.slice-text{color:#fff}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"colorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"customColorScheme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":36,"character":38}]}],"getRefinedData":[{"__symbolic":"method"}],"setDimensions":[{"__symbolic":"method"}],"generateSlice":[{"__symbolic":"method"}],"generateSunSlicesForAngle":[{"__symbolic":"method"}],"generateSunSlices":[{"__symbolic":"method"}],"initiateLevelSunSlices":[{"__symbolic":"method"}],"setColors":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"computeRectDimensions":[{"__symbolic":"method"}],"setValues":[{"__symbolic":"method"}],"printAll":[{"__symbolic":"method"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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)}"]}]}],"members":{"addDays":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵw"}]}],"shortenDate":[{"__symbolic":"method"}],"computeGrid":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵw":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"computeRectDimensions":[{"__symbolic":"method"}],"computeLegionDimensions":[{"__symbolic":"method"}],"transformX":[{"__symbolic":"method"}],"computeLegion":[{"__symbolic":"method"}],"transformGanttDate":[{"__symbolic":"method"}],"closestMultipleLessThanEqualTo":[{"__symbolic":"method"}],"closestMultipleMoreThanEqualTo":[{"__symbolic":"method"}],"setValues":[{"__symbolic":"method"}],"addDays":[{"__symbolic":"method"}],"printAll":[{"__symbolic":"method"}]}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngx-gantt-chart","providers":[{"__symbolic":"reference","name":"ɵw"}],"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>","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-famil