angular-advance-chart
Version:
Angular Advance Chart provides chart solution for Angular.Currently supports Bar, Pie and Donut chart
462 lines (453 loc) • 20.3 kB
JavaScript
import { __decorate } from 'tslib';
import { CommonModule } from '@angular/common';
import { EventEmitter, Output, Input, Component, ViewChildren, ElementRef, Renderer2, HostListener, Directive, NgModule } from '@angular/core';
var BarChartComponent = /** @class */ (function () {
function BarChartComponent() {
this.selectedItem = new EventEmitter();
this.chartData = [];
this.chartOptions = {
roundedCorners: false,
isHorizontal: false,
showLegend: true,
legendTitle: 'Total',
};
this.view = {
height: 200,
width: 200
};
this.lines = [];
this.totalSum = 0;
this.isHorizontal = true;
this.barLineType = 'round';
this.chartView = [];
this.scale = 100;
}
BarChartComponent.prototype.ngOnInit = function () {
var _this = 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'] ? true : false;
this.scale = this.isHorizontal ? this.view.width : this.view.height;
this.getTotalSum(this.chartData);
var value = Math.max.apply(Math, this.chartData.map(function (o) {
return o.value;
}));
if (value > this.scale) {
var normalizedValue_1 = value / this.scale;
this.chartData.map(function (y, index) {
_this.chartData[index]['normalized'] = Number(y.value) / normalizedValue_1;
});
}
else {
var normalizedValue_2 = this.scale / value;
this.chartData.map(function (y, index) {
_this.chartData[index]['normalized'] = Number(y.value) * normalizedValue_2;
});
}
this.lines = this.isHorizontal ? this.calculateHorizontalBarLines(this.chartData) : this.calculateVerticalBarLines(this.chartData);
};
BarChartComponent.prototype.ngAfterViewInit = function () { };
BarChartComponent.prototype.getItemClicked = function (line) {
var selectedbar = {
name: line.name,
value: line.value
};
this.selectedItem.emit(JSON.stringify(selectedbar));
};
BarChartComponent.prototype.calculateHorizontalBarLines = function (graphData) {
var _this = this;
var barLines = [];
graphData.map(function (x, index) {
var background = {
x1: 10,
y1: index * 20 + 20,
y2: index * 20 + 20,
x2: _this.view.width,
color: '#EBEBEB',
name: x.name,
value: x.value
};
barLines.push(background);
if (x.value > 0) {
var line = {
x1: 10,
y1: index * 20 + 20,
y2: index * 20 + 20,
x2: x.normalized < 10 ? _this.barLineType == 'butt' ? 11 : 10 : x.normalized,
color: x.color,
name: x.name,
value: x.value
};
barLines.push(line);
}
});
return barLines;
};
BarChartComponent.prototype.calculateVerticalBarLines = function (graphData) {
var _this = this;
var barLines = [];
graphData.map(function (x, index) {
var background = {
x1: index * 20 + 20,
y1: 10,
x2: index * 20 + 20,
y2: _this.scale,
color: '#EBEBEB',
name: x.name,
value: x.value
};
barLines.push(background);
if (x.value > 0) {
var line = {
x1: index * 20 + 20,
y1: (_this.scale + 10) - x.normalized > _this.scale ? _this.barLineType == 'butt' ? (_this.scale - 1) : _this.scale : (_this.scale + 10) - x.normalized,
x2: index * 20 + 20,
y2: _this.scale,
color: x.color,
name: x.name,
value: x.value
};
barLines.push(line);
}
});
console.log(barLines);
return barLines;
};
BarChartComponent.prototype.getTotalSum = function (chartData) {
// Get total number of records
this.totalSum = chartData.reduce(function (a, b) {
return a + parseInt(b.value);
}, 0);
};
__decorate([
Output()
], BarChartComponent.prototype, "selectedItem", void 0);
__decorate([
Input()
], BarChartComponent.prototype, "chartData", void 0);
__decorate([
Input()
], BarChartComponent.prototype, "chartOptions", void 0);
__decorate([
Input()
], BarChartComponent.prototype, "view", void 0);
BarChartComponent = __decorate([
Component({
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\" \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0 [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}"]
})
], BarChartComponent);
return BarChartComponent;
}());
var DonutChartComponent = /** @class */ (function () {
function DonutChartComponent() {
this.selectedItem = new EventEmitter();
this.chartOptions = {
showLegend: true,
legendTitle: 'Total',
};
this.view = {
height: 200,
width: 200,
radius: 80,
donutSize: 20
};
this.totalSum = 0;
this.processedData = [];
this.legendData = [];
this.chartView = [];
}
DonutChartComponent.prototype.ngOnInit = function () {
var _this = 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');
// Get total number of records
this.totalSum = this.chartData.reduce(function (a, b) {
return a + b.value;
}, 0);
//generate Data for list
var prevAngle_1 = 0;
this.chartData.map(function (x, index) {
var legend = {
name: x.name,
value: x.value,
color: x.color
};
_this.legendData.push(legend);
var percentage = _this.getPercentage(x.value, _this.totalSum);
if (percentage > 0) {
var circlePercentage = percentage / 10 * 36;
var pieData = {
color: x.color,
a1: prevAngle_1,
a2: prevAngle_1 + circlePercentage,
name: x.name
};
prevAngle_1 = prevAngle_1 + circlePercentage;
_this.processedData.push(pieData);
}
});
}
};
DonutChartComponent.prototype.getPercentage = function (partialValue, totalValue) {
return (100 * partialValue) / totalValue;
};
DonutChartComponent.prototype.ngAfterViewInit = function () {
var _this = this;
//create svg
if (this.processedData.length > 0) {
this.span.map(function (item, index) {
item.nativeElement.setAttribute('d', _this.describeArc(_this.view.height / 2, _this.view.width / 2, _this.view.radius, _this.processedData[index].a1, _this.processedData[index].a2 == 360 ? 359.99 : _this.processedData[index].a2));
item.nativeElement.setAttribute('stroke', _this.processedData[index].color);
});
}
};
DonutChartComponent.prototype.polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
};
DonutChartComponent.prototype.describeArc = function (x, y, radius, startAngle, endAngle) {
var start = this.polarToCartesian(x, y, radius, endAngle);
var end = this.polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
return d;
};
DonutChartComponent.prototype.getItemClicked = function (item) {
var selected = {
name: item.name,
value: item.value
};
this.selectedItem.emit(selected);
};
DonutChartComponent.prototype.show = function (status) {
};
__decorate([
Input()
], DonutChartComponent.prototype, "chartData", void 0);
__decorate([
Output()
], DonutChartComponent.prototype, "selectedItem", void 0);
__decorate([
ViewChildren('el')
], DonutChartComponent.prototype, "span", void 0);
__decorate([
Input()
], DonutChartComponent.prototype, "chartOptions", void 0);
__decorate([
Input()
], DonutChartComponent.prototype, "view", void 0);
DonutChartComponent = __decorate([
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}"]
})
], DonutChartComponent);
return DonutChartComponent;
}());
var PieChartComponent = /** @class */ (function () {
function PieChartComponent() {
this.selectedItem = new EventEmitter();
this.chartOptions = {
showLegend: true,
legendTitle: 'Total',
};
this.view = {
height: 200,
width: 200,
radius: 80
};
this.chartView = [];
this.totalSum = 0;
this.processedData = [];
this.legendData = [];
}
PieChartComponent.prototype.ngOnInit = function () {
var _this = this;
this.chartView.push(this.view.height + 'px');
this.chartView.push(this.view.width + 'px');
if (this.chartData) {
// Get total number of records
this.totalSum = this.chartData.reduce(function (a, b) {
return a + b.value;
}, 0);
//generate Data for piechart
var prevAngle_1 = 0;
this.chartData.map(function (x, index) {
var legend = {
name: x.name,
value: x.value,
color: x.color
};
_this.legendData.push(legend);
var percentage = _this.getPercentage(x.value, _this.totalSum);
if (percentage > 0) {
var circlePercentage = percentage / 10 * 36;
var pieData = {
color: x.color,
a1: prevAngle_1,
a2: prevAngle_1 + circlePercentage,
name: x.name
};
prevAngle_1 = prevAngle_1 + circlePercentage;
_this.processedData.push(pieData);
}
});
}
};
PieChartComponent.prototype.ngAfterViewInit = function () {
var _this = this;
// create svg
if (this.processedData.length > 0) {
this.span.map(function (item, index) {
_this.processedData[index].a2 = _this.processedData[index].a2 >= 360 ? 359.9 : _this.processedData[index].a2;
item.nativeElement.setAttribute('d', _this.describeArc(_this.view.height / 2, _this.view.height / 2, _this.view.radius, _this.processedData[index].a1, _this.processedData[index].a2));
item.nativeElement.setAttribute('fill', _this.processedData[index].color);
});
}
};
PieChartComponent.prototype.polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
};
PieChartComponent.prototype.describeArc = function (x, y, radius, startAngle, endAngle) {
var start = this.polarToCartesian(x, y, radius, endAngle);
var end = this.polarToCartesian(x, y, radius, startAngle);
var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, arcSweep, 0, end.x, end.y,
"L", x, y,
"L", start.x, start.y
].join(" ");
return d;
};
PieChartComponent.prototype.getPercentage = function (partialValue, totalValue) {
return (100 * partialValue) / totalValue;
};
PieChartComponent.prototype.getItemClicked = function (item) {
var selected = {
name: item.name,
value: item.value
};
this.selectedItem.emit(selected);
};
__decorate([
Input()
], PieChartComponent.prototype, "chartData", void 0);
__decorate([
ViewChildren('el')
], PieChartComponent.prototype, "span", void 0);
__decorate([
Output()
], PieChartComponent.prototype, "selectedItem", void 0);
__decorate([
Input()
], PieChartComponent.prototype, "chartOptions", void 0);
__decorate([
Input()
], PieChartComponent.prototype, "view", void 0);
PieChartComponent = __decorate([
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}"]
})
], PieChartComponent);
return PieChartComponent;
}());
var TooltipDirective = /** @class */ (function () {
function TooltipDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
}
TooltipDirective.prototype.onMouseEnter = function (event) {
if (!this.tooltip) {
this.show(event);
}
};
TooltipDirective.prototype.onMouseLeave = function () {
if (this.tooltip) {
this.hide();
}
};
TooltipDirective.prototype.show = function (event) {
this.create();
this.setPosition(event);
this.renderer.addClass(this.tooltip, 'chart-tooltip-show');
};
TooltipDirective.prototype.hide = function () {
this.renderer.removeClass(this.tooltip, 'chart-tooltip-show');
this.renderer.removeChild(document.body, this.tooltip);
this.tooltip = null;
};
TooltipDirective.prototype.create = function () {
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.addClass(this.tooltip, 'chart-tooltip');
};
TooltipDirective.prototype.setPosition = function (event) {
var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var top = event.y;
var left = event.x;
this.renderer.setStyle(this.tooltip, 'top', top + scrollPos + "px");
this.renderer.setStyle(this.tooltip, 'left', left + "px");
};
TooltipDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
__decorate([
Input('tooltip')
], TooltipDirective.prototype, "tooltipTitle", void 0);
__decorate([
HostListener('mouseenter', ['$event'])
], TooltipDirective.prototype, "onMouseEnter", null);
__decorate([
HostListener('mouseleave')
], TooltipDirective.prototype, "onMouseLeave", null);
TooltipDirective = __decorate([
Directive({
selector: '[chartTooltip]'
})
], TooltipDirective);
return TooltipDirective;
}());
var AngularAdvanceChartModule = /** @class */ (function () {
function AngularAdvanceChartModule() {
}
AngularAdvanceChartModule = __decorate([
NgModule({
declarations: [PieChartComponent, BarChartComponent, DonutChartComponent, TooltipDirective],
imports: [
CommonModule
],
exports: [PieChartComponent, BarChartComponent, DonutChartComponent]
})
], AngularAdvanceChartModule);
return AngularAdvanceChartModule;
}());
/*
* Public API Surface of angular-advance-chart
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularAdvanceChartModule, BarChartComponent, DonutChartComponent, PieChartComponent, TooltipDirective as ɵa };
//# sourceMappingURL=angular-advance-chart.js.map