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() /*-{

		var seedPalette = 0;
		function getRandomColor() {
			var palette = [ '#FF0000', '#00FFFF', '#483D8B', '#FFFF00',
					'#4B0082', '#FFF8DC', '#ADFF2F', '#FF6347', '#E0FFFF',
					'#6A5ACD', '#FFFFE0', '#663399', '#FFEBCD', '#7FFF00',
					'#FF7F50', '#AFEEEE', '#7B68EE', '#FFFACD', '#00008B',
					'#FFE4C4', '#7CFC00', '#FF8C00', '#7FFFD4', '#9370DB',
					'#FAFAD2', '#0000CD', '#FFDEAD', '#00FF00', '#FFA500',
					'#40E0D0', '#800080', '#FFEFD5', '#0000FF', '#F5DEB3',
					'#32CD32', '#8B0000', '#48D1CC', '#8A2BE2', '#FFE4B5',
					'#4169E1', '#DEB887', '#98FB98', '#B22222', '#00CED1',
					'#9400D3', '#FFDAB9', '#1E90FF', '#D2B48C', '#90EE90',
					'#800000', '#556B2F', '#9932CC', '#EEE8AA', '#00BFFF',
					'#BC8F8F', '#00FA9A', '#FFD700', '#66CDAA', '#BA55D3',
					'#F0E68C', '#6495ED', '#F4A460', '#00FF7F', '#FF4500',
					'#8FBC8F', '#FF00FF', '#BDB76B', '#87CEEB', '#DAA520',
					'#3CB371', '#DC143C', '#20B2AA', '#FF00FF', '#FFC0CB',
					'#87CEFA', '#B8860B', '#2E8B57', '#CD5C5C', '#008B8B',
					'#EE82EE', '#FFB6C1', '#B0E0E6', '#CD853F', '#228B22',
					'#F08080', '#008080', '#DA70D6', '#FF69B4', '#ADD8E6',
					'#D2691E', '#008000', '#E9967A', '#F0FFF0', '#DDA0DD',
					'#FF1493', '#B0C4DE', '#808000', '#006400', '#FA8072',
					'#F5FFFA', '#D8BFD8', '#DB7093', '#4682B4', '#8B4513',
					'#9ACD32', '#FFA07A', '#778899', '#E6E6FA', '#C71585',
					'#5F9EA0', '#A0522D', '#6B8E23' ];
			seedPalette = (seedPalette) % 112;
			var color = palette[seedPalette];
			seedPalette += 1;
			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 = [];
		var labelsArray = []
		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 = [];
			if (i == 0) {
				for (var j = 0; j < dataRowLen; j++) {
					var recordData = dataRow[j];
					dataArray.push(recordData.getY());
					labelsArray.push(recordData.getX());
				}

			} else {
				for (var j = 0; j < dataRowLen; j++) {
					var recordData = dataRow[j];
					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 : labelsArray,
			datasets : datasetsArray
		};

		var label = [ reportElementData.getLabel(), ' [',
				reportElementData.getCategory(), ']' ].filter(Boolean).join("");
		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 : {
				animation : false,
				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
						}
					} ]
				}
			}
		});

	}-*/;

}