ngx-chart/bundles/ngx-chart.umd.min.js

Ngx-Chart provides chart solution for Angular.Currently supports Bar, Pie and Donut chart

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-chart",["exports","@angular/core","@angular/common"],e):e((t=t||self)["ngx-chart"]={},t.ng.core,t.ng.common)}(this,(function(t,e,i){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */function n(t,e,i,n){var o,a=arguments.length,r=a<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var s=t.length-1;s>=0;s--)(o=t[s])&&(r=(a<3?o(r):a>3?o(e,i,r):o(e,i))||r);return a>3&&r&&Object.defineProperty(e,i,r),r}var o=function(){function t(){this.selectedItem=new e.EventEmitter,this.chartOptions={showLegend:!0,legendTitle:"Total"},this.view={height:200,width:200,radius:80},this.chartView=[],this.totalSum=0,this.processedData=[],this.legendData=[]}return t.prototype.ngOnInit=function(){var t=this;if(this.chartView.push(this.view.height+"px"),this.chartView.push(this.view.width+"px"),this.chartData){this.totalSum=this.chartData.reduce((function(t,e){return t+e.value}),0);var e=0;this.chartData.map((function(i,n){var o={name:i.name,value:i.value,color:i.color};t.legendData.push(o);var a=t.getPercentage(i.value,t.totalSum);if(a>0){var r=a/10*36,s={color:i.color,a1:e,a2:e+r,name:i.name};e+=r,t.processedData.push(s)}}))}},t.prototype.ngAfterViewInit=function(){var t=this;this.processedData.length>0&&this.span.map((function(e,i){t.processedData[i].a2=t.processedData[i].a2>=360?359.9:t.processedData[i].a2,e.nativeElement.setAttribute("d",t.describeArc(t.view.height/2,t.view.height/2,t.view.radius,t.processedData[i].a1,t.processedData[i].a2)),e.nativeElement.setAttribute("fill",t.processedData[i].color)}))},t.prototype.polarToCartesian=function(t,e,i,n){var o=(n-90)*Math.PI/180;return{x:t+i*Math.cos(o),y:e+i*Math.sin(o)}},t.prototype.describeArc=function(t,e,i,n,o){var a=this.polarToCartesian(t,e,i,o),r=this.polarToCartesian(t,e,i,n),s=o-n<=180?"0":"1";return["M",a.x,a.y,"A",i,i,0,s,0,r.x,r.y,"L",t,e,"L",a.x,a.y].join(" ")},t.prototype.getPercentage=function(t,e){return 100*t/e},t.prototype.getItemClicked=function(t){var e={name:t.name,value:t.value};this.selectedItem.emit(e)},n([e.Input()],t.prototype,"chartData",void 0),n([e.ViewChildren("el")],t.prototype,"span",void 0),n([e.Output()],t.prototype,"selectedItem",void 0),n([e.Input()],t.prototype,"chartOptions",void 0),n([e.Input()],t.prototype,"view",void 0),t=n([e.Component({selector:"ngx-pie-chart",template:'<div class="chart-view ngx-pie">\n  <svg class="chart-wrapper" [ngStyle]="{\'height\': chartView[0],\'width\': chartView[1]}">\n    <path #el class="pie-chart-path" chartTooltip tooltip={{item.name}} (click)="getItemClicked(item)" *ngFor="let item of processedData; let i=index" />\n  </svg>\n  <div class="legend" *ngIf="chartOptions.showLegend">\n    <h4>{{chartOptions.legendTitle +\' : \'+  totalSum}}</h4>\n    <div class="legend-item" *ngFor="let item of legendData; let i=index">\n      <div class="legend-item-colour" [ngStyle]="{\'background\': item.color}"></div><span class="legend-item-name" >{{item.name}}</span><span class="legend-item-value" >{{item.value}}</span>\n    </div>\n  </div>\n</div>',styles:["path.pie-chart-path:hover{cursor:pointer}"]})],t)}(),a=function(){function t(){this.selectedItem=new e.EventEmitter,this.chartData=[],this.chartOptions={roundedCorners:!1,isHorizontal:!1,showLegend:!0,legendTitle:"Total"},this.view={height:200,width:200},this.lines=[],this.totalSum=0,this.isHorizontal=!0,this.barLineType="round",this.chartView=[],this.scale=100}return t.prototype.ngOnInit=function(){var t=this;this.chartView.push(this.view.height+"px"),this.chartView.push(this.view.width+"px"),this.barLineType=this.chartOptions.roundedCorners?"round":"butt",this.isHorizontal=!!this.chartOptions.isHorizontal,this.scale=this.isHorizontal?this.view.width:this.view.height,this.getTotalSum(this.chartData);var e=Math.max.apply(Math,this.chartData.map((function(t){return t.value})));if(e>this.scale){var i=e/this.scale;this.chartData.map((function(e,n){t.chartData[n].normalized=Number(e.value)/i}))}else{var n=this.scale/e;this.chartData.map((function(e,i){t.chartData[i].normalized=Number(e.value)*n}))}this.lines=this.isHorizontal?this.calculateHorizontalBarLines(this.chartData):this.calculateVerticalBarLines(this.chartData)},t.prototype.ngAfterViewInit=function(){},t.prototype.getItemClicked=function(t){var e={name:t.name,value:t.value};this.selectedItem.emit(JSON.stringify(e))},t.prototype.calculateHorizontalBarLines=function(t){var e=this,i=[];return t.map((function(t,n){var o={x1:10,y1:20*n+20,y2:20*n+20,x2:e.view.width,color:"#EBEBEB",name:t.name,value:t.value};if(i.push(o),t.value>0){var a={x1:10,y1:20*n+20,y2:20*n+20,x2:t.normalized<10?"butt"==e.barLineType?11:10:t.normalized,color:t.color,name:t.name,value:t.value};i.push(a)}})),i},t.prototype.calculateVerticalBarLines=function(t){var e=this,i=[];return t.map((function(t,n){var o={x1:20*n+20,y1:10,x2:20*n+20,y2:e.scale,color:"#EBEBEB",name:t.name,value:t.value};if(i.push(o),t.value>0){var a={x1:20*n+20,y1:e.scale+10-t.normalized>e.scale?"butt"==e.barLineType?e.scale-1:e.scale:e.scale+10-t.normalized,x2:20*n+20,y2:e.scale,color:t.color,name:t.name,value:t.value};i.push(a)}})),console.log(i),i},t.prototype.getTotalSum=function(t){this.totalSum=t.reduce((function(t,e){return t+parseInt(e.value)}),0)},n([e.Output()],t.prototype,"selectedItem",void 0),n([e.Input()],t.prototype,"chartData",void 0),n([e.Input()],t.prototype,"chartOptions",void 0),n([e.Input()],t.prototype,"view",void 0),t=n([e.Component({selector:"ngx-bar-chart",template:'<div class="chart-view  ngx-bar">\r\n  <div class="chart-wrapper" [ngStyle]="{\'height\': chartView[0],\'width\': chartView[1]}">\r\n    <svg id="lines" [attr.viewBox]="\'0 0 \'+ (isHorizontal ? scale+40 : (lines[lines.length-1].x1 + 20))+\' \' + (isHorizontal ? (lines[lines.length-1].y2 + 20) : (scale+20))">\r\n      <g>\r\n        <line *ngFor="let line of lines" stroke-width="10" class="line" [attr.x1]="line.x1" [attr.y1]="line.y1 "\r\n          [attr.x2]="line.x2" [attr.y2]="line.y2" [attr.stroke]="line.color"         [attr.stroke-linecap]="barLineType"\r\n          [attr.title]="line.name" (click)="getItemClicked(line)" chartTooltip tooltip={{line.name}} />\r\n      </g>\r\n    </svg>\r\n  </div>\r\n  <div class="legend" *ngIf="chartOptions.showLegend">\r\n    <h4>{{chartOptions.legendTitle +\' : \'+ totalSum}}</h4>\r\n    <div class="legend-item" *ngFor="let item of chartData; let i=index">\r\n      <div class="legend-item-colour" [ngStyle]="{\'background\': item.color}"></div><span\r\n        class="legend-item-name">{{item.name}}</span><span class="legend-item-value">{{item.value}}</span>\r\n    </div>\r\n  </div>\r\n\r\n</div>',styles:[".line{cursor:pointer}"]})],t)}(),r=function(){function t(){this.selectedItem=new e.EventEmitter,this.chartOptions={showLegend:!0,legendTitle:"Total"},this.view={height:200,width:200,radius:80,donutSize:20},this.totalSum=0,this.processedData=[],this.legendData=[],this.chartView=[]}return t.prototype.ngOnInit=function(){var t=this;if(this.chartData){this.view.donutSize=this.view.donutSize?this.view.donutSize:20,this.chartView.push(this.view.height+"px"),this.chartView.push(this.view.width+"px"),this.totalSum=this.chartData.reduce((function(t,e){return t+e.value}),0);var e=0;this.chartData.map((function(i,n){var o={name:i.name,value:i.value,color:i.color};t.legendData.push(o);var a=t.getPercentage(i.value,t.totalSum);if(a>0){var r=a/10*36,s={color:i.color,a1:e,a2:e+r,name:i.name};e+=r,t.processedData.push(s)}}))}},t.prototype.getPercentage=function(t,e){return 100*t/e},t.prototype.ngAfterViewInit=function(){var t=this;this.processedData.length>0&&this.span.map((function(e,i){e.nativeElement.setAttribute("d",t.describeArc(t.view.height/2,t.view.width/2,t.view.radius,t.processedData[i].a1,360==t.processedData[i].a2?359.99:t.processedData[i].a2)),e.nativeElement.setAttribute("stroke",t.processedData[i].color)}))},t.prototype.polarToCartesian=function(t,e,i,n){var o=(n-90)*Math.PI/180;return{x:t+i*Math.cos(o),y:e+i*Math.sin(o)}},t.prototype.describeArc=function(t,e,i,n,o){var a=this.polarToCartesian(t,e,i,o),r=this.polarToCartesian(t,e,i,n),s=o-n<=180?"0":"1";return["M",a.x,a.y,"A",i,i,0,s,0,r.x,r.y].join(" ")},t.prototype.getItemClicked=function(t){var e={name:t.name,value:t.value};this.selectedItem.emit(e)},t.prototype.show=function(t){},n([e.Input()],t.prototype,"chartData",void 0),n([e.Output()],t.prototype,"selectedItem",void 0),n([e.ViewChildren("el")],t.prototype,"span",void 0),n([e.Input()],t.prototype,"chartOptions",void 0),n([e.Input()],t.prototype,"view",void 0),t=n([e.Component({selector:"ngx-donut-chart",template:'<div class="chart-view ngx-donut">\n  <svg class="chart-wrapper" [ngStyle]="{\'height\': chartView[0],\'width\': chartView[1]}">\n    <path width="100%" height="100%" #el fill="none" [attr.stroke-width]="this.view.donutSize" *ngFor="let item of processedData; let i=index"\n      (click)="getItemClicked(item)" chartTooltip tooltip={{item.name}}/>\n\n  </svg>\n  <div class="legend" *ngIf="chartOptions.showLegend">\n    <h4>{{chartOptions.legendTitle +\' : \'+  totalSum}}</h4>\n    <div class="legend-item" *ngFor="let item of legendData; let i=index" >\n      <div class="legend-item-colour" [ngStyle]="{\'background\': item.color}"></div><span class="legend-item-name" >{{item.name}}</span><span class="legend-item-value" >{{item.value}}</span>\n    </div>\n  </div>\n</div>',styles:["path:hover{cursor:pointer}"]})],t)}(),s=function(){function t(t,e){this.el=t,this.renderer=e,this.placement="top",this.offset=10}return t.prototype.onMouseEnter=function(){this.tooltip||this.show()},t.prototype.onMouseLeave=function(){this.tooltip&&this.hide()},t.prototype.show=function(){this.create(),this.setPosition(),this.renderer.addClass(this.tooltip,"ngx-chart-tooltip-show")},t.prototype.hide=function(){this.renderer.removeClass(this.tooltip,"ngx-chart-tooltip-show"),this.renderer.removeChild(document.body,this.tooltip),this.tooltip=null},t.prototype.create=function(){this.tooltip=this.renderer.createElement("span"),this.renderer.appendChild(this.tooltip,this.renderer.createText(this.tooltipTitle)),this.renderer.appendChild(document.body,this.tooltip),this.renderer.addClass(this.tooltip,"ngx-chart-tooltip"),this.renderer.addClass(this.tooltip,"ngx-chart-tooltip-"+this.placement)},t.prototype.setPosition=function(){var t,e,i=this.el.nativeElement.getBoundingClientRect(),n=this.tooltip.getBoundingClientRect(),o=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;"bottom"===this.placement?(t=i.bottom+this.offset,e=i.left+(i.width-n.width)/2):"left"===this.placement?(t=i.top+(i.height-n.height)/2,e=i.left-n.width-this.offset):"right"===this.placement?(t=i.top+(i.height-n.height)/2,e=i.right+this.offset):(t=i.top-n.height-this.offset,e=i.left+(i.width-n.width)/2),this.renderer.setStyle(this.tooltip,"top",t+o+"px"),this.renderer.setStyle(this.tooltip,"left",e+"px")},t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.Renderer2}]},n([e.Input("tooltip")],t.prototype,"tooltipTitle",void 0),n([e.Input()],t.prototype,"placement",void 0),n([e.HostListener("mouseenter")],t.prototype,"onMouseEnter",null),n([e.HostListener("mouseleave")],t.prototype,"onMouseLeave",null),t=n([e.Directive({selector:"[chartTooltip]"})],t)}(),l=function(){function t(){}return t=n([e.NgModule({declarations:[o,a,r,s],imports:[i.CommonModule],exports:[o,a,r]})],t)}();t.BarChartComponent=a,t.DonutChartComponent=r,t.NgxChartModule=l,t.PieChartComponent=o,t.ɵa=s,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-chart.umd.min.js.map