ref 12119:AccountingDashboard - Create a new Accounting Dashboard

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

Updated Report support

git-svn-id: https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/user/accounting-dashboard@169783 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Giancarlo Panichi 2018-07-13 18:07:02 +00:00
parent b267824711
commit 4f5504bfc3
11 changed files with 345 additions and 250 deletions

View File

@ -326,6 +326,7 @@
<runTarget>${gwt.runTarget}</runTarget>
<hostedWebapp>${webappDirectory}</hostedWebapp>
<module>${gwt.module.name}</module>
<generateJsInteropExports>true</generateJsInteropExports>
</configuration>
<executions>
<execution>

View File

@ -7,8 +7,10 @@ import javax.inject.Inject;
import org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart;
import org.gcube.portlets.user.accountingdashboard.client.resources.AppResources;
import org.gcube.portlets.user.accountingdashboard.shared.data.RecordData;
import org.gcube.portlets.user.accountingdashboard.shared.data.ReportData;
import org.gcube.portlets.user.accountingdashboard.shared.data.ReportElementData;
import org.gcube.portlets.user.accountingdashboard.shared.data.SeriesData;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
@ -39,16 +41,65 @@ public class ReportAreaView extends ViewWithUiHandlers<ReportAreaPresenter>
this.resources = resources;
init();
initWidget(uiBinder.createAndBindUi(this));
ReportData rData=new ReportData();
ArrayList<ReportElementData> elements=new ArrayList<>();
ReportElementData reportElementData=new ReportElementData();
reportElementData.setxAxis("XAxis");
reportElementData.setyAxis("YAxis");
reportElementData.setCategory("Category");
reportElementData.setLabel("Label");
elements.add(reportElementData);
rData.setElements(elements);
//
RecordData recordData1 = new RecordData();
recordData1.setX("Gennaio");
recordData1.setY(3d);
RecordData recordData2 = new RecordData();
recordData2.setX("Febbraio");
recordData2.setY(2d);
RecordData[] dataRow1 = new RecordData[2];
dataRow1[0] = recordData1;
dataRow1[1] = recordData2;
RecordData recordData3 = new RecordData();
recordData3.setX("Gennaio");
recordData3.setY(1d);
RecordData recordData4 = new RecordData();
recordData4.setX("Febbraio");
recordData4.setY(5d);
RecordData[] dataRow2 = new RecordData[2];
dataRow2[0] = recordData3;
dataRow2[1] = recordData4;
SeriesData seriesData1 = new SeriesData();
seriesData1.setLabel("Series1");
seriesData1.setDataRow(dataRow1);
SeriesData seriesData2 = new SeriesData();
seriesData2.setLabel("Series2");
seriesData2.setDataRow(dataRow2);
SeriesData[] serieses = new SeriesData[2];
serieses[0] = seriesData1;
serieses[1] = seriesData2;
ReportData rData = new ReportData();
ArrayList<ReportElementData> elements = new ArrayList<>();
ReportElementData reportElementData1 = new ReportElementData();
reportElementData1.setxAxis("XAxis");
reportElementData1.setyAxis("YAxis");
reportElementData1.setCategory("Category");
reportElementData1.setLabel("Label1");
reportElementData1.setSerieses(serieses);
elements.add(reportElementData1);
ReportElementData reportElementData2 = new ReportElementData();
reportElementData2.setxAxis("XAxis");
reportElementData2.setyAxis("YAxis");
reportElementData2.setCategory("Category");
reportElementData2.setLabel("Label2");
reportElementData2.setSerieses(serieses);
elements.add(reportElementData2);
rData.setElements(elements);
displayReportData(rData);
}
@ -56,23 +107,17 @@ public class ReportAreaView extends ViewWithUiHandlers<ReportAreaPresenter>
}
/**
* LABEL
* |
* | _
* yaxis | _ | |
* | | || |_
* | | || | |
* ---------------------------------------------------
*
* LABEL | | _ yaxis | _ | | | | || |_ | | || | |
* ---------------------------------------------------
*
* *Series_label1 *Series_label2 *Series_label3
*
* xAxis
* *Series_label1 *Series_label2 *Series_label3
*
* xAxis
*
*/
@Override
public void displayReportData(ReportData reportData) {
if (reportData == null) {
@ -87,6 +132,4 @@ public class ReportAreaView extends ViewWithUiHandlers<ReportAreaPresenter>
}
}

