All Downloads are FREE. Search and download functionalities are using the official Maven repository.

scripts.jQuery.treemap.js Maven / Gradle / Ivy

There is a newer version: 1.9.1
Show newest version
/*
*	treemap plugin for jQuery (version 1.0.3 13/8/2008)
*	Copyright (c) 2007-2008 Renato Formato 
*	Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
(function($) {
$.fn.treemap = function(w,h,options) {
	options = $.extend({labelCell:0,dataCell:1,colorCell:2,headHeight:20,borderWidth:1,borderColor:"#000",getColor:treemap.getColor,sort:true,nested:false,legend:false},options);
	var or_target = options.target;
	return this.pushStack($.map(this,function(el){
		var data;
		if(!options.getData) {
			if(!$.nodeName(el,"table")) return; 
			data = treemap.getDataFromTable(el,options);
		} else {
			data = options.getData(el);
		}
		
		//copy data because during the processing elements are deleted
		data = data.concat();
		
		if($.fn.treemap.caller!=treemap.layoutRow) {
			options.minColorValue = Number.POSITIVE_INFINITY;
			options.maxColorValue = Number.NEGATIVE_INFINITY;
			if(!options.colorDiscreteVal) options.colorDiscreteVal = {num:0};
			treemap.normalizeValues(data,options);
			options.colorDiscrete = options.minColorValue == Number.POSITIVE_INFINITY;
			options.rangeColorValue = options.maxColorValue-options.minColorValue;
		}
		
		if (options.sort)
			data.sort(function(a,b){
				var val1 = b[1], val2 = a[1];
				val1 = val1.constructor==Array?treemap.getValue(val1):val1;
				val2 = val2.constructor==Array?treemap.getValue(val2):val2;
				return val1-val2;
			});
		
		options.target = or_target || el;
		options.numSquare = 0;
		   
		treemap.render(data,h,w,options);
		
		if($.fn.treemap.caller!=treemap.layoutRow && options.legend) {
			jQuery(options.target).append(treemap.legend(h,options));
		}
		
		if(options.target==el && $.nodeName(el,"table")) {
			var newObj = jQuery(el).find(">").insertBefore(el);
			$(el).remove();
			el = newObj.get();
		}
		return el; 
	}));
}

$.fn.treemapClone = function() {
	return this.pushStack( jQuery.map( this, function(a){
 		return a.outerHTML ? jQuery(a.outerHTML)[0] : a.cloneNode(true);
 	})); 
}

$.fn.treemapAppend = function(arguments) {
	var el = this[0];
	for(var i=0,l=arguments.length;ioptions.maxColorValue) options.maxColorValue=color;
				if(!options.colorDiscreteVal[color]) options.colorDiscreteVal[color] = options.colorDiscreteVal.num++;
			} 	
	},
	
	getDataFromTable : function(table,options) {
		var data = [];
		if(options.labelCell==undefined) options.labelCell = options.dataCell;
		$("tbody tr",table).each(function(){
			var cells = $(">",this);
			var row = [cells.eq(options.labelCell).html(),
								 cells.eq(options.dataCell).html(),
								 cells.eq(options.colorCell).html()];
			data.push(row);
		});
		return data;
	}, 
	
	emptyView: $("
").addClass("treemapView"), render : function(data,h,w,options) { options.height = h; options.width = w; var s = treemap.calculateArea(data); options.viewAreaCoeff = w*h/s; options.view = treemap.emptyView.clone().css({'width':w,'height':h}); options.content = []; treemap.squarify(data,[],h,true,options); options.view.treemapAppend(options.content); $(options.target).empty().treemapAppend(options.view); }, squarify : function(data,row,w,orientation,options) { if(w<=0) return; //exit if there's no space left on the treemap var widerRow = row,s,s2,current; do { row = widerRow; s = treemap.calculateArea(row); if(data.length==0) return treemap.layoutRow(row,w,orientation,s,options,true); current = data.shift(); widerRow = row.concat(); widerRow.push(current); s2 = s+(current[1].constructor==Array?treemap.getValue(current[1]):current[1]); } while (treemap.worst(row,w,s,options.viewAreaCoeff)>=treemap.worst(widerRow,w,s2,options.viewAreaCoeff)) var rowDim = treemap.layoutRow(row,w,orientation,s,options); data.unshift(current); if(!rowDim) rowDim = treemap.layoutRow([['',s]],w,orientation,s,options,true); var width; if(orientation) { options.width -= rowDim; width = options.width; } else { options.height -= rowDim; width = options.height; } treemap.squarify(data,[],width,!orientation,options); }, worst : function(row,w,s,coeff) { var rl = row.length; if(!rl) return Number.POSITIVE_INFINITY; var w2 = w*w, s2 = s*s*coeff; var r1 = (w2*(row[0][1].constructor==Array?treemap.getValue(row[0][1]):row[0][1]))/s2; var r2 = s2/(w2*(row[rl-1][1].constructor==Array?treemap.getValue(row[rl-1][1]):row[rl-1][1])); return Math.max( r1, r2 ); }, emptyCell: $("
").addClass("treemapCell").css({'float':'left','overflow':'hidden'}), emptySquare: $("
").addClass("treemapSquare").css('float','left'), layoutRow : function(row,w,orientation,s,options,last) { var square = treemap.emptySquare.treemapClone(); var rowDim, h = s/w; if(orientation) { rowDim = last?options.width:Math.min(Math.round(h*options.viewAreaCoeff),options.width); square.css({'width':rowDim,'height':w}).addClass("treemapV"); } else { rowDim = last?options.height:Math.min(Math.round(h*options.viewAreaCoeff),options.height); square.css({'height':rowDim,'width':w}).addClass("treemapH"); } var rl = row.length-1,sum = 0, bw = options.borderWidth, bc = options.borderColor, bw2 = bw*2, cells = []; for(var i=0;i<=rl;i++) { var n = row[i],hier = n[1].constructor == Array, head = [], val = hier?treemap.getValue(n[1]):n[1]; var cell = treemap.emptyCell.treemapClone(); if(!hier) cell.append(n[0]); //[0].title = cell.text()+' ('+val+')' ; var lastCell = i==rl; var fixedDim = rowDim, varDim = lastCell ? w-sum : Math.round(val/h); if(varDim<=0) break; sum += varDim; var cellStyles = {}; if(bw && rowDim>bw2 && varDim>bw2) { if(jQuery.boxModel) { fixedDim -= bw*(2-(options.numSquare>=2 || !options.numSquare && options.nested?1:0)-(last && options.nested?1:0)); varDim -= bw*(2-(!lastCell||options.nested?1:0)-(options.numSquare>=1 && !i?1:0)); } cellStyles.border = bw+'px solid ' + bc; if(!lastCell || options.nested) cellStyles['border'+(orientation?'Bottom':'Right')] = 'none'; if(options.numSquare>=2 || !options.numSquare && options.nested) cellStyles['border'+(orientation?'Left':'Top')] = 'none'; if(options.numSquare>=1 && !i) cellStyles['border'+(orientation?'Top':'Left')] = 'none'; if(last && options.nested) cellStyles['border'+(orientation?'Right':'Bottom')] = 'none'; } var height = orientation?varDim:fixedDim, width = orientation?fixedDim:varDim; cellStyles.height = height+'px'; cellStyles.width = width+'px'; if(hier) { if(options.headHeight) { head = $("
").css({"width":width,"height":options.headHeight,"overflow":"hidden"}).html(n[0]); //.attr('title',n[0]+' ('+val+')') if(orientation) height = varDim -= options.headHeight; else height = fixedDim -= options.headHeight; } if(height>0) { var new_opt = {}; for(var prop in options) new_opt[prop] = options[prop]; new_opt["target"] = null; new_opt = jQuery.extend(new_opt,{getData:function(){return n[1].concat()},nested:true}); cell.treemap(width,height,new_opt); } cell.prepend(head); } else { if(n[2]) cellStyles.backgroundColor = options.getColor(n[2],options); } if (n[3]) { cell.attr({"id": n[3]}); } //cell.css(cellStyles); var cellstyle = cell[0].style; for(var prop in cellStyles) cellstyle[prop] = cellStyles[prop]; cells.push(cell[0]); } options.content.push(square.treemapAppend(cells)[0]); options.numSquare++; return rowDim; }, calculateArea : function(row) { if(row.total) return row.total; var s = 0,rl = row.length; for(var i=0;i").css({position:'absolute',left:25,width:200}), legend : function(h,options) { var l = $("
").css({position:'relative','float':'left',height:h-2}); var bar = $("
").css({width:20,height:h-2,border:"1px solid"}); options.view.css({'float':'left','marginRight':20}); if(options.colorDiscrete) { $.each(options.colorDiscreteVal,function(i,n){ if(i!='num') { i = options.descriptionCallback ? options.descriptionCallback(i):i; var height = Math.round(n*h/options.colorDiscreteVal.num); var bar = $("
").css({height:20,width:20,backgroundColor:treemap.getColor(i,options),position:'absolute',bottom:height}); var desc = treemap.emptyLegendDescr.clone().text(i).css('bottom',height); l.append(bar).append(desc); } }); } else { for(var i=h-1;i>1;i--) { var color = $("
").height(1).css("backgroundColor",treemap.getColorCode(i/h)); bar.append(color); }; l.append(bar); for(var i=0;i<10;i++) { var val = i*options.rangeColorValue/10+options.minColorValue; val = options.descriptionCallback ? options.descriptionCallback(val):val; var desc = treemap.emptyLegendDescr.clone().text(val.toString()).css('bottom',Math.round(i*h/10)); l.append(desc); }; } return l; } } })(jQuery)




© 2015 - 2024 Weber Informatics LLC | Privacy Policy