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

package org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs;

import org.gcube.portlets.user.accountingdashboard.client.resources.AppResources;
import org.gcube.portlets.user.accountingdashboard.shared.data.ReportElementData;

import com.google.gwt.event.logical.shared.AttachEvent;
import com.google.gwt.user.client.ui.HTMLPanel;

/**
 * 
 * @author Giancarlo Panichi
 *
 */
public class Chart extends HTMLPanel {

	private String name;
	private ReportElementData reportElementData;

	public Chart(AppResources resources, String name, ReportElementData reportElementData) {
		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
			public void onAttachOrDetach(AttachEvent event) {
				if (event.isAttached()) {
					drawChart();
				}

			}
		});
	}

	public String getYAxisLabel() {
		return reportElementData.getyAxis();

	}

	/**
	 * LABEL | | _ yaxis | _ | | | | || |_ | | || | |
	 * ---------------------------------------------------
	 * 
	 * 
	 * *Series_label1 *Series_label2 *Series_label3
	 * 
	 * xAxis
	 * 
	 */

	/**
	 * Series[] { Series : LABEL, dataRow [] Series : LABEL, dataRow [] Series :
	 * LABEL, dataRow [] Series : LABEL, dataRow [] }
	 */

	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;
		console.log('Element found: ' + element);
		var canvas = $doc.getElementById(name);
		console.log('Canvas: ' + canvas);

		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 = reportElementData.getLabel();
		var xAxisLabel = reportElementData.getxAxis();
		var yAxisLabel = reportElementData.getyAxis();

		var ctx = canvas.getContext('2d');
		var chart = new Chart(ctx, {
			// The type of chart we want to create
			type : 'bar',
			data : barChartData,
			options : {
				responsive : true,
				legend : {
					position : 'top',
				},
				title : {
					display : true,
					text : label
				},
				scales : {
					xAxes : [ {
						scaleLabel : {
							display : true,
							labelString : xAxisLabel
						}
					} ],

					yAxes : [ {
						scaleLabel : {
							display : true,
							labelString : yAxisLabel
						},
						ticks : {
							beginAtZero : true
						}
					} ]
				}
			}
		});

	}-*/;

}