WIP: adding horizontal lines and labels

Author: rueckstiess

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

@@ -42,8 +42,6 @@ module.exports = function(data, g, width, height, options) {
   g.selectAll('*').remove();
   g.call(tip);
 
-  debug('data', _.pluck(data, 'y'));
-
   var bar = g.selectAll('.bar')
     .data(data)
     .enter().append('g')

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

@@ -9,8 +9,7 @@ module.exports = function(data, g, width, height, options) {
 
   options = _.defaults(options || {}, {
     bgbars: false,
-    bglines: false,
-    legend: true,
+    legend: false,
     labels: false // label options will be set further below
   });
 
@@ -44,14 +43,28 @@ module.exports = function(data, g, width, height, options) {
   g.call(tip);
 
   if (options.legend) {
+
+    var maxVal = d3.max(y.domain());
+    var format = d3.format('%.1f');
+    var legendValues = [format(maxVal), format(maxVal / 2)];
+    debug(legendValues);
+
     g.append('text')
-      .attr('x', 0)
-      .attr('y', -10)
-      .attr('text-anchor', 'start')
-      .text(sumY);
-  }
+      .attr('class', 'legend')
+      .attr('x', width)
+      .attr('y', 0)
+      .attr('dy', '0.35em')
+      .attr('text-anchor', 'end')
+      .text(d3.max(y.domain()) + '%');
+
+    g.append('text')
+      .attr('class', 'legend')
+      .attr('x', width)
+      .attr('y', height / 2)
+      .attr('dy', '0.35em')
+      .attr('text-anchor', 'end')
+      .text(d3.max(y.domain()) / 2 + '%');
 
-  if (options.bglines) {
     g.append('line')
       .attr('class', 'bg line')
       .attr('x1', 0)
@@ -74,6 +87,7 @@ module.exports = function(data, g, width, height, options) {
       .attr('y2', height);
   }
 
+
   var bar = g.selectAll('.bar')
     .data(data)
     .enter().append('g')

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

@@ -54,7 +54,7 @@ module.exports = function(opts) {
     .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
   many(data, g, width, height - 10, {
-    bglines: true,
+    legend: true,
     bgbars: false,
     labels: {
       text: function(d, i) {

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

@@ -43,6 +43,7 @@ module.exports = function(opts) {
 
   var chart = data.length <= 5 ? few : many;
   chart(data, g, width, height, {
+    legend: true,
     bglines: true
   });
 };