Skip to content

M
mytime
Commit 60cbf278 authored by Prayas Jain's avatar Prayas Jain
Browse files
Options

Fixed Utilization Report Alignments

parent c8931b7f
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 258 deletions
src/main/webapp/WEB-INF/controllers/ChartsController.js
View file @ 60cbf278
myApp.directive('hcPieChart', function () {
return {
restrict: 'E',
template: '<div></div>',
link: function (scope, element) {
//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(value) {
console.log(value);
console.log(value.Name);
if(value.Id== 1) {
uri = 'Account';
chart = 'column';
} else if(value.Id == 2){
uri = 'FunctionalGroup';
chart = 'column';
}
else if(value.Id == 3){
uri = 'Month';
chart = 'line';
}
desc = value.Name;
console.log(desc);
getEmployeeDetails(scope,element[0].baseURI+'reports/getBarChartReport?byType='+uri,chart,element,desc);
//alert(value);
// if(scope.reportId == 1){
// getEmployeeDetails(scope,element[0].baseURI+'reports/getBillabilityDetailsByAccount','column',element," Billability By Account");
// }else if(scope.reportId == 2){
// getEmployeeDetails(scope,element[0].baseURI+'reports/billabilityByFunctionalGroup','column',element,"Billability By Functional Group");
// }else if(scope.reportId == 3){
// 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.reportId = "2"
$scope.reports = $scope.reportId;
$scope.reports=[ {Name:"Billability By Account",Id:"1"},{Name:"Billability By Functional Group",Id:"2"},{Name:"Billability Monthly Trends",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: '300px'
},
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);
}
});
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() {
if(scope.reportId == 1){
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 == 3){
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);
}
});
}
\ No newline at end of file
src/main/webapp/WEB-INF/css/custom-theme.css
View file @ 60cbf278
......@@ -664,5 +664,9 @@ cursor: pointer;
height: calc(85vh - 168px) !important;
}
.utilization-report {
height: calc(86vh - 346px) !important;
height: calc(86vh - 346px) !important;
}
.highcharts-menu {
height: 205px;
overflow-y: scroll;
}
src/main/webapp/WEB-INF/templates/charts.html
View file @ 60cbf278
......@@ -5,7 +5,7 @@
id="popupContainer" ng-controller="chartsController">
<div class="text-right">
Report Type:<select ng-model="report" #ref ng-change="clickMe(report)" ng-options="report.Name for report in reports"></select>
Report Type:<select ng-model="reportId" #ref ng-change="clickMe()" ng-options="report.Id as report.Name for report in reports"></select>
</div>
<hc-pie-chart title="Browser usage" data="pieData" options="chartOptions">Placeholder for pie chart</hc-pie-chart>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment