[PATCH 1 of 1] Add a colored legend to the graph page showing how each color in the graph corrolates to a branch

Lindsey Smith lindsey at betoptions.com
Mon Dec 1 01:31:01 UTC 2008


# HG changeset patch
# User Lindsey Smith <lindsey at betoptions.com>
# Date 1228094835 -39600
# Node ID 1f08be66d14d377f4c4c9324f661cb0e148114fc
# Parent  4fd92687f331a38ddb38d3f71753ab92cd9cb174
Add a colored legend to the graph page showing how each color in the graph corrolates to a branch.

diff --git a/templates/paper/graph.tmpl b/templates/paper/graph.tmpl
--- a/templates/paper/graph.tmpl
+++ b/templates/paper/graph.tmpl
@@ -23,6 +23,8 @@
 <li><a href="{url}rev/{node|short}{sessionvars%urlparameter}">changeset</a></li>
 <li><a href="{url}file/{node|short}{path|urlescape}{sessionvars%urlparameter}">browse</a></li>
 </ul>
+<ul id="branch_colors">
+</ul>
 </div>
 
 <div class="main">
diff --git a/templates/static/graph.js b/templates/static/graph.js
--- a/templates/static/graph.js
+++ b/templates/static/graph.js
@@ -50,10 +50,7 @@
 		}
 	}
 
-	this.setColor = function(color, bg, fg) {
-		
-		// Set the colour.
-		//
+	this.getColor = function(color, bg, fg) {
 		// Picks a distinct colour based on an internal wheel; the bg
 		// parameter provides the value that should be assigned to the 'zero'
 		// colours and the fg parameter provides the multiplier that should be
@@ -66,7 +63,15 @@
 		red = Math.round(red * 255);
 		green = Math.round(green * 255);
 		blue = Math.round(blue * 255);
-		var s = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
+		return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
+	}
+
+	this.setColor = function(color, bg, fg) {
+
+		// Set the colour.
+		
+		var s = this.getColor(color, bg, fg);
+
 		this.ctx.strokeStyle = s;
 		this.ctx.fillStyle = s;
 		return s;
@@ -78,6 +83,8 @@
 		var backgrounds = '';
 		var nodedata = '';
 		
+		var branch_colors = {};
+
 		for (var i in data) {
 			
 			var parity = i % 2;
@@ -127,11 +134,35 @@
 			
 			if (fold) this.columns -= 1;
 			
+			// Multiple "defaults" can exist, but still be separate branches,  
+			// so index the array based on name+color
+			var branch_color = this.getColor(color, 0.25, 0.75);
+			branch_colors[data[i][6][0].toString() + branch_color.toString()] = {
+				'color': branch_color,
+				'name': data[i][6][0]
+			}
+
 		}
 		
 		document.getElementById('nodebgs').innerHTML += backgrounds;
 		document.getElementById('graphnodes').innerHTML += nodedata;
 		
+		this.drawBranchColors(branch_colors);
+
+	}
+
+	this.drawBranchColors = function(colors) {
+
+		var html = '';
+
+		for (var branch_name in colors) {
+			html = html + '<li class="branch_color" style="color:' + colors[branch_name]['color'] + ';border-bottom: 2px solid ' + colors[branch_name]['color'] + '">';
+			// Trim the name to 10 characters so as to not overlap with
+			// the log display
+			html = html + colors[branch_name]['name'].substr(0, 10) + '</li>';
+		}
+
+		document.getElementById('branch_colors').innerHTML = html;
 	}
 
 }
diff --git a/templates/static/style-paper.css b/templates/static/style-paper.css
--- a/templates/static/style-paper.css
+++ b/templates/static/style-paper.css
@@ -245,3 +245,11 @@
 	position: relative;
 	top: -3px;
 }
+
+#branch_colors {
+	position: fixed;
+}
+
+li.branch_color {
+	font-size: 85%;
+}


More information about the Mercurial-devel mailing list