diff --git a/scout-ui/src/minicharts/d3fns/date.js b/scout-ui/src/minicharts/d3fns/date.js index b044d2cb1e3..e0c3007a12c 100644 --- a/scout-ui/src/minicharts/d3fns/date.js +++ b/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(); diff --git a/scout-ui/src/minicharts/d3fns/few.js b/scout-ui/src/minicharts/d3fns/few.js index ae9368335bb..c40c56bf805 100644 --- a/scout-ui/src/minicharts/d3fns/few.js +++ b/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); + }; diff --git a/scout-ui/src/minicharts/index.js b/scout-ui/src/minicharts/index.js index d7bb1999e49..bc9bd8e054e 100644 --- a/scout-ui/src/minicharts/index.js +++ b/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'; diff --git a/scout-ui/src/minicharts/unique.jade b/scout-ui/src/minicharts/unique.jade index 22339f32833..8ba4ce2d94b 100644 --- a/scout-ui/src/minicharts/unique.jade +++ b/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 diff --git a/scout-ui/src/minicharts/unique.js b/scout-ui/src/minicharts/unique.js index da1653eb87f..4b5edead9a6 100644 --- a/scout-ui/src/minicharts/unique.js +++ b/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; } });