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

More fine-tuning on minicharts

Author: kangas

scout-ui/src/home/index.less

@@ -133,7 +133,7 @@
   }
 
 }
-.schema-field-type-list{
+.schema-field-type-list {
   border-radius: 1px;
   // background: @gray6;
 
@@ -143,7 +143,6 @@
 
   .schema-field-type {
     height: 5px;
-    width: 100%;
     margin-right: 2px;
     background: @gray1;
   }

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

@@ -2,15 +2,15 @@ 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');
+var debug = require('debug')('scout-ui:minicharts:date');
 
 require('d3-tip')(d3);
 
 function generateDefaults(n) {
   var doc = {};
   _.each(_.range(n), function(d) {
-    doc[d] = 0;
+    doc[d] = [];
   });
   return doc;
 }
@@ -134,6 +134,7 @@ module.exports = function(opts) {
     });
 
   var weekdayContainer = svg.append('g');
+
   many(weekdays, weekdayContainer, width / (upperRatio + 1) - upperMargin, upperBarBottom, {
     bgbars: true,
     labels: {
@@ -144,6 +145,17 @@ module.exports = function(opts) {
     }
   });
 
+  // calendar icon
+  weekdayContainer.append('text')
+    .attr('class', 'date-icon fa-fw')
+    .attr('x', 0)
+    .attr('dx', '-0.6em')
+    .attr('y', 0)
+    .attr('dy', '1em')
+    .attr('text-anchor', 'end')
+    .attr('font-family', 'FontAwesome')
+    .text('\uf133');
+
   var hourContainer = svg.append('g')
     .attr('transform', 'translate(' + (width / (upperRatio + 1) + upperMargin) + ', 0)');
 
@@ -156,5 +168,16 @@ module.exports = function(opts) {
     }
   });
 
+  // clock icon
+  hourContainer.append('text')
+    .attr('class', 'date-icon fa-fw')
+    .attr('x', 0)
+    .attr('dx', '-0.6em')
+    .attr('y', 0)
+    .attr('dy', '1em')
+    .attr('text-anchor', 'end')
+    .attr('font-family', 'FontAwesome')
+    .text('\uf017');
+
 };
 

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

@@ -78,7 +78,7 @@ module.exports = function(data, g, width, height, options) {
       .attr('y', height)
       .attr('dy', '0.3em')
       .attr('text-anchor', 'end')
-      .text('99.9%');
+      .text('0%');
 
     legend.append('line')
       .attr('class', 'bg legend')

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

@@ -20,6 +20,7 @@ module.exports = function(opts) {
 
   // Generate a histogram using approx. twenty uniformly-spaced bins
   var ticks = x.ticks(20);
+
   var hist = d3.layout.histogram()
     .bins(ticks);
 

scout-ui/src/minicharts/index.less

@@ -1,10 +1,10 @@
 // minicharts
 @mc-blue0: #43B1E5;
-@mc-blue1: lighten(@mc-blue0, 10%);
-@mc-blue2: lighten(@mc-blue0, 20%);
-@mc-blue3: lighten(@mc-blue0, 30%);
-@mc-blue4: lighten(@mc-blue0, 40%);
-@mc-blue5: lighten(@mc-blue0, 50%);
+@mc-blue1: lighten(@mc-blue0, 7.5%);
+@mc-blue2: lighten(@mc-blue0, 15%);
+@mc-blue3: lighten(@mc-blue0, 22.5%);
+@mc-blue4: lighten(@mc-blue0, 30%);
+@mc-blue5: lighten(@mc-blue0, 37.5%);
 
 @mc-bg: #F2F4F5;
 @mc-fg: @mc-blue0;