blue shades. moved scale to right. margin.

Author: rueckstiess

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/few.js

@@ -50,7 +50,9 @@ module.exports = function(data, g, width, height, options) {
     });
 
   bar.append('rect')
-    .attr('class', 'fg')
+    .attr('class', function(d, i) {
+      return 'fg-' + i;
+    })
     .attr('y', 0)
     .attr('x', 0)
     .attr('width', function(d) {

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

@@ -7,19 +7,12 @@ require('d3-tip')(d3);
 
 module.exports = function(data, g, width, height, options) {
 
-  // if legend present, save some space
-  var scaleWidth = 40;
-
   options = _.defaults(options || {}, {
     bgbars: false,
     scale: false,
     labels: false // label defaults will be set further below
   });
 
-// if (options.scale) {
-//   width = width - scaleWidth;
-// }
-
   var x = d3.scale.ordinal()
     .domain(_.pluck(data, 'label'))
     .rangeBands([0, width], 0.3, 0.0);
@@ -62,49 +55,49 @@ module.exports = function(data, g, width, height, options) {
 
     legend.append('text')
       .attr('class', 'legend')
-      .attr('x', width)
-      .attr('dx', '1em')
+      .attr('x', 0)
+      .attr('dx', '-1em')
       .attr('y', 0)
       .attr('dy', '0.3em')
-      .attr('text-anchor', 'start')
+      .attr('text-anchor', 'end')
       .text(d3.max(y.domain()) + '%');
 
     legend.append('text')
       .attr('class', 'legend')
-      .attr('x', width)
-      .attr('dx', '1em')
+      .attr('x', 0)
+      .attr('dx', '-1em')
       .attr('y', height / 2)
       .attr('dy', '0.3em')
-      .attr('text-anchor', 'start')
+      .attr('text-anchor', 'end')
       .text(d3.max(y.domain()) / 2 + '%');
 
     legend.append('text')
       .attr('class', 'legend')
-      .attr('x', width)
-      .attr('dx', '1em')
+      .attr('x', 0)
+      .attr('dx', '-1em')
       .attr('y', height)
       .attr('dy', '0.3em')
-      .attr('text-anchor', 'start')
-      .text('0%');
+      .attr('text-anchor', 'end')
+      .text('99.9%');
 
     legend.append('line')
       .attr('class', 'bg legend')
-      .attr('x1', 0)
-      .attr('x2', width + 5)
+      .attr('x1', -5)
+      .attr('x2', width)
       .attr('y1', 0)
       .attr('y2', 0);
 
     legend.append('line')
       .attr('class', 'bg legend')
-      .attr('x1', 0)
-      .attr('x2', width + 5)
+      .attr('x1', -5)
+      .attr('x2', width)
       .attr('y1', height / 2)
       .attr('y2', height / 2);
 
     legend.append('line')
       .attr('class', 'bg legend')
-      .attr('x1', 0)
-      .attr('x2', width + 5)
+      .attr('x1', -5)
+      .attr('x2', width)
       .attr('y1', height)
       .attr('y2', height);
   }

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

@@ -2,9 +2,9 @@ module.exports = {
 
   margin: {
     top: 10,
-    right: 40,
+    right: 0,
     bottom: 10,
-    left: 0
+    left: 40
   },
 
 };

scout-ui/src/minicharts/index.js

@@ -15,7 +15,7 @@ module.exports = AmpersandView.extend({
   initialize: function(opts) {
     // setting some defaults for minicharts
     this.viewOptions = _.defaults(opts, {
-      width: 400,
+      width: 440,
       height: 100,
       renderMode: 'svg',
       className: 'minichart',

scout-ui/src/minicharts/index.less

@@ -1,7 +1,13 @@
 // 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-bg: #F2F4F5;
-@mc-fg: #38A1DF;
-@mc-hl: #BEDFF0;
+@mc-fg: @mc-blue0;
 
 div.minichart.unique {
   font-size: 12px;
@@ -37,6 +43,12 @@ div.minichart.unique {
   }
 }
 
+.minichart-wrapper {
+  svg.minichart {
+    margin-left: -40px;
+  }
+}
+
 svg.minichart {
   font-size: 10px;
 
@@ -59,16 +71,37 @@ svg.minichart {
       fill: @mc-fg;
     }
 
-    rect.hl {
-      fill: @mc-hl;
-    }
-
     &.few {
-      rect.fg {
+
+      rect {
         stroke: white;
         stroke-width: 2px;
       }
 
+      rect.fg-0 {
+        fill: @mc-blue0;
+      }
+
+      rect.fg-1 {
+        fill: @mc-blue1;
+      }
+
+      rect.fg-2 {
+        fill: @mc-blue2;
+      }
+
+      rect.fg-3 {
+        fill: @mc-blue3;
+      }
+
+      rect.fg-4 {
+        fill: @mc-blue4;
+      }
+
+      rect.fg-5 {
+        fill: @mc-blue5;
+      }
+
       text {
         fill: white;
         font-size: 12px;