graph: fix counting of "heads" for graph, condense graph into more narrow lines instead of trying to increase its width (past certain width produces really bad html layout)

rhodecode/public/css/style.css

@@ -2528,7 +2528,7 b' h3.files_location {'
 
 #graph_nodes {
 	float: left;
-	margin-right: -6px;
+	margin-right: 0px;
 	margin-top: 0px;
 }
 

rhodecode/public/js/graph.js

@@ -48,11 +48,16 b' function BranchRenderer() {'
 		this.ctx.fillStyle = s;
 	}
 
-	this.render = function(data,canvasWidth) {
+	this.render = function(data,canvasWidth,lineCount) {
 		var idx = 1;
 		var rela = document.getElementById('graph');
 
-		var box_size = 18;
+		if (lineCount == 0)
+			lineCount = 1;
+
+		var edge_pad = this.dot_radius + 2;
+		var box_size = Math.min(18, Math.floor((canvasWidth - edge_pad*2)/(lineCount)));
+		var base_x = canvasWidth - edge_pad;
 
 		for (var i in data) {
 
@@ -72,14 +77,14 b' function BranchRenderer() {'
 			for (var j in in_l) {
 				
 				line = in_l[j];
-				start = line[0] + 1;
-				end = line[1] + 1;
+				start = line[0];
+				end = line[1];
 				color = line[2];
 
 				this.setColor(color, 0.0, 0.65);
 
 				
-				x = canvasWidth - box_size * start;
+				x = base_x - box_size * start;
 				
 				this.ctx.lineWidth=this.line_width;
 				this.ctx.beginPath();
@@ -91,19 +96,19 b' function BranchRenderer() {'
 				}
 				else
 				{
-					var x2 = canvasWidth - box_size * end;
+					var x2 = base_x - box_size * end;
 					var ymid = (rowY+nextY) / 2;
 					this.ctx.bezierCurveTo (x,ymid,x2,ymid,x2,nextY);
 				}
 				this.ctx.stroke();
 			}
 			
-			column = node[0] + 1;
+			column = node[0];
 			color = node[1];
 			
 			radius = this.dot_radius;
 
-			x = canvasWidth - box_size * column;
+			x = base_x - box_size * column;
 		
 			this.ctx.beginPath();
 			this.setColor(color, 0.25, 0.75);

rhodecode/templates/changelog/changelog.html

@@ -193,11 +193,11 b''
                     	YUD.setStyle(e.currentTarget,'display','none');
                     	YUD.setStyle(elem,'height','auto');
 
-                    	//redraw the graph, max_w and jsdata are global vars
-                        set_canvas(max_w);
+                    	//redraw the graph, line_count and jsdata are global vars
+                        set_canvas(100);
 
                         var r = new BranchRenderer();
-                        r.render(jsdata,max_w);
+                        r.render(jsdata,100,line_count);
 
                     })
 
@@ -223,31 +223,32 b''
 
                     });
 
-					function set_canvas(heads) {
+					function set_canvas(width) {
 						var c = document.getElementById('graph_nodes');
 						var t = document.getElementById('graph_content');
 						canvas = document.getElementById('graph_canvas');
 						var div_h = t.clientHeight;
 						c.style.height=div_h+'px';
 						canvas.setAttribute('height',div_h);
-						c.style.height=max_w+'px';
-						canvas.setAttribute('width',max_w);
+						c.style.height=width+'px';
+						canvas.setAttribute('width',width);
 					};
 					var heads = 1;
-					var max_heads = 0;
+					var line_count = 0;
 					var jsdata = ${c.jsdata|n};
 
-					for( var i=0;i<jsdata.length;i++){
-					    var m = Math.max.apply(Math, jsdata[i][1]);
-					    if (m>max_heads){
-					        max_heads = m;
-					    }
+					for (var i=0;i<jsdata.length;i++) {
+                        var in_l = jsdata[i][2];
+                        for (var j in in_l) {
+                            var m = in_l[j][1];
+                            if (m > line_count)
+                                line_count = m;
+                        }
 					}
-					var max_w = Math.max(100,max_heads*25);
-					set_canvas(max_w);
+					set_canvas(100);
 
 					var r = new BranchRenderer();
-					r.render(jsdata,max_w);
+					r.render(jsdata,100,line_count);
 
 				});
 			</script>