
myApp.directive('hcPieChart', function () {
                return {
                    restrict: 'E',
                    template: '<div></div>',
                    link: function (scope, element) {
                    	getEmployeeDetails(scope,element[0].baseURI+'reports/getBillabilityDetailsByMonth','line',element," Billability Monthly Trends");
                    	//getEmployeeDetails(scope,element[0].baseURI+'reports/billabilityByFunctionalGroup','column',element,"Billability By Functional Group");
                    	//getEmployeeDetails(scope,element[0].baseURI+'reports/getBillabilityDetailsByAccount','column',element,"Billability By Account");
                    	scope.clickMe= function() {
                        	scope.gridOptions.data = [];
                        	scope.gridOptions.enablePaginationControls = false;
                            if(scope.reportId == 3){
                            	getEmployeeDetails(scope,element[0].baseURI+'reports/getBarChartReport?byType=Account','column',element,"Billability By Account");
                            }else if(scope.reportId == 2){
                            	getEmployeeDetails(scope,element[0].baseURI+'reports/getBarChartReport?byType=FunctionalGroup','column',element,"Billability By Functional Group");
                            }else if(scope.reportId == 1){
                            	getEmployeeDetails(scope,element[0].baseURI+'reports/getBillabilityDetailsByMonth','line',element," Billability Monthly Trends");
                            }
                        }
                    }
                };
            }).controller('chartsController', function ($scope, $http, myFactory,exportUiGridService, $mdDialog, appConfig) {
            	
            	$scope.name = [];
            	$scope.records = [];
            	            	$scope.empSearchId = "";
            	            	$scope.reportId = "1"
            	            	$scope.reports = $scope.reportId;
            	            	$scope.reports=[ {Name:"Billability Monthly Trends",Id:"1"},{Name:"Billability By Functional Group",Id:"2"},{Name:"Billability By Account",Id:"3"}];
            	            	
            	    
            	            	$scope.employees = [];
            	            	$scope.projects = [];
            	            	$scope.gridOptions = {
            	            		paginationPageSizes : [ 10, 20, 30, 40, 50, 100],
            	            		paginationPageSize : 10,
            	            	    pageNumber: 1,
            	            	    enableFiltering:true,
            	            		pageSize:10,
            	            		columnDefs : [  
            	            			{field : 'employeeId',displayName: 'Employee ID', enableColumnMenu: true, enableSorting: true, enableFiltering:true, width:120},
            	            			{field : 'employeeName',displayName: 'Employee Name', enableColumnMenu: false, enableSorting: false, enableFiltering:true},
            	            			{field : 'emailId',displayName: 'Email', enableColumnMenu: false, enableSorting: false, enableFiltering:true},
            	            			{field : 'projectName',displayName: 'Project Name', enableColumnMenu: false, enableSorting: false, enableFiltering:true},
            	            			{field : 'billableStatus',displayName: 'Billable Status', enableColumnMenu: false, enableSorting: false, enableFiltering:false},
            	            			{field : 'billingStartDate',displayName: 'Billing Start Data', enableColumnMenu: false, enableSorting: false,cellFilter: 'date:"dd-MMM-yyyy"',enableFiltering:false},
            	            			{field : 'billingEndDate',displayName: 'Billing End Data', enableColumnMenu: false, enableSorting: false,cellFilter: 'date:"dd-MMM-yyyy"',enableFiltering:false},
            	            			{field : 'functionalGroup',displayName: 'Functional Group', enableColumnMenu: false, enableSorting: false, enableFiltering:false}
            	            		],
            	            		enableGridMenu: true,
            	            	    enableSelectAll: true,
            	            	    exporterMenuExcel:false,
            	            	    exporterMenuCsv:false,
            	            	    exporterCsvFilename: 'EmployeeDetails.csv',
            	            	    exporterExcelFilename:'EmployeeDetails',
            	            	    exporterPdfDefaultStyle: {fontSize: 9},
            	            	    exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
            	            	    exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
            	            	    exporterPdfHeader: { text: "Employee Details", style: 'headerStyle' },
            	            	    exporterPdfFooter: function ( currentPage, pageCount ) {
            	            	      return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
            	            	    },
            	            	    exporterPdfCustomFormatter: function ( docDefinition ) {
            	            	      docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
            	            	      docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
            	            	      return docDefinition;
            	            	    },
            	            	    exporterPdfOrientation: 'portrait',
            	            	    exporterPdfPageSize: 'LETTER',
            	            	    exporterPdfMaxGridWidth: 500,
            	            	    exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
            	            	    onRegisterApi: function(gridApi){
            	            	      $scope.gridApi = gridApi;
            	            	    },
            	            	            gridMenuCustomItems: [{
            	            	                    title: 'Export all data as EXCEL',
            	            	                    action: function ($event) {
            	            	                        exportUiGridService.exportToExcel('sheet 1', $scope.gridApi, 'all', 'all');
            	            	                    },
            	            	                    order: 110
            	            	                },
            	            	                {
            	            	                    title: 'Export visible data as EXCEL',
            	            	                    action: function ($event) {
            	            	                        exportUiGridService.exportToExcel('sheet 1', $scope.gridApi, 'visible', 'visible');
            	            	                    },
            	            	                    order: 111
            	            	                }
            	            	            ]
            	            	};
            	            	$scope.gridOptions.data = $scope.records;
            	            	$scope.gridOptions.enablePaginationControls = false;
            	            	
            	            	$scope.getMyTeamDetails = function(seriesName, category, optionName,title){
            	            		
            	            		if(title.trim() == 'Billability By Functional Group'){
            	            			if(category=='I&A'){
            	            				category = 'I%26A';
            	            			}
                	            		$http({
                	            	        method : "GET",
                	            	        url : appConfig.appUri + "reports/fetchEmployeeDetailsByFGAndBillability?fGroup="+category+"&billableStatus="+seriesName
                	            	    }).then(function mySuccess(response) {
                	            	        $scope.gridOptions.data = response.data;
                	            	        if(response.data.length > 10){
                	            	    		$scope.gridOptions.enablePaginationControls = true;
                	            	    	}
                	            	    	else{
                	            	    		$scope.gridOptions.enablePaginationControls = false;
                	            	    	}
                	            	    }, function myError(response) {
                	            	    	showAlert("Something went wrong while fetching data!!!");
                	            	    	$scope.gridOptions.data = [];
                	            	    });            	            			
            	            		}else if(title.trim() == 'Billability By Account'){
                	            		$http({
                	            	        method : "GET",
                	            	        url : appConfig.appUri + "reports/fetchEmployeeDetailsByAccountBillability?account="+category+"&billabilityStatus="+seriesName
                	            	    }).then(function mySuccess(response) {
                	            	        $scope.gridOptions.data = response.data;
                	            	        if(response.data.length > 10){
                	            	    		$scope.gridOptions.enablePaginationControls = true;
                	            	    	}
                	            	    	else{
                	            	    		$scope.gridOptions.enablePaginationControls = false;
                	            	    	}
                	            	    }, function myError(response) {
                	            	    	showAlert("Something went wrong while fetching data!!!");
                	            	    	$scope.gridOptions.data = [];
                	            	    });            	            			
            	            		}else if(title.trim() == 'Billability Monthly Trends'){
                	            		$http({
                	            	        method : "GET",
                	            	        url : appConfig.appUri + "reports/fetchEmployeeDetailsByDateBillability?billabilityStatus="+seriesName+"&reportDate="+category
                	            	    }).then(function mySuccess(response) {
                	            	        $scope.gridOptions.data = response.data;
                	            	        if(response.data.length > 10){
                	            	    		$scope.gridOptions.enablePaginationControls = true;
                	            	    	}
                	            	    	else{
                	            	    		$scope.gridOptions.enablePaginationControls = false;
                	            	    	}
                	            	    }, function myError(response) {
                	            	    	showAlert("Something went wrong while fetching data!!!");
                	            	    	$scope.gridOptions.data = [];
                	            	    });            	            			
            	            		}
    	            	        	
            	            	};
   
            	            	function showAlert(message) {
            	            		$mdDialog.show($mdDialog.alert().parent(
            	            				angular.element(document.querySelector('#popupContainer')))
            	            				.clickOutsideToClose(true).textContent(message).ariaLabel(
            	            						'Alert Dialog').ok('Ok'));
            	            	}
            	            	
            	            	 $scope.drawChart = function(element,chartName,result,title,categoriesList){
            	            		Highcharts.chart(element[0], {
            	            			chart: {
            	            		        type: chartName,
            	            		        height: '275px'
            	            			},
            	            			title: {
            	            		    	 text: title
            	            		    }, 
            	            		    credits: {
            	            		        enabled: false
            	            		    },
            	            		    xAxis: {
            	            		    	categories: categoriesList,
            	            		    	labels:{
            	            		    		formatter: function() {
            	            		    	          if (chartName != 'pie' || chartName != 'line') {
            	            		    	        	  return this.value;
            	            		    	          } else{
            	            		    	        	  return '(Not Designated)';
            	            		    	          }
            	            		    	        }
            	            		    	},
            	            		    }, 
            	            			    legend: {
            	            			        align: 'right',
            	            			        x: -30,
            	            			        verticalAlign: 'top',
            	            			        y: 25,
            	            			        floating: true,
            	            			        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            	            			        borderColor: '#CCC',
            	            			        borderWidth: 1,
            	            			        shadow: false
            	            			    },
            	            			    tooltip: {
            	            			    	formatter: function() {
            	            			         return '<b>'+this.x+'</b><br/>'+
                                                (this.point.percent  ? this.series.name + ':' + this.point.y + ' ( '+this.point.percent.toFixed(2)+' % )' : this.series.name + ':'  + this.point.y);
            	            	                }
            	            			    },
            	            			    plotOptions: {
            	            			    	pie: {
            	            			            allowPointSelect: true,
            	            			            cursor: 'pointer',
            	            			            dataLabels: {
            	            			                enabled: true,
            	            			                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            	            			                style: {
            	            			                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            	            			                }
            	            			            }
            	            			        },
            	            			        series:{
            	            		            	events:{
            	            		        
            	            		            		click: function(event) {
            	            		            			$scope.getMyTeamDetails(event.point.series.name,event.point.category,event.point.options.name,title);
            	            		            		}
            	            		            	}
            	            		            }
            	            			    },
            	            		    series:  result
            	            	    });
            	            	}
            			});

function getEmployeeDetails(scope,uri,chart,element,title){
var result = [];
var categoriesList = [];
	Highcharts.ajax({
        url: uri,
        success: function(data) {
        	if(chart=='line' || chart == 'column'){
        	result = data.seriesDataList;
        	categoriesList = data.categoriesList;
        	}else if(chart == 'pie'){
            	result = data;
            	categoriesList = data;
            }
        	scope.drawChart(element,chart,result,title,categoriesList);
        }
    });
}