added shared state for minichart + scale in margin

Author: rueckstiess

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

@@ -1,6 +1,7 @@
 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) {
@@ -25,12 +26,7 @@ module.exports = function(opts) {
     .sortByOrder('label', [false]) // order: false, true
     .value();
 
-  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;

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

@@ -1,6 +1,7 @@
 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');
 
@@ -30,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;

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

@@ -8,17 +8,17 @@ require('d3-tip')(d3);
 module.exports = function(data, g, width, height, options) {
 
   // if legend present, save some space
-  var legendWidth = 40;
+  var scaleWidth = 40;
 
   options = _.defaults(options || {}, {
     bgbars: false,
-    legend: false,
+    scale: false,
     labels: false // label defaults will be set further below
   });
 
-  if (options.legend) {
-    width = width - legendWidth;
-  }
+// if (options.scale) {
+//   width = width - scaleWidth;
+// }
 
   var x = d3.scale.ordinal()
     .domain(_.pluck(data, 'label'))
@@ -51,8 +51,7 @@ module.exports = function(data, g, width, height, options) {
   g.selectAll('*').remove();
   g.call(tip);
 
-  if (options.legend) {
-
+  if (options.scale) {
     var maxVal = d3.max(y.domain());
     var format = d3.format('%.1f');
     var legendValues = [format(maxVal), format(maxVal / 2)];

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

@@ -1,19 +1,14 @@
 var d3 = require('d3');
 var _ = require('lodash');
 var many = require('./many');
+var shared = require('./shared');
 var tooltipHtml = require('./tooltip.jade');
 var debug = require('debug')('scout-ui:minicharts:number');
 
 module.exports = function(opts) {
   var values = opts.data.values.toJSON();
 
-  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;
@@ -57,7 +52,7 @@ module.exports = function(opts) {
     .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
   many(data, g, width, height - 10, {
-    legend: true,
+    scale: true,
     bgbars: false,
     labels: {
       text: function(d, i) {

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

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

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

@@ -3,17 +3,12 @@ var _ = require('lodash');
 var debug = require('debug')('scout-ui:minicharts:string');
 var few = require('./few');
 var many = require('./many');
+var shared = require('./shared');
 
 module.exports = function(opts) {
   var values = opts.data.values.toJSON();
 
-  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;
@@ -43,7 +38,7 @@ module.exports = function(opts) {
 
   var chart = data.length <= 5 ? few : many;
   chart(data, g, width, height, {
-    legend: true,
+    scale: true,
     bglines: true
   });
 };

scout-ui/src/minicharts/index.less

@@ -29,6 +29,10 @@ div.minichart.unique {
     dd {
       margin-left: 30px;
       overflow: hidden;
+
+      ul li {
+        margin-bottom: 6px;
+      }
     }
   }
 }

scout-ui/src/minicharts/unique.jade

@@ -10,7 +10,8 @@ div(data-hook='viz-container')
     dd
       ul.list-inline
         each val in randomValues
-          li= val
+          li
+            code= val
 
     //- dt max
     //- dd