Mercurial > kallithea
changeset 2924:fcbcef60be02 beta
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)
author | Aras Pranckevicius <aras@unity3d.com> |
---|---|
date | Mon, 15 Oct 2012 16:33:57 +0300 |
parents | 1ab6b1cb849a |
children | 381eea235ae7 |
files | rhodecode/public/css/style.css rhodecode/public/js/graph.js rhodecode/templates/changelog/changelog.html |
diffstat | 3 files changed, 30 insertions(+), 24 deletions(-) [+] |
line wrap: on
line diff
--- a/rhodecode/public/css/style.css Mon Oct 15 16:01:29 2012 +0300 +++ b/rhodecode/public/css/style.css Mon Oct 15 16:33:57 2012 +0300 @@ -2528,7 +2528,7 @@ #graph_nodes { float: left; - margin-right: -6px; + margin-right: 0px; margin-top: 0px; }
--- a/rhodecode/public/js/graph.js Mon Oct 15 16:01:29 2012 +0300 +++ b/rhodecode/public/js/graph.js Mon Oct 15 16:33:57 2012 +0300 @@ -48,11 +48,16 @@ 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 @@ 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 @@ } 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);
--- a/rhodecode/templates/changelog/changelog.html Mon Oct 15 16:01:29 2012 +0300 +++ b/rhodecode/templates/changelog/changelog.html Mon Oct 15 16:33:57 2012 +0300 @@ -193,11 +193,11 @@ 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 @@ }); - 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>