View File

@ -10,6 +10,6 @@
<g:HTMLPanel ui:field="reportPanel"/>
<g:HTMLPanel styleName="{res.uiDataCss.uiDataReportPanel}" ui:field="reportPanel"/>
</ui:UiBinder>

View File

@ -16,19 +16,12 @@ public class Chart extends HTMLPanel {
private String name;
private ReportElementData reportElementData;
/*
* Wraper Style max-height: 600px; min-height: 300px; height: 550px;
*
* Canvas Style width: 100%; max-width: 1000px; min-width: 250px;
* max-height: 100%; min-height: 300px;
*
*
*/
public Chart(AppResources resources, String name, ReportElementData reportElementData) {
super("<canvas id=" + name + " width='100%'></canvas>");
super("<canvas id=" + name + " class='" + resources.uiDataCss().uiDataChartCanvas() + "'></canvas>");
this.name = name;
this.reportElementData = reportElementData;
this.addStyleName(resources.uiDataCss().uiDataChartWrapper());
addAttachHandler(new AttachEvent.Handler() {
@Override
@ -41,19 +34,6 @@ public class Chart extends HTMLPanel {
});
}
private String getLabel() {
return reportElementData.getLabel();
}
public String getCatgegory() {
return reportElementData.getCategory();
}
public String getXAxisLabel() {
return reportElementData.getxAxis();
}
public String getYAxisLabel() {
return reportElementData.getyAxis();
@ -77,6 +57,18 @@ public class Chart extends HTMLPanel {
private native void drawChart() /*-{
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var name = this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::name;
console.log('Element name: ' + name);
var element = this;
@ -84,32 +76,59 @@ public class Chart extends HTMLPanel {
var canvas = $doc.getElementById(name);
console.log('Canvas: ' + canvas);
var color = Chart.helpers.color;
console.log('Color: ' + color);
var barChartData = {
labels : [ 'January', 'February', 'March', 'April', 'May', 'June',
'July' ],
datasets : [ {
label : 'Dataset 1',
backgroundColor : 'rgba(255,0,0,0.9)',
borderColor : 'rgba(255,0,0,1)',
borderWidth : 1,
data : [ 1, 2, 3, 1, 2, 3, 4 ]
}, {
label : 'Dataset 2',
backgroundColor : 'rgba(0,0,255,0.9)',
borderColor : 'rgba(0,0,255,1)',
borderWidth : 1,
data : [ 3, 4, 1, 2, 1, 2, 1 ]
} ]
var recordData = new $wnd.org.gcube.portlets.user.accountingdashboard.shared.data.RecordData();
recordData.setX('ok');
recordData.setY(1.0);
console.log('RecordData: ' + recordData.toString());
var reportElementData = this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::reportElementData;
console.log('ReportElementData: ' + reportElementData);
var serieses = reportElementData.getSerieses();
console.log('Serieses: '+serieses);
var seriesesLen = serieses.length;
console.log('Serieses lenght: ' + seriesesLen);
var datasetsArray = [];
for (var i = 0; i < seriesesLen; i++) {
console.log("for");
var seriesData = serieses[i];
console.log('SeriesData: ' + seriesData);
var dataRow = seriesData.getDataRow();
var dataRowLen = dataRow.length;
var dataArray = [];
for (var j = 0; j < dataRowLen; j++) {
var recordData = dataRow[j];
var recordData = dataArray.push(recordData.getY());
}
var colorChart=getRandomColor();
console.log('Color: '+colorChart);
// backgroundColor : 'rgba(255,0,0,0.9)',
// borderColor : 'rgba(255,0,0,1)',
datasetsArray.push({
label : seriesData.getLabel(),
backgroundColor : colorChart,
borderColor : colorChart,
borderWidth : 1,
data : dataArray
});
}
//var color = Chart.helpers.color;
//console.log('Color: ' + color);
var barChartData = {
labels : [ 'January', 'February' ],
datasets : datasetsArray
};
var label = this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getLabel()();
var xAxisLabel = this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getXAxisLabel()();
var yAxisLabel = this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getYAxisLabel()();
var label = reportElementData.getLabel();
var xAxisLabel = reportElementData.getxAxis();
var yAxisLabel = reportElementData.getyAxis();
var ctx = canvas.getContext('2d');
var chart = new Chart(ctx, {

View File

@ -12,63 +12,74 @@ import com.google.gwt.resources.client.TextResource;
*/
public interface AppResources extends ClientBundle {
interface uiDataCss extends CssResource {
String uiDataBody();
String uiDataMainPanel();
String uiDataLabel();
String uiDataLabelKeyTag();
String uiDataLabelGeoAreaTag();
String uiDataParagraphCentered();
String uiDataActionParagraph();
String uiDataAccordionGroup();
String uiDataFiltersPanel();
String uiDataFiltersPeriodPanel();
String uiDataFiltersExplorePanel();
String uiDataFiltersTitle();
String uiDataFiltersFormPanel();
String uiDataFiltersControls();
String uiDataExploreTree();
String uiDataReportPanel();
String uiDataChartWrapper();
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();
String uiDataChartCanvas();
String uiDataMonitorPopup();
String uiDataMonitorPopupGlass();
String uiDataMonitorPopupProgress();
String uiDataPopup();
String uiDataPopupGlass();
String uiDataFormTable();
String uiDataFormPager();
//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")
uiDataCss uiDataCss();
@Source("Chart.bundle.js")
TextResource chartJS();
@Source("Chart.bundle.js")
TextResource chartJS();
}

View File

@ -1,62 +1,12 @@
/* Style */
.uiDataBody {
padding-top: 0px;
}
.uiDataMainPanel {
background-color: white;
}
.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;
}
.uiDataParagraphCentered {
text-align: center;
}
.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;
}
.uiDataFiltersPanel {
float: left;
margin-right: 10px;
@ -98,6 +48,112 @@
}
/* Report*/
.uiDataReportPanel {
/*float: left;*/ /*display: block;*/
}
/* Chart */
.uiDataChartWrapper {
/*max-width:100%;*/
}
.uiDataChartCanvas {
/*width: 100%;*/ /*min-width: 250px;*/ /*height: 100%;*/
/*min-height: 300px;*/
}
/* Monitor Dialog */
.uiDataMonitorPopup {
background-color: white;
border: 1px double black;
padding: 0 15px;
z-index: 1070;
}
.uiDataMonitorPopupGlass {
background-color: #333333;
opacity: 0.5;
clip: rect(auto, auto, auto, auto);
z-index: 1050;
}
.uiDataMonitorPopupProgress {
margin: 5px;
height: 20px;
}
/* Dialog */
.uiDataPopup {
background-color: white;
border: 1px double black;
padding: 0 15px;
z-index: 1070;
}
.uiDataPopupGlass {
background-color: #333333;
opacity: 0.5;
clip: rect(auto, auto, auto, auto);
z-index: 1050;
}
/*
.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;
@ -194,7 +250,7 @@
.uiDataDataFirstTdHead {
text-align: left;
font-weight: normal;
/*font-weight: bold;*/
background-color: #b3e5fc;
width: 100px;
}
@ -204,28 +260,26 @@
}
.uiDataDataTr {
/*background-color: white;*/
}
.uiDataDataTdHead {
text-align: left;
font-weight: normal;
/*font-weight: bold;*/ /* background-color: white; */
width: 100px;
}
.uiDataDataTd {
/*background-color: white; */
}
.uiDataSmallDataTable, .uiDataSmallDataTh, .uiDataSmallDataTd {
border-width: 1px;
border-style: groove;
/*border-color: #FFEB3B;*/
border-collapse: collapse;
/*background-color: #FFEB3B;*/
}
.uiDataDataUl {
@ -258,43 +312,4 @@
display: block !important;
}
/* Chart */
.uiDataChartWrapper {
height: 500px !important;
}
/* Monitor Dialog */
.uiDataMonitorPopup {
background-color: white;
border: 1px double black;
padding: 0 15px;
z-index: 1070;
}
.uiDataMonitorPopupGlass {
background-color: #333333;
opacity: 0.5;
clip: rect(auto, auto, auto, auto);
z-index: 1050;
}
.uiDataMonitorPopupProgress {
margin: 5px;
height: 20px;
}
/* Dialog */
.uiDataPopup {
background-color: white;
border: 1px double black;
padding: 0 15px;
z-index: 1070;
}
.uiDataPopupGlass {
background-color: #333333;
opacity: 0.5;
clip: rect(auto, auto, auto, auto);
z-index: 1050;
}
*/

View File

@ -73,7 +73,7 @@ public class AccountingDashboardServiceImpl extends RemoteServiceServlet impleme
if (Constants.DEBUG_MODE) {
as = new AccountingService(AccountingServiceType.CurrentScope);
} else {
as = new AccountingService(AccountingServiceType.PortalContex);
as = new AccountingService(AccountingServiceType.CurrentScope);
}
ScopeData scopeData = as.getTree(this.getThreadLocalRequest());

View File

@ -36,27 +36,48 @@ public class ReportDataBuilder {
ArrayList<ReportElementData> elements = new ArrayList<>();
for (ReportElement reportElement : report.getElements()) {
if (reportElement.getSerieses() == null) {
ReportElementData reportElementData = new ReportElementData(reportElement.getLabel(),
reportElement.getCategory(), reportElement.getXAxis(), reportElement.getYAxis(), null);
ReportElementData reportElementData = new ReportElementData();
reportElementData.setLabel(reportElement.getLabel());
reportElementData.setCategory(reportElement.getCategory());
reportElementData.setxAxis(reportElement.getXAxis());
reportElementData.setyAxis(reportElement.getYAxis());
reportElementData.setSerieses(null);
elements.add(reportElementData);
} else {
ArrayList<SeriesData> serieses = new ArrayList<>();
for (Series series : reportElement.getSerieses()) {
Series[] serieses = reportElement.getSerieses();
int seriesLen = serieses.length;
SeriesData[] seriesesData = new SeriesData[seriesLen];
for (int i = 0; i < seriesLen; i++) {
Series series = serieses[i];
SeriesData seriesData = null;
if (series.getDataRow() == null) {
seriesData = new SeriesData(series.getLabel(), null);
seriesData = new SeriesData();
seriesData.setLabel(series.getLabel());
seriesData.setDataRow(null);
} else {
ArrayList<RecordData> dataRow = new ArrayList<>();
for (Record record : series.getDataRow()) {
RecordData recordData = new RecordData(record.getX(), record.getY());
dataRow.add(recordData);
Record[] dataRow = series.getDataRow();
int dataRowLen = dataRow.length;
RecordData[] dataRowData = new RecordData[dataRowLen];
for (int j = 0; j < dataRowLen; j++) {
Record record = dataRow[j];
RecordData recordData = new RecordData();
recordData.setX(record.getX());
recordData.setY(record.getY());
dataRowData[j] = recordData;
}
seriesData = new SeriesData(series.getLabel(), dataRow);
seriesData = new SeriesData();
seriesData.setLabel(series.getLabel());
seriesData.setDataRow(dataRowData);
}
serieses.add(seriesData);
seriesesData[i] = seriesData;
}
ReportElementData reportElementData = new ReportElementData(reportElement.getLabel(),
reportElement.getCategory(), reportElement.getXAxis(), reportElement.getYAxis(), serieses);
ReportElementData reportElementData = new ReportElementData();
reportElementData.setLabel(reportElement.getLabel());
reportElementData.setCategory(reportElement.getCategory());
reportElementData.setxAxis(reportElement.getXAxis());
reportElementData.setyAxis(reportElement.getYAxis());
reportElementData.setSerieses(seriesesData);
elements.add(reportElementData);
}
}

View File

@ -2,27 +2,24 @@ package org.gcube.portlets.user.accountingdashboard.shared.data;
import java.io.Serializable;
import jsinterop.annotations.JsType;
/**
*
* @author Giancarlo Panichi
*
*/
@JsType
public class RecordData implements Serializable {
private static final long serialVersionUID = -7526935477801214643L;
private String x;
private Long y;
private double y;
public RecordData() {
super();
}
public RecordData(String x, Long y) {
super();
this.x = x;
this.y = y;
}
public String getX() {
return x;
}
@ -31,11 +28,11 @@ public class RecordData implements Serializable {
this.x = x;
}
public Long getY() {
public double getY() {
return y;
}
public void setY(Long y) {
public void setY(double y) {
this.y = y;
}

View File

@ -1,13 +1,15 @@
package org.gcube.portlets.user.accountingdashboard.shared.data;
import java.io.Serializable;
import java.util.ArrayList;
import jsinterop.annotations.JsType;
/**
*
* @author Giancarlo Panichi
*
*/
@JsType
public class ReportElementData implements Serializable {
private static final long serialVersionUID = -4942929709611742287L;
@ -16,22 +18,12 @@ public class ReportElementData implements Serializable {
private String xAxis;
private String yAxis;
private ArrayList<SeriesData> serieses;
private SeriesData[] serieses;
public ReportElementData() {
super();
}
public ReportElementData(String label, String category, String xAxis, String yAxis,
ArrayList<SeriesData> serieses) {
super();
this.label = label;
this.category = category;
this.xAxis = xAxis;
this.yAxis = yAxis;
this.serieses = serieses;
}
public String getLabel() {
return label;
}
@ -64,11 +56,11 @@ public class ReportElementData implements Serializable {
this.yAxis = yAxis;
}
public ArrayList<SeriesData> getSerieses() {
public SeriesData[] getSerieses() {
return serieses;
}
public void setSerieses(ArrayList<SeriesData> serieses) {
public void setSerieses(SeriesData[] serieses) {
this.serieses = serieses;
}

View File

@ -1,29 +1,25 @@
package org.gcube.portlets.user.accountingdashboard.shared.data;
import java.io.Serializable;
import java.util.ArrayList;
import jsinterop.annotations.JsType;
/**
*
* @author Giancarlo Panichi
*
*/
@JsType
public class SeriesData implements Serializable {
private static final long serialVersionUID = 3308676516412447011L;
private String label;
private ArrayList<RecordData> dataRow;
private RecordData[] dataRow;
public SeriesData() {
super();
}
public SeriesData(String label, ArrayList<RecordData> dataRow) {
super();
this.label = label;
this.dataRow = dataRow;
}
public String getLabel() {
return label;
}
@ -32,11 +28,11 @@ public class SeriesData implements Serializable {
this.label = label;
}
public ArrayList<RecordData> getDataRow() {
public RecordData[] getDataRow() {
return dataRow;
}
public void setDataRow(ArrayList<RecordData> dataRow) {
public void setDataRow(RecordData[] dataRow) {
this.dataRow = dataRow;
}