From e91cdb9cce89243d86386b7a1a6a033b6f555f3b Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Wed, 27 May 2015 10:40:19 -0400 Subject: [PATCH 1/6] use models .unique property instead of computing again. --- scout-ui/src/minicharts/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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'; From 1f692994bb93cb56005e0b077867960267a5262f Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Wed, 27 May 2015 13:54:18 -0400 Subject: [PATCH 2/6] added percentage to date's weekday and hour tooltips. --- scout-ui/src/minicharts/d3fns/date.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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(); From 661742f2071a2e6d8028659e7cdd000eaa989a4d Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Wed, 27 May 2015 13:57:11 -0400 Subject: [PATCH 3/6] added glass pane on "few" charts for label hover before, the tooltip only showed when hovering over the bar, but not the label inside the bar. --- scout-ui/src/minicharts/d3fns/few.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) 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); + }; From c4601dd7acfcc43e99409d46a43cafe3874a5b2c Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Wed, 27 May 2015 14:31:42 -0400 Subject: [PATCH 4/6] unique charts now show actually random values from the sample set. --- scout-ui/src/minicharts/unique.js | 28 ++++++---------------------- 1 file changed, 6 insertions(+), 22 deletions(-) diff --git a/scout-ui/src/minicharts/unique.js b/scout-ui/src/minicharts/unique.js index da1653eb87f..370c3cb9e19 100644 --- a/scout-ui/src/minicharts/unique.js +++ b/scout-ui/src/minicharts/unique.js @@ -5,32 +5,16 @@ var debug = require('debug')('scout-ui:minicharts:unique'); module.exports = VizView.extend({ 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; + }) + .sort() + .value(); } } }, From e0fcb88227bf9b05d7d5c6e15b5ecb66669ddb17 Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Wed, 27 May 2015 14:48:20 -0400 Subject: [PATCH 5/6] refresh button now active on unique charts. --- scout-ui/src/minicharts/unique.jade | 4 ++-- scout-ui/src/minicharts/unique.js | 8 +++++--- 2 files changed, 7 insertions(+), 5 deletions(-) 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 370c3cb9e19..ca3797480a0 100644 --- a/scout-ui/src/minicharts/unique.js +++ b/scout-ui/src/minicharts/unique.js @@ -13,19 +13,21 @@ module.exports = VizView.extend({ .map(function(x) { return x.value; }) - .sort() .value(); } } }, events: { - 'click .fa-refresh': 'refresh' + 'mousedown [data-hook=refresh]': 'refresh' }, render: function() { this.renderWithTemplate(this); }, - refresh: function() { + refresh: function(event) { debug('refresh clicked'); + event.stopPropagation(); + event.preventDefault(); + this.render(); } }); From cf5579b4e9deef5aae9c7a7f18fa8eea7b071993 Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Wed, 27 May 2015 15:33:26 -0400 Subject: [PATCH 6/6] spin the "wheel of fortune" in unique minichart. debounced interval to shuffle random values on mousedown. --- scout-ui/src/minicharts/unique.js | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/scout-ui/src/minicharts/unique.js b/scout-ui/src/minicharts/unique.js index ca3797480a0..4b5edead9a6 100644 --- a/scout-ui/src/minicharts/unique.js +++ b/scout-ui/src/minicharts/unique.js @@ -3,6 +3,12 @@ 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: { randomValues: { @@ -18,16 +24,27 @@ module.exports = VizView.extend({ } }, events: { - 'mousedown [data-hook=refresh]': 'refresh' + 'mousedown [data-hook=refresh]': 'refresh', + 'mouseup': 'stopTimer' }, render: function() { this.renderWithTemplate(this); }, refresh: function(event) { - debug('refresh clicked'); - event.stopPropagation(); - event.preventDefault(); + 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; } });