Merge pull request #20 from 10gen/minichart-fixes

lots of minichart fixes

Author: kangas

scout-ui/src/field-list/basic-field.jade

@@ -5,4 +5,4 @@
       .schema-field-name(data-hook='name')
       div(data-hook='types-container')
     .col-sm-7.col-sm-offset-1
-      div(data-hook='minicharts-container')
+      div(data-hook='minichart-container')

scout-ui/src/field-list/index.js

@@ -44,7 +44,7 @@ var BasicFieldView = View.extend({
   },
   render: function() {
     this.renderWithTemplate(this);
-    this.viewSwitcher = new ViewSwitcher(this.queryByHook('minicharts-container'));
+    this.viewSwitcher = new ViewSwitcher(this.queryByHook('minichart-container'));
   },
   switchView: function(typeModel) {
     var type = typeModel._id.toLowerCase();

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

@@ -1,34 +1,32 @@
 var d3 = require('d3');
 var _ = require('lodash');
 var few = require('./few');
+var shared = require('./shared');
 var debug = require('debug')('scout-ui:minicharts:boolean');
 
 module.exports = function(opts) {
   var values = opts.data.values.toJSON();
 
   // 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();
-
-  var margin = {
-    top: 10,
-    right: 0,
-    bottom: 10,
-    left: 0
-  };
+    .groupBy(function(d) {
+      // extract string representations of values
+      return d;
+    })
+    .defaults({
+      false: [],
+      true: []
+    })
+    .map(function(v, k) {
+      return {
+        label: k,
+        value: v.length
+      };
+    })
+    .sortByOrder('label', [false]) // order: false, true
+    .value();
+
+  var margin = shared.margin;
 
   var width = opts.width - margin.left - margin.right;
   var height = opts.height - margin.top - margin.bottom;

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

@@ -1,12 +1,17 @@
 var d3 = require('d3');
 var _ = require('lodash');
 var moment = require('moment');
+var shared = require('./shared');
 var debug = require('debug')('scout-ui:minicharts:date');
 var many = require('./many');
 
+require('d3-tip')(d3);
+
 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 +22,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();
       });
     }
@@ -26,13 +31,7 @@ module.exports = function(opts) {
   // A formatter for dates
   var format = d3.time.format('%Y-%m-%d %H:%M:%S');
 
-  var margin = {
-    top: 10,
-    right: 0,
-    bottom: 10,
-    left: 0
-  };
-
+  var margin = shared.margin;
   var width = opts.width - margin.left - margin.right;
   var height = opts.height - margin.top - margin.bottom;
   var el = opts.el;
@@ -45,20 +44,20 @@ module.exports = function(opts) {
     .range([0, width]);
 
   var upperBarBottom = height / 2 - 20;
-  var upperRatio = 2;
+  var upperRatio = 2.5;
   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,
+        label: weekdayLabels[i],
+        value: d.length,
         tooltip: weekdayLabels[i]
       };
     })
@@ -67,25 +66,35 @@ 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) {
+    .defaults(generateDefaults(24))
+    .map(function(d, i) {
       return {
-        x: hourLabels[i],
-        y: d.length,
-        tooltip: hourLabels[i] + 'h'
+        label: hourLabels[i] + ':00',
+        value: d.length,
+        tooltip: hourLabels[i] + ':00'
       };
     })
     .value();
 
   // clear element first
   d3.select(el).selectAll('*').remove();
 
+  // set up tooltips
+  var tip = d3.tip()
+    .attr('class', 'd3-tip')
+    .html(function(d, i) {
+      return format(d);
+    })
+    .direction('n')
+    .offset([-9, 0]);
+
   var svg = d3.select(el)
     .append('g')
-    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
+    .call(tip);
 
   var line = svg.selectAll('.line')
     .data(values)
@@ -98,7 +107,9 @@ module.exports = function(opts) {
     .attr('x2', function(d) {
       return barcodeX(d);
     })
-    .attr('y2', barcodeBottom);
+    .attr('y2', barcodeBottom)
+    .on('mouseover', tip.show)
+    .on('mouseout', tip.hide);
 
   var text = svg.selectAll('.text')
     .data(barcodeX.domain())
@@ -112,24 +123,36 @@ module.exports = function(opts) {
     .attr('text-anchor', function(d, i) {
       return i ? 'end' : 'start';
     })
-    .text(function(d) {
-      return format(d);
+    .text(function(d, i) {
+      if (format(barcodeX.domain()[0]) === format(barcodeX.domain()[1])) {
+        if (i === 0) {
+          return 'inserted: ' + format(d);
+        }
+      } else {
+        return (i ? 'last: ' : 'first: ') + format(d);
+      }
     });
 
   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.label[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.label : '';
+      }
     }
   });
 

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

@@ -1,27 +1,32 @@
 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) {
-  // @todo make barOffset equal to longest label
-  var barOffset = width / 4;
+module.exports = function(data, g, width, height, options) {
+
+  var barHeight = 25;
+  var values = _.pluck(data, 'value');
+  var sumValues = d3.sum(values);
 
   // 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]);
-
-  var y = d3.scale.ordinal()
-    .domain(_.pluck(data, 'x'))
-    .rangeBands([0, height], 0.3, 0.0);
+    .domain([0, sumValues])
+    .range([0, width]);
 
   // 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.label,
+          value: Math.round(d.value / sumValues * 100)
+        });
     })
     .direction('n')
     .offset([-9, 0]);
@@ -33,42 +38,38 @@ module.exports = function (data, g, width, height) {
   var bar = g.selectAll('.bar')
     .data(data)
     .enter().append('g')
-    .attr('class', 'bar')
-    .attr('transform', function(d) {
-      return 'translate(0, ' + y(d.x)  + ')';
-    });
+    .attr('class', 'bar few')
+    .attr('transform', function(d, i) {
 
-  bar.append('rect')
-    .attr('class', 'bg')
-    .attr('x', barOffset)
-    .attr('width', width - barOffset)
-    .attr('height', y.rangeBand());
+      var xpos = _.sum(_(data)
+        .slice(0, i)
+        .pluck('value')
+        .value()
+      );
+      return 'translate(' + x(xpos) + ', ' + (height - barHeight) / 2 + ')';
+    });
 
   bar.append('rect')
-    .attr('class', 'fg')
+    .attr('class', function(d, i) {
+      return 'fg-' + i;
+    })
     .attr('y', 0)
-    .attr('x', barOffset)
+    .attr('x', 0)
     .attr('width', function(d) {
-      return x(d.y);
+      return x(d.value);
     })
-    .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;
-    });
+      return d.label;
+    })
+    .attr('fill', 'white');
 
 };