ref 12119:AccountingDashboard - Create a new Accounting Dashboard

https://support.d4science.org/issues/12119

Fixed offsetLeft and offsetTop issue.

git-svn-id: https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/user/accounting-dashboard@169897 82a268e6-3cf1-43bd-a215-b396298e98cf

distro/README

@@ -45,14 +45,14 @@ Installation
 --------------------------------------------------
  
 Installation documentation is available on-line in the gCube Wiki:
-	https://wiki.gcube-system.org/gcube/CMEMS_Scheduler_Manager
+	http://wiki.gcube-system.org/gcube/Accounting_Dashboard
   
  
 Documentation 
 --------------------------------------------------
  
 Documentation is available on-line in the gCube Wiki:
-	https://wiki.gcube-system.org/gcube/CMEMS_Scheduler_Manager
+	http://wiki.gcube-system.org/gcube/Accounting_Dashboard
    
  
 Support 

src/main/java/org/gcube/portlets/user/accountingdashboard/client/application/mainarea/report/ReportAreaView.java

@@ -59,6 +59,16 @@ public class ReportAreaView extends ViewWithUiHandlers<ReportAreaPresenter>
 			reportPanel.clear();
 		} else {
 			reportPanel.clear();
+			
+			/*HTMLPanel tabContent = new HTMLPanel("");
+			for (int i = 0; i < reportData.getElements().size(); i++) {
+				ReportElementData reportElementData = reportData.getElements().get(i);
+				Chart chart = new Chart(resources, "report_" + i, reportElementData);
+				tabContent.add(chart);
+			}
+			reportPanel.add(tabContent);
+			*/
+			
 			categories = new HashMap<>();
 			for (int i = 0; i < reportData.getElements().size(); i++) {
 				ReportElementData reportElementData = reportData.getElements().get(i);
@@ -113,6 +123,7 @@ public class ReportAreaView extends ViewWithUiHandlers<ReportAreaPresenter>
 			}
 
 			reportPanel.add(tabPanel);
+			
 		}
 
 	}

src/main/java/org/gcube/portlets/user/accountingdashboard/client/application/mainarea/report/chartjs/Chart.java

