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