analytics/webcontent/ps/cogadmin/js/com/ibm/cognos/admin/chart/stackedColumns.js

//    Licensed Materials - Property of IBM
//
//    IBM Cognos Products: cogadmin
//
//    (C) Copyright IBM Corp. 2005, 2014
//
//    US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
//
//
dojo.provide("com.ibm.cognos.admin.chart.stackedColumns");

dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.widget.Legend");
dojo.require("dojox.color");
dojo.require("dojox.json.ref");
dojo.require("dijit.Tooltip");
dojo.require("dojox.charting.themes.BlueDusk");
dojo.require("dojo.date");

dojo.require("com.ibm.cognos.admin.chart.Base");
dojo.require("com.ibm.cognos.admin.utils.Datetime");

(function(){
	var DEFAULT_HEIGHT = 200, 
		DEFAULT_WIDTH = 600, 
		TITLE_HEIGHT = 20, 
		SHAPE_OFFSET = 0.5,
		THE_LAST_HOUR = 23,
		STATUS_SUSPENDED = "suspended",
		COLUMN_SUSPENDED = 2,
		MINIMUM_LABEL = 15,
		NUMBER_OF_TICKS = 3,
		WEB_CONTENT = _F_Config.webContent;
	var dt = com.ibm.cognos.admin.utils.Datetime;
	
	dojo.declare("com.ibm.cognos.admin.chart.stackedColumns",com.ibm.cognos.admin.chart.Base,{
		defaultParams: {
			selectDateTime: '',			//standard datetime string, the selected date time applied on detail table
			selectGranularity: 'day',	//"day"/"hour", indicate the granularity of current view of detail table
			summaryDate: '',			//standard datetime string, the current date applied on chart
			data: null					//the summary data model
			/* Sample of data 
			 * [
					{
						status: 'scheduled',
						count: [
							{time: '0', number: 2},
							{time: '1', number: 3},
							{time: '2', number: 4}
						]
					},{
						status: 'cancelled',
						count: [
							{time: '1', number: 1},
							{time: '2', number: 4}
						]
					},{
						status: 'suspended',
						count: [
							{time: '', number: 2}
						]
					}
				]
			 */
		},
		constructor : function (frag,args){
			this.selectDateTime = new dt(args.selectDateTime);
			this.selectGranularity = args.selectGranularity || this.defaultParams.selectGranularity;
			this.summaryDate = new dt(args.summaryDate);
			this.chart = new dojox.charting.Chart2D("chart" + frag.id,{fill: "transparent"});
			this.frag = frag;
			this.data = dojox.json.ref.fromJson(args.data);
			this.byHourTotal = [];
			this._initData();
		},
		//initial and enrich dataset by adding series and total attributes.
		_initData: function(){
			var self = this;
			dojo.forEach(this.data,function(item){
				item.subTotal = self._getSubTotal(item);
				item.series = self._getSeries(item);
			});
			this._initByHourTotal();
		},
		
		_getSubTotal: function(data){
			var ret = 0;
			dojo.forEach(data.count,function(item){
				ret += parseInt(item.number);
			});
			return ret;
		},
		
		_initByHourTotal: function() {
			var self = this;
			dojo.forEach(this.data,function(item){
				if (item.status == STATUS_SUSPENDED) return;
				for (var i=0; i<item.series.length; i++){
					if (self.byHourTotal[i] == undefined) self.byHourTotal[i] = 0;
					self.byHourTotal[i] +=parseInt(item.series[i]);
				}
			});
		},
		
		getTotalByHour: function(hour) {
			return this.byHourTotal[hour];
		},
		
		getMaxTotalByHour: function() {
			var max=0;
			for(var i=0; i<this.byHourTotal.length; i++) {
				if (this.byHourTotal[i] > max) max = this.byHourTotal[i];
			};
			return max;
		},
		
		_getSeries: function(data){
			if (data.status == STATUS_SUSPENDED) return;

			//initiate the data array with 0
			var ret = [];
			for (var i = 0; i < 24; i++) {
				ret[i] = 0;
			}
			//overwrite with the real number
			dojo.forEach(data.count,function(item){
				ret[parseInt(item.time)] = parseInt(item.number);
			});
			return ret;
		},
		
		getTotal: function(/*boolean*/ includeSuspended){
			var total = 0;
			dojo.forEach(this.data,function(item){
				if (!includeSuspended && item.status == STATUS_SUSPENDED) return;
				total += parseInt(item.subTotal);
			});
			return total;
		},
		
		/* Drill in and out against the charting
		 * @param: granularity, enum hour/day/week/month
		 */
		drill : function( /*String*/currentDate, /*int*/ value){
			var list = [];
			var currentDateTime = currentDate + "T" + ((value.length == 1) ? "0" : "") + value + ":00:00";
			list[0] = createTransient("upcoming_filter_granularity", "hour");
			list[1] = createTransient("upcoming_filter_date", currentDateTime);
			this.frag.transientUpdateList(list);
		},
		
		/* Jump to next or previous day or a certain date.
		 * @param: value int (offset from current) or string (date only no time)
		 */
		jumpTo : function(/*int/string*/value){
			var currentDateTime = "";
			
			if (typeof value == "number") {
				var newDate = dojo.date.add(this.summaryDate.getObject(), "day", value);
				currentDateTime = (new dt(newDate)).getDateString();
			}
			else {
				currentDateTime = (new dt(value)).getDateString();
			}
			
			this.frag.retrieve('summary_date=' + encodeURIComponent(currentDateTime));
		},
		
		_isToday: function (){
			return this.summaryDate.getDateString() == (new dt()).getDateString();
		},
		
		_isTheSameDay : function(){
			return this.selectDateTime.getDateString() == this.summaryDate.getDateString();
		},
		
		_getSelectedHour : function(){
			if (this.selectGranularity == "hour") {
				return this.selectDateTime.getObject().getHours();
			}
			else {
				return -1;
			}
		},
		
		_isTheSameHour : function(hour){
			if (this._isTheSameDay()) {
				return this._getSelectedHour() == hour;
			}
			return false;
		},
		
		getLabels : function(){
			var texts = [];
			for (var i = 0; i <= THE_LAST_HOUR; i++) {
				var o = {};
				o.text = i + '';
				o.value = i + 1;
				texts.push(o);
			}
			return texts;
		},
		
		addSeries : function(){
			for (var i=0; i<this.data.length; i++){
				if (this.data[i].status == STATUS_SUSPENDED) continue;
				this.chart.addSeries("<span class='cogadminLegendText'>" + ADM.CHT["IDS_ADMJS_CHT_" + this.data[i].status.toUpperCase()] + ":</span><span class='cogadminLegendValue'>" + this.data[i].subTotal + "</span>", this.data[i].series, {
					stroke: {color: "black",width: 1}
				});
			}
		},
		
		renderChart : function (){
			var self = this;
			var maxLabel = this.getMaxLabel(MINIMUM_LABEL,this.getMaxTotalByHour());
			
			this.chart.addPlot("default", {
				type: "StackedColumns",
				gap: 2,
				hAxis: "y",
				vAxis: "x"
			});
			this.chart.addPlot("grid", {
				type: "Grid",
				vMinorLines: false,
				vMajorLines: false,
				hMinorLines: false,
				hMajorLines: true
			});
			this.chart.addAxis("x", {
				vertical: true,
				fixLower: "major",
				fixUpper: "minor",
				majorTicks: true,
				minorTicks: false,
				microTicks: false,
				majorTickStep: maxLabel/NUMBER_OF_TICKS,
				min: 0,
				max: maxLabel
			}).addAxis("y", {
				fixLower: "none",
				fixUpper: "none",
				minorTicks: true,
				microTicks: false,
				htmlLabels: true,
				labels: this.getLabels()
			}).setTheme(dojox.charting.themes.BlueDusk);
			
			this.addSeries();
			var isRetrieving = false;
			if (!isRetrieving){
				var aroundRect;
				this.chart.connectToPlot("default", null, function(e){
					if (e.type == "onclick") {
						if (!self._isTheSameHour(e.index)) {
							isRetrieving = true;
							dojo.byId(self.frag.div).style.cursor = "wait";
							self.drill(self.summaryDate.getDateString(), e.index);
							return true;
						}
						return false;
					}
					
					if (e.type == "onmouseover"){
						if (!isRetrieving && !self._isTheSameHour(e.index)) {
							e.event.target.style.cursor = "pointer";
						}
						
						//This is a workaround dojo chart tooltip to make the selected column have a unified tooltip and highlighted effect.
						aroundRect = dojo.clone(e.shape.getShape());
						var lt = dojo.coords(this.chart.node, true);
						aroundRect.x += lt.x;
						aroundRect.y += lt.y - (((aroundRect.height/e.y)*self.byHourTotal[e.index]) * (1 - (e.y/self.byHourTotal[e.index])));
						aroundRect.x = Math.round(aroundRect.x);
						aroundRect.y = Math.round(aroundRect.y);
						aroundRect.width = Math.ceil(aroundRect.width);
						aroundRect.height = Math.ceil(aroundRect.height);
						dijit.showTooltip(self.byHourTotal[e.index],aroundRect,"above");
						return true;
					}
					
					if(e.type === "onplotreset" || e.type === "onmouseout"){
						dijit.hideTooltip(aroundRect);
						return true;
					}
				});
			}
			//render the chart
			this.chart.resize(DEFAULT_WIDTH, DEFAULT_HEIGHT);

			//This is a workaround dojo chart highlight to make it unified for stacked columns.
			if (this._isTheSameDay() && this._getSelectedHour() > -1){
				var currentHour = new dt().getObject().getHours();
				for (var i=0; i<this.chart.series.length; i++){
					//if the data for current series equals to 0, just ignore the current loop
					if (this.chart.series[i].data[this._getSelectedHour()] == 0) continue;
					
					var emptyShape = 0;
					for (var j=0; j<=this._getSelectedHour(); j++){
						var isEmpty = true;
						for (var k=0; k<=i; k++){
							if (this.chart.series[k].data[j] != 0){
								isEmpty = false;
								break;
							} 
						}
						if (isEmpty) emptyShape++;
					}
					var shape = this.chart.series[i].group.children[this._getSelectedHour() - emptyShape];
					this.highlightedColumn(shape);
				}
			}
			
			//adjust the fragment content height to meet the dojo chart
			dojo.byId(this.frag.id + "content").style.height = DEFAULT_HEIGHT + TITLE_HEIGHT;
			//generate the jump to date picker button
			dojo.connect(dojo.byId("next" + this.frag.id), "click", this, function(){
				this.jumpTo(1);
			});
			if (!this._isToday()){
				dojo.connect(dojo.byId("previous" + this.frag.id), "click", this, function(){
					this.jumpTo(-1);
				});
			}
			//render the legend
			var legendWidgetId = "legend" + this.frag.id;
			if (dijit.byId(legendWidgetId)) 
				dijit.byId(legendWidgetId).destroy();
			var legend = new dojox.charting.widget.Legend({
				chart: this.chart,
				horizontal: false,
				templateString: "<table role='presentation' dojoAttachPoint='legendNode' class='dojoxLegendNode'>" + 
				"<thead>" +
				"<tr><td class='dojoxLegendText'>" +
					"<span class='cogadminLegendText' style='padding-left:28px;'>"+ADM.CHT.IDS_ADMJS_CHT_SUSPENDED+":</span>" + 
					"<span class='cogadminLegendValue'>" + this.data[COLUMN_SUSPENDED].subTotal + "</span>" +
					"</td></tr>" +
					"<tr><td class='dojoxLegendText'>" +
						"<img src='" + WEB_CONTENT + "/ps/cogadmin/images/spacer.gif' alt='' width='120' height='1' style='background-color: rgb(156, 156, 156);'/>" +
					"</td></tr>" +
				"</thead>" +
				"<tbody dojoAttachPoint='legendBody'></tbody>" +
				"<tfoot>" +
					"<tr>" +
					"<td style='font-weight:bold' class='dojoxLegendText'><span class='cogadminLegendText' style='padding-left:28px;'>"+ADM.CHT.IDS_ADMJS_CHT_TOTAL+":</span>" + 
					"<span class='cogadminLegendValue'>" + this.getTotal(false) + "</span>" +
					"</td></tr>" +
				"</tfoot></table>"
			}, legendWidgetId);
			//show up the title div
			dojo.byId("title" + this.frag.id).style.display = "";
		}
	})
})();