WIP: add new percentFormat() function

it returns 3 values, top percentage, halfway percentage, 0%.

Author: rueckstiess

scout-ui/src/minicharts/d3fns/few.js

@@ -26,7 +26,7 @@ module.exports = function(data, g, width, height, options) {
       }
       return d.tooltip || tooltipHtml({
           label: d.label,
-          value: shared.percentFormat(d.value / sumValues)
+          value: shared.percentFormat(d.value / sumValues)[2]
         });
     })
     .direction('n')

scout-ui/src/minicharts/d3fns/many.js

@@ -35,7 +35,7 @@ module.exports = function(data, g, width, height, options) {
       }
       return d.tooltip || tooltipHtml({
           label: d.label,
-          value: shared.percentFormat(d.value / sumValues)
+          value: shared.percentFormat(d.value / sumValues)[2]
         });
     })
     .direction('n')
@@ -47,9 +47,17 @@ module.exports = function(data, g, width, height, options) {
 
   if (options.scale) {
     var maxVal = d3.max(y.domain());
+    var scaleLabels = percentFormat(maxVal);
 
     // @todo use a scale and wrap both text and line in g element
     var legend = g.append('g')
+      .attr('class', 'legend')
+      .data(scaleLabes)
+      .enter()
+      .append('text');
+
+
+    g.append('g')
       .attr('class', 'legend');
 
     legend.append('text')

scout-ui/src/minicharts/d3fns/shared.js

@@ -9,6 +9,17 @@ module.exports = {
     left: 40
   },
 
-  percentFormat: d3.format('%.1f')
+  percentFormat: function(v) {
+    // round max value to 1 digit precision
+    var prec1Format = d3.format('.1r');
+    var intFormat = d3.format('.0f');
 
+    // multiply by 100 for percentages
+    v *= 100;
+
+    var top = v > 1 ? intFormat(v) : prec1Format(v);
+    var mid = parseFloat(top) / 2;
+
+    return ['0%', mid + '%', top + '%'];
+  }
 };

scout-ui/test/minicharts.test.js

@@ -0,0 +1,19 @@
+var shared = require('../src/minicharts/d3fns/shared');
+var assert = require('assert');
+
+describe('shared components', function() {
+  it('should return percentages for bottom, middle and top scale correctly', function() {
+    assert.deepEqual(shared.percentFormat(2.1), ['0%', '105%', '210%']);
+    assert.deepEqual(shared.percentFormat(2.0), ['0%', '100%', '200%']);
+    assert.deepEqual(shared.percentFormat(1.0), ['0%', '50%', '100%']);
+    assert.deepEqual(shared.percentFormat(0.995), ['0%', '50%', '100%']);
+    assert.deepEqual(shared.percentFormat(0.99), ['0%', '49.5%', '99%']);
+    assert.deepEqual(shared.percentFormat(0.9900001), ['0%', '49.5%', '99%']);
+    assert.deepEqual(shared.percentFormat(0.49999), ['0%', '25%', '50%']);
+    assert.deepEqual(shared.percentFormat(0.011), ['0%', '0.5%', '1%']);
+    assert.deepEqual(shared.percentFormat(0.009), ['0%', '0.45%', '0.9%']);
+    assert.deepEqual(shared.percentFormat(0.004), ['0%', '0.2%', '0.4%']);
+    assert.deepEqual(shared.percentFormat(0.0), ['0%', '0%', '0%']);
+    assert.deepEqual(shared.percentFormat(-0.015), ['0%', '-1%', '-2%']);
+  });
+});