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
This commit is contained in:
Giancarlo Panichi 2018-07-23 15:17:06 +00:00
parent 62744af781
commit 44997fa4fc
9 changed files with 120 additions and 349 deletions

View File

@ -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

View File

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

View File

@ -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();
chart.update();
console.log('Canvas offset: left=' + canvas.offsetLeft + ', top='
+ canvas.offsetTop);
clearTimeout(timeOut);
var canvasW = canvas.width;
var canvasH = canvas.height;
console.log('Canvas dimensions: ' + canvasW + ' x ' + canvasH);
//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);
}-*/;

View File

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

View File

@ -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;
}
*/

View File

@ -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;
}

View File

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

View File

@ -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++) {

View File

@ -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 {
}
}
}