Some fixes and improvements to minicharts

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

@@ -58,7 +58,7 @@ module.exports = function(opts) {
       return {
         label: weekdayLabels[i],
         value: d.length,
-        tooltip: weekdayLabels[i]
+        // tooltip: weekdayLabels[i]
       };
     })
     .value();
@@ -74,7 +74,7 @@ module.exports = function(opts) {
       return {
         label: hourLabels[i] + ':00',
         value: d.length,
-        tooltip: hourLabels[i] + ':00'
+        // tooltip: hourLabels[i] + ':00'
       };
     })
     .value();

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

@@ -59,9 +59,7 @@ module.exports = function(data, g, width, height, options) {
     .attr('width', function(d) {
       return x(d.value);
     })
-    .attr('height', barHeight)
-    .on('mouseover', tip.show)
-    .on('mouseout', tip.hide);
+    .attr('height', barHeight);
 
   bar.append('text')
     .attr('y', barHeight / 2)
@@ -73,4 +71,15 @@ module.exports = function(data, g, width, height, options) {
     })
     .attr('fill', 'white');
 
+  bar.append('rect')
+    .attr('class', 'glass')
+    .attr('y', 0)
+    .attr('x', 0)
+    .attr('width', function(d) {
+      return x(d.value);
+    })
+    .attr('height', barHeight)
+    .on('mouseover', tip.show)
+    .on('mouseout', tip.hide);
+
 };

scout-ui/src/minicharts/index.js

@@ -28,7 +28,7 @@ module.exports = AmpersandView.extend({
 
     // unique values get a div-based minichart
     if ((this.model._id === 'String') &&
-      (_.uniq(this.model.values.toJSON()).length === this.model.count)) {
+      (this.model.unique === this.model.count)) {
 
       this.viewOptions.renderMode = 'html';
       this.viewOptions.className = 'minichart unique';

scout-ui/src/minicharts/unique.jade

@@ -5,8 +5,8 @@ div(data-hook='viz-container')
     //-   = minValue
 
     dt
-      //-a(href="#")
-      i.mms-icon-continuous(data-hook='refresh')
+      a
+        i.mms-icon-continuous(data-hook='refresh')
     dd
       ul.list-inline
         each val in randomValues

scout-ui/src/minicharts/unique.js

@@ -3,45 +3,48 @@ var _ = require('lodash');
 var debug = require('debug')('scout-ui:minicharts:unique');
 
 module.exports = VizView.extend({
+  props: {
+    timer: {
+      type: 'number',
+      default: null
+    }
+  },
   template: require('./unique.jade'),
   derived: {
-    orderedValues: {
-      deps: ['model.values'],
-      cache: true,
-      fn: function() {
-        return this.model.values.toJSON().sort();
-      }
-    },
-    minValue: {
-      deps: ['orderedValues'],
-      cache: true,
-      fn: function() {
-        return this.orderedValues[0];
-      }
-    },
-    maxValue: {
-      deps: ['orderedValues'],
-      cache: true,
-      fn: function() {
-        return this.orderedValues[this.orderedValues.length - 1];
-      }
-    },
     randomValues: {
       deps: ['orderedValues'],
       cache: false,
       fn: function() {
-        return this.orderedValues.slice(1, 15);
+        return _(this.model.values.sample(15))
+          .map(function(x) {
+            return x.value;
+          })
+          .value();
       }
     }
   },
   events: {
-    'click .fa-refresh': 'refresh'
+    'mousedown [data-hook=refresh]': 'refresh',
+    'mouseup': 'stopTimer'
   },
   render: function() {
     this.renderWithTemplate(this);
   },
-  refresh: function() {
-    debug('refresh clicked');
+  refresh: function(event) {
+    if (!this.timer) {
+      this.timer = setInterval(this.refresh.bind(this), 600);
+    } else {
+      clearInterval(this.timer);
+      this.timer = setInterval(this.refresh.bind(this), 50);
+    }
+    if (event) {
+      event.preventDefault();
+    }
+    this.render();
+  },
+  stopTimer: function(event) {
+    clearInterval(this.timer);
+    this.timer = null;
   }
 
 });