ref 12119:AccountingDashboard - Create a new Accounting Dashboard

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

Updated Export file support. Added PNG/JPEG/PDF file export.

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

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

@@ -17,7 +17,15 @@ public class Chart extends HTMLPanel {
 	private ReportElementData reportElementData;
 
 	public Chart(AppResources resources, String name, ReportElementData reportElementData) {
-		super("<canvas id=" + name + " class='" + resources.uiDataCss().uiDataChartCanvas() + "'></canvas>");
+		super("<div class='dropdown'>" + "<button class='btn dropdown-toggle' "
+				+ "type='button' style='float:right;' 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 + "_ExportPNG' href='#' download='" + reportElementData.getLabel() + ".png'>Export PNG</a>"
+				+ "</li>" + "<li><a id='" + name + "_ExportJPEG' href='#' download='" + reportElementData.getLabel()
+				+ ".jpeg'>Export JPEG</a>" + "</li>" + "<li><a id='" + name + "_ExportPDF' href='#' download='"
+				+ reportElementData.getLabel() + ".pdf'>Export PDF</a>" + "</li>" + "</ul>" + "</div>" + "<canvas id="
+				+ name + " class='" + resources.uiDataCss().uiDataChartCanvas() + "'></canvas>");
 		this.name = name;
 		this.reportElementData = reportElementData;
 		this.addStyleName(resources.uiDataCss().uiDataChartWrapper());
@@ -39,14 +47,6 @@ public class Chart extends HTMLPanel {
 		redrawChart();
 	}
 
-	private native void redrawChart() /*-{
-		console.log('RedrawChart()');
-	
-		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);
-		this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::drawChart()();
-
-	}-*/;
-
 	private static native void getCanvas(Chart chart)/*-{
 		var name = chart.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::name;
 		console.log('Element name: ' + name);
@@ -56,7 +56,7 @@ public class Chart extends HTMLPanel {
 		console.log('Canvas: ' + canvas);
 
 		canvas.height = 500;
-		canvas.width = 1024;
+		canvas.width = 990;
 		var canvasW = canvas.width;
 		var canvasH = canvas.height;
 		console.log('Canvas dimensions: ' + canvasW + ' x ' + canvasH);
@@ -65,6 +65,91 @@ public class Chart extends HTMLPanel {
 
 	}-*/;
 
+	private native void createMenu()/*-{
+		console.log('CreateMenu()');
+		console.log('This: ' + this);
+		var name = this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::name;
+
+		//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 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 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);
+
+	}-*/;
+
+	private static native void saveImagePNG(Chart chart)/*-{
+		console.log('saveImagePNG()');
+		var name = chart.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::name;
+		console.log('Element name: ' + name);
+		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;)(chart);
+		return function() {
+			console.log('Save file png');
+			var image = canvas.toDataURL("image/png").replace("image/png",
+					"image/octet-stream");
+			console.log('Image url: ' + image);
+			this.href = image;
+			//window.open(image, '_blank');
+		};
+	}-*/;
+
+	private static native void saveImageJPEG(Chart chart)/*-{
+		console.log('saveImageJPEG()');
+		var name = chart.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::name;
+		console.log('Element name: ' + name);
+		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;)(chart);
+		return function() {
+			console.log('Save file jpeg');
+			var image = canvas.toDataURL("image/jpeg").replace("image/jpeg",
+					"image/octet-stream");
+			console.log('Image url: ' + image);
+			this.href = image;
+		};
+	}-*/;
+
+	private static native void saveFilePDF(Chart chart, String filename)/*-{
+		console.log('saveFilePDF()');
+		var name = chart.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::name;
+		console.log('Element name: ' + name);
+		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;)(chart);
+		return function() {
+			console.log('Save file pdf');
+			var image = canvas.toDataURL("image/png", 1.0).replace("image/png",
+					"image/octet-stream");
+			var doc = new jsPDF('landscape');
+			doc.setFontSize(20);
+			doc.addImage(image, 'JPEG', 10, 10, 280, 150);
+			doc.save(filename);
+			return false;
+
+			//console.log('Image url: ' + image);
+			//this.href = image;
+		};
+	}-*/;
+
+	private native void redrawChart() /*-{
+		console.log('RedrawChart()');
+
+		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);
+		this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::drawChart()();
+
+	}-*/;
+
 	private native void drawChart() /*-{
 
 		var seedPalette = 0;
@@ -157,11 +242,15 @@ public class Chart extends HTMLPanel {
 		var yAxisLabel = reportElementData.getyAxis();
 
 		var ctx = canvas.getContext('2d');
+		ctx.fillStyle = 'white';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
 		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,
@@ -189,19 +278,17 @@ public class Chart extends HTMLPanel {
 							beginAtZero : true
 						}
 					} ]
-				}
+				},
 			}
 		});
 		console.log('Chart: ' + chart);
-		//Chart.instances[].resize();
-		//chart.resize();
 
+		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);
-
 	}-*/;
 
 }

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

@@ -2,6 +2,7 @@ package org.gcube.portlets.user.accountingdashboard.client.resources;
 
 import com.google.gwt.resources.client.ClientBundle;
 import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.resources.client.ImageResource;
 import com.google.gwt.resources.client.TextResource;
 
 /**
@@ -52,6 +53,10 @@ public interface AppResources extends ClientBundle {
 
 		String uiDataPopupHr();
 		
+		String uiDataIconSettings();
+
+		String uiDataChartMenuPosition();
+
 		// String uiDataFormTable();
 
 		// String uiDataFormPager();
@@ -86,4 +91,10 @@ public interface AppResources extends ClientBundle {
 	@Source("Chart.bundle.js")
 	TextResource chartJS();
 	
+	@Source("jspdf.min.js")
+	TextResource jsPDF();
+	
+	@Source("settings.png")
+	ImageResource settingsImage();
+
 }

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

@@ -15,6 +15,8 @@ public class ResourceLoader {
 	ResourceLoader(AppResources appResources) {
 		appResources.uiDataCss().ensureInjected();
 		ScriptInjector.fromString(appResources.chartJS().getText())
+	    .inject();
+		ScriptInjector.fromString(appResources.jsPDF().getText())
 	    .inject();
 		//scopeTreeResources.cellTreeStyle().ensureInjected();
 		

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

@@ -66,6 +66,11 @@
 	max-height: 800px;
 }
 
+.uiDataChartMenuPosition {
+	top: 30px;
+	left: 828px;	
+}
+
 /* Monitor Dialog */
 .uiDataMonitorPopup {
 	background-color: white;
@@ -105,18 +110,27 @@
 .uiDataPopupCaption {
 	display: block;
 	font-size: large;
-    margin-top: 5px;
+	margin-top: 5px;
-    margin-bottom: 2px;
+	margin-bottom: 2px;
 }
 
 .uiDataPopupHr {
-	margin: 0px!important;
+	margin: 0px !important;
 	margin-bottom: 5px;
 	height: 3px;
 	border: 0;
 	box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.5);
 }
 
+/* Icons */
+@sprite .uiDataIconSettings {
+	gwt-image: "settingsImage";
+	display: block;
+	float: left;
+	margin: 0px;
+	margin-right: 3px;
+}
+
 /*
 .uiDataBody {
 	padding-top: 0px;

src/main/webapp/AccountingDashboard.html

@@ -32,7 +32,7 @@
 <!-- you can leave the body empty if you want  -->
 <!-- to create a completely dynamic UI.        -->
 <!--                                           -->
-<body style="padding-top:0px;">
+<body style="padding-top: 0px;">
 
 	<!-- OPTIONAL: include this if you want history support -->
 	<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'