@tusharghoshbd/ngx-charts
Version:
Ngx charts is an angular library for presenting data in chart.
3,152 lines • 135 kB
JavaScript
import { EventEmitter, Component, Input, ViewChild, ElementRef, Output, NgModule, Directive, Renderer2, HostListener, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { scaleOrdinal, scaleBand, scaleLinear } from 'd3-scale';
import { pie, arc } from 'd3-shape';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @param {?} s
* @param {?=} max
* @return {?}
*/
function trimLabel(s, max = 5) {
if (typeof s !== 'string') {
if (typeof s === 'number') {
return s + '';
}
else {
return '';
}
}
s = s.trim();
if (s.length <= max) {
return s;
}
else {
return `${s.slice(0, max)}...`;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class XAxisComponent {
constructor() {
this.categories = [];
this.series = [];
this.xAxisHeightChange = new EventEmitter();
this.ticks = [];
this.trimLabel = trimLabel;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
// console.log("-----------------------")
//console.log(this.options)
//console.log(this.xScale)
this.update();
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
ngAfterViewInit() {
setTimeout((/**
* @return {?}
*/
() => {
/** @type {?} */
let xAxisHeight = parseInt(this.xAxisHeightEl.nativeElement.getBoundingClientRect().height, 10) + 10;
// if (xAxisHeight<50)
// xAxisHeight=50;
// console.log("x height ", xAxisHeight)
if (xAxisHeight !== this.options.xAxis.height) {
// console.log("ngAfterViewInit", "xxxxxxxxxx", xAxisHeight, this.options.xAxis.height)
this.xAxisHeightChange.emit({ xAxisHeight });
}
}), 0);
}
/**
* @return {?}
*/
update() {
if (this.options.barType == "vertical") {
this.ticks = this.yScale.nice().ticks();
}
else {
this.ticks = this.xScale.nice().ticks();
}
this.ngAfterViewInit();
}
/**
* @param {?} item
* @return {?}
*/
xTransformRotate(item) {
if (this.options.barType == "vertical" && this.xScale) {
/** @type {?} */
let midRotation = (this.xScale(item) + (this.xScale.bandwidth() / 2) + this.options.yAxis.width);
if (!isNaN(midRotation))
return "rotate(" + this.options.xAxis.labelRotation + ", " + (this.xScale(item) + (this.xScale.bandwidth() / 2) + this.options.yAxis.width) + ", " + (this.options.height - 20) + ")";
else
return "rotate(0,0,0)";
}
else {
return "rotate(" + this.options.xAxis.labelRotation + ", " + (this.xScale(item) + this.options.yAxis.width) + ", " + (this.options.height - this.options.xAxis.height + 20) + ")";
}
}
/**
* @param {?} tick
* @return {?}
*/
pathDirection(tick) {
return 'M ' + (this.xScale(tick) + this.options.yAxis.width) + ' ' + (this.options.header.height) + ' L ' + (this.xScale(tick) + this.options.yAxis.width) + ' ' + (this.options.height - this.options.xAxis.height);
}
}
XAxisComponent.decorators = [
{ type: Component, args: [{
selector: 'g[x-axis]',
template: "\n<svg>\n <g #xAxisHeightEl data-z-index=\"20\" height=\"70\"> \n <g class=\"highcharts-axis highcharts-yaxis\" data-z-index=\"2\" aria-hidden=\"true\" >\n <text [attr.x]=\"options.width/2\" [attr.y]=\"options.height-10\" text-anchor=\"middle\" dominant-baseline=\"central\" style=\"margin-bottom: 50px; color:#666666;cursor:default;font-size:11px;fill:#666666;\"\n class=\"highcharts-axis-title\"\n >\n {{options.xAxis ? options.xAxis.title : \"\"}}\n </text>\n </g>\n \n <g class=\"highcharts-axis-labels highcharts-xaxis-labels\" data-z-index=\"7\" aria-hidden=\"true\"\n *ngIf=\"options.barType == 'vertical'\">\n <text \n *ngFor=\"let item of categories; let i = index;let f = first;\"\n [attr.x] = \" xScale(item) != undefined ? xScale(item) + (xScale.bandwidth()/2)+options.yAxis.width : 0\"\n [attr.y] = \"options.height-30\"\n [attr.transform]=\"xTransformRotate(item)\"\n [attr.text-anchor]=\"options.xAxis.labelAlign\"\n style=\"color:#666666;cursor:default;font-size:11px;fill:#666666;\"\n opacity=\"1\">{{ options.xAxis.labelEllipsis ? trimLabel(item, options.xAxis.labelEllipsisSize) :item}}</text>\n </g> \n\n <g class=\"highcharts-axis-labels highcharts-yaxis-labels\" data-z-index=\"7\" aria-hidden=\"true\"\n *ngIf=\"options.barType == 'horizontal'\">\n <text style=\"color:#666666;cursor:default;font-size:11px;fill:#666666;\" \n text-anchor=\"middle\"\n *ngFor=\"let tick of ticks\" \n [attr.x] = 'xScale(tick) + options.yAxis.width'\n [attr.y] = \"options.height - 30\"\n [attr.transform]=\"xTransformRotate(tick)\"\n opacity=\"1\">{{ options.xAxis.labelEllipsis ? trimLabel(tick, options.xAxis.labelEllipsisSize) :tick}}</text>\n </g>\n </g>\n <g *ngIf=\"options.barType == 'horizontal'\" class=\"highcharts-grid highcharts-yaxis-grid\" data-z-index=\"1\" aria-hidden=\"true\">\n <path fill=\"none\" stroke=\"#e6e6e6\" stroke-width=\"1\" data-z-index=\"1\" class=\"highcharts-grid-line\"\n *ngFor=\"let tick of ticks\" [attr.d]=\"pathDirection(tick)\" opacity=\"1\">\n </path>\n </g>\n</svg>\n",
styles: [""]
}] }
];
/** @nocollapse */
XAxisComponent.ctorParameters = () => [];
XAxisComponent.propDecorators = {
xScale: [{ type: Input }],
yScale: [{ type: Input }],
options: [{ type: Input }],
categories: [{ type: Input }],
series: [{ type: Input }],
xAxisHeightEl: [{ type: ViewChild, args: ['xAxisHeightEl', { read: ElementRef, static: false },] }],
xAxisHeightChange: [{ type: Output }]
};
if (false) {
/** @type {?} */
XAxisComponent.prototype.xScale;
/** @type {?} */
XAxisComponent.prototype.yScale;
/** @type {?} */
XAxisComponent.prototype.options;
/** @type {?} */
XAxisComponent.prototype.categories;
/** @type {?} */
XAxisComponent.prototype.series;
/** @type {?} */
XAxisComponent.prototype.xAxisHeightEl;
/** @type {?} */
XAxisComponent.prototype.xAxisHeightChange;
/** @type {?} */
XAxisComponent.prototype.ticks;
/** @type {?} */
XAxisComponent.prototype.trimLabel;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class YAxisComponent {
constructor() {
this.categories = [];
this.series = [];
this.yAxisWidthChange = new EventEmitter();
this.ticks = [];
this.rightTicks = [];
this.trimLabel = trimLabel;
}
/**
* @return {?}
*/
ngOnInit() {
//console.log(this.yScale)
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
// console.log(changes)
// console.log("-------------------")
// console.log( JSON.stringify(this.yScale('Africa')))
//console.log(this.yScale(-200))
this.update();
}
/**
* @return {?}
*/
ngAfterViewInit() {
setTimeout((/**
* @return {?}
*/
() => {
/** @type {?} */
const yAxisWidth = parseInt(this.yAxisWidthEl.nativeElement.getBoundingClientRect().width, 10) + 30;
/** @type {?} */
const yAxisHeight = parseInt(this.yAxisWidthEl.nativeElement.getBoundingClientRect().height, 10) + 300;
/** @type {?} */
const yAxisRightWidth = parseInt(this.yAxisRightWidthEl.nativeElement.getBoundingClientRect().width, 10) + 30;
if (yAxisHeight !== this.options.yAxis.height || yAxisWidth !== this.options.yAxis.width) {
this.yAxisWidthChange.emit({ yAxisWidth, yAxisHeight, yAxisRightWidth });
}
//setTimeout(() => this.updateDims());
}), 0);
}
/**
* @return {?}
*/
update() {
if (this.options.barType == "vertical") {
if (this.yScale)
this.ticks = this.yScale.nice().ticks();
if (this.yRightScale)
this.rightTicks = this.yRightScale.nice().ticks();
}
else {
//this.ticks=this.xScale.nice().ticks();
}
this.ngAfterViewInit();
}
/**
* @param {?} x
* @return {?}
*/
transform(x) {
return "rotate(270, " + x + ", " + this.options.height / 2 + ")";
}
/**
* @param {?} tick
* @return {?}
*/
pathDirection(tick) {
//console.log(tick, this.yScale(tick))
return 'M ' + (this.options.yAxis.width) + ' ' + (this.yScale(tick) + this.options.header.height) + ' L ' + (this.options.plotBackground.width + this.options.yAxis.width) + ' ' + (this.yScale(tick) + this.options.header.height);
}
/**
* @param {?} item
* @return {?}
*/
calculateYTextPosition(item) {
if (this.yScale(item))
return parseInt(this.yScale(item) + (this.yScale.bandwidth() / 2) + this.options.header.height);
return this.options.header.height;
}
}
YAxisComponent.decorators = [
{ type: Component, args: [{
selector: "g[y-axis]",
template: "<svg>\n <g #yAxisWidthEl>\n <g class=\"highcharts-axis highcharts-yaxis\" data-z-index=\"2\" aria-hidden=\"true\">\n <text x=\"10\" [attr.y]=\"options.height/2\" text-anchor=\"middle\" dominant-baseline=\"central\" \n style=\"color:#666666;cursor:default;font-size:11px;fill:#666666;\" \n class=\"highcharts-axis-title\"\n [attr.transform]=\"transform(10)\">\n {{options.yAxis ? options.yAxis.title : \"\"}}\n </text>\n </g>\n <g class=\"highcharts-axis-labels highcharts-yaxis-labels\" data-z-index=\"7\" aria-hidden=\"true\"\n *ngIf=\"options.barType == 'vertical'\">\n <text\n style=\"color:#666666;cursor:default;font-size:11px;fill:#666666;\" \n text-anchor=\"start\"\n *ngFor=\"let tick of ticks\" \n [attr.x]=\"30\"\n [attr.y]=\"yScale(tick)+this.options.header.height\" \n opacity=\"1\">{{ options.yAxis.labelEllipsis ? trimLabel(tick, options.yAxis.labelEllipsisSize) :tick}} </text>\n </g>\n <g class=\"highcharts-axis-labels highcharts-xaxis-labels\" data-z-index=\"7\" aria-hidden=\"true\"\n *ngIf=\"options.barType == 'horizontal'\">\n <text \n *ngFor=\"let item of categories; let i = index;\"\n [attr.x] = \"30\"\n [attr.y] = \"calculateYTextPosition(item)\"\n style=\"color:#666666;cursor:default;font-size:11px;fill:#666666;\" text-anchor=\"right\" \n opacity=\"1\">{{ options.yAxis.labelEllipsis ? trimLabel(item, options.yAxis.labelEllipsisSize) :item}}</text>\n </g> \n </g>\n\n <g #yAxisRightWidthEl>\n <g *ngIf= \"yRightScale\" class=\"highcharts-axis highcharts-yaxis\" data-z-index=\"2\" aria-hidden=\"true\" >\n <text \n [attr.x]=\"options.width - 10\" \n [attr.y]=\"options.height/2\" text-anchor=\"middle\" dominant-baseline=\"central\" \n style=\"color:#666666;cursor:default;font-size:11px;fill:#666666;\" \n class=\"highcharts-axis-title\"\n [attr.transform]=\"transform(options.width - 10)\">\n {{options.yAxis ? options.yAxis.rightTitle : \"\"}}\n </text>\n </g>\n <g class=\"highcharts-axis-labels highcharts-yaxis-labels\" data-z-index=\"7\" aria-hidden=\"true\"\n *ngIf=\"options.barType == 'vertical' && yRightScale\">\n <text\n style=\"color:#666666;cursor:default;font-size:11px;fill:#666666;\" \n text-anchor=\"end\"\n *ngFor=\"let tick of rightTicks\" \n [attr.x]=\"options.width - 30\"\n [attr.y]=\"yRightScale(tick)+this.options.header.height\" \n opacity=\"1\">{{ options.yAxis.labelEllipsis ? trimLabel(tick, options.yAxis.labelEllipsisSize) :tick}} </text>\n </g>\n </g>\n \n <g *ngIf=\"options.barType == 'vertical'\" class=\"highcharts-grid highcharts-yaxis-grid\" data-z-index=\"1\" aria-hidden=\"true\">\n <path fill=\"none\" stroke=\"#e6e6e6\" stroke-width=\"1\" data-z-index=\"1\" class=\"highcharts-grid-line\"\n *ngFor=\"let tick of ticks\" [attr.d]=\"pathDirection(tick)\" opacity=\"1\">\n </path>\n </g>\n\n</svg>",
styles: [""]
}] }
];
/** @nocollapse */
YAxisComponent.ctorParameters = () => [];
YAxisComponent.propDecorators = {
xScale: [{ type: Input }],
yScale: [{ type: Input }],
yRightScale: [{ type: Input }],
options: [{ type: Input }],
categories: [{ type: Input }],
series: [{ type: Input }],
yAxisWidthEl: [{ type: ViewChild, args: ['yAxisWidthEl', { static: true },] }],
yAxisRightWidthEl: [{ type: ViewChild, args: ['yAxisRightWidthEl', { static: true },] }],
yAxisWidthChange: [{ type: Output }]
};
if (false) {
/** @type {?} */
YAxisComponent.prototype.xScale;
/** @type {?} */
YAxisComponent.prototype.yScale;
/** @type {?} */
YAxisComponent.prototype.yRightScale;
/** @type {?} */
YAxisComponent.prototype.options;
/** @type {?} */
YAxisComponent.prototype.categories;
/** @type {?} */
YAxisComponent.prototype.series;
/** @type {?} */
YAxisComponent.prototype.yAxisWidthEl;
/** @type {?} */
YAxisComponent.prototype.yAxisRightWidthEl;
/** @type {?} */
YAxisComponent.prototype.yAxisWidthChange;
/** @type {?} */
YAxisComponent.prototype.ticks;
/** @type {?} */
YAxisComponent.prototype.rightTicks;
/** @type {?} */
YAxisComponent.prototype.trimLabel;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AxesModule {
}
AxesModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [XAxisComponent, YAxisComponent],
exports: [XAxisComponent, YAxisComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class HeaderComponent {
constructor() {
this.headerHeightChange = new EventEmitter();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
// console.log(changes)
this.update();
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
ngAfterViewInit() {
/** @type {?} */
let headerHeight = parseInt(this.headerHeightEl.nativeElement.getBoundingClientRect().height, 10) + 20;
// console.log("headerHeight "+headerHeight)
this.headerHeightChange.emit({ headerHeight });
//setTimeout(() => this.updateDims());
}
/**
* @return {?}
*/
update() {
//this.ticks=this.xScale.nice().ticks();
}
}
HeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'g[header]',
template: "\r\n<svg>\r\n\r\n <g #headerHeightEl>\r\n\r\n <text [attr.x]=\"options.width/2\" text-anchor=\"middle\" class=\"highcharts-title\" data-z-index=\"4\" style=\"color:#333333;font-size:18px;fill:#333333;\" y=\"24\" aria-hidden=\"true\">\r\n <tspan>{{options.title}}</tspan>\r\n </text>\r\n <text [attr.x]=\"options.width/2\" text-anchor=\"middle\" class=\"highcharts-subtitle\" data-z-index=\"4\" style=\"color:#666666;fill:#666666;\" y=\"52\" aria-hidden=\"true\">\r\n <tspan>{{options.subtitle}}</tspan>\r\n </text>\r\n <!-- <g class=\"highcharts-axis highcharts-yaxis\" data-z-index=\"2\" aria-hidden=\"true\" >\r\n <text [attr.x]=\"options.width/2\" [attr.y]=\"options.height-10\" text-anchor=\"middle\" dominant-baseline=\"central\" style=\"margin-bottom: 50px; color:#666666;cursor:default;font-size:11px;fill:#666666;\"\r\n class=\"highcharts-axis-title\"\r\n >\r\n {{options.xAxis ? options.xAxis.title : \"\"}}\r\n </text>\r\n </g> -->\r\n </g>\r\n \r\n</svg>",
styles: [""]
}] }
];
/** @nocollapse */
HeaderComponent.ctorParameters = () => [];
HeaderComponent.propDecorators = {
options: [{ type: Input }],
headerHeightEl: [{ type: ViewChild, args: ['headerHeightEl', { static: true },] }],
headerHeightChange: [{ type: Output }]
};
if (false) {
/** @type {?} */
HeaderComponent.prototype.options;
/** @type {?} */
HeaderComponent.prototype.headerHeightEl;
/** @type {?} */
HeaderComponent.prototype.headerHeightChange;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class HeaderModule {
}
HeaderModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [HeaderComponent],
exports: [HeaderComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class LegendComponent {
constructor() {
this.trimLabel = trimLabel;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
// console.log(changes)
this.update();
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngAfterViewInit() {
}
/**
* @return {?}
*/
update() {
}
}
LegendComponent.decorators = [
{ type: Component, args: [{
selector: 'chart-legend',
template: "<div class=\"chart-legend ng-tns-c30-0 ng-star-inserted\" [style.width]=\"options.width+'px'\">\r\n <div style=\"text-align: center;\">\r\n <div class=\"legend-wrap\">\r\n <ul class=\"legend-labels\" style=\"max-height: 255px;\">\r\n <li class=\"legend-label ng-star-inserted\"\r\n *ngFor=\"let gn of groupName;let i=index\" \r\n >\r\n <div *ngIf=\"gn.name\">\r\n <span class=\"legend-label-color\" \r\n [style.background-color] = \"gn.color\"> </span>\r\n <span class=\"legend-label-text\">\r\n {{ options.legend.labelEllipsis ? trimLabel(gn.name, options.legend.labelEllipsisSize) :gn.name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>",
styles: [".chart-legend ul li{display:inline-block}.chart-legend{text-align:center;display:inline-block;padding:0}.chart-legend .legend-label{text-align:center;cursor:pointer;font-size:90%;margin:8px;color:#afb7c8}.chart-legend li,.chart-legend ul{padding:0;margin:0;list-style:none}.chart-legend .legend-labels{line-height:85%;list-style:none;float:left;width:100%;border-radius:3px;overflow-y:auto;overflow-x:hidden;white-space:nowrap}.chart-legend .legend-label-color{display:inline-block;height:15px;width:15px;margin-right:5px;color:#5b646b;border-radius:3px}.chart-legend .legend-label-text{display:inline-block;vertical-align:top;line-height:15px;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}"]
}] }
];
/** @nocollapse */
LegendComponent.ctorParameters = () => [];
LegendComponent.propDecorators = {
groupName: [{ type: Input }],
series: [{ type: Input }],
options: [{ type: Input }]
};
if (false) {
/** @type {?} */
LegendComponent.prototype.groupName;
/** @type {?} */
LegendComponent.prototype.series;
/** @type {?} */
LegendComponent.prototype.options;
/** @type {?} */
LegendComponent.prototype.trimLabel;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class LegendModule {
}
LegendModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [LegendComponent],
exports: [LegendComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TooltipDirective {
/**
* @param {?} el
* @param {?} renderer
*/
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.offset = 10;
}
/**
* @return {?}
*/
onMouseEnter() {
// console.log("onMouseEnter")
if (!this.tooltip) {
this.show();
}
}
/**
* @return {?}
*/
onMouseLeave() {
// console.log("onMouseLeave")
if (this.tooltip) {
this.hide();
}
}
/**
* @return {?}
*/
show() {
this.create();
this.setPosition();
this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
}
/**
* @return {?}
*/
hide() {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
window.setTimeout((/**
* @return {?}
*/
() => {
this.renderer.removeChild(document.body, this.tooltip);
this.tooltip = null;
}), this.delay);
}
/**
* @return {?}
*/
create() {
this.tooltip = this.renderer.createElement('span');
this.renderer.appendChild(this.tooltip, this.renderer.createText(this.tooltipTitle) // textNode
);
this.renderer.appendChild(document.body, this.tooltip);
// this.renderer.appendChild(this.el.nativeElement, this.tooltip);
this.renderer.addClass(this.tooltip, 'ng-tooltip');
this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
this.renderer.setStyle(this.tooltip, 'border', "2px solid " + this.tooltipColor);
// delay 설정
this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
}
/**
* @return {?}
*/
setPosition() {
/** @type {?} */
const hostPos = this.el.nativeElement.getBoundingClientRect();
/** @type {?} */
const tooltipPos = this.tooltip.getBoundingClientRect();
/** @type {?} */
const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
/** @type {?} */
let top;
/** @type {?} */
let left;
if (this.placement === 'top') {
top = hostPos.top - tooltipPos.height - this.offset;
left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
}
if (this.placement === 'bottom') {
top = hostPos.bottom + this.offset;
left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
}
if (this.placement === 'left') {
top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
left = hostPos.left - tooltipPos.width - this.offset;
}
if (this.placement === 'right') {
top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
left = hostPos.right + this.offset;
}
this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
}
}
TooltipDirective.decorators = [
{ type: Directive, args: [{
selector: '[tooltip]'
},] }
];
/** @nocollapse */
TooltipDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
TooltipDirective.propDecorators = {
tooltipTitle: [{ type: Input, args: ['tooltip',] }],
placement: [{ type: Input }],
delay: [{ type: Input }],
tooltipColor: [{ type: Input }],
onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
onMouseLeave: [{ type: HostListener, args: ['mouseleave',] }]
};
if (false) {
/** @type {?} */
TooltipDirective.prototype.tooltipTitle;
/** @type {?} */
TooltipDirective.prototype.placement;
/** @type {?} */
TooltipDirective.prototype.delay;
/** @type {?} */
TooltipDirective.prototype.tooltipColor;
/** @type {?} */
TooltipDirective.prototype.tooltip;
/** @type {?} */
TooltipDirective.prototype.offset;
/**
* @type {?}
* @private
*/
TooltipDirective.prototype.el;
/**
* @type {?}
* @private
*/
TooltipDirective.prototype.renderer;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TooltipModule {
}
TooltipModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [TooltipDirective],
exports: [TooltipDirective]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ColorHelper {
/**
* @param {?} options
* @param {?} series
*/
constructor(options, series) {
this.options = options;
this.series = series;
}
/**
* @return {?}
*/
generateColorScale() {
//let colorArr=["#a8385d", "#7aa3e5", "#a27ea8", "#aae3f5", "#adcded", "#a95963", "#8796c0", "#7ed3ed", "#50abcc", "#ad6886"]; //ngx-charts default color code
//let colorList=['#7cb5ec', '#434348', '#f7a35c', '#90ed7d', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1']; //highchart color code
/** @type {?} */
let colorList = ['#7cb5ec', '#434348', '#f7a35c', '#90ed7d', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', "#7aa3e5", "#a27ea8", "#aae3f5", "#adcded", "#a95963", "#8796c0", "#7ed3ed", "#50abcc", "#ad6886"];
/** @type {?} */
let barColors = [];
/** @type {?} */
let groupDataArr = [];
for (let i = 0; i < this.series.length; i++) {
groupDataArr.push(this.series[i].name);
if (this.series[i].colorCode) {
barColors.push(this.series[i].colorCode);
}
else {
/** @type {?} */
let index = i % colorList.length;
barColors.push(colorList[index]);
}
}
return scaleOrdinal()
.range(barColors)
.domain(groupDataArr);
}
}
if (false) {
/** @type {?} */
ColorHelper.prototype.options;
/** @type {?} */
ColorHelper.prototype.series;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ngxChartsBarComponent {
/**
* @param {?} element
* @param {?} chartElement
* @param {?} cdr
*/
constructor(element, chartElement, cdr) {
this.chartElement = chartElement;
this.cdr = cdr;
this.customOptions = {
barType: 'vertical',
title: '',
subtitle: '',
height: 0,
width: 0,
padding: 5,
xAxis: {
title: '',
height: 0,
labelRotation: 0,
labelAlign: 'left',
labelEllipsis: false,
labelEllipsisSize: 16
},
yAxis: {
title: '',
width: 0,
height: 0,
labelRotation: 0,
labelEllipsis: false,
labelEllipsisSize: 16
},
legend: {
labelEllipsis: false,
labelEllipsisSize: 16
},
plotBackground: {
x: 0,
y: 0,
height: 0,
width: 0
},
plotOptions: {
groupBarPadding: 20,
innerBarPadding: 3
},
header: {
height: 0,
width: 0
}
};
this._options = {};
this.categories = [];
this.series = [];
this.bars = [];
this.groupName = [];
this.element = element.nativeElement;
this.trimLabel = trimLabel;
}
/**
* @param {?} obj
* @return {?}
*/
set options(obj) {
/** @type {?} */
let xAxis = obj.xAxis;
xAxis['labelEllipsis'] = (obj.xAxis.labelEllipsisSize != undefined && obj.xAxis.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let yAxis = obj.yAxis;
yAxis['labelEllipsis'] = (obj.yAxis.labelEllipsisSize != undefined && obj.yAxis.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let legend = obj.legend;
legend['labelEllipsis'] = (obj.legend.labelEllipsisSize != undefined && obj.legend.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let plotBackground = obj.plotBackground;
/** @type {?} */
let plotOptions = obj.plotOptions;
/** @type {?} */
let header = obj.header;
delete obj['xAxis'];
delete obj['yAxis'];
delete obj['legend'];
delete obj['plotBackground'];
delete obj['plotOptions'];
delete obj['header'];
this._options = Object.assign({}, this.customOptions, obj, { xAxis: Object.assign({}, this.customOptions.xAxis, xAxis), yAxis: Object.assign({}, this.customOptions.yAxis, yAxis), legend: Object.assign({}, this.customOptions.legend, legend), plotBackground: Object.assign({}, this.customOptions.plotBackground, plotBackground), plotOptions: Object.assign({}, this.customOptions.plotOptions, plotOptions), header: Object.assign({}, this.customOptions.header, header) });
// console.log(this._options)
}
/**
* @return {?}
*/
get options() {
return this._options;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
this.groupBarPaddingBK = this.options.plotOptions.groupBarPadding;
this.innerBarPaddingBK = this.options.plotOptions.innerBarPadding;
setTimeout((/**
* @return {?}
*/
() => this.update()));
}
/**
* @return {?}
*/
ngOnInit() {
this.options.width = this.options.width;
this.options.height = this.options.height;
this.update();
}
/**
* @return {?}
*/
update() {
// console.log("ttttttt",this.options)
/** @type {?} */
const hostElem = this.chartElement.nativeElement;
/** @type {?} */
let dims = hostElem.parentNode !== null ? hostElem.parentNode.getBoundingClientRect() : { height: 400, width: 800 };
/** @type {?} */
var style = hostElem.parentNode.currentStyle || window.getComputedStyle(hostElem.parentNode);
this.options.height = !this.options.height ? dims.height - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight) : this.options.height;
this.options.width = !this.options.width ? dims.width - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight) : dims.width - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight);
this.calPlotBackground();
/** @type {?} */
let countFlag = false;
this.options.plotOptions.groupBarPadding = this.groupBarPaddingBK;
this.options.plotOptions.innerBarPadding = this.innerBarPaddingBK;
do {
if (countFlag == true) {
this.options.plotOptions.groupBarPadding--;
this.options.plotOptions.innerBarPadding = 2;
}
if (this.options.barType == 'vertical') {
this.xScale = this.getXScale();
}
else {
this.yScale = this.getXScale();
}
this.innerScale = this.getInnerScale();
countFlag = true;
} while (this.innerScale.bandwidth() < 2);
//
if (this.options.barType == 'vertical') {
this.yScale = this.getYScale();
}
else {
this.xScale = this.getYScale();
}
/** @type {?} */
let colorHelper = new ColorHelper(this.options, this.series);
this.colorScale = colorHelper.generateColorScale();
setTimeout((/**
* @return {?}
*/
() => {
this.groupName = [];
this.series.map((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.name)
this.groupName.push({
name: item.name,
color: this.colorScale(item.name)
});
}));
this.createBar();
//setTimeout(() => {
// for (let i=0; i<this.bars.length; i++) {
// console.log(this.bars[i].className)
// transition(select(this.element)).select('.bar02').transition()
// .duration(500)
// .attr('width', this.bars[i].width);
// }
//},1000)
}));
this.cdr.detectChanges();
}
/**
* @return {?}
*/
getXScale() {
/** @type {?} */
let spacing;
/** @type {?} */
let range;
if (this.options.barType == 'vertical') {
spacing = (this.categories.length / (this.options.plotBackground.width / this.options.plotOptions.groupBarPadding));
range = [0, this.options.plotBackground.width];
}
else {
/** @type {?} */
let length = this.options.height - this.options.header.height;
spacing = (this.categories.length / (this.options.plotBackground.height / this.options.plotOptions.groupBarPadding));
range = [0, this.options.plotBackground.height];
}
return scaleBand()
.range(range)
.paddingInner(spacing)
.paddingOuter(0.1)
.domain(this.categories);
}
/**
* @return {?}
*/
getInnerScale() {
/** @type {?} */
let groupDataArr = [];
for (let i = 0; i < this.series.length; i++) {
groupDataArr.push(this.series[i].name);
}
/** @type {?} */
let spacing;
/** @type {?} */
let range;
if (this.options.barType == 'vertical') {
spacing = (this.series.length / (this.xScale.bandwidth() / this.options.plotOptions.innerBarPadding));
range = this.xScale.bandwidth();
}
else {
spacing = (this.series.length / (this.yScale.bandwidth() / this.options.plotOptions.innerBarPadding));
range = this.yScale.bandwidth();
}
return scaleBand()
.range([0, range])
.paddingInner(spacing)
.domain(groupDataArr);
}
/**
* @return {?}
*/
getYScale() {
/** @type {?} */
let uniqueValue = new Set();
this.series.map((/**
* @param {?} item
* @return {?}
*/
(item) => {
item.data.map((/**
* @param {?} value
* @return {?}
*/
(value) => {
uniqueValue.add(value);
}));
}));
/** @type {?} */
let min = Math.min(...uniqueValue);
min = min > 0 ? 0 : min;
/** @type {?} */
let max = Math.max(0, ...uniqueValue);
max = max > 0 ? max : 0;
/** @type {?} */
let range = [];
if (this.options.barType == 'vertical') {
/** @type {?} */
let value = this.options.plotBackground.height;
// console.log("bar getYScale",value)
range = [value, 0];
// console.log("bar getYScale - ", range)
}
else {
/** @type {?} */
let value = this.options.plotBackground.width - 30;
range = [0, value];
}
// console.log("bar getYScale --- ", range, min, max)
return scaleLinear()
.range(range)
.domain([min, max]);
//return this.scale.nice().ticks();
}
/**
* @return {?}
*/
calPlotBackground() {
this.options = Object.assign({}, this.options, { plotBackground: Object.assign({}, this.options.plotBackground, { x: 0, y: 0, height: this.options.height - this.options.xAxis.height - this.options.header.height - this.options.padding, width: this.options.width - this.options.yAxis.width - this.options.padding }) });
// console.log("calPlotBackground", JSON.stringify(this.options));
}
/**
* @return {?}
*/
createBar() {
//console.log("this.innerScale.bandwidth() "+this.innerScale.bandwidth())
this.bars = [];
if (this.options.barType == 'vertical') {
this.categories.map((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
(item, index) => {
for (let i = 0; i < this.series.length; i++) {
/** @type {?} */
const bar = {
value: item,
//jan,feb
data: this.series[i].data[index],
//101,202
group: this.series[i].name,
color: this.colorScale(this.series[i].name),
//formattedLabel,
width: this.innerScale.bandwidth(),
height: this.series[i].data[index] > 0 ? (this.yScale(0) - this.yScale(this.series[i].data[index])) : (this.yScale(this.series[i].data[index]) - this.yScale(0)),
x: this.innerScale(this.series[i].name) + this.xScale(item),
y: this.series[i].data[index] > 0 ? this.yScale(this.series[i].data[index]) : this.yScale(0),
className: "vertical_bar"
};
this.bars.push(bar);
}
}));
}
else {
this.categories.map((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
(item, index) => {
for (let i = 0; i < this.series.length; i++) {
/** @type {?} */
const bar = {
value: item,
//jan,feb
data: this.series[i].data[index],
//101,202
group: this.series[i].name,
color: this.colorScale(this.series[i].name),
//formattedLabel,
width: this.series[i].data[index] > 0 ? (this.xScale(this.series[i].data[index]) - this.xScale(0)) : (this.xScale(0) - this.xScale(this.series[i].data[index])),
height: this.innerScale.bandwidth(),
x: this.series[i].data[index] > 0 ? this.xScale(0) : this.xScale(this.series[i].data[index]),
y: this.innerScale(this.series[i].name) + this.yScale(item),
className: "horizontal_bar"
};
this.bars.push(bar);
}
}));
}
}
/**
* @param {?} __0
* @return {?}
*/
yAxisWidthChange({ yAxisWidth, yAxisHeight, yAxisRightWidth }) {
//console.log("yAxisWidth "+yAxisWidth)
this.options = Object.assign({}, this.options, { yAxis: Object.assign({}, this.options.yAxis, { width: yAxisWidth, height: yAxisHeight }) });
//console.log( this.options)
this.update();
}
/**
* @param {?} __0
* @return {?}
*/
xAxisHeightChange({ xAxisHeight }) {
this.options = Object.assign({}, this.options, { xAxis: Object.assign({}, this.options.xAxis, { height: xAxisHeight }) });
//console.log("xAxisHeightChange", xAxisHeight, JSON.stringify(this.options.xAxis));
this.update();
}
/**
* @param {?} __0
* @return {?}
*/
headerHeightChange({ headerHeight }) {
this.options = Object.assign({}, this.options, { header: Object.assign({}, this.options.header, { height: headerHeight }) });
this.update();
}
/**
* @param {?} data
* @return {?}
*/
toolTipPlaccement(data) {
if (this.options.barType == 'vertical') {
return data > 0 ? 'top' : 'bottom';
}
else {
return data > 0 ? 'right' : 'left';
}
}
/**
* @param {?} event
* @return {?}
*/
onResize(event) {
//console.log("window:resize")
setTimeout((/**
* @return {?}
*/
() => this.update()));
}
/**
* @return {?}
*/
getViewBox() {
if (this.options.width > 0 && this.options.height > 0)
return '0 0 ' + this.options.width + ' ' + this.options.height;
else
return '0 0 0 0';
}
/**
* @private
* @param {?} str
* @return {?}
*/
strToNumber(str) {
/** @type {?} */
let numberPattern = /\d+/g;
/** @type {?} */
let num = str.match(numberPattern).join('');
return parseFloat(num);
}
}
ngxChartsBarComponent.decorators = [
{ type: Component, args: [{
selector: "ngx-charts-bar",
template: "<div [style.width]=\"options.width+'px'\" [style.border]=\"'1px solid #f3f3f3'\">\r\n\r\n <svg version=\"1.1\" class=\"highcharts-root\" [attr.padding]=\"options.padding\" [attr.width]=\"options.width\"\r\n [attr.height]=\"options.height\" [attr.viewBox]=\"getViewBox()\"\r\n aria-label=\"Interactive chart\" [style.border]=\"'0px solid gray'\" [style.padding]=\"options.padding\"\r\n aria-hidden=\"false\">\r\n\r\n <g header [options]=\"options\" (headerHeightChange)=\"headerHeightChange($event)\"></g>\r\n\r\n <g y-axis \r\n [xScale]=\"xScale\" \r\n [yScale]=\"yScale\" \r\n [options]=\"options\" \r\n [categories]=\"categories\" \r\n [series]=\"series\"\r\n (yAxisWidthChange)=\"yAxisWidthChange($event)\"></g>\r\n\r\n <g x-axis \r\n [xScale]=\"xScale\" \r\n [yScale]=\"yScale\" \r\n [options]=\"options\" \r\n [categories]=\"categories\" \r\n [series]=\"series\"\r\n (xAxisHeightChange)=\"xAxisHeightChange($event)\"></g>\r\n\r\n <g data-z-index=\"0.1\" >\r\n <rect *ngFor=\"let bar of bars\" \r\n [attr.class]=\"bar.className\"\r\n [attr.x]=\"bar.x+this.options.yAxis.width\"\r\n [tooltip]=\"bar.value+', '+bar.group+', '+bar.data\" \r\n [placement]=\"toolTipPlaccement(bar.data)\" \r\n [tooltipColor]=\"bar.color\" \r\n delay=\"10\"\r\n [attr.y]=\"bar.y+this.options.header.height\" \r\n [attr.width]=\"bar.width\" [attr.height]=\"bar.height\"\r\n [attr.fill]=\"bar.color\" opacity=\"1\" tabindex=\"-1\" role=\"img\"\r\n aria-label=\"1. Jan, 49.9. Tokyo.\"></rect>\r\n </g>\r\n </svg>\r\n <chart-legend\r\n *ngIf=\"groupName.length\"\r\n [groupName]=\"groupName\"\r\n [options]=\"options\"\r\n [series] = \"series\" \r\n >\r\n </chart-legend>\r\n \r\n</div>\r\n\r\n",
// changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".tooltip-example{text-align:center;padding:0 50px}.tooltip-example [tooltip]{display:inline-block;margin:50px 20px;width:180px;height:50px;border:1px solid gray;border-radius:5px;line-height:50px;text-align:center}.ng-tooltip{position:absolute;max-width:150px;font-size:14px;text-align:center;color:#fafae3;padding:3px 8px;background:#282a36;border-radius:4px;z-index:1000;opacity:0}.ng-tooltip:after{content:\"\";position:absolute;border-style:solid}.ng-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000 transparent transparent}.ng-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000}.ng-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000}.ng-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000 transparent transparent}.ng-tooltip-show{opacity:1}.horizontal_bar{-webkit-animation:1s linear forwards horizontal_bar_frames;animation:1s linear forwards horizontal_bar_frames}@-webkit-keyframes horizontal_bar_frames{from{width:0}}@keyframes horizontal_bar_frames{from{width:0}}.vertical_bar{-webkit-animation:1s linear forwards vertical_bar_frames;animation:1s linear forwards vertical_bar_frames}@-webkit-keyframes vertical_bar_frames{from{height:0}}@keyframes vertical_bar_frames{from{height:0}}"]
}] }
];
/** @nocollapse */
ngxChartsBarComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
ngxChartsBarComponent.propDecorators = {
options: [{ type: Input }],
categories: [{ type: Input }],
series: [{ type: Input }],
onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
};
if (false) {
/**
* @type {?}
* @private
*/
ngxChartsBarComponent.prototype.customOptions;
/**
* @type {?}
* @private
*/
ngxChartsBarComponent.prototype._options;
/** @type {?} */
ngxChartsBarComponent.prototype.categories;
/** @type {?} */
ngxChartsBarComponent.prototype.series;
/** @type {?} */
ngxChartsBarComponent.prototype.element;
/** @type {?} */
ngxChartsBarComponent.prototype.xScale;
/** @type {?} */
ngxChartsBarComponent.prototype.innerScale;
/** @type {?} */
ngxChartsBarComponent.prototype.yScale;
/** @type {?} */
ngxChartsBarComponent.prototype.bars;
/** @type {?} */
ngxChartsBarComponent.prototype.groupName;
/** @type {?} */
ngxChartsBarComponent.prototype.groupBarPaddingBK;
/** @type {?} */
ngxChartsBarComponent.prototype.innerBarPaddingBK;
/** @type {?} */
ngxChartsBarComponent.prototype.colorScale;
/** @type {?} */
ngxChartsBarComponent.prototype.trimLabel;
/**
* @type {?}
* @private
*/
ngxChartsBarComponent.prototype.chartElement;
/**
* @type {?}
* @private
*/
ngxChartsBarComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ngxChartsBarModule {
}
ngxChartsBarModule.decorators = [
{ type: NgModule, args: [{
declarations: [ngxChartsBarComponent],
imports: [CommonModule, AxesModule, HeaderModule, LegendModule, TooltipModule],
exports: [ngxChartsBarComponent],
providers: [],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ngxChartsStackedComponent {
/**
* @param {?} element
* @param {?} chartElement
* @param {?} cdr
*/
constructor(element, chartElement, cdr) {
this.chartElement = chartElement;
this.cdr = cdr;
this.customOptions = {
barType: 'vertical',
title: '',
subtitle: '',
height: 0,
width: 0,
padding: 5,
xAxis: {
title: '',
height: 0,
labelRotation: 0,
labelAlign: 'left',
labelEllipsis: false,
labelEllipsisSize: 16
},
yAxis: {
title: '',
width: 0,
height: 0,
labelRotation: 0,
labelEllipsis: false,
labelEllipsisSize: 16
},
legend: {
labelEllipsis: false,
labelEllipsisSize: 16
},
plotBackground: {
x: 0,
y: 0,
height: 0,
width: 0
},
plotOptions: {
groupBarPadding: 20,
innerBarPadding: 3
},
header: {
height: 0,
width: 0
}
};
this._options = {};
this._series = [];
this.categories = [];
this.bars = [];
this.groupName = [];
this.element = element.nativeElement;
this.trimLabel = trimLabel;
}
/**
* @param {?} obj
* @return {?}
*/
set options(obj) {
/** @type {?} */
let xAxis = obj.xAxis;
xAxis['labelEllipsis'] = (obj.xAxis.labelEllipsisSize != undefined && obj.xAxis.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let yAxis = obj.yAxis;
yAxis['labelEllipsis'] = (obj.yAxis.labelEllipsisSize != undefined && obj.yAxis.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let legend = obj.legend;
legend['labelEllipsis'] = (obj.legend.labelEllipsisSize != undefined && obj.legend.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let plotBackground = obj.plotBackground;
/** @type {?} */
let plotOptions = obj.plotOptions;
/** @type {?} */
let header = obj.header;
delete obj['xAxis'];
delete obj['yAxis'];
delete obj['legend'];
delete obj['plotBackground'];
delete obj['plotOptions'];
delete obj['header'];
this._options = Object.assign({}, this.customOptions, obj, { xAxis: Object.assign({}, this.customOptions.xAxis, xAxis), yAxis: Object.assign({}, this.customOptions.yAxis, yAxis), legend: Object.assign({}, this.customOptions.legend, legend), plotBackground: Object.assign({}, this.customOptions.plotBackground, plotBackground), plotOptions: Object.assign({}, this.customOptions.plotOptions, plotOptions), header: Object.assign({}, this.customOptions.header, header) });
// console.log(this._options)
}
/**
* @return {?}
*/
get options() {
return this._options;
}
// @Input() series: any=[];
/**
* @param {?} data
* @return {?}
*/
set series(data) {
this._series = data;
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < data[i].data.length; j++) {
this._series[i].data[j] = this._series[i].data[j] < 0 ? 0 : this._series[i].data[j];
}
}
}
;
/**
* @return {?}
*/
get series() {
return this._series;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
this.groupBarPaddingBK = this.options.plotOptions.groupBarPadding;
this.innerBarPaddingBK = this.options.plotOptions.innerBarPadding;
setTimeout((/**
* @return {?}
*/
() => this.update()));
}
/**
* @return {?}
*/
ngOnInit() {
this.options.width = this.options.width;
this.options.height = this.options.height;
this.update();
}
/**
* @return {?}
*/
update() {
// console.log("ttttttt",this.options)
/** @type {?} */
const hostElem = this.chartElement.nativeElement;
/** @type {?} */
let dims = hostElem.parentNode !== null ? hostElem.parentNode.getBoundingClientRect() : { height: 400, width: 800 };
/** @type {?} */
var style = hostElem.parentNode.currentStyle || window.getComputedStyle(hostElem.parentNode);
this.options.height = !this.options.height ? dims.height - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight) : this.options.height;
this.options.width = !this.options.width ? dims.width - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight) : dims.width - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight);
this.calPlotBackground();
/** @type {?} */
let countFlag = false;
this.options.plotOptions.groupBarPadding = this.groupBarPaddingBK;
this.options.plotOptions.innerBarPadding = this.innerBarPaddingBK;
do {
if (countFlag == true) {
this.options.plotOptions.groupBarPadding--;
this.options.plotOptions.innerBarPadding = 2;
}
if (this.options.barType == 'vertical') {
this.xScale = this.getXScale();
}
else {
this.yScale = this.getXScale();
}
this.innerScale = this.getInnerScale();
countFlag = true;
} while (this.innerScale.bandwidth() < 2);
//
if (this.options.barType == 'vertical') {
this.yScale = this.getYScale();
}
else {
this.xScale = this.getYScale();
}
/** @type {?} */
let colorHelper = new ColorHelper(this.options, this.series);
this.colorScale = colorHelper.generateColorScale();
setTimeout((/**
* @return {?}
*/
() => {
this.groupName = [];
this.series.map((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.name)
this.groupName.push({
name: item.name,
color: this.colorScale(item.name)
});
}));
this.createBar();
//setTimeout(() => {
// for (let i=0; i<this.bars.length; i++) {
// console.log(this.bars[i].className)
// transition(select(this.element)).select('.bar02').transition()
// .duration(500)
// .attr('width', this.bars[i].width);
// }
//},1000)
}));
this.cdr.detectChanges();
}
/**
* @return {?}
*/
getXScale() {
/** @type {?} */
let spacing;
/** @type {?} */
let range;
if (this.options.barType == 'vertical') {
spacing = (this.categories.length / (this.options.plotBackground.width / this.options.plotOptions.groupBarPadding));
range = [0, this.options.plotBackground.width];
}
else {
/** @type {?} */
let length = this.options.height - this.options.header.height;
spacing = (this.categories.length / (this.options.plotBackground.height / this.options.plotOptions.groupBarPadding));
range = [0, this.options.plotBackground.height];
}
return scaleBand()
.range(range)
.paddingInner(spacing)
.paddingOuter(0.1)
.domain(this.categories);
}
/**
* @return {?}
*/
getInnerScale() {
/** @type {?} */
let groupDataArr = ['All'];
// for (let i=0; i<this.series.length; i++) {
// groupDataArr.push(this.series[i].name);
// }
/** @type {?} */
let spacing;
/** @type {?} */
let range;
if (this.options.barType == 'vertical') {
spacing = (this.series.length / (this.xScale.bandwidth() / this.options.plotOptions.innerBarPadding));
range = this.xScale.bandwidth();
}
else {
spacing = (this.series.length / (this.yScale.bandwidth() / this.options.plotOptions.innerBarPadding));
range = this.yScale.bandwidth();
}
return scaleBand()
.range([0, range])
.paddingInner(spacing)
.domain(groupDataArr);
}
/**
* @return {?}
*/
getYScale() {
/** @type {?} */
let uniqueValue = new Set();
if (this.series.length != 0) {
for (let i = 0; i < this.series[0].data.length; i++) {
/** @type {?} */
let sum = 0;
for (let j = 0; j < this.series.length; j++) {
sum += this.series[j].data[i];
}
uniqueValue.add(sum);
}
}
// this.series.map((item) => {
// item.data.map((value) => {
// uniqueValue.add(value);
// });
// });
/** @type {?} */
let min = Math.min(...uniqueValue);
min = min > 0 ? 0 : min;
/** @type {?} */
let max = Math.max(0, ...uniqueValue);
max = max > 0 ? max : 0;
/** @type {?} */
let range = [];
if (this.options.barType == 'vertical') {
/** @type {?} */
let value = this.options.plotBackground.height;
// console.log("bar getYScale",value)
range = [value, 0];
// console.log("bar getYScale - ", range)
}
else {
/** @type {?} */
let value = this.options.plotBackground.width - 30;
range = [0, value];
}
// console.log("bar getYScale --- ", range, min, max)
return scaleLinear()
.range(range)
.domain([min, max]);
//return this.scale.nice().ticks();
}
/**
* @return {?}
*/
calPlotBackground() {
this.options = Object.assign({}, this.options, { plotBackground: Object.assign({}, this.options.plotBackground, { x: 0, y: 0, height: this.options.height - this.options.xAxis.height - this.options.header.height - this.options.padding, width: this.options.width - this.options.yAxis.width - this.options.padding }) });
// console.log("calPlotBackground", JSON.stringify(this.options));
}
/**
* @return {?}
*/
createBar() {
//console.log("this.innerScale.bandwidth() "+this.innerScale.bandwidth())
this.bars = [];
if (this.options.barType == 'vertical') {
this.categories.map((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
(item, index) => {
/** @type {?} */
let prevY = 0;
for (let i = 0; i < this.series.length; i++) {
/** @type {?} */
const bar = {
value: item,
//jan,feb
data: this.series[i].data[index],
//101,202
group: this.series[i].name,
color: this.colorScale(this.series[i].name),
//formattedLabel,
width: this.innerScale.bandwidth(),
height: this.series[i].data[index] > 0 ? (this.yScale(0) - this.yScale(this.series[i].data[index])) : (this.yScale(this.series[i].data[index]) - this.yScale(0)),
x: this.innerScale('All') + this.xScale(item),
//y: prevHeight + ( this.series[i].data[index]>0? this.yScale(this.series[i].data[index]):this.yScale(0) ),
className: "vertical_bar"
};
if (i == 0) {
bar['y'] = this.series[i].data[index] > 0 ? this.yScale(this.series[i].data[index]) : this.yScale(0);
}
else {
bar['y'] = prevY - bar.height;
}
prevY = bar.y;
this.bars.push(bar);
}
}));
}
else {
this.categories.map((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
(item, index) => {
/** @type {?} */
let prevX = 0;
for (let i = 0; i < this.series.length; i++) {
/** @type {?} */
const bar = {
value: item,
//jan,feb
data: this.series[i].data[index],
//101,202
group: this.series[i].name,
color: this.colorScale(this.series[i].name),
//formattedLabel,
width: this.series[i].data[index] > 0 ? (this.xScale(this.series[i].data[index]) - this.xScale(0)) : (this.xScale(0) - this.xScale(this.series[i].data[index])),
height: this.innerScale.bandwidth(),
// x: this.series[i].data[index]>0? this.xScale(0):this.xScale(this.series[i].data[index]),
y: this.innerScale('All') + this.yScale(item),
className: "horizontal_bar"
};
if (i == 0) {
bar['x'] = this.series[i].data[index] > 0 ? this.xScale(0) : this.xScale(this.series[i].data[index]);
}
else {
bar['x'] = prevX;
}
prevX = bar.x + bar.width;
this.bars.push(bar);
}
}));
}
}
/**
* @param {?} __0
* @return {?}
*/
yAxisWidthChange({ yAxisWidth, yAxisHeight, yAxisRightWidth }) {
//console.log("yAxisWidth "+yAxisWidth)
this.options = Object.assign({}, this.options, { yAxis: Object.assign({}, this.options.yAxis, { width: yAxisWidth, height: yAxisHeight }) });
//console.log( this.options)
this.update();
}
/**
* @param {?} __0
* @return {?}
*/
xAxisHeightChange({ xAxisHeight }) {
this.options = Object.assign({}, this.options, { xAxis: Object.assign({}, this.options.xAxis, { height: xAxisHeight }) });
//console.log("xAxisHeightChange", xAxisHeight, JSON.stringify(this.options.xAxis));
this.update();
}
/**
* @param {?} __0
* @return {?}
*/
headerHeightChange({ headerHeight }) {
this.options = Object.assign({}, this.options, { header: Object.assign({}, this.options.header, { height: headerHeight }) });
this.update();
}
/**
* @param {?} data
* @return {?}
*/
toolTipPlaccement(data) {
if (this.options.barType == 'vertical') {
return data > 0 ? 'top' : 'bottom';
}
else {
return data > 0 ? 'right' : 'left';
}
}
/**
* @param {?} event
* @return {?}
*/
onResize(event) {
//console.log("window:resize")
setTimeout((/**
* @return {?}
*/
() => this.update()));
}
/**
* @return {?}
*/
getViewBox() {
if (this.options.width > 0 && this.options.height > 0)
return '0 0 ' + this.options.width + ' ' + this.options.height;
else
return '0 0 0 0';
}
/**
* @private
* @param {?} str
* @return {?}
*/
strToNumber(str) {
/** @type {?} */
let numberPattern = /\d+/g;
/** @type {?} */
let num = str.match(numberPattern).join('');
return parseFloat(num);
}
}
ngxChartsStackedComponent.decorators = [
{ type: Component, args: [{
selector: "ngx-charts-stacked",
template: "<div [style.width]=\"options.width+'px'\" [style.border]=\"'1px solid #f3f3f3'\">\r\n\r\n <svg version=\"1.1\" class=\"highcharts-root\" [attr.padding]=\"options.padding\" [attr.width]=\"options.width\"\r\n [attr.height]=\"options.height\" [attr.viewBox]=\"getViewBox()\"\r\n aria-label=\"Interactive chart\" [style.border]=\"'0px solid gray'\" [style.padding]=\"options.padding\"\r\n aria-hidden=\"false\">\r\n\r\n <g header [options]=\"options\" (headerHeightChange)=\"headerHeightChange($event)\"></g>\r\n\r\n <g y-axis \r\n [xScale]=\"xScale\" \r\n [yScale]=\"yScale\" \r\n [options]=\"options\" \r\n [categories]=\"categories\" \r\n [series]=\"series\"\r\n (yAxisWidthChange)=\"yAxisWidthChange($event)\"></g>\r\n\r\n <g x-axis \r\n [xScale]=\"xScale\" \r\n [yScale]=\"yScale\" \r\n [options]=\"options\" \r\n [categories]=\"categories\" \r\n [series]=\"series\"\r\n (xAxisHeightChange)=\"xAxisHeightChange($event)\"></g>\r\n\r\n <g data-z-index=\"0.1\" >\r\n <rect *ngFor=\"let bar of bars\" \r\n [attr.class]=\"bar.className\"\r\n [attr.x]=\"bar.x+this.options.yAxis.width\"\r\n [tooltip]=\"bar.value+', '+bar.group+', '+bar.data\" \r\n [tooltipColor]=\"bar.color\" \r\n [placement]=\"toolTipPlaccement(bar.data)\" \r\n delay=\"10\"\r\n [attr.y]=\"bar.y+this.options.header.height\" \r\n [attr.width]=\"bar.width\" [attr.height]=\"bar.height\"\r\n [attr.fill]=\"bar.color\" opacity=\"1\" tabindex=\"-1\" role=\"img\"\r\n aria-label=\"1. Jan, 49.9. Tokyo.\"></rect>\r\n </g>\r\n </svg>\r\n <chart-legend\r\n *ngIf=\"groupName.length\"\r\n [groupName]=\"groupName\"\r\n [options]=\"options\"\r\n [series] = \"series\" \r\n >\r\n </chart-legend>\r\n \r\n</div>\r\n\r\n",
// changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".tooltip-example{text-align:center;padding:0 50px}.tooltip-example [tooltip]{display:inline-block;margin:50px 20px;width:180px;height:50px;border:1px solid gray;border-radius:5px;line-height:50px;text-align:center}.ng-tooltip{position:absolute;max-width:150px;font-size:14px;text-align:center;color:#fafae3;padding:3px 8px;background:#282a36;border-radius:4px;z-index:1000;opacity:0}.ng-tooltip:after{content:\"\";position:absolute;border-style:solid}.ng-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000 transparent transparent}.ng-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000}.ng-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000}.ng-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000 transparent transparent}.ng-tooltip-show{opacity:1}.horizontal_bar{-webkit-animation:1s linear forwards horizontal_bar_frames;animation:1s linear forwards horizontal_bar_frames}@-webkit-keyframes horizontal_bar_frames{from{width:0}}@keyframes horizontal_bar_frames{from{width:0}}.vertical_bar{-webkit-animation:1s linear forwards vertical_bar_frames;animation:1s linear forwards vertical_bar_frames}@-webkit-keyframes vertical_bar_frames{from{height:0}}@keyframes vertical_bar_frames{from{height:0}}"]
}] }
];
/** @nocollapse */
ngxChartsStackedComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
ngxChartsStackedComponent.propDecorators = {
options: [{ type: Input }],
categories: [{ type: Input }],
series: [{ type: Input }],
onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
};
if (false) {
/**
* @type {?}
* @private
*/
ngxChartsStackedComponent.prototype.customOptions;
/**
* @type {?}
* @private
*/
ngxChartsStackedComponent.prototype._options;
/**
* @type {?}
* @private
*/
ngxChartsStackedComponent.prototype._series;
/** @type {?} */
ngxChartsStackedComponent.prototype.categories;
/** @type {?} */
ngxChartsStackedComponent.prototype.element;
/** @type {?} */
ngxChartsStackedComponent.prototype.xScale;
/** @type {?} */
ngxChartsStackedComponent.prototype.innerScale;
/** @type {?} */
ngxChartsStackedComponent.prototype.yScale;
/** @type {?} */
ngxChartsStackedComponent.prototype.bars;
/** @type {?} */
ngxChartsStackedComponent.prototype.groupName;
/** @type {?} */
ngxChartsStackedComponent.prototype.groupBarPaddingBK;
/** @type {?} */
ngxChartsStackedComponent.prototype.innerBarPaddingBK;
/** @type {?} */
ngxChartsStackedComponent.prototype.colorScale;
/** @type {?} */
ngxChartsStackedComponent.prototype.trimLabel;
/**
* @type {?}
* @private
*/
ngxChartsStackedComponent.prototype.chartElement;
/**
* @type {?}
* @private
*/
ngxChartsStackedComponent.prototype.cdr;
/* Skipping unhandled member: ;*/
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ngxChartsStackedModule {
}
ngxChartsStackedModule.decorators = [
{ type: NgModule, args: [{
declarations: [ngxChartsStackedComponent],
imports: [CommonModule, AxesModule, HeaderModule, LegendModule, TooltipModule],
exports: [ngxChartsStackedComponent],
providers: [],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ngxChartsLineComponent {
/**
* @param {?} chartElement
* @param {?} cdr
*/
constructor(chartElement, cdr) {
this.chartElement = chartElement;
this.cdr = cdr;
this.customOptions = {
barType: 'vertical',
title: '',
subtitle: '',
height: 0,
width: 0,
padding: 5,
xAxis: {
title: '',
height: 0,
labelRotation: 0,
labelAlign: 'left',
labelEllipsis: false,
labelEllipsisSize: 16
},
yAxis: {
title: '',
width: 0,
height: 0,
labelRotation: 0,
labelEllipsis: false,
labelEllipsisSize: 16
},
legend: {
labelEllipsis: false,
labelEllipsisSize: 16
},
plotBackground: {
x: 0,
y: 0,
height: 0,
width: 0
},
plotOptions: {
groupBarPadding: 20,
innerBarPadding: 3
},
header: {
height: 0,
width: 0
}
};
this._options = {};
this.categories = [];
this.series = [];
this.lines = [];
this.lineCircle = [];
this.groupName = [];
}
/**
* @param {?} obj
* @return {?}
*/
set options(obj) {
/** @type {?} */
let xAxis = obj.xAxis;
xAxis['labelEllipsis'] = (obj.xAxis.labelEllipsisSize != undefined && obj.xAxis.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let yAxis = obj.yAxis;
yAxis['labelEllipsis'] = (obj.yAxis.labelEllipsisSize != undefined && obj.yAxis.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let legend = obj.legend;
legend['labelEllipsis'] = (obj.legend.labelEllipsisSize != undefined && obj.legend.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let plotBackground = obj.plotBackground;
/** @type {?} */
let plotOptions = obj.plotOptions;
/** @type {?} */
let header = obj.header;
delete obj['xAxis'];
delete obj['yAxis'];
delete obj['legend'];
delete obj['plotBackground'];
delete obj['plotOptions'];
delete obj['header'];
this._options = Object.assign({}, this.customOptions, obj, { xAxis: Object.assign({}, this.customOptions.xAxis, xAxis), yAxis: Object.assign({}, this.customOptions.yAxis, yAxis), legend: Object.assign({}, this.customOptions.legend, legend), plotBackground: Object.assign({}, this.customOptions.plotBackground, plotBackground), plotOptions: Object.assign({}, this.customOptions.plotOptions, plotOptions), header: Object.assign({}, this.customOptions.header, header) });
this._options['barType'] = 'vertical';
}
/**
* @return {?}
*/
get options() {
return this._options;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
this.groupBarPaddingBK = this.options.plotOptions.groupBarPadding;
this.innerBarPaddingBK = this.options.plotOptions.innerBarPadding;
setTimeout((/**
* @return {?}
*/
() => this.update()));
}
/**
* @return {?}
*/
ngOnInit() {
this.options.width = this.options.width;
this.options.height = this.options.height;
this.update();
}
/**
* @return {?}
*/
update() {
// console.log("ttttttt",this.options)
/** @type {?} */
const hostElem = this.chartElement.nativeElement;
/** @type {?} */
let dims = hostElem.parentNode !== null ? hostElem.parentNode.getBoundingClientRect() : { height: 400, width: 800 };
/** @type {?} */
var style = hostElem.parentNode.currentStyle || window.getComputedStyle(hostElem.parentNode);
this.options.height = !this.options.height ? dims.height - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight) : this.options.height;
this.options.width = !this.options.width ? dims.width - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight) : dims.width - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight);
this.calPlotBackground();
/** @type {?} */
let countFlag = false;
this.options.plotOptions.groupBarPadding = this.groupBarPaddingBK;
this.options.plotOptions.innerBarPadding = this.innerBarPaddingBK;
do {
if (countFlag == true) {
this.options.plotOptions.groupBarPadding--;
this.options.plotOptions.innerBarPadding = 2;
}
if (this.options.barType == 'vertical') {
this.xScale = this.getXScale();
}
else {
this.yScale = this.getXScale();
}
this.innerScale = this.getInnerScale();
countFlag = true;
} while (this.innerScale.bandwidth() < 2);
//
if (this.options.barType == 'vertical') {
this.yScale = this.getYScale();
}
else {
this.xScale = this.getYScale();
}
/** @type {?} */
let colorHelper = new ColorHelper(this.options, this.series);
this.colorScale = colorHelper.generateColorScale();
setTimeout((/**
* @return {?}
*/
() => {
this.groupName = [];
this.series.map((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.name)
this.groupName.push({
name: item.name,
color: this.colorScale(item.name)
});
}));
this.createLine();
}));
this.cdr.detectChanges();
}
/**
* @return {?}
*/
getXScale() {
/** @type {?} */
let spacing;
/** @type {?} */
let range;
if (this.options.barType == 'vertical') {
spacing = (this.categories.length / (this.options.plotBackground.width / this.options.plotOptions.groupBarPadding));
range = [0, this.options.plotBackground.width];
}
else {
/** @type {?} */
let length = this.options.height - this.options.header.height;
spacing = (this.categories.length / (this.options.plotBackground.height / this.options.plotOptions.groupBarPadding));
range = [0, this.options.plotBackground.height];
}
return scaleBand()
.range(range)
.paddingInner(spacing)
.paddingOuter(0.1)
.domain(this.categories);
}
/**
* @return {?}
*/
getInnerScale() {
/** @type {?} */
let groupDataArr = [];
for (let i = 0; i < this.series.length; i++) {
groupDataArr.push(this.series[i].name);
}
/** @type {?} */
let spacing;
/** @type {?} */
let range;
if (this.options.barType == 'vertical') {
spacing = (this.series.length / (this.xScale.bandwidth() / this.options.plotOptions.innerBarPadding));
range = this.xScale.bandwidth();
}
else {
spacing = (this.series.length / (this.yScale.bandwidth() / this.options.plotOptions.innerBarPadding));
range = this.yScale.bandwidth();
}
return scaleBand()
.range([0, range])
.paddingInner(spacing)
.domain(groupDataArr);
}
/**
* @return {?}
*/
getYScale() {
/** @type {?} */
let uniqueValue = new Set();
this.series.map((/**
* @param {?} item
* @return {?}
*/
(item) => {
item.data.map((/**
* @param {?} value
* @return {?}
*/
(value) => {
uniqueValue.add(value);
}));
}));
/** @type {?} */
let min = Math.min(...uniqueValue);
min = min > 0 ? 0 : min;
/** @type {?} */
let max = Math.max(0, ...uniqueValue);
max = max > 0 ? max : 0;
/** @type {?} */
let range = [];
if (this.options.barType == 'vertical') {
/** @type {?} */
let value = this.options.plotBackground.height;
// console.log("bar getYScale",value)
range = [value, 0];
// console.log("bar getYScale - ", range)
}
else {
/** @type {?} */
let value = this.options.plotBackground.width - 30;
range = [0, value];
}
// console.log("bar getYScale --- ", range, min, max)
return scaleLinear()
.range(range)
.domain([min, max]);
//return this.scale.nice().ticks();
}
/**
* @return {?}
*/
calPlotBackground() {
this.options = Object.assign({}, this.options, { plotBackground: Object.assign({}, this.options.plotBackground, { x: 0, y: 0, height: this.options.height - this.options.xAxis.height - this.options.header.height - this.options.padding, width: this.options.width - this.options.yAxis.width - this.options.padding }) });
// console.log("calPlotBackground", JSON.stringify(this.options));
}
/**
* @return {?}
*/
createLine() {
//console.log("this.innerScale.bandwidth() "+this.innerScale.bandwidth())
this.lines = [];
this.lineCircle = [];
for (let i = 0; i < this.series.length; i++) {
/** @type {?} */
let line = { points: "", color: "" };
for (let j = 0; j < this.categories.length; j++) {
/** @type {?} */
let x = this.xScale(this.categories[j]) + (this.xScale.bandwidth() / 2) + this.options.yAxis.width;
/** @type {?} */
let y = this.yScale(this.series[i].data[j]) + this.options.header.height;
line.points += (x + "," + y + " ");
line.color = this.colorScale(this.series[i].name);
this.lineCircle.push({
x,
y,
color: this.colorScale(this.series[i].name),
value: this.categories[j],
//jan,feb
data: this.series[i].data[j],
//101,202
group: this.series[i].name
});
}
this.lines.push(line);
}
// console.log(this.lineCircle);
}
/**
* @param {?} __0
* @return {?}
*/
yAxisWidthChange({ yAxisWidth, yAxisHeight }) {
//console.log("yAxisWidth "+yAxisWidth)
this.options = Object.assign({}, this.options, { yAxis: Object.assign({}, this.options.yAxis, { width: yAxisWidth, height: yAxisHeight }) });
//console.log( this.options)
this.update();
}
/**
* @param {?} __0
* @return {?}
*/
xAxisHeightChange({ xAxisHeight }) {
this.options = Object.assign({}, this.options, { xAxis: Object.assign({}, this.options.xAxis, { height: xAxisHeight }) });
//console.log("xAxisHeightChange", xAxisHeight, JSON.stringify(this.options.xAxis));
this.update();
}
/**
* @param {?} __0
* @return {?}
*/
headerHeightChange({ headerHeight }) {
this.options = Object.assign({}, this.options, { header: Object.assign({}, this.options.header, { height: headerHeight }) });
this.update();
}
/**
* @param {?} data
* @return {?}
*/
toolTipPlaccement(data) {
if (this.options.barType == 'vertical') {
return data > 0 ? 'top' : 'bottom';
}
else {
return data > 0 ? 'right' : 'left';
}
}
/**
* @param {?} event
* @return {?}
*/
onResize(event) {
//console.log("window:resize")
setTimeout((/**
* @return {?}
*/
() => this.update()));
}
/**
* @private
* @param {?} str
* @return {?}
*/
strToNumber(str) {
/** @type {?} */
let numberPattern = /\d+/g;
/** @type {?} */
let num = str.match(numberPattern).join('');
return parseFloat(num);
}
}
ngxChartsLineComponent.decorators = [
{ type: Component, args: [{
selector: "ngx-charts-line",
template: "<div [style.width]=\"options.width+'px'\" [style.border]=\"'1px solid #f3f3f3'\">\r\n \r\n <svg version=\"1.1\" class=\"highcharts-root\" [attr.padding]=\"options.padding\" [attr.width]=\"options.width\"\r\n [attr.height]=\"options.height\" [attr.viewBox]=\"'0 0 '+options.width +' '+ options.height\"\r\n aria-label=\"Interactive chart\" [style.border]=\"'0px solid gray'\" [style.padding]=\"options.padding\"\r\n aria-hidden=\"false\">\r\n\r\n <g header [options]=\"options\" (headerHeightChange)=\"headerHeightChange($event)\"></g>\r\n\r\n <g y-axis \r\n [xScale]=\"xScale\" \r\n [yScale]=\"yScale\" \r\n [options]=\"options\" \r\n [categories]=\"categories\" \r\n [series]=\"series\"\r\n (yAxisWidthChange)=\"yAxisWidthChange($event)\"></g>\r\n\r\n <g x-axis \r\n [xScale]=\"xScale\" \r\n [yScale]=\"yScale\" \r\n [options]=\"options\" \r\n [categories]=\"categories\" \r\n [series]=\"series\"\r\n (xAxisHeightChange)=\"xAxisHeightChange($event)\"></g>\r\n\r\n <g data-z-index=\"0.1\">\r\n <polyline \r\n class=\"line\"\r\n *ngFor=\"let line of lines\" \r\n [attr.points]=\"line.points\"\r\n [style.fill]=\"'none'\"\r\n [style.stroke]=\"line.color\"\r\n [style.stroke-width]=\"3\" >\r\n </polyline>\r\n <circle \r\n *ngFor=\"let lc of lineCircle\"\r\n [tooltip]=\"lc.value+', '+lc.group+', '+lc.data\" \r\n [tooltipColor]=\"lc.color\"\r\n [placement]=\"toolTipPlaccement(lc.data)\" \r\n [attr.cx]=\"lc.x\" \r\n [attr.cy]=\"lc.y\" \r\n [attr.r]=\"3\" \r\n [attr.stroke]=\"lc.color\" \r\n [attr.stroke-width]=\"3\" \r\n [attr.fill]=\"lc.color\">\r\n </circle>\r\n </g>\r\n\r\n </svg>\r\n <chart-legend\r\n *ngIf=\"groupName.length\"\r\n [groupName]=\"groupName\"\r\n [options]=\"options\"\r\n [series] = \"series\" \r\n >\r\n </chart-legend>\r\n \r\n</div>\r\n\r\n",
// changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".tooltip-example{text-align:center;padding:0 50px}.tooltip-example [tooltip]{display:inline-block;margin:50px 20px;width:180px;height:50px;border:1px solid gray;border-radius:5px;line-height:50px;text-align:center}.ng-tooltip{position:absolute;max-width:150px;font-size:14px;text-align:center;color:#fafae3;padding:3px 8px;background:#282a36;border-radius:4px;z-index:1000;opacity:0}.ng-tooltip:after{content:\"\";position:absolute;border-style:solid}.ng-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000 transparent transparent}.ng-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000}.ng-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000}.ng-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000 transparent transparent}.ng-tooltip-show{opacity:1}.line{stroke-dasharray:2000;stroke-dashoffset:2000;-webkit-animation:2s linear forwards line_frames;animation:2s linear forwards line_frames}@-webkit-keyframes line_frames{to{stroke-dashoffset:0}}@keyframes line_frames{to{stroke-dashoffset:0}}"]
}] }
];
/** @nocollapse */
ngxChartsLineComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
ngxChartsLineComponent.propDecorators = {
options: [{ type: Input }],
categories: [{ type: Input }],
series: [{ type: Input }],
onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
};
if (false) {
/**
* @type {?}
* @private
*/
ngxChartsLineComponent.prototype.customOptions;
/**
* @type {?}
* @private
*/
ngxChartsLineComponent.prototype._options;
/** @type {?} */
ngxChartsLineComponent.prototype.categories;
/** @type {?} */
ngxChartsLineComponent.prototype.series;
/** @type {?} */
ngxChartsLineComponent.prototype.xScale;
/** @type {?} */
ngxChartsLineComponent.prototype.innerScale;
/** @type {?} */
ngxChartsLineComponent.prototype.yScale;
/** @type {?} */
ngxChartsLineComponent.prototype.lines;
/** @type {?} */
ngxChartsLineComponent.prototype.lineCircle;
/** @type {?} */
ngxChartsLineComponent.prototype.groupName;
/** @type {?} */
ngxChartsLineComponent.prototype.groupBarPaddingBK;
/** @type {?} */
ngxChartsLineComponent.prototype.innerBarPaddingBK;
/** @type {?} */
ngxChartsLineComponent.prototype.colorScale;
/**
* @type {?}
* @private
*/
ngxChartsLineComponent.prototype.chartElement;
/**
* @type {?}
* @private
*/
ngxChartsLineComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ngxChartsLineModule {
}
ngxChartsLineModule.decorators = [
{ type: NgModule, args: [{
declarations: [ngxChartsLineComponent],
imports: [CommonModule, AxesModule, HeaderModule, LegendModule, TooltipModule],
exports: [ngxChartsLineComponent],
providers: [],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ngxChartsPieComponent {
/**
* @param {?} chartElement
* @param {?} cdr
*/
constructor(chartElement, cdr) {
this.chartElement = chartElement;
this.cdr = cdr;
this.customOptions = {
barType: 'vertical',
title: '',
subtitle: '',
height: 0,
width: 0,
padding: 5,
xAxis: {
title: '',
height: 0,
labelRotation: 0,
labelAlign: 'left',
labelEllipsis: false,
labelEllipsisSize: 16
},
yAxis: {
title: '',
width: 0,
height: 0,
labelRotation: 0,
labelEllipsis: false,
labelEllipsisSize: 16
},
plotBackground: {
x: 0,
y: 0,
height: 0,
width: 0
},
legend: {
labelEllipsis: false,
labelEllipsisSize: 16
},
plotOptions: {
outerRadius: 80,
innerRadius: 0,
labelEllipsis: false,
labelEllipsisSize: 16
},
header: {
height: 0,
width: 0
}
};
this._options = {};
this.categories = [];
this.series = [];
this.pies = [];
this.lineCircle = [];
this.groupName = [];
this.translation = "";
this.trimLabel = trimLabel;
}
/**
* @param {?} obj
* @return {?}
*/
set options(obj) {
/** @type {?} */
let xAxis = obj.xAxis;
/** @type {?} */
let yAxis = obj.yAxis;
/** @type {?} */
let legend = obj.legend;
legend['labelEllipsis'] = (obj.legend.labelEllipsisSize != undefined && obj.legend.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let plotBackground = obj.plotBackground;
/** @type {?} */
let plotOptions = obj.plotOptions;
plotOptions['labelEllipsis'] = (obj.plotOptions.labelEllipsisSize != undefined && obj.plotOptions.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let header = obj.header;
delete obj['xAxis'];
delete obj['yAxis'];
delete obj['legend'];
delete obj['plotBackground'];
delete obj['plotOptions'];
delete obj['header'];
this._options = Object.assign({}, this.customOptions, obj, { xAxis: Object.assign({}, this.customOptions.xAxis, xAxis), yAxis: Object.assign({}, this.customOptions.yAxis, yAxis), legend: Object.assign({}, this.customOptions.legend, legend), plotBackground: Object.assign({}, this.customOptions.plotBackground, plotBackground), plotOptions: Object.assign({}, this.customOptions.plotOptions, plotOptions), header: Object.assign({}, this.customOptions.header, header) });
}
/**
* @return {?}
*/
get options() {
return this._options;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
// this.groupBarPaddingBK=this.options.plotOptions.groupBarPadding;
// this.innerBarPaddingBK=this.options.plotOptions.innerBarPadding;
setTimeout((/**
* @return {?}
*/
() => this.update()));
}
/**
* @return {?}
*/
ngOnInit() {
this.options.width = this.options.width;
this.options.height = this.options.height;
this.update();
}
/**
* @return {?}
*/
update() {
// console.log("ttttttt",this.options)
/** @type {?} */
const hostElem = this.chartElement.nativeElement;
/** @type {?} */
let dims = hostElem.parentNode !== null ? hostElem.parentNode.getBoundingClientRect() : { height: 400, width: 800 };
/** @type {?} */
var style = hostElem.parentNode.currentStyle || window.getComputedStyle(hostElem.parentNode);
this.options.height = !this.options.height ? dims.height - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight) : this.options.height;
this.options.width = !this.options.width ? dims.width - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight) : dims.width - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight);
this.calPlotBackground();
/** @type {?} */
const xOffset = this.options.width / 2;
/** @type {?} */
const yOffset = this.options.header.height + (this.options.plotBackground.height / 2);
this.translation = `translate(${xOffset}, ${yOffset})`;
this.calcArc = this.calculateArc();
this.pieGenerator = this.pieGeneratorFunc();
// console.log(this.pieGenerator)
// let countFlag=false;
// this.options.plotOptions.groupBarPadding=this.groupBarPaddingBK;
// this.options.plotOptions.innerBarPadding=this.innerBarPaddingBK;
// do {
// if (countFlag==true) {
// this.options.plotOptions.groupBarPadding--;
// this.options.plotOptions.innerBarPadding = 2;
// }
// if (this.options.barType=='vertical') {
// this.xScale=this.getXScale();
// }
// else {
// this.yScale=this.getXScale();
// }
// this.innerScale=this.getInnerScale();
// countFlag=true;
// } while (this.innerScale.bandwidth()<2);
//
// if (this.options.barType=='vertical') {
// this.yScale=this.getYScale();
// }
// else {
// this.xScale=this.getYScale();
// }
/** @type {?} */
let colorHelper = new ColorHelper(this.options, this.series);
this.colorScale = colorHelper.generateColorScale();
setTimeout((/**
* @return {?}
*/
() => {
this.groupName = [];
this.series.map((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.name) {
this.groupName.push({
name: item.name,
color: this.colorScale(item.name)
});
}
}));
this.createPie();
}));
this.cdr.detectChanges();
}
/**
* @return {?}
*/
pieGeneratorFunc() {
return pie()
.value((/**
* @param {?} d
* @return {?}
*/
d => d.data))
.sort(null)(this.series);
}
/**
* @return {?}
*/
calculateArc() {
/** @type {?} */
let outerRadius = this.options.plotOptions.outerRadius;
/** @type {?} */
let innerRadius = this.options.plotOptions.innerRadius;
/** @type {?} */
let cornerRadius = 0;
return arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.cornerRadius(cornerRadius);
}
/**
* @return {?}
*/
outerArc() {
/** @type {?} */
const factor = 1.2;
/** @type {?} */
let outerRadius = this.options.plotOptions.outerRadius;
return arc()
.innerRadius(outerRadius * factor)
.outerRadius(outerRadius * factor);
}
/**
* @return {?}
*/
calPlotBackground() {
this.options = Object.assign({}, this.options, { plotBackground: Object.assign({}, this.options.plotBackground, { x: 0, y: 0, height: this.options.height - this.options.xAxis.height - this.options.header.height - this.options.padding, width: this.options.width - this.options.yAxis.width - this.options.padding }) });
// console.log("calPlotBackground", JSON.stringify(this.options));
}
/**
* @return {?}
*/
createPie() {
//console.log("this.innerScale.bandwidth() "+this.innerScale.bandwidth())
this.pies = [];
for (let i = 0; i < this.pieGenerator.length; i++) {
/** @type {?} */
let factor = 1.2;
/** @type {?} */
let tempObj = {
path: this.calcArc.startAngle(this.pieGenerator[i].startAngle).endAngle(this.pieGenerator[i].endAngle)(),
color: this.colorScale(this.pieGenerator[i].data.name),
data: this.pieGenerator[i].data,
pos: this.outerArc().centroid(this.pieGenerator[i]),
labelPath: "",
textAnchor: this.midAngle(this.pieGenerator[i]) < Math.PI ? 'start' : 'end'
};
tempObj["pos"][0] = factor * this.options.plotOptions.outerRadius * (this.midAngle(this.pieGenerator[i]) < Math.PI ? 1 : -1);
//create a line path
/** @type {?} */
const innerPos = this.calcArc.centroid(this.pieGenerator[i]);
/** @type {?} */
let scale = tempObj["pos"][1] / innerPos[1];
if (tempObj["pos"][1] === 0 || innerPos[1] === 0) {
scale = 1;
}
/** @type {?} */
const outerPos = [scale * innerPos[0], scale * innerPos[1]];
tempObj.labelPath = `M${innerPos}L${outerPos}L${tempObj["pos"]}`;
this.pies.push(tempObj);
}
// console.log("all pies : ", this.pies);
}
/**
* @param {?} d
* @return {?}
*/
midAngle(d) {
return d.startAngle + (d.endAngle - d.startAngle) / 2;
}
/**
* @param {?} __0
* @return {?}
*/
yAxisWidthChange({ yAxisWidth, yAxisHeight }) {
//console.log("yAxisWidth "+yAxisWidth)
this.options = Object.assign({}, this.options, { yAxis: Object.assign({}, this.options.yAxis, { width: yAxisWidth, height: yAxisHeight }) });
//console.log( this.options)
this.update();
}
/**
* @param {?} __0
* @return {?}
*/
xAxisHeightChange({ xAxisHeight }) {
this.options = Object.assign({}, this.options, { xAxis: Object.assign({}, this.options.xAxis, { height: xAxisHeight }) });
//console.log("xAxisHeightChange", xAxisHeight, JSON.stringify(this.options.xAxis));
this.update();
}
/**
* @param {?} __0
* @return {?}
*/
headerHeightChange({ headerHeight }) {
this.options = Object.assign({}, this.options, { header: Object.assign({}, this.options.header, { height: headerHeight }) });
this.update();
}
/**
* @param {?} data
* @return {?}
*/
toolTipPlaccement(data) {
if (this.options.barType == 'vertical') {
return data > 0 ? 'top' : 'bottom';
}
else {
return data > 0 ? 'right' : 'left';
}
}
/**
* @param {?} event
* @return {?}
*/
onResize(event) {
setTimeout((/**
* @return {?}
*/
() => this.update()));
}
/**
* @private
* @param {?} str
* @return {?}
*/
strToNumber(str) {
/** @type {?} */
let numberPattern = /\d+/g;
/** @type {?} */
let num = str.match(numberPattern).join('');
return parseFloat(num);
}
}
ngxChartsPieComponent.decorators = [
{ type: Component, args: [{
selector: "ngx-charts-pie",
template: "<div [style.width]=\"options.width+'px'\" [style.border]=\"'1px solid #f3f3f3'\">\r\n\r\n <svg version=\"1.1\" class=\"highcharts-root\" [attr.padding]=\"options.padding\" [attr.width]=\"options.width\"\r\n [attr.height]=\"options.height\" [attr.viewBox]=\"'0 0 '+options.width +' '+ options.height\"\r\n aria-label=\"Interactive chart\" [style.border]=\"'0px solid gray'\" [style.padding]=\"options.padding\"\r\n aria-hidden=\"false\" >\r\n\r\n <g header [options]=\"options\" (headerHeightChange)=\"headerHeightChange($event)\"></g>\r\n <g \r\n [attr.transform]=\"translation\" \r\n *ngFor=\"let pie of pies\" >\r\n <path \r\n class=\"pieSlice\"\r\n [attr.d]=\"pie.path\"\r\n [style.fill]=\"pie.color\"\r\n [tooltip]=\"pie.data.name+', '+pie.data.data\" \r\n [tooltipColor]=\"pie.color\"\r\n [placement]=\"toolTipPlaccement(pie.data.data)\" \r\n ></path>\r\n\r\n <!--label path -->\r\n <path \r\n class=\"pie\"\r\n [attr.d]=\"pie.labelPath\"\r\n [style.stroke]=\"pie.color\"\r\n fill=\"none\"\r\n ></path>\r\n\r\n <text\r\n [attr.x]=\"pie.pos[0]\" \r\n [attr.y]=\"pie.pos[1]\"\r\n [style.textAnchor]=\"pie.textAnchor\"\r\n [style.shapeRendering]=\"'crispEdges'\"\r\n >\r\n {{ options.plotOptions.labelEllipsis ? trimLabel(pie.data.name, options.plotOptions.labelEllipsisSize) : pie.data.name}}\r\n </text>\r\n\r\n </g>\r\n </svg>\r\n <chart-legend\r\n *ngIf=\"groupName.length\"\r\n [groupName]=\"groupName\"\r\n [options]=\"options\"\r\n [series] = \"series\" \r\n >\r\n </chart-legend>\r\n \r\n</div>\r\n\r\n",
// changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".tooltip-example{text-align:center;padding:0 50px}.tooltip-example [tooltip]{display:inline-block;margin:50px 20px;width:180px;height:50px;border:1px solid gray;border-radius:5px;line-height:50px;text-align:center}.ng-tooltip{position:absolute;max-width:150px;font-size:14px;text-align:center;color:#fafae3;padding:3px 8px;background:#282a36;border-radius:4px;z-index:1000;opacity:0}.ng-tooltip:after{content:\"\";position:absolute;border-style:solid}.ng-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000 transparent transparent}.ng-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000}.ng-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000}.ng-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000 transparent transparent}.ng-tooltip-show{opacity:1}.pie{stroke-dasharray:2000;stroke-dashoffset:2000;-webkit-animation:1s linear 1.3s forwards pie_frames;animation:1s linear 1.3s forwards pie_frames}@-webkit-keyframes pie_frames{to{stroke-dashoffset:0}}@keyframes pie_frames{to{stroke-dashoffset:0}}.pieSlice{-webkit-animation:1.5s forwards pieSlice_frames;animation:1.5s forwards pieSlice_frames}@-webkit-keyframes pieSlice_frames{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pieSlice_frames{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}"]
}] }
];
/** @nocollapse */
ngxChartsPieComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
ngxChartsPieComponent.propDecorators = {
options: [{ type: Input }],
categories: [{ type: Input }],
series: [{ type: Input }],
onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
};
if (false) {
/**
* @type {?}
* @private
*/
ngxChartsPieComponent.prototype.customOptions;
/**
* @type {?}
* @private
*/
ngxChartsPieComponent.prototype._options;
/** @type {?} */
ngxChartsPieComponent.prototype.categories;
/** @type {?} */
ngxChartsPieComponent.prototype.series;
/** @type {?} */
ngxChartsPieComponent.prototype.xScale;
/** @type {?} */
ngxChartsPieComponent.prototype.innerScale;
/** @type {?} */
ngxChartsPieComponent.prototype.yScale;
/** @type {?} */
ngxChartsPieComponent.prototype.pies;
/** @type {?} */
ngxChartsPieComponent.prototype.lineCircle;
/** @type {?} */
ngxChartsPieComponent.prototype.groupName;
/** @type {?} */
ngxChartsPieComponent.prototype.colorScale;
/** @type {?} */
ngxChartsPieComponent.prototype.calcArc;
/** @type {?} */
ngxChartsPieComponent.prototype.pieGenerator;
/** @type {?} */
ngxChartsPieComponent.prototype.translation;
/** @type {?} */
ngxChartsPieComponent.prototype.trimLabel;
/**
* @type {?}
* @private
*/
ngxChartsPieComponent.prototype.chartElement;
/**
* @type {?}
* @private
*/
ngxChartsPieComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ngxChartsPieModule {
}
ngxChartsPieModule.decorators = [
{ type: NgModule, args: [{
declarations: [ngxChartsPieComponent],
imports: [CommonModule, AxesModule, HeaderModule, LegendModule, TooltipModule],
exports: [ngxChartsPieComponent],
providers: [],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ngxChartsComboComponent {
/**
* @param {?} chartElement
* @param {?} cdr
*/
constructor(chartElement, cdr) {
this.chartElement = chartElement;
this.cdr = cdr;
this.customOptions = {
barType: 'vertical',
title: '',
subtitle: '',
height: 0,
width: 0,
padding: 5,
xAxis: {
title: '',
height: 0,
labelRotation: 0,
labelAlign: 'left',
labelEllipsis: false,
labelEllipsisSize: 16
},
yAxis: {
title: '',
rightTitle: '',
width: 0,
rightWidth: 0,
height: 0,
labelRotation: 0,
labelEllipsis: false,
labelEllipsisSize: 16
},
legend: {
labelEllipsis: false,
labelEllipsisSize: 16
},
plotBackground: {
x: 0,
y: 0,
height: 0,
width: 0
},
plotOptions: {
groupBarPadding: 20,
innerBarPadding: 3
},
header: {
height: 0,
width: 0
}
};
this._options = {};
this.categories = [];
this.series = [];
this.lines = [];
this.bars = [];
this.lineCircle = [];
this.groupName = [];
}
/**
* @param {?} obj
* @return {?}
*/
set options(obj) {
/** @type {?} */
let xAxis = obj.xAxis;
xAxis['labelEllipsis'] = (obj.xAxis.labelEllipsisSize != undefined && obj.xAxis.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let yAxis = obj.yAxis;
yAxis['labelEllipsis'] = (obj.yAxis.labelEllipsisSize != undefined && obj.yAxis.labelEllipsisSize > 0) ? true : false;
yAxis['title'] = yAxis.leftTitle;
/** @type {?} */
let legend = obj.legend;
legend['labelEllipsis'] = (obj.legend.labelEllipsisSize != undefined && obj.legend.labelEllipsisSize > 0) ? true : false;
/** @type {?} */
let plotBackground = obj.plotBackground;
/** @type {?} */
let plotOptions = obj.plotOptions;
/** @type {?} */
let header = obj.header;
delete obj['xAxis'];
delete obj['yAxis'];
delete obj['legend'];
delete obj['plotBackground'];
delete obj['plotOptions'];
delete obj['header'];
this._options = Object.assign({}, this.customOptions, obj, { xAxis: Object.assign({}, this.customOptions.xAxis, xAxis), yAxis: Object.assign({}, this.customOptions.yAxis, yAxis), legend: Object.assign({}, this.customOptions.legend, legend), plotBackground: Object.assign({}, this.customOptions.plotBackground, plotBackground), plotOptions: Object.assign({}, this.customOptions.plotOptions, plotOptions), header: Object.assign({}, this.customOptions.header, header) });
this._options['barType'] = 'vertical';
}
/**
* @return {?}
*/
get options() {
return this._options;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
this.groupBarPaddingBK = this.options.plotOptions.groupBarPadding;
this.innerBarPaddingBK = this.options.plotOptions.innerBarPadding;
setTimeout((/**
* @return {?}
*/
() => this.update()));
}
/**
* @return {?}
*/
ngOnInit() {
this.options.width = this.options.width;
this.options.height = this.options.height;
this.update();
}
/**
* @return {?}
*/
update() {
// console.log("ttttttt",this.options)
/** @type {?} */
const hostElem = this.chartElement.nativeElement;
/** @type {?} */
let dims = hostElem.parentNode !== null ? hostElem.parentNode.getBoundingClientRect() : { height: 400, width: 800 };
/** @type {?} */
var style = hostElem.parentNode.currentStyle || window.getComputedStyle(hostElem.parentNode);
this.options.height = !this.options.height ? dims.height - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight) : this.options.height;
this.options.width = !this.options.width ? dims.width - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight) : dims.width - this.strToNumber(style.paddingLeft) - this.strToNumber(style.paddingRight);
this.calPlotBackground();
/** @type {?} */
let countFlag = false;
this.options.plotOptions.groupBarPadding = this.groupBarPaddingBK;
this.options.plotOptions.innerBarPadding = this.innerBarPaddingBK;
do {
if (countFlag == true) {
this.options.plotOptions.groupBarPadding--;
this.options.plotOptions.innerBarPadding = 2;
}
if (this.options.barType == 'vertical') {
this.xScale = this.getXScale();
}
else {
// this.yScale=this.getXScale();
}
this.innerScale = this.getInnerScale();
countFlag = true;
} while (this.innerScale.bandwidth() < 2);
//
if (this.options.barType == 'vertical') {
this.yScale = this.getYScale();
this.yRightScale = this.getYRightScale();
}
else {
// this.xScale=this.getYScale();
}
/** @type {?} */
let colorHelper = new ColorHelper(this.options, this.series);
this.colorScale = colorHelper.generateColorScale();
setTimeout((/**
* @return {?}
*/
() => {
this.groupName = [];
this.series.map((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.name) {
this.groupName.push({
name: item.name,
color: this.colorScale(item.name)
});
}
}));
this.createBar();
this.createLine();
}));
this.cdr.detectChanges();
}
/**
* @return {?}
*/
getXScale() {
/** @type {?} */
let spacing;
/** @type {?} */
let range;
if (this.options.barType == 'vertical') {
spacing = (this.categories.length / (this.options.plotBackground.width / this.options.plotOptions.groupBarPadding));
range = [0, this.options.plotBackground.width];
}
else {
// let length=this.options.height-this.options.header.height;
// spacing=(this.categories.length/(this.options.plotBackground.height/this.options.plotOptions.groupBarPadding));
// range=[0, this.options.plotBackground.height];
}
return scaleBand()
.range(range)
.paddingInner(spacing)
.paddingOuter(0.1)
.domain(this.categories);
}
/**
* @return {?}
*/
getInnerScale() {
/** @type {?} */
let groupDataArr = [];
for (let i = 0; i < this.series.length; i++) {
if (this.series[i].type == "verticalBar") {
groupDataArr.push(this.series[i].name);
}
}
/** @type {?} */
let spacing;
/** @type {?} */
let range;
/** @type {?} */
let length = 0;
for (let i = 0; i < this.series.length; i++) {
if (this.series[i].type == "verticalBar") {
length++;
}
}
if (this.options.barType == 'vertical') {
spacing = (length / (this.xScale.bandwidth() / this.options.plotOptions.innerBarPadding));
range = this.xScale.bandwidth();
}
else {
// spacing=(length/(this.yScale.bandwidth()/this.options.plotOptions.innerBarPadding));
// range=this.yScale.bandwidth();
}
return scaleBand()
.range([0, range])
.paddingInner(spacing)
.domain(groupDataArr);
}
/**
* @return {?}
*/
getYScale() {
/** @type {?} */
let uniqueValue = new Set();
this.series.map((/**
* @param {?} item
* @return {?}
*/
(item) => {
if (item.type == "verticalBar") {
item.data.map((/**
* @param {?} value
* @return {?}
*/
(value) => {
uniqueValue.add(value);
}));
}
}));
/** @type {?} */
let min = Math.min(...uniqueValue);
min = min > 0 ? 0 : min;
/** @type {?} */
let max = Math.max(0, ...uniqueValue);
max = max > 0 ? max : 0;
/** @type {?} */
let range = [];
if (this.options.barType == 'vertical') {
/** @type {?} */
let value = this.options.plotBackground.height;
range = [value, 0];
}
// else {
// let value=this.options.plotBackground.width-30;
// range=[0, value];
// }
// console.log("bar getYScale --- ", range, min, max)
return scaleLinear()
.range(range)
.domain([min, max]);
//return this.scale.nice().ticks();
}
/**
* @return {?}
*/
getYRightScale() {
/** @type {?} */
let uniqueValue = new Set();
this.series.map((/**
* @param {?} item
* @return {?}
*/
(item) => {
if (item.type == "line" || item.type == undefined) {
item.data.map((/**
* @param {?} value
* @return {?}
*/
(value) => {
uniqueValue.add(value);
}));
}
}));
/** @type {?} */
let min = Math.min(...uniqueValue);
min = min > 0 ? 0 : min;
/** @type {?} */
let max = Math.max(0, ...uniqueValue);
max = max > 0 ? max : 0;
/** @type {?} */
let range = [];
if (this.options.barType == 'vertical') {
/** @type {?} */
let value = this.options.plotBackground.height;
range = [value, 0];
}
// else {
// let value=this.options.plotBackground.width-30;
// range=[0, value];
// }
// console.log("bar getYScale --- ", range, min, max)
return scaleLinear()
.range(range)
.domain([min, max]);
}
/**
* @return {?}
*/
calPlotBackground() {
this.options = Object.assign({}, this.options, { plotBackground: Object.assign({}, this.options.plotBackground, { x: 0, y: 0, height: this.options.height - this.options.xAxis.height - this.options.header.height - this.options.padding, width: this.options.width - this.options.yAxis.width - this.options.padding - this.options.yAxis.rightWidth }) });
// console.log("calPlotBackground", JSON.stringify(this.options));
}
/**
* @return {?}
*/
createLine() {
//console.log("this.innerScale.bandwidth() "+this.innerScale.bandwidth())
this.lines = [];
this.lineCircle = [];
for (let i = 0; i < this.series.length; i++) {
if (this.series[i].type == "line" || this.series[i].type == undefined) {
/** @type {?} */
let line = { points: "", color: "" };
for (let j = 0; j < this.categories.length; j++) {
/** @type {?} */
let x = this.xScale(this.categories[j]) + (this.xScale.bandwidth() / 2) + this.options.yAxis.width;
/** @type {?} */
let y = this.yRightScale(this.series[i].data[j]) + this.options.header.height;
line.points += (x + "," + y + " ");
line.color = this.colorScale(this.series[i].name);
this.lineCircle.push({
x,
y,
color: this.colorScale(this.series[i].name),
value: this.categories[j],
//jan,feb
data: this.series[i].data[j],
//101,202
group: this.series[i].name
});
}
this.lines.push(line);
}
}
}
/**
* @return {?}
*/
createBar() {
this.bars = [];
this.categories.map((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
(item, index) => {
for (let i = 0; i < this.series.length; i++) {
if (this.series[i].type == "verticalBar") {
/** @type {?} */
const bar = {
value: item,
//jan,feb
data: this.series[i].data[index],
//101,202
group: this.series[i].name,
color: this.colorScale(this.series[i].name),
width: this.innerScale.bandwidth(),
height: this.series[i].data[index] > 0 ? (this.yScale(0) - this.yScale(this.series[i].data[index])) : (this.yScale(this.series[i].data[index]) - this.yScale(0)),
x: this.innerScale(this.series[i].name) + this.xScale(item),
y: this.series[i].data[index] > 0 ? this.yScale(this.series[i].data[index]) : this.yScale(0),
className: "vertical_bar"
};
this.bars.push(bar);
}
}
}));
// console.log("this.bars=[] ", this.bars)
}
/**
* @param {?} __0
* @return {?}
*/
yAxisWidthChange({ yAxisWidth, yAxisHeight, yAxisRightWidth }) {
this.options = Object.assign({}, this.options, { yAxis: Object.assign({}, this.options.yAxis, { width: yAxisWidth, height: yAxisHeight, rightWidth: yAxisRightWidth }) });
this.update();
}
/**
* @param {?} __0
* @return {?}
*/
xAxisHeightChange({ xAxisHeight }) {
this.options = Object.assign({}, this.options, { xAxis: Object.assign({}, this.options.xAxis, { height: xAxisHeight }) });
//console.log("xAxisHeightChange", xAxisHeight, JSON.stringify(this.options.xAxis));
this.update();
}
/**
* @param {?} __0
* @return {?}
*/
headerHeightChange({ headerHeight }) {
this.options = Object.assign({}, this.options, { header: Object.assign({}, this.options.header, { height: headerHeight }) });
this.update();
}
/**
* @param {?} data
* @return {?}
*/
toolTipPlaccement(data) {
if (this.options.barType == 'vertical') {
return data > 0 ? 'top' : 'bottom';
}
else {
return data > 0 ? 'right' : 'left';
}
}
/**
* @param {?} event
* @return {?}
*/
onResize(event) {
//console.log("window:resize")
setTimeout((/**
* @return {?}
*/
() => this.update()));
}
/**
* @private
* @param {?} str
* @return {?}
*/
strToNumber(str) {
/** @type {?} */
let numberPattern = /\d+/g;
/** @type {?} */
let num = str.match(numberPattern).join('');
return parseFloat(num);
}
}
ngxChartsComboComponent.decorators = [
{ type: Component, args: [{
selector: "ngx-charts-combo",
template: "<div [style.width]=\"options.width+'px'\" [style.border]=\"'1px solid #f3f3f3'\">\r\n \r\n <svg version=\"1.1\" class=\"highcharts-root\" [attr.padding]=\"options.padding\" [attr.width]=\"options.width\"\r\n [attr.height]=\"options.height\" [attr.viewBox]=\"'0 0 '+options.width +' '+ options.height\"\r\n aria-label=\"Interactive chart\" [style.border]=\"'0px solid gray'\" [style.padding]=\"options.padding\"\r\n aria-hidden=\"false\">\r\n\r\n <g header [options]=\"options\" (headerHeightChange)=\"headerHeightChange($event)\"></g>\r\n\r\n <g y-axis \r\n [xScale]=\"xScale\" \r\n [yScale]=\"yScale\" \r\n [yRightScale]= \"yRightScale\"\r\n [options]=\"options\" \r\n [categories]=\"categories\" \r\n [series]=\"series\"\r\n (yAxisWidthChange)=\"yAxisWidthChange($event)\"></g>\r\n\r\n <g x-axis \r\n [xScale]=\"xScale\" \r\n [yScale]=\"yScale\" \r\n [options]=\"options\" \r\n [categories]=\"categories\" \r\n [series]=\"series\"\r\n (xAxisHeightChange)=\"xAxisHeightChange($event)\"></g>\r\n \r\n <g data-z-index=\"0.1\" >\r\n <rect *ngFor=\"let bar of bars\" \r\n [attr.class]=\"bar.className\"\r\n [attr.x]=\"bar.x+this.options.yAxis.width\"\r\n [tooltip]=\"bar.value+', '+bar.group+', '+bar.data\" \r\n [tooltipColor]=\"bar.color\"\r\n [placement]=\"toolTipPlaccement(bar.data)\" \r\n delay=\"10\"\r\n [attr.y]=\"bar.y+this.options.header.height\" \r\n [attr.width]=\"bar.width\" [attr.height]=\"bar.height\"\r\n [attr.fill]=\"bar.color\" opacity=\"1\" tabindex=\"-1\" role=\"img\"\r\n aria-label=\"1. Jan, 49.9. Tokyo.\"></rect>\r\n </g>\r\n <g data-z-index=\"0.1\">\r\n <polyline \r\n class=\"line\"\r\n *ngFor=\"let line of lines\" \r\n [attr.points]=\"line.points\"\r\n [style.fill]=\"'none'\"\r\n [style.stroke]=\"line.color\"\r\n [style.stroke-width]=\"3\" >\r\n </polyline>\r\n <circle \r\n *ngFor=\"let lc of lineCircle\"\r\n [tooltip]=\"lc.value+', '+lc.group+', '+lc.data\" \r\n [tooltipColor]=\"lc.color\"\r\n [placement]=\"toolTipPlaccement(lc.data)\" \r\n [attr.cx]=\"lc.x\" \r\n [attr.cy]=\"lc.y\" \r\n [attr.r]=\"3\" \r\n [attr.stroke]=\"lc.color\" \r\n [attr.stroke-width]=\"3\" \r\n [attr.fill]=\"lc.color\">\r\n </circle>\r\n </g>\r\n\r\n </svg>\r\n <chart-legend\r\n *ngIf=\"groupName.length\"\r\n [groupName]=\"groupName\"\r\n [options]=\"options\"\r\n [series] = \"series\" \r\n >\r\n </chart-legend>\r\n \r\n</div>\r\n\r\n",
// changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".tooltip-example{text-align:center;padding:0 50px}.tooltip-example [tooltip]{display:inline-block;margin:50px 20px;width:180px;height:50px;border:1px solid gray;border-radius:5px;line-height:50px;text-align:center}.ng-tooltip{position:absolute;max-width:150px;font-size:14px;text-align:center;color:#fafae3;padding:3px 8px;background:#282a36;border-radius:4px;z-index:1000;opacity:0}.ng-tooltip:after{content:\"\";position:absolute;border-style:solid}.ng-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000 transparent transparent}.ng-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000}.ng-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000}.ng-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000 transparent transparent}.ng-tooltip-show{opacity:1}.line{stroke-dasharray:2000;stroke-dashoffset:2000;-webkit-animation:2s linear forwards line_frames;animation:2s linear forwards line_frames}@-webkit-keyframes line_frames{to{stroke-dashoffset:0}}@keyframes line_frames{to{stroke-dashoffset:0}}.vertical_bar{-webkit-animation:1s linear forwards vertical_bar_frames;animation:1s linear forwards vertical_bar_frames}@-webkit-keyframes vertical_bar_frames{from{height:0}}@keyframes vertical_bar_frames{from{height:0}}"]
}] }
];
/** @nocollapse */
ngxChartsComboComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef }
];
ngxChartsComboComponent.propDecorators = {
options: [{ type: Input }],
categories: [{ type: Input }],
series: [{ type: Input }],
onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
};
if (false) {
/**
* @type {?}
* @private
*/
ngxChartsComboComponent.prototype.customOptions;
/**
* @type {?}
* @private
*/
ngxChartsComboComponent.prototype._options;
/** @type {?} */
ngxChartsComboComponent.prototype.categories;
/** @type {?} */
ngxChartsComboComponent.prototype.series;
/** @type {?} */
ngxChartsComboComponent.prototype.xScale;
/** @type {?} */
ngxChartsComboComponent.prototype.innerScale;
/** @type {?} */
ngxChartsComboComponent.prototype.yScale;
/** @type {?} */
ngxChartsComboComponent.prototype.yRightScale;
/** @type {?} */
ngxChartsComboComponent.prototype.lines;
/** @type {?} */
ngxChartsComboComponent.prototype.bars;
/** @type {?} */
ngxChartsComboComponent.prototype.lineCircle;
/** @type {?} */
ngxChartsComboComponent.prototype.groupName;
/** @type {?} */
ngxChartsComboComponent.prototype.groupBarPaddingBK;
/** @type {?} */
ngxChartsComboComponent.prototype.innerBarPaddingBK;
/** @type {?} */
ngxChartsComboComponent.prototype.colorScale;
/**
* @type {?}
* @private
*/
ngxChartsComboComponent.prototype.chartElement;
/**
* @type {?}
* @private
*/
ngxChartsComboComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ngxChartsComboModule {
}
ngxChartsComboModule.decorators = [
{ type: NgModule, args: [{
declarations: [ngxChartsComboComponent],
imports: [CommonModule, AxesModule, HeaderModule, LegendModule, TooltipModule],
exports: [ngxChartsComboComponent],
providers: [],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ngxChartsBarModule, ngxChartsComboModule, ngxChartsLineModule, ngxChartsPieModule, ngxChartsStackedModule, ngxChartsBarComponent as ɵa, AxesModule as ɵb, XAxisComponent as ɵc, YAxisComponent as ɵd, HeaderModule as ɵe, HeaderComponent as ɵf, LegendModule as ɵg, LegendComponent as ɵh, TooltipModule as ɵi, TooltipDirective as ɵj, ngxChartsStackedComponent as ɵk, ngxChartsLineComponent as ɵl, ngxChartsPieComponent as ɵm, ngxChartsComboComponent as ɵn };
//# sourceMappingURL=tusharghoshbd-ngx-charts.js.map