gCubeSystem
/
accounting-dashboard
16
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

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
This commit is contained in:
Giancarlo Panichi 2018-07-18 16:02:43 +00:00
parent b1e6fa5ec2
commit 1fec6969d4
7 changed files with 436 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,15 +56,100 @@ 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);
return canvas;
}-*/;
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);
}-*/;
}

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

@ -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;
/**
@ -51,6 +52,10 @@ public interface AppResources extends ClientBundle {
String uiDataPopupCaption();
String uiDataPopupHr();
String uiDataIconSettings();
String uiDataChartMenuPosition();
// String uiDataFormTable();
@ -85,5 +90,11 @@ public interface AppResources extends ClientBundle {
@Source("Chart.bundle.js")
TextResource chartJS();
@Source("jspdf.min.js")
TextResource jsPDF();
@Source("settings.png")
ImageResource settingsImage();
}

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

@ -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();

302
src/main/java/org/gcube/portlets/user/accountingdashboard/client/resources/jspdf.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
src/main/java/org/gcube/portlets/user/accountingdashboard/client/resources/settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 430 B

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

@ -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-bottom: 2px;
margin-top: 5px;
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;

4
src/main/webapp/AccountingDashboard.html
View File

@ -24,7 +24,7 @@
<script type="text/javascript"
src="accountingdashb/accountingdashb.nocache.js"></script>
</head>
<!-- -->
@ -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'