Implement logarithmic scale for region scores

@jonatkins You mentioned some devices not supporting Math.log10. This ships a custom implementation. Could you verify that this works?

code/region_scoreboard.js

@@ -18,9 +18,12 @@ function regionScoreboardFailure(dlg) {
 }
 
 
-function regionScoreboardScoreHistoryChart(result) {
+function regionScoreboardScoreHistoryChart(result, logscale) {
   // svg area 400x130. graph area 350x100, offset to 40,10
 
+  if(!Math.log10)
+    Math.log10 = function(x) { return Math.log(x) / Math.LN10; };
+
   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!
   for (var i=0; i<result.scoreHistory.length; i++) {
@@ -31,8 +34,10 @@ function regionScoreboardScoreHistoryChart(result) {
   // 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; };
-
+  // 0 cannot be displayed on a log scale, so we set the minimum to 0.001 and divide by lg(0.001)=-3
+  var scale = logscale
+    ? function(y) { return  10 - Math.log10(Math.max(0.001,y/max)) / 3 * 100; }
+    : function(y) { return 110-y/max*100; };
 
   var teamPaths = [[],[]];
   var otherSvg = [];
@@ -70,7 +75,14 @@ function regionScoreboardScoreHistoryChart(result) {
 
   // vertical
   // first we calculate the power of 10 that is smaller than the max limit
-  var vtickStep = Math.pow(10,Math.floor(Math.log(max)/Math.log(10)));
+  var vtickStep = Math.pow(10,Math.floor(Math.log10(max)));
+  var vticks = [];
+  if(logscale) {
+    for(var i=0;i<4;i++) {
+      vticks.push(vtickStep);
+      vtickStep /= 10;
+    }
+  } else {
     // this could be between 1 and 10 grid lines - so we adjust to give nicer spacings
     if (vtickStep < (max/5)) {
       vtickStep *= 2;
@@ -78,13 +90,17 @@ function regionScoreboardScoreHistoryChart(result) {
       vtickStep /= 2;
     }
     for (var i=vtickStep; i<=max; i+=vtickStep) {
+      vticks.push(i);
+    }
+  }
+  vticks.forEach(function(i) {
     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('<text x="35" y="'+y+'" font-size="12" font-family="Roboto, Helvetica, sans-serif" text-anchor="end" fill="#fff">'+istr+'</text>');
-  }
+  });
 
   paths += '<path d="'+ticks.join(' ')+'" stroke="#fff" opacity="0.3" />;'
 
@@ -102,6 +118,9 @@ function regionScoreboardScoreHistoryChart(result) {
            +'<rect x="0" y="0" width="400" height="130" stroke="#FFCE00" fill="#08304E" />'
            +paths
            +otherSvg.join('')
+           +'<foreignObject height="18" width="45" y="111" x="0" class="node"><label title="Logarithmic scale">'
+           +'<input type="checkbox" style="height:auto;padding:0;vertical-align:middle"'+(logscale?' checked':'')+'/>'
+           +'log</label></foreignObject>'
            +'</svg></div>';
 
   return svg;
@@ -119,13 +138,11 @@ function regionScoreboardScoreHistoryTable(result) {
   return table;
 }
 
-function regionScoreboardSuccess(data,dlg) {
+function regionScoreboardSuccess(data,dlg,logscale) {
   if (data.result === undefined) {
     return regionScoreboardFailure(dlg);
   }
 
-
-
   var agentTable = '<table><tr><th>#</th><th>Agent</th></tr>';
   for (var i=0; i<data.result.topAgents.length; i++) {
     var agent = data.result.topAgents[i];
@@ -154,7 +171,7 @@ function regionScoreboardSuccess(data,dlg) {
   dlg.html('<div class="cellscore">'
          +'<b>Region scores for '+data.result.regionName+'</b>'
          +'<div><table>'+teamRow[first]+teamRow[1-first]+'</table>'
-         +regionScoreboardScoreHistoryChart(data.result)+'</div>'
+         +regionScoreboardScoreHistoryChart(data.result, logscale)+'</div>'
          +'<b>Checkpoint overview</b>'
          +'<div>'+regionScoreboardScoreHistoryTable(data.result)+'</div>'
          +'<b>Top agents</b>'
@@ -163,12 +180,10 @@ function regionScoreboardSuccess(data,dlg) {
 
   $('g.checkpoint', dlg).each(function(i, elem) {
     elem = $(elem);
-    console.log(elem.children()[0]);
 
     var tooltip = 'CP:\t'+elem.attr('data-cp')
       + '\nEnl:\t' + digits(elem.attr('data-enl'))
       + '\nRes:\t' + digits(elem.attr('data-res'));
-    console.log(tooltip);
     elem.tooltip({
       content: convertTextToTableMagic(tooltip),
       position: {my: "center bottom", at: "center top-10"}
@@ -179,4 +194,9 @@ function regionScoreboardSuccess(data,dlg) {
     header: 'b',
     heightStyle: "fill",
   });
+
+  $('foreignObject input', dlg).change(function(){
+    var input = $(this);
+    regionScoreboardSuccess(data, dlg, input.prop('checked'));
+  });
 }