diff --git a/code/region_scoreboard.js b/code/region_scoreboard.js index f654a490..117112e0 100755 --- a/code/region_scoreboard.js +++ b/code/region_scoreboard.js @@ -21,7 +21,7 @@ function regionScoreboardFailure() { function regionScoreboardScoreHistoryChart(result) { - // svg area 400x120. graph area 350x100, offset to 40,10 + // svg area 400x130. graph area 350x100, offset to 40,10 var max = Math.max(result.gameScore[0],result.gameScore[1],10); //NOTE: ensure a min of 10 for the graph var items = []; //we'll copy the items to an array indexed by checkpoint number - easier to access! @@ -30,11 +30,14 @@ function regionScoreboardScoreHistoryChart(result) { items[result.scoreHistory[i][0]] = [result.scoreHistory[i][1], result.scoreHistory[i][2]]; } + // scale up maximum a little, so graph isn't squashed right against upper edge + max *= 1.09; + var scale = function(y) { return 110-y/max*100; }; var teamPaths = [[],[]]; - var circleMarkers = []; + var otherSvg = []; for (var i=0; i'); + otherSvg.push(''); } } } - var paths = ''; + var paths = ''; + + // graph tickmarks - horizontal + var ticks = []; + for (var i=5; i<=35; i+=5) { + var x=i*10+40; + ticks.push('M'+x+',10 L'+x+',110'); + otherSvg.push(''+i+''); + } + + // vertical + // first we calculate the power of 10 that is smaller than the max limit + var vtickStep = Math.pow(10,Math.floor(Math.log10(max))); + // this could be between 1 and 10 grid lines - so we adjust to give nicer spacings + if (vtickStep < (max/5)) { + vtickStep *= 2; + } else if (vtickStep > (max/2)) { + vtickStep /= 2; + } + for (var i=vtickStep; i<=max; i+=vtickStep) { + var y = scale(i); + + ticks.push('M40,'+y+' L390,'+y); + + var istr = i>=1000000000 ? i/1000000000+'B' : i>=1000000 ? i/1000000+'M' : i>=1000 ? i/1000+'k' : i; + otherSvg.push(''+istr+''); + } + + paths += ';' + for (var t=0; t<2; t++) { var col = t==0 ? COLORS[TEAM_ENL] : COLORS[TEAM_RES]; if (teamPaths[t].length > 0) { @@ -65,12 +97,10 @@ function regionScoreboardScoreHistoryChart(result) { paths += ''; } - - var svg = '
' - +'' - +'' + var svg = '
' + +'' +paths - +circleMarkers.join('') + +otherSvg.join('') +'
'; return svg; @@ -112,7 +142,7 @@ function regionScoreboardSuccess(data) { +regionScoreboardScoreHistoryChart(data.result) +'Top agents' +agentTable, - width: 600 + width: 450 }); }