angular-advance-chart
Version:
Angular Advance Chart provides chart solution for Angular.Currently supports Bar, Pie and Donut chart
1 lines • 10 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"AngularAdvanceChartModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"PieChartComponent"},{"__symbolic":"reference","name":"BarChartComponent"},{"__symbolic":"reference","name":"DonutChartComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4}],"exports":[{"__symbolic":"reference","name":"PieChartComponent"},{"__symbolic":"reference","name":"BarChartComponent"},{"__symbolic":"reference","name":"DonutChartComponent"}]}]}],"members":{}},"BarChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"ngx-bar-chart","template":"<div class=\"chart-view ngx-bar\">\n <div class=\"chart-wrapper\" [ngStyle]=\"{'height': chartView[0],'width': chartView[1]}\">\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))\">\n <g>\n <line *ngFor=\"let line of lines\" stroke-width=\"10\" class=\"line\" [attr.x1]=\"line.x1\" [attr.y1]=\"line.y1 \"\n [attr.x2]=\"line.x2\" [attr.y2]=\"line.y2\" [attr.stroke]=\"line.color\" [attr.stroke-linecap]=\"barLineType\"\n [attr.title]=\"line.name\" (click)=\"getItemClicked(line)\" chartTooltip tooltip={{line.name}} />\n </g>\n </svg>\n </div>\n <div class=\"legend\" *ngIf=\"chartOptions.showLegend\">\n <h4>{{chartOptions.legendTitle +' : '+ totalSum}}</h4>\n <div class=\"legend-item\" *ngFor=\"let item of chartData; let i=index\">\n <div class=\"legend-item-colour\" [ngStyle]=\"{'background': item.color}\"></div><span\n class=\"legend-item-name\">{{item.name}}</span><span class=\"legend-item-value\">{{item.value}}</span>\n </div>\n </div>\n\n</div>","styles":[".line{cursor:pointer}"]}]}],"members":{"selectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"chartData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"chartOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getItemClicked":[{"__symbolic":"method"}],"calculateHorizontalBarLines":[{"__symbolic":"method"}],"calculateVerticalBarLines":[{"__symbolic":"method"}],"getTotalSum":[{"__symbolic":"method"}]}},"DonutChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"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}"]}]}],"members":{"chartData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"selectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"span":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":14,"character":3},"arguments":["el"]}]}],"chartOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"getPercentage":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"polarToCartesian":[{"__symbolic":"method"}],"describeArc":[{"__symbolic":"method"}],"getItemClicked":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}]}},"PieChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"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}"]}]}],"members":{"chartData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"span":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":13,"character":3},"arguments":["el"]}]}],"selectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"chartOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"view":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"polarToCartesian":[{"__symbolic":"method"}],"describeArc":[{"__symbolic":"method"}],"getPercentage":[{"__symbolic":"method"}],"getItemClicked":[{"__symbolic":"method"}]}},"BarChartOption":{"__symbolic":"interface"},"ChartData":{"__symbolic":"interface"},"ChartOption":{"__symbolic":"interface"},"ChartView":{"__symbolic":"interface"},"DonutChartView":{"__symbolic":"interface"},"PieChartView":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[chartTooltip]"}]}],"members":{"tooltipTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3},"arguments":["tooltip"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":9,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":9,"character":56}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":11,"character":3},"arguments":["mouseenter",["$event"]]}]}],"onMouseLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":15,"character":3},"arguments":["mouseleave"]}]}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}]}}},"origins":{"AngularAdvanceChartModule":"./lib/angular-advance-chart.module","BarChartComponent":"./lib/_component/bar-chart/bar-chart.component","DonutChartComponent":"./lib/_component/donut-chart/donut-chart.component","PieChartComponent":"./lib/_component/pie-chart/pie-chart.component","BarChartOption":"./lib/_model/barChartOptions","ChartData":"./lib/_model/chartData","ChartOption":"./lib/_model/chartData","ChartView":"./lib/_model/chartData","DonutChartView":"./lib/_model/donutChartOptions","PieChartView":"./lib/_model/pieChartOptions","ɵa":"./lib/_directive/tooltip.directive"},"importAs":"angular-advance-chart"}