[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