@@ -14,11 +14,12 @@ import com.google.gwt.user.client.ui.HTMLPanel;
 public class Chart extends HTMLPanel {
 
 	private String name;
+
 	private ReportElementData reportElementData;
 
 	public Chart(AppResources resources, String name, ReportElementData reportElementData) {
 		super("<div class='dropdown'>" + "<button class='btn dropdown-toggle' "
-				+ "type='button' style='float:right;' data-toggle='dropdown'><span class='"
+				+ "type='button' style='float:right;max-width:80px;' data-toggle='dropdown'><span class='"
 				+ resources.uiDataCss().uiDataIconSettings() + "'></span>" + "<span class='caret'></span>" + "</button>"
 				+ "<ul class='" + resources.uiDataCss().uiDataChartMenuPosition() + " dropdown-menu'>" + "<li><a id='"
 				+ name + "_ExportJPEG' href='#' download='" + reportElementData.getLabel() + ".jpeg'>Export JPEG</a>"
@@ -53,15 +54,16 @@ public class Chart extends HTMLPanel {
 		var name = chart.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::name;
 		console.log('Element name: ' + name);
 		var element = this;
-		console.log('Element found: ' + element);
 		var canvas = $doc.getElementById(name);
 		console.log('Canvas: ' + canvas);
+		canvas.style.display = 'block';
+		canvas.style.visibility = 'visible';
+		canvas.width = 800;
+		canvas.height = 600;
 
-		canvas.height = 500;
-		canvas.width = 990;
-		var canvasW = canvas.width;
-		var canvasH = canvas.height;
-		console.log('Canvas dimensions: ' + canvasW + ' x ' + canvasH);
+		var w = canvas.width;
+		var h = canvas.height;
+		console.log('Canvas dimensions: ' + w + ' x ' + h);
 
 		return canvas;
 
@@ -74,28 +76,24 @@ public class Chart extends HTMLPanel {
 
 		//Export JPEG
 		var elementNameJPEG = name + '_ExportJPEG';
-		console.log('ExportJPEG search: ' + elementNameJPEG);
 		var exportJPEGElement = $doc.getElementById(elementNameJPEG);
 		console.log('ExportJPEGElement: ' + exportJPEGElement);
 		exportJPEGElement.onclick = @org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::saveImageJPEG(Lorg/gcube/portlets/user/accountingdashboard/client/application/mainarea/report/chartjs/Chart;)(this);
 
 		//Export PNG
 		var elementNamePNG = name + '_ExportPNG';
-		console.log('ExportPNG search: ' + elementNamePNG);
 		var exportPNGElement = $doc.getElementById(elementNamePNG);
 		console.log('ExportPNGElement: ' + exportPNGElement);
 		exportPNGElement.onclick = @org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::saveImagePNG(Lorg/gcube/portlets/user/accountingdashboard/client/application/mainarea/report/chartjs/Chart;)(this);
 
 		//Export PDF
 		var elementNamePDF = name + '_ExportPDF';
-		console.log('ExportPDF search: ' + elementNamePDF);
 		var exportPDFElement = $doc.getElementById(elementNamePDF);
 		console.log('ExportPDFElement: ' + exportPDFElement);
 		exportPDFElement.onclick = @org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::saveFilePDF(Lorg/gcube/portlets/user/accountingdashboard/client/application/mainarea/report/chartjs/Chart;Ljava/lang/String;)(this,exportPDFElement.download);
 
 		//Export CSV
 		var elementNameCSV = name + '_ExportCSV';
-		console.log('ExportCSV search: ' + elementNameCSV);
 		var exportCSVElement = $doc.getElementById(elementNameCSV);
 		console.log('ExportCSVElement: ' + exportCSVElement);
 		exportCSVElement.onclick = @org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::saveFileCSV(Lorg/gcube/portlets/user/accountingdashboard/client/application/mainarea/report/chartjs/Chart;)(this);
@@ -137,7 +135,6 @@ public class Chart extends HTMLPanel {
 			var image = canvas.toDataURL("image/png").replace("image/png",
 					"image/octet-stream");
 			this.href = image;
-			//window.open(image, '_blank');
 		};
 	}-*/;
 
@@ -166,7 +163,6 @@ public class Chart extends HTMLPanel {
 			console.log('Save file csv');
 
 			var serieses = reportElementData.getSerieses();
-			console.log('Serieses: ' + serieses);
 			var seriesesLen = serieses.length;
 			console.log('Serieses lenght: ' + seriesesLen);
 
@@ -203,6 +199,34 @@ public class Chart extends HTMLPanel {
 
 	}-*/;
 
+	private static native void getScales(Chart chart)/*-{
+		var reportElementData = chart.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::reportElementData;
+
+		var xAxisLabel = reportElementData.getxAxis();
+		var yAxisLabel = reportElementData.getyAxis();
+		var scalesType = {
+			xAxes : [ {
+				scaleLabel : {
+					display : true,
+					labelString : xAxisLabel
+				}
+			} ],
+
+			yAxes : [ {
+				scaleLabel : {
+					display : true,
+					labelString : yAxisLabel
+				},
+				ticks : {
+					beginAtZero : true
+				}
+			} ]
+		};
+
+		return scalesType;
+
+	}-*/;
+
 	private native void redrawChart() /*-{
 		console.log('RedrawChart()');
 
@@ -244,11 +268,12 @@ public class Chart extends HTMLPanel {
 			return color;
 		}
 
+		this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::createMenu()();
+		
 		var canvas = @org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getCanvas(Lorg/gcube/portlets/user/accountingdashboard/client/application/mainarea/report/chartjs/Chart;)(this);
 		console.log('Canvas: ' + canvas);
 
 		var reportElementData = this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::reportElementData;
-		console.log('ReportElementData: ' + reportElementData);
 
 		var serieses = reportElementData.getSerieses();
 		var seriesesLen = serieses.length;
@@ -257,7 +282,7 @@ public class Chart extends HTMLPanel {
 		var datasetsArray = [];
 		var labelsArray = []
 		for (var i = 0; i < seriesesLen; i++) {
-			console.log("for");
+
 			var seriesData = serieses[i];
 			console.log('SeriesData: ' + seriesData);
 			var dataRow = seriesData.getDataRow();
@@ -280,7 +305,6 @@ public class Chart extends HTMLPanel {
 			}
 
 			var colorChart = getRandomColor();
-			console.log('Color: ' + colorChart);
 
 			datasetsArray.push({
 				label : seriesData.getLabel(),
@@ -298,82 +322,55 @@ public class Chart extends HTMLPanel {
 
 		var label = [ reportElementData.getLabel(), ' [',
 				reportElementData.getCategory(), ']' ].filter(Boolean).join("");
-		var xAxisLabel = reportElementData.getxAxis();
-		var yAxisLabel = reportElementData.getyAxis();
+
+		var scalesType = @org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getScales(Lorg/gcube/portlets/user/accountingdashboard/client/application/mainarea/report/chartjs/Chart;)(this);
 
 		var ctx = canvas.getContext('2d');
+
 		console.log('Create chart');
 
-		var chart = new Chart(ctx, {
-			// The type of chart we want to create
-			type : 'bar',
-			data : barChartData,
-			backgroundColor : "#FFFFFF",
-			options : {
-				animation : false,
-				responsive : false,
-				maintainAspectRatio : true,
-				aspectRatio : 1, // width == height
-				legend : {
-					position : 'top',
-				},
-				title : {
-					display : true,
-					text : label
-				},
-				scales : {
-					xAxes : [ {
-						scaleLabel : {
-							display : true,
-							labelString : xAxisLabel
-						}
-					} ],
-
-					yAxes : [ {
-						scaleLabel : {
-							display : true,
-							labelString : yAxisLabel
-						},
-						ticks : {
-							beginAtZero : true
-						}
-					} ]
-				},
-				tooltips : {
+		var timeOut = setTimeout(function() {
+			var chart = new Chart(ctx, {
+				// The type of chart we want to create
+				type : 'bar',
+				data : barChartData,
+				backgroundColor : "#FFFFFF",
+				options : {
+					animation : false,
+					responsive : false,
+					maintainAspectRatio : false,
+					aspectRatio : 1, // width == height
+					legend : {
+						position : 'top',
+					},
+					title : {
+						display : true,
+						text : label
+					},
+					scales : scalesType,
 					tooltips : {
-						mode : 'x'
-					}
-				},
-				zoom : {
-					enabled : true,
-					mode : 'xy',
-					limits : {
-						max : 20,
-						min : 0.1
+						enabled : true,
+						mode : 'point',
+						intersect : true
+
+					},
+					zoom : {
+						enabled : true,
+						mode : 'xy',
+						limits : {
+							max : 20,
+							min : 0.1
+						}
 					}
 				}
-			}
-		});
-		console.log('Chart: ' + chart);
-
-		this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::createMenu()();
-		chart.update();
+			});
 
-		var canvasW = canvas.width;
-		var canvasH = canvas.height;
-		console.log('Canvas dimensions: ' + canvasW + ' x ' + canvasH);
+			chart.update();
+			console.log('Canvas offset: left=' + canvas.offsetLeft + ', top='
+					+ canvas.offsetTop);
+			clearTimeout(timeOut);
 
-		//Decide whether to align left or right based on position on canvas
-		//console.log('View1:['+Chart.global+']');
-		
-		//console.log('This coords:['+this.x+', '+this.y+']');
-		//if (this.x > this.chart.width / 2) {
-		//	this.x -= this.xOffset + this.width;
-		//} else {
-		//	this.x += this.xOffset;
-		//}
-		//console.log('This coords computed:'+this.x);
-		
+		}, 300);
 
 	}-*/;
 

src/main/java/org/gcube/portlets/user/accountingdashboard/client/resources/AppResources.java

@@ -52,37 +52,11 @@ public interface AppResources extends ClientBundle {
 		String uiDataPopupCaption();
 
 		String uiDataPopupHr();
-		
+
 		String uiDataIconSettings();
 
 		String uiDataChartMenuPosition();
 
-		// String uiDataFormTable();
-
-		// String uiDataFormPager();
-
-		// String uiDataActionParagraph();
-		// String uiDataAccordionGroup();
-
-		// String uiDataBody();
-		// String uiDataLabel();
-		// String uiDataLabelKeyTag();
-		// String uiDataLabelGeoAreaTag();
-
-		/*
-		 * String uiDataButtonRefresh(); String uiDataIconRefresh(); String
-		 * uiDataMainDataPanel(); String uiDataRow(); String uiDataTable();
-		 * String uiDataTableStriped(); String uiDataPager(); String
-		 * uiDataDataTable(); String uiDataDataFirstTr(); String
-		 * uiDataDataFirstTdHead(); String uiDataDataFirstTd(); String
-		 * uiDataDataTr(); String uiDataDataTdHead(); String uiDataDataTd();
-		 * String uiDataDataUl(); String uiDataDataLi(); String
-		 * uiDataSmallDataTable(); String uiDataSmallDataTh(); String
-		 * uiDataSmallDataTd(); String uiDataNoMarginTable(); String
-		 * uiDataMarginBottomFixedTable(); String uiDataTh(); String
-		 * uiDataColumnCentered();
-		 */
-
 	}
 
 	@Source("uiData.css")
@@ -90,13 +64,13 @@ public interface AppResources extends ClientBundle {
 
 	@Source("Chart.bundle.js")
 	TextResource chartJS();
-	
+
 	@Source("jspdf.min.js")
 	TextResource jsPDF();
-	
+
 	@Source("hammer.min.js")
 	TextResource hammerJS();
-	
+
 	@Source("chartjs-plugin-zoom.min.js")
 	TextResource chartJSPluginZoom();
 

src/main/java/org/gcube/portlets/user/accountingdashboard/client/resources/uiData.css

@@ -57,12 +57,16 @@
 
 /* Chart */
 .uiDataChartWrapper {
-	width: 1024px;
+	width: 800px;
+	/*border: solid 1px;*/
 }
 
 .uiDataChartCanvas {
-	height: 500px;
-	width: 990px;
+	/*height-max: 800px;*/
+	height: 600px;
+	/*height-min: 500px;*/
+	width:100%;
+	/*width: 990px;*/
 	-moz-user-select: none;
 	-webkit-user-select: none;
 	-ms-user-select: none;
@@ -70,7 +74,8 @@
 
 .uiDataChartMenuPosition {
 	top: 30px !important;
-	left: 862px !important;
+	left: 634px!important;
+	/*left: 862px !important;*/
 }
 
 /* Monitor Dialog */
@@ -133,215 +138,3 @@
 	margin-right: 3px;
 }
 
-/*
-.uiDataBody {
-	padding-top: 0px;
-}
-
-
-.uiDataLabel {
-	word-wrap: break-word;
-}
-
-.uiDataLabelKeyTag {
-	color: white;
-	font-weight: bold;
-	background-color: #00ace2;
-	border-radius: 8px;
-	padding: 3px;
-	margin: 2px;
-	width: auto;
-	display: inline-block;
-	word-wrap: break-word;
-}
-
-.uiDataLabelGeoAreaTag {
-	color: white;
-	font-weight: bold;
-	background-color: #009688;
-	border-radius: 8px;
-	padding: 3px;
-	margin: 2px;
-	width: auto;
-	display: inline-block;
-	word-wrap: break-word;
-}
-
-.uiDataActionParagraph {
-	padding: 19px 20px 20px;
-	margin-top: 20px;
-	margin-bottom: 20px;
-	background-color: #f5f5f5;
-	border-top: 1px solid #e5e5e5;
-}
-
-.uiDataAccordionGroup {
-	margin-bottom: 2px;
-	padding-left: 10px;
-	border-width: 1px;
-	border-style: solid;
-	border-color: rgb(229, 229, 229);
-	border-image: initial;
-	border-radius: 4px;
-}
-
-
-.uiDataMainDataPanel {
-	float: left;
-	max-width: 800px;
-}
-
-.uiDataButtonRefresh {
-	width: 10px !important;
-	height: 10px !important;
-	padding: 5px !important;
-	margin: 0px !important;
-	margin-top: 6px !important;
-	line-height: 10px !important;
-	float: left !important;
-}
-
-.uiDataIconRefresh {
-	font-size: 12px !important;
-}
-
-.uiDataTable {
-	width: 100%;
-	background-color: white;
-	margin-bottom: 10px
-}
-
-.uiDataRow {
-	margin-left: 0px;
-}
-
-.uiDataTableStriped {
-	width: 100%;
-	background-color: white;
-	margin-bottom: 10px
-}
-
-.uiDataTableStriped tr:nth-child\(even\) {
-	background-color: #f9f9f9;
-}
-
-.uiDataTableStriped th {
-	background-color: #f0f0f0;
-}
-
-.uiDataPager {
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: 6px;
-	margin-bottom: 10px;
-}
-
-.uiDataFormTable {
-	width: 320px;
-	background-color: white;
-	border: 1px solid #ccc;
-	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-	-webkit-transition: border linear .2s, box-shadow linear .2s;
-	-moz-transition: border linear .2s, box-shadow linear .2s;
-	-o-transition: border linear .2s, box-shadow linear .2s;
-	transition: border linear .2s, box-shadow linear .2s;
-}
-
-.uiDataFormTable tr:nth-child\(even\) {
-	background-color: #f9f9f9;
-}
-
-.uiDataFormTable th {
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	background-color: #f0f0f0;
-	font-weight: normal;
-}
-
-.uiDataFormTable td {
-	border: 1px solid #ccc;
-}
-
-.uiDataFormPager {
-	margin-top: 6px;
-	margin-bottom: 10px;
-}
-
-.uiDataDataTable {
-	width: 100%;
-	border-collapse: collapse;
-	border: 1px ridge;
-}
-
-.uiDataDataFirstTr {
-	background-color: #b3e5fc;
-}
-
-.uiDataDataFirstTdHead {
-	text-align: left;
-	font-weight: normal;
-	
-	background-color: #b3e5fc;
-	width: 100px;
-}
-
-.uiDataDataFirstTd {
-	background-color: #b3e5fc;
-}
-
-.uiDataDataTr {
-	
-	
-}
-
-.uiDataDataTdHead {
-	text-align: left;
-	font-weight: normal;
-	width: 100px;
-}
-
-.uiDataDataTd {
-	
-	
-}
-
-.uiDataSmallDataTable, .uiDataSmallDataTh, .uiDataSmallDataTd {
-	border-width: 1px;
-	border-style: groove;
-	border-collapse: collapse;
-	
-}
-
-.uiDataDataUl {
-	
-}
-
-.uiDataDataLi {
-	display: inline;
-}
-
-.uiDataNoMarginTable {
-	margin-bottom: 0px;
-}
-
-.uiDataMarginBottomFixedTable {
-	margin-bottom: 12px;
-}
-
-.uiDataTh {
-	width: 120px;
-}
-
-.uiDataColumnCentered {
-	margin: auto;
-	display: block;
-}
-
-.uiDataColumnCentered button {
-	margin: auto !important;
-	display: block !important;
-}
-
-*/

src/main/java/org/gcube/portlets/user/accountingdashboard/server/accounting/PortalContextTreeProvider.java

@@ -114,6 +114,7 @@ public class PortalContextTreeProvider implements ContextTreeProvider {
 				String vreDescription = vreSite.getDescription();
 
 				long logoId = vreSite.getLogoId();
+				@SuppressWarnings("unused")
 				String vreLogoURL = groupsManager.getGroupLogoURL(logoId);
 				String infraScope = groupsManager.getInfrastructureScope(vreSite.getGroupId());
 				String friendlyURL = GCubePortalConstants.PREFIX_GROUP_URL + vreSite.getFriendlyURL();
@@ -192,10 +193,12 @@ public class PortalContextTreeProvider implements ContextTreeProvider {
 			this.description = description;
 		}
 
+		@SuppressWarnings("unused")
 		public long getCategoryID() {
 			return categoryID;
 		}
 
+		@SuppressWarnings("unused")
 		public String getDescription() {
 			return description;
 		}
@@ -227,10 +230,12 @@ public class PortalContextTreeProvider implements ContextTreeProvider {
 			this.scope = scope;
 		}
 
+		@SuppressWarnings("unused")
 		public String getDescription() {
 			return description;
 		}
 
+		@SuppressWarnings("unused")
 		public long getId() {
 			return id;
 		}
@@ -239,10 +244,12 @@ public class PortalContextTreeProvider implements ContextTreeProvider {
 			return name;
 		}
 
+		@SuppressWarnings("unused")
 		public String getScope() {
 			return scope;
 		}
 
+		@SuppressWarnings("unused")
 		public String getUrl() {
 			return url;
 		}

src/test/java/org/gcube/portlets/user/accountingdashboard/AccountingServiceTest.java

@@ -1,11 +1,8 @@
 package org.gcube.portlets.user.accountingdashboard;
 
-import java.util.ArrayList;
-
 import org.gcube.portlets.user.accountingdashboard.server.accounting.AccountingService;
 import org.gcube.portlets.user.accountingdashboard.server.accounting.AccountingServiceType;
 import org.gcube.portlets.user.accountingdashboard.shared.Constants;
-import org.gcube.portlets.user.accountingdashboard.shared.data.ScopeData;
 import org.junit.Test;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;

src/test/java/org/gcube/portlets/user/accountingdashboard/ColorTest.java

@@ -58,18 +58,13 @@ public class ColorTest extends TestCase {
 				logger.debug("Average: " + average);
 
 				/*
-				System.out.print("purple=[");
-				for (int i = purple.length - 1; i > -1; i--) {
-					if (i == purple.length - 1) {
-						System.out.print("\"" + purple[i] + "\"");
-					} else {
-						System.out.print(",\"" + purple[i] + "\"");
-					}
-				}
-				System.out.print("]");
-				System.out.println("");
-				*/
-				
+				 * System.out.print("purple=["); for (int i = purple.length - 1;
+				 * i > -1; i--) { if (i == purple.length - 1) {
+				 * System.out.print("\"" + purple[i] + "\""); } else {
+				 * System.out.print(",\"" + purple[i] + "\""); } }
+				 * System.out.print("]"); System.out.println("");
+				 */
+
 				String[] palette = new String[112];
 				int j = 0;
 				for (int i = 0; i < 16; i++) {

src/test/java/org/gcube/portlets/user/accountingdashboard/ServiceTest.java

@@ -1,6 +1,5 @@
 package org.gcube.portlets.user.accountingdashboard;
 
-
 import org.gcube.portlets.user.accountingdashboard.shared.Constants;
 import org.junit.Test;
 import org.slf4j.Logger;
@@ -22,7 +21,6 @@ public class ServiceTest extends TestCase {
 		if (Constants.TEST_ENABLE) {
 
 			try {
-				
 
 				assertTrue("Success", true);
 			} catch (Throwable e) {
@@ -36,5 +34,4 @@ public class ServiceTest extends TestCase {
 		}
 	}
 
-
 }