integrating feedback from wed/thu.

Author: rueckstiess

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

@@ -8,20 +8,22 @@ module.exports = function(opts) {
 
   // group by true/false
   var data = _(values)
-  .groupBy(function(d) {
-    // extract string representations of values
-    return d;
-  })
-  .defaults({false: [], true: []})
-  .map(function(v, k) {
-    return {
-      x: k,
-      y: v.length,
-      tooltip: k
-    };
-  })
-  .sortByOrder('x', [false]) // descending on y
-  .value();
+    .groupBy(function(d) {
+      // extract string representations of values
+      return d;
+    })
+    .defaults({
+      false: [],
+      true: []
+    })
+    .map(function(v, k) {
+      return {
+        x: k,
+        y: v.length
+      };
+    })
+    .sortByOrder('x', [false]) // descending on y
+    .value();
 
   var margin = {
     top: 10,

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

@@ -6,7 +6,9 @@ var many = require('./many');
 
 function generateDefaults(n) {
   var doc = {};
-  _.each(_.range(n), function (d) { doc[d] = 0; });
+  _.each(_.range(n), function(d) {
+    doc[d] = 0;
+  });
   return doc;
 }
 
@@ -17,7 +19,7 @@ module.exports = function(opts) {
   // distinguish ObjectIDs from real dates
   if (values.length && values[0]._bsontype !== undefined) {
     if (values[0]._bsontype === 'ObjectID') {
-      values = _.map(values, function (v) {
+      values = _.map(values, function(v) {
         return v.getTimestamp();
       });
     }
@@ -49,13 +51,13 @@ module.exports = function(opts) {
   var upperMargin = 15;
 
   // group by weekdays
-  var weekdayLabels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+  var weekdayLabels = moment.weekdays();
   var weekdays = _(values)
-    .groupBy(function (d) {
+    .groupBy(function(d) {
       return moment(d).weekday();
     })
     .defaults(generateDefaults(7))
-    .map(function (d, i) {
+    .map(function(d, i) {
       return {
         x: weekdayLabels[i],
         y: d.length,
@@ -67,11 +69,11 @@ module.exports = function(opts) {
   // group by hours
   var hourLabels = d3.range(24);
   var hours = _(values)
-    .groupBy(function (d) {
+    .groupBy(function(d) {
       return d.getHours();
     })
     .defaults(generateDefaults(23))
-    .map(function (d, i) {
+    .map(function(d, i) {
       return {
         x: hourLabels[i],
         y: d.length,
@@ -117,19 +119,25 @@ module.exports = function(opts) {
     });
 
   var weekdayContainer = svg.append('g');
-  many(weekdays, weekdayContainer, width / (upperRatio+1) - upperMargin, upperBarBottom, {
-    'text-anchor': 'middle',
-    'text': function (d) {
-      return d.x[0];
+  many(weekdays, weekdayContainer, width / (upperRatio + 1) - upperMargin, upperBarBottom, {
+    bgbars: true,
+    labels: {
+      'text-anchor': 'middle',
+      'text': function(d) {
+        return d.x[0];
+      }
     }
   });
 
   var hourContainer = svg.append('g')
-    .attr('transform', 'translate(' + (width/(upperRatio+1) + upperMargin) + ', 0)');
-
-  many(hours, hourContainer, width/(upperRatio+1)*upperRatio - upperMargin, upperBarBottom, {
-    'text': function (d, i) {
-      return (i % 6 === 0 || i === 23) ? d.x : '';
+    .attr('transform', 'translate(' + (width / (upperRatio + 1) + upperMargin) + ', 0)');
+
+  many(hours, hourContainer, width / (upperRatio + 1) * upperRatio - upperMargin, upperBarBottom, {
+    bgbars: true,
+    labels: {
+      'text': function(d, i) {
+        return (i % 6 === 0 || i === 23) ? d.x : '';
+      }
     }
   });
 

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

@@ -1,27 +1,39 @@
 var d3 = require('d3');
 var _ = require('lodash');
+var tooltipHtml = require('./tooltip.jade');
 var debug = require('debug')('scout-ui:minicharts:few');
 
 require('d3-tip')(d3);
 
-module.exports = function (data, g, width, height) {
+module.exports = function(data, g, width, height, options) {
+
+
   // @todo make barOffset equal to longest label
-  var barOffset = width / 4;
+  // var barOffset = width / 4;
+  var barHeight = 30;
 
   // data.x is still the label, and data.y the length of the bar
   var x = d3.scale.linear()
-    .domain([0, d3.max(_.pluck(data, 'y'))])
-    .range([0, width - barOffset]);
+    .domain([0, d3.sum(_.pluck(data, 'y'))])
+    .range([0, width]);
 
   var y = d3.scale.ordinal()
     .domain(_.pluck(data, 'x'))
     .rangeBands([0, height], 0.3, 0.0);
 
+  var sumY = d3.sum(_.pluck(data, 'y'));
+
   // set up tooltips
   var tip = d3.tip()
     .attr('class', 'd3-tip')
-    .html(function(d) {
-      return d.tooltip || d.x;
+    .html(function(d, i) {
+      if (typeof d.tooltip === 'function') {
+        return d.tooltip(d, i);
+      }
+      return d.tooltip || tooltipHtml({
+          label: d.x,
+          value: Math.round(d.y / sumY * 100)
+        });
     })
     .direction('n')
     .offset([-9, 0]);
@@ -30,45 +42,40 @@ module.exports = function (data, g, width, height) {
   g.selectAll('*').remove();
   g.call(tip);
 
+  debug('data', _.pluck(data, 'y'));
+
   var bar = g.selectAll('.bar')
     .data(data)
     .enter().append('g')
     .attr('class', 'bar')
-    .attr('transform', function(d) {
-      return 'translate(0, ' + y(d.x)  + ')';
+    .attr('transform', function(d, i) {
+      var xpos = _.sum(_(data)
+        .slice(0, i)
+        .pluck('y')
+        .value()
+      );
+      return 'translate(' + x(xpos) + ', ' + (height - barHeight) / 2 + ')';
     });
 
-  bar.append('rect')
-    .attr('class', 'bg')
-    .attr('x', barOffset)
-    .attr('width', width - barOffset)
-    .attr('height', y.rangeBand());
-
   bar.append('rect')
     .attr('class', 'fg')
     .attr('y', 0)
-    .attr('x', barOffset)
+    .attr('x', 0)
     .attr('width', function(d) {
       return x(d.y);
     })
-    .attr('height', y.rangeBand());
-
-  bar.append('rect')
-    .attr('class', 'glass')
-    .attr('x', barOffset)
-    .attr('width', width - barOffset)
-    .attr('height', y.rangeBand())
+    .attr('height', barHeight)
     .on('mouseover', tip.show)
     .on('mouseout', tip.hide);
 
   bar.append('text')
-    .attr('dx', '-10')
-    .attr('dy', '0.4em')
-    .attr('y', y.rangeBand() / 2)
-    .attr('x', barOffset)
-    .attr('text-anchor', 'end')
+    .attr('y', barHeight / 2)
+    .attr('dy', '0.3em')
+    .attr('dx', 10)
+    .attr('text-anchor', 'start')
     .text(function(d) {
       return d.x;
-    });
+    })
+    .attr('fill', 'white');
 
 };

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

@@ -1,10 +1,18 @@
 var d3 = require('d3');
 var _ = require('lodash');
+var tooltipHtml = require('./tooltip.jade');
 var debug = require('debug')('scout-ui:minicharts:many');
 
 require('d3-tip')(d3);
 
-module.exports = function (data, g, width, height, labels) {
+module.exports = function(data, g, width, height, options) {
+
+  options = _.defaults(options || {}, {
+    bgbars: false,
+    bglines: false,
+    legend: true,
+    labels: false // label options will be set further below
+  });
 
   var x = d3.scale.ordinal()
     .domain(_.pluck(data, 'x'))
@@ -14,14 +22,19 @@ module.exports = function (data, g, width, height, labels) {
     .domain([0, d3.max(_.pluck(data, 'y'))])
     .range([height, 0]);
 
+  var sumY = d3.sum(_.pluck(data, 'y'));
+
   // set up tooltips
   var tip = d3.tip()
     .attr('class', 'd3-tip')
     .html(function(d, i) {
       if (typeof d.tooltip === 'function') {
         return d.tooltip(d, i);
       }
-      return d.tooltip || d.x;
+      return d.tooltip || tooltipHtml({
+          label: d.x,
+          value: d.y
+        });
     })
     .direction('n')
     .offset([-9, 0]);
@@ -30,6 +43,37 @@ module.exports = function (data, g, width, height, labels) {
   g.selectAll('*').remove();
   g.call(tip);
 
+  if (options.legend) {
+    g.append('text')
+      .attr('x', 0)
+      .attr('y', -10)
+      .attr('text-anchor', 'start')
+      .text(sumY);
+  }
+
+  if (options.bglines) {
+    g.append('line')
+      .attr('class', 'bg line')
+      .attr('x1', 0)
+      .attr('x2', width)
+      .attr('y1', 0)
+      .attr('y2', 0);
+
+    g.append('line')
+      .attr('class', 'bg line')
+      .attr('x1', 0)
+      .attr('x2', width)
+      .attr('y1', height / 2)
+      .attr('y2', height / 2);
+
+    g.append('line')
+      .attr('class', 'bg line')
+      .attr('x1', 0)
+      .attr('x2', width)
+      .attr('y1', height)
+      .attr('y2', height);
+  }
+
   var bar = g.selectAll('.bar')
     .data(data)
     .enter().append('g')
@@ -38,12 +82,14 @@ module.exports = function (data, g, width, height, labels) {
       return 'translate(' + x(d.x) + ', 0)';
     });
 
-  bar.append('rect')
-    .attr('class', 'bg')
-    .attr('width', x.rangeBand())
-    .attr('height', height);
+  if (options.bgbars) {
+    bar.append('rect')
+      .attr('class', 'bg')
+      .attr('width', x.rangeBand())
+      .attr('height', height);
+  }
 
-  bar.append('rect')
+  var fgbars = bar.append('rect')
     .attr('class', 'fg')
     .attr('x', 0)
     .attr('y', function(d) {
@@ -54,39 +100,46 @@ module.exports = function (data, g, width, height, labels) {
       return height - y(d.y);
     });
 
+  if (options.bgbars) {
     bar.append('rect')
       .attr('class', 'glass')
       .attr('width', x.rangeBand())
       .attr('height', height)
       .on('mouseover', tip.show)
       .on('mouseout', tip.hide);
+  } else {
+    // atach tooltips directly to foreground bars
+    fgbars
+      .on('mouseover', tip.show)
+      .on('mouseout', tip.hide);
+  }
+
+  if (options.labels) {
+    var labels = options.labels;
+    _.defaults(labels, {
+      'x': labels['text-anchor'] === 'middle' ? x.rangeBand() / 2 : function(d, i) {
+        if (i === 0) return 0;
+        if (i === data.length - 1) return x.rangeBand();
+        return x.rangeBand() / 2;
+      },
+      'y': height + 5,
+      'dy': '0.75em',
+      'text-anchor': function(d, i) {
+        if (i === 0) return 'start';
+        if (i === data.length - 1) return 'end';
+        return 'middle';
+      },
+      'text': function(d) {
+        return d.x;
+      }
+    });
 
-    if (labels) {
-
-      _.defaults(labels, {
-        'x': labels['text-anchor'] === 'middle' ? x.rangeBand() / 2 : function (d, i) {
-          if (i === 0) return 0;
-          if (i === data.length - 1) return x.rangeBand();
-          return x.rangeBand() / 2;
-        },
-        'y': height+5,
-        'dy': '0.75em',
-        'text-anchor': function (d, i) {
-          if (i === 0) return 'start';
-          if (i === data.length - 1) return 'end';
-          return 'middle';
-        },
-        'text': function (d) {
-          return d.x;
-        }
-      });
-
-      bar.append('text')
+    bar.append('text')
       .attr('x', labels.x)
       .attr('dx', labels.dx)
       .attr('y', labels.y)
       .attr('dy', labels.dy)
       .attr('text-anchor', labels['text-anchor'])
       .text(labels.text);
-    }
+  }
 };