From 4270f0c969b789b76a98afc8a63bcb4d417f911c Mon Sep 17 00:00:00 2001 From: romsson Date: Mon, 4 Apr 2016 17:53:46 +0200 Subject: [PATCH 01/35] Using group attribute for filtering with VisTK --- app/components/vistk-scatterplot.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/vistk-scatterplot.js b/app/components/vistk-scatterplot.js index 3352e7b9..9761cfb6 100644 --- a/app/components/vistk-scatterplot.js +++ b/app/components/vistk-scatterplot.js @@ -30,6 +30,7 @@ export default Ember.Component.extend({ var_x: 'distance', var_y: 'complexity', var_r: this.get('varSize'), + var_group: 'group', radius_min: 2, radius_max: 10, x_domain: this.get('x_domain'), From 4c4f5b5ba3c11a0718d6b49271c98c4139fd2066 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:06:20 +0200 Subject: [PATCH 02/35] Adding active/inactive toggle and class binding --- app/components/visualization-legend-key.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/components/visualization-legend-key.js b/app/components/visualization-legend-key.js index bb800e9b..3877fd41 100644 --- a/app/components/visualization-legend-key.js +++ b/app/components/visualization-legend-key.js @@ -1,8 +1,9 @@ import Ember from 'ember'; -const { computed, get } = Ember; +const {computed, get} = Ember; export default Ember.Component.extend({ color: computed.alias('key.color'), + code: computed.alias('key.code'), name: computed('key', 'i18n.locale', function(){ let locale = get(this, 'i18n.display'); return get(this, `key.name_${locale}`); @@ -10,5 +11,10 @@ export default Ember.Component.extend({ myStyle: computed('color', function() { var color = this.get('color'); return new Ember.Handlebars.SafeString("color: " + color); + }), + classNameBindings: ['isActive'], + active: false, + isActive: computed('active', function() { + return this.get('code') === this.get('active'); }) }); From e72d1b9f3cff3632c0f183c678ee5a6b28a7a10c Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:07:44 +0200 Subject: [PATCH 03/35] Notify upstream component it became active --- app/components/visualization-legend-key.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/components/visualization-legend-key.js b/app/components/visualization-legend-key.js index 3877fd41..48514c86 100644 --- a/app/components/visualization-legend-key.js +++ b/app/components/visualization-legend-key.js @@ -16,5 +16,10 @@ export default Ember.Component.extend({ active: false, isActive: computed('active', function() { return this.get('code') === this.get('active'); - }) + }), + actions: { + changeKey() { + this.sendAction('action', this.get('code')); + } + } }); From b85ca889fc5384687b448e81ed9999c5c7a02320 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:08:27 +0200 Subject: [PATCH 04/35] Toggling active key coming from downstream --- app/components/visualization-legend.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/components/visualization-legend.js b/app/components/visualization-legend.js index 926b6130..c80b3f96 100644 --- a/app/components/visualization-legend.js +++ b/app/components/visualization-legend.js @@ -1,4 +1,14 @@ import Ember from 'ember'; export default Ember.Component.extend({ + activeKey: null, + actions: { + changeKey(key) { + if(this.get('activeKey') === key) { + this.set('activeKey', null); + } else { + this.set('activeKey', key); + } + } + } }); From 8354a793ca9276f3c69641cfb1727b222f8bc05c Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:08:59 +0200 Subject: [PATCH 05/35] Mapping actions and active value to keys' parent component --- app/templates/components/visualization-legend.hbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/templates/components/visualization-legend.hbs b/app/templates/components/visualization-legend.hbs index b24412ee..5864239a 100644 --- a/app/templates/components/visualization-legend.hbs +++ b/app/templates/components/visualization-legend.hbs @@ -1,8 +1,8 @@
{{#each key in legend}}
- {{visualization-legend-key key=key }} + {{visualization-legend-key key=key active=activeKey action='changeKey'}}
{{else}} {{/each}} -
\ No newline at end of file + From 5cb9eae1224bc43b5f708ce6f7f057f00c282a51 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:09:14 +0200 Subject: [PATCH 06/35] Keys actions binding and styling --- app/templates/components/visualization-legend-key.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/components/visualization-legend-key.hbs b/app/templates/components/visualization-legend-key.hbs index 64f9c7fa..a0c6f89b 100644 --- a/app/templates/components/visualization-legend-key.hbs +++ b/app/templates/components/visualization-legend-key.hbs @@ -1 +1 @@ - {{name}} + {{name}} From 66894452f50ceb70d1f6e00f0d778fcb6eb9ee38 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:09:58 +0200 Subject: [PATCH 07/35] CSS styling for keys for affordance and to reflect currently active key --- app/styles/components/_modules/_buildermod.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/styles/components/_modules/_buildermod.scss b/app/styles/components/_modules/_buildermod.scss index 6cdae2ab..497685cf 100644 --- a/app/styles/components/_modules/_buildermod.scss +++ b/app/styles/components/_modules/_buildermod.scss @@ -154,10 +154,15 @@ margin-left: 6rem; } +.buildermod__legend__item .is-active { + font-weight: 800; +} + .buildermod__legend__item { display: inline-block; width: 100%; white-space: nowrap; + cursor: pointer; .fa { position: relative; From 730c158cd5c675480867ff586881cc4c3da51c3f Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:19:57 +0200 Subject: [PATCH 08/35] WIP to test charts dynamic filtering --- app/components/visualization-legend.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/app/components/visualization-legend.js b/app/components/visualization-legend.js index c80b3f96..fe2cff4c 100644 --- a/app/components/visualization-legend.js +++ b/app/components/visualization-legend.js @@ -4,11 +4,31 @@ export default Ember.Component.extend({ activeKey: null, actions: { changeKey(key) { + let code = []; + if(this.get('activeKey') === key) { this.set('activeKey', null); } else { this.set('activeKey', key); + code = [key]; } + + // Retrieve the scatterplot's configuration object + let elScatter = this.get('parentView').get('childViews').filter(function(d) { + return typeof d['scatter'] !== 'undefined'; + })[0]; + + // Update the scatterplot's configuration object + elScatter.get('scatter').params({ + filter: code + }); + + // Force graph refresh with new configuration + elScatter.get('scatter').params().refresh = true; + + // Re-draw + d3.select(elScatter.get('id')).call(elScatter.get('scatter')); + } } }); From 7561afc6a50daa4c8a5c990479a65f20daaec321 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:20:03 +0200 Subject: [PATCH 09/35] Cleanup --- app/components/graphbuilder-settings.js | 2 +- app/components/vistk-dotplot.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/components/graphbuilder-settings.js b/app/components/graphbuilder-settings.js index 277fdccc..f10ad951 100644 --- a/app/components/graphbuilder-settings.js +++ b/app/components/graphbuilder-settings.js @@ -46,7 +46,7 @@ export default Ember.Component.extend({ rcaAll() { this.set('rcaFilter', 'all'); this.set('isOpen', false); - }, + } } }); diff --git a/app/components/vistk-dotplot.js b/app/components/vistk-dotplot.js index 33b22329..ef84e912 100644 --- a/app/components/vistk-dotplot.js +++ b/app/components/vistk-dotplot.js @@ -80,7 +80,7 @@ export default Ember.Component.extend({ }], selection: [currentSelection] }); - }), + }), draw: function() { this.set('width', this.$().parent().width()); this.set('height', this.$().parent().height()); @@ -97,4 +97,3 @@ export default Ember.Component.extend({ }); } }); - From 0f2fc0a7c95a01239a317b8c88bcc056f79cb1be Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:15:59 +0200 Subject: [PATCH 10/35] Adding filter variable to the controller --- app/routes/location/visualization.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/routes/location/visualization.js b/app/routes/location/visualization.js index ee669e16..adf65d4f 100644 --- a/app/routes/location/visualization.js +++ b/app/routes/location/visualization.js @@ -119,6 +119,7 @@ export default Ember.Route.extend({ controller.set('drawerChangeGraphIsOpen', false); // Turn off other drawers controller.set('drawerQuestionsIsOpen', false); // Turn off other drawers controller.set('searchText', controller.get('search')); + controller.set('keyFilter', []); window.scrollTo(0, 0); }, resetController(controller, isExiting) { From 05a35d49752b1e69c93df2d5be7140f35bb6b64c Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:16:14 +0200 Subject: [PATCH 11/35] Now using controller filter variable --- app/components/visualization-legend.js | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/app/components/visualization-legend.js b/app/components/visualization-legend.js index fe2cff4c..fb86a134 100644 --- a/app/components/visualization-legend.js +++ b/app/components/visualization-legend.js @@ -13,22 +13,7 @@ export default Ember.Component.extend({ code = [key]; } - // Retrieve the scatterplot's configuration object - let elScatter = this.get('parentView').get('childViews').filter(function(d) { - return typeof d['scatter'] !== 'undefined'; - })[0]; - - // Update the scatterplot's configuration object - elScatter.get('scatter').params({ - filter: code - }); - - // Force graph refresh with new configuration - elScatter.get('scatter').params().refresh = true; - - // Re-draw - d3.select(elScatter.get('id')).call(elScatter.get('scatter')); - + this.set('keyFilter', code); } } }); From 54b9da037f221c47fefbfcf9c01d814e04271895 Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:16:28 +0200 Subject: [PATCH 12/35] Passing controller value to the components --- app/templates/visualization.hbs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/templates/visualization.hbs b/app/templates/visualization.hbs index 37dea32e..6047c09f 100644 --- a/app/templates/visualization.hbs +++ b/app/templates/visualization.hbs @@ -41,11 +41,12 @@ entityId=entityId variable=variable search=search + keyFilter=keyFilter graph=graph }} {{#if needsLegend }} - {{component 'visualization-legend' legend=legend }} + {{component 'visualization-legend' legend=legend keyFilter=keyFilter }} {{/if}}
@@ -56,6 +57,7 @@ canYearToggle=canYearToggle isScatter=isScatter rcaFilter=rcaFilter + keyFilter=keyFilter }}
From 60481f616947191afe95163fd3a9c9e19f577b0e Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:19:35 +0200 Subject: [PATCH 13/35] Observing filter variable and refreshing the scatterplot --- app/components/vistk-scatterplot.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/app/components/vistk-scatterplot.js b/app/components/vistk-scatterplot.js index 9761cfb6..0563e55b 100644 --- a/app/components/vistk-scatterplot.js +++ b/app/components/vistk-scatterplot.js @@ -17,6 +17,7 @@ export default Ember.Component.extend({ scatter: computed('data.@each', 'dataType','eciValue','i18n.locale', function() { let eci = this.get('eciValue'); let lang = this.get('i18n.locale') === 'en-col' ? 'en_EN': 'es_ES'; + let keyFilter = this.get('keyFilter'); let format = function(value) { return numeral(value).format('0.00'); }; return vistk.viz() .params({ @@ -160,6 +161,7 @@ export default Ember.Component.extend({ } }] }], + filter: keyFilter, lang: lang }); }), @@ -195,6 +197,19 @@ export default Ember.Component.extend({ this.removeObserver('i18n.locale', this, this.update); this.removeObserver('data.[]', this, this.update); }, + refresh: observer('keyFilter', function() { + if(!this.element){ return ; } //do not redraw if not there + let keyFilter = this.get('keyFilter'); + + Ember.run.later(this , function() { + if(this.get('scatter')) { + + this.get('scatter').params({filter: keyFilter}); + this.get('scatter').params().refresh = true; + d3.select(this.get('id')).call(this.get('scatter')); + } + }); + }), update: observer('data.@each', 'varRca', 'i18n.locale', 'dataType', function() { if(!this.element){ return ; } //do not redraw if not there d3.select(this.get('id')).select('svg').remove(); From 399ce01cd3bb7af056e686648ebf84ed5706810c Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:39:32 +0200 Subject: [PATCH 14/35] Support for interactive legend --- app/components/vistk-network.js | 45 +++++++++++++++++++++++++++++++-- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/app/components/vistk-network.js b/app/components/vistk-network.js index f198398d..5df58fca 100644 --- a/app/components/vistk-network.js +++ b/app/components/vistk-network.js @@ -22,6 +22,7 @@ export default Ember.Component.extend({ d.name_short_en = datum.name_short_en + ` (${datum.code})`; d.name_short_es = datum.name_short_es + ` (${datum.code})`; d.color = datum.color; + d.group = datum.group; d[this.get('varDependent')] = datum[this.get('varDependent')]; d[this.get('varRCA')] = datum[this.get('varRCA')]; } @@ -47,6 +48,7 @@ export default Ember.Component.extend({ return this.get('graph').edges; }), network: computed('data.[]', 'varDependent', 'dataType', 'vis', 'i18n.locale', function() { + let keyFilter = this.get('keyFilter'); return vistk.viz().params({ type: 'productspace', height: this.get('height'), @@ -68,10 +70,16 @@ export default Ember.Component.extend({ attr: 'name', marks: [{ type: 'circle', - fill: (d) => { + fill: (d, i, vars) => { //if there is no search, color products export > 0 and rca > 1 // industries if RCA > 1 ( varDependent for industries is also rca ) - if(d[this.get('varRCA')] >= 1){ + if(keyFilter.length > 0) { + if(d.group === keyFilter[0]) { + return d.color; + } else { + return 'white'; + } + } else if(d[this.get('varRCA')] >= 1) { return d.color; } }, @@ -142,6 +150,39 @@ export default Ember.Component.extend({ this.removeObserver('i18n.locale', this, this.update); this.removeObserver('data.[]', this, this.update); }, + refresh: observer('keyFilter', function() { + if(!this.element){ return ; } //do not redraw if not there + let keyFilter = this.get('keyFilter'); + + Ember.run.later(this , function() { + if(this.get('network')) { + console.log('filter netowr', keyFilter) + d3.select(this.get('id')).call(this.get('network')); + this.get('network').params({filter: keyFilter}); + this.get('network').params({ + y_invert: true, + items: [{ + marks: [{ + type: 'circle', + fill: (d, i, vars) => { + if(keyFilter.length > 0) { + if(d.group === keyFilter[0]) { + return d.color; + } else { + return 'white'; + } + } else if(d[this.get('varRCA')] >= 1) { + return d.color; + } + } + }] + }] + }); + this.get('network').params().refresh = true; + d3.select(this.get('id')).call(this.get('network')); + } + }); + }), update: observer('data.[]', 'varDependent', 'i18n.locale', function() { if(!this.element){ return false; } //do not redraw if not there d3.select(this.get('id')).select('svg').remove(); From 562a9a6bd5a55c8c9e24932eb6df0d99dc821bca Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:41:54 +0200 Subject: [PATCH 15/35] Cleanup --- app/components/vistk-network.js | 6 +++--- app/components/vistk-scatterplot.js | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/components/vistk-network.js b/app/components/vistk-network.js index 5df58fca..29c7d8ba 100644 --- a/app/components/vistk-network.js +++ b/app/components/vistk-network.js @@ -63,6 +63,7 @@ export default Ember.Component.extend({ var_y: 'y', radius: 5, var_color: 'color', + var_group: 'group', color: (d) => { return d; }, y_invert: true, var_id: 'id', @@ -74,7 +75,7 @@ export default Ember.Component.extend({ //if there is no search, color products export > 0 and rca > 1 // industries if RCA > 1 ( varDependent for industries is also rca ) if(keyFilter.length > 0) { - if(d.group === keyFilter[0]) { + if(d[vars.var_group] === keyFilter[0]) { return d.color; } else { return 'white'; @@ -156,7 +157,6 @@ export default Ember.Component.extend({ Ember.run.later(this , function() { if(this.get('network')) { - console.log('filter netowr', keyFilter) d3.select(this.get('id')).call(this.get('network')); this.get('network').params({filter: keyFilter}); this.get('network').params({ @@ -166,7 +166,7 @@ export default Ember.Component.extend({ type: 'circle', fill: (d, i, vars) => { if(keyFilter.length > 0) { - if(d.group === keyFilter[0]) { + if(d[vars.var_group] === keyFilter[0]) { return d.color; } else { return 'white'; diff --git a/app/components/vistk-scatterplot.js b/app/components/vistk-scatterplot.js index 0563e55b..f4acce73 100644 --- a/app/components/vistk-scatterplot.js +++ b/app/components/vistk-scatterplot.js @@ -203,7 +203,6 @@ export default Ember.Component.extend({ Ember.run.later(this , function() { if(this.get('scatter')) { - this.get('scatter').params({filter: keyFilter}); this.get('scatter').params().refresh = true; d3.select(this.get('id')).call(this.get('scatter')); From c889a256441255e9978c5a408049368b45f544c0 Mon Sep 17 00:00:00 2001 From: romsson Date: Mon, 4 Apr 2016 17:53:46 +0200 Subject: [PATCH 16/35] Using group attribute for filtering with VisTK --- app/components/vistk-scatterplot.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/vistk-scatterplot.js b/app/components/vistk-scatterplot.js index 3352e7b9..9761cfb6 100644 --- a/app/components/vistk-scatterplot.js +++ b/app/components/vistk-scatterplot.js @@ -30,6 +30,7 @@ export default Ember.Component.extend({ var_x: 'distance', var_y: 'complexity', var_r: this.get('varSize'), + var_group: 'group', radius_min: 2, radius_max: 10, x_domain: this.get('x_domain'), From 5e67542f3db93ee34ee57f823d45569038ab110d Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:06:20 +0200 Subject: [PATCH 17/35] Adding active/inactive toggle and class binding --- app/components/visualization-legend-key.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/components/visualization-legend-key.js b/app/components/visualization-legend-key.js index bb800e9b..3877fd41 100644 --- a/app/components/visualization-legend-key.js +++ b/app/components/visualization-legend-key.js @@ -1,8 +1,9 @@ import Ember from 'ember'; -const { computed, get } = Ember; +const {computed, get} = Ember; export default Ember.Component.extend({ color: computed.alias('key.color'), + code: computed.alias('key.code'), name: computed('key', 'i18n.locale', function(){ let locale = get(this, 'i18n.display'); return get(this, `key.name_${locale}`); @@ -10,5 +11,10 @@ export default Ember.Component.extend({ myStyle: computed('color', function() { var color = this.get('color'); return new Ember.Handlebars.SafeString("color: " + color); + }), + classNameBindings: ['isActive'], + active: false, + isActive: computed('active', function() { + return this.get('code') === this.get('active'); }) }); From 6867aa2da4aa09ffc404fe361cf8397704863eb5 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:07:44 +0200 Subject: [PATCH 18/35] Notify upstream component it became active --- app/components/visualization-legend-key.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/components/visualization-legend-key.js b/app/components/visualization-legend-key.js index 3877fd41..48514c86 100644 --- a/app/components/visualization-legend-key.js +++ b/app/components/visualization-legend-key.js @@ -16,5 +16,10 @@ export default Ember.Component.extend({ active: false, isActive: computed('active', function() { return this.get('code') === this.get('active'); - }) + }), + actions: { + changeKey() { + this.sendAction('action', this.get('code')); + } + } }); From 87a0c2988a0c3a33c681ece43a5c707a3166ee74 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:08:27 +0200 Subject: [PATCH 19/35] Toggling active key coming from downstream --- app/components/visualization-legend.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/components/visualization-legend.js b/app/components/visualization-legend.js index 926b6130..c80b3f96 100644 --- a/app/components/visualization-legend.js +++ b/app/components/visualization-legend.js @@ -1,4 +1,14 @@ import Ember from 'ember'; export default Ember.Component.extend({ + activeKey: null, + actions: { + changeKey(key) { + if(this.get('activeKey') === key) { + this.set('activeKey', null); + } else { + this.set('activeKey', key); + } + } + } }); From 321afb6668d361170871f3114147839597bb888d Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:08:59 +0200 Subject: [PATCH 20/35] Mapping actions and active value to keys' parent component --- app/templates/components/visualization-legend.hbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/templates/components/visualization-legend.hbs b/app/templates/components/visualization-legend.hbs index b24412ee..5864239a 100644 --- a/app/templates/components/visualization-legend.hbs +++ b/app/templates/components/visualization-legend.hbs @@ -1,8 +1,8 @@
{{#each key in legend}}
- {{visualization-legend-key key=key }} + {{visualization-legend-key key=key active=activeKey action='changeKey'}}
{{else}} {{/each}} -
\ No newline at end of file + From b4e3f4c41f1fe755f2af66bc6709e88752636f02 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:09:14 +0200 Subject: [PATCH 21/35] Keys actions binding and styling --- app/templates/components/visualization-legend-key.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/components/visualization-legend-key.hbs b/app/templates/components/visualization-legend-key.hbs index 64f9c7fa..a0c6f89b 100644 --- a/app/templates/components/visualization-legend-key.hbs +++ b/app/templates/components/visualization-legend-key.hbs @@ -1 +1 @@ - {{name}} + {{name}} From 98e98dbb933ac18b3d339663d88b9a10a98ebbf5 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:09:58 +0200 Subject: [PATCH 22/35] CSS styling for keys for affordance and to reflect currently active key --- app/styles/components/_modules/_buildermod.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/styles/components/_modules/_buildermod.scss b/app/styles/components/_modules/_buildermod.scss index 6cdae2ab..497685cf 100644 --- a/app/styles/components/_modules/_buildermod.scss +++ b/app/styles/components/_modules/_buildermod.scss @@ -154,10 +154,15 @@ margin-left: 6rem; } +.buildermod__legend__item .is-active { + font-weight: 800; +} + .buildermod__legend__item { display: inline-block; width: 100%; white-space: nowrap; + cursor: pointer; .fa { position: relative; From c4d7e997d291341953daeb7d330b399fadbe4733 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:19:57 +0200 Subject: [PATCH 23/35] WIP to test charts dynamic filtering --- app/components/visualization-legend.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/app/components/visualization-legend.js b/app/components/visualization-legend.js index c80b3f96..fe2cff4c 100644 --- a/app/components/visualization-legend.js +++ b/app/components/visualization-legend.js @@ -4,11 +4,31 @@ export default Ember.Component.extend({ activeKey: null, actions: { changeKey(key) { + let code = []; + if(this.get('activeKey') === key) { this.set('activeKey', null); } else { this.set('activeKey', key); + code = [key]; } + + // Retrieve the scatterplot's configuration object + let elScatter = this.get('parentView').get('childViews').filter(function(d) { + return typeof d['scatter'] !== 'undefined'; + })[0]; + + // Update the scatterplot's configuration object + elScatter.get('scatter').params({ + filter: code + }); + + // Force graph refresh with new configuration + elScatter.get('scatter').params().refresh = true; + + // Re-draw + d3.select(elScatter.get('id')).call(elScatter.get('scatter')); + } } }); From 13b99d6dbf7b498a34aa7e2ce9645ded95571c47 Mon Sep 17 00:00:00 2001 From: romsson Date: Tue, 5 Apr 2016 15:20:03 +0200 Subject: [PATCH 24/35] Cleanup --- app/components/graphbuilder-settings.js | 2 +- app/components/vistk-dotplot.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/components/graphbuilder-settings.js b/app/components/graphbuilder-settings.js index 277fdccc..f10ad951 100644 --- a/app/components/graphbuilder-settings.js +++ b/app/components/graphbuilder-settings.js @@ -46,7 +46,7 @@ export default Ember.Component.extend({ rcaAll() { this.set('rcaFilter', 'all'); this.set('isOpen', false); - }, + } } }); diff --git a/app/components/vistk-dotplot.js b/app/components/vistk-dotplot.js index 33b22329..ef84e912 100644 --- a/app/components/vistk-dotplot.js +++ b/app/components/vistk-dotplot.js @@ -80,7 +80,7 @@ export default Ember.Component.extend({ }], selection: [currentSelection] }); - }), + }), draw: function() { this.set('width', this.$().parent().width()); this.set('height', this.$().parent().height()); @@ -97,4 +97,3 @@ export default Ember.Component.extend({ }); } }); - From 76145aec0020ddfb83285ce16502afddd59586e9 Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:15:59 +0200 Subject: [PATCH 25/35] Adding filter variable to the controller --- app/routes/location/visualization.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/routes/location/visualization.js b/app/routes/location/visualization.js index ee669e16..adf65d4f 100644 --- a/app/routes/location/visualization.js +++ b/app/routes/location/visualization.js @@ -119,6 +119,7 @@ export default Ember.Route.extend({ controller.set('drawerChangeGraphIsOpen', false); // Turn off other drawers controller.set('drawerQuestionsIsOpen', false); // Turn off other drawers controller.set('searchText', controller.get('search')); + controller.set('keyFilter', []); window.scrollTo(0, 0); }, resetController(controller, isExiting) { From 05d2f5e20d477e4c1f0778c512c30ed812415f34 Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:16:14 +0200 Subject: [PATCH 26/35] Now using controller filter variable --- app/components/visualization-legend.js | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/app/components/visualization-legend.js b/app/components/visualization-legend.js index fe2cff4c..fb86a134 100644 --- a/app/components/visualization-legend.js +++ b/app/components/visualization-legend.js @@ -13,22 +13,7 @@ export default Ember.Component.extend({ code = [key]; } - // Retrieve the scatterplot's configuration object - let elScatter = this.get('parentView').get('childViews').filter(function(d) { - return typeof d['scatter'] !== 'undefined'; - })[0]; - - // Update the scatterplot's configuration object - elScatter.get('scatter').params({ - filter: code - }); - - // Force graph refresh with new configuration - elScatter.get('scatter').params().refresh = true; - - // Re-draw - d3.select(elScatter.get('id')).call(elScatter.get('scatter')); - + this.set('keyFilter', code); } } }); From 8c36ab3d5579b99889f6e8dac7e98ee2d9c015e5 Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:16:28 +0200 Subject: [PATCH 27/35] Passing controller value to the components --- app/templates/visualization.hbs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/templates/visualization.hbs b/app/templates/visualization.hbs index 37dea32e..6047c09f 100644 --- a/app/templates/visualization.hbs +++ b/app/templates/visualization.hbs @@ -41,11 +41,12 @@ entityId=entityId variable=variable search=search + keyFilter=keyFilter graph=graph }} {{#if needsLegend }} - {{component 'visualization-legend' legend=legend }} + {{component 'visualization-legend' legend=legend keyFilter=keyFilter }} {{/if}}
@@ -56,6 +57,7 @@ canYearToggle=canYearToggle isScatter=isScatter rcaFilter=rcaFilter + keyFilter=keyFilter }}
From 5c5d7bc3a8c430b9d99c76493790f8bfa17ac393 Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:19:35 +0200 Subject: [PATCH 28/35] Observing filter variable and refreshing the scatterplot --- app/components/vistk-scatterplot.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/app/components/vistk-scatterplot.js b/app/components/vistk-scatterplot.js index 9761cfb6..0563e55b 100644 --- a/app/components/vistk-scatterplot.js +++ b/app/components/vistk-scatterplot.js @@ -17,6 +17,7 @@ export default Ember.Component.extend({ scatter: computed('data.@each', 'dataType','eciValue','i18n.locale', function() { let eci = this.get('eciValue'); let lang = this.get('i18n.locale') === 'en-col' ? 'en_EN': 'es_ES'; + let keyFilter = this.get('keyFilter'); let format = function(value) { return numeral(value).format('0.00'); }; return vistk.viz() .params({ @@ -160,6 +161,7 @@ export default Ember.Component.extend({ } }] }], + filter: keyFilter, lang: lang }); }), @@ -195,6 +197,19 @@ export default Ember.Component.extend({ this.removeObserver('i18n.locale', this, this.update); this.removeObserver('data.[]', this, this.update); }, + refresh: observer('keyFilter', function() { + if(!this.element){ return ; } //do not redraw if not there + let keyFilter = this.get('keyFilter'); + + Ember.run.later(this , function() { + if(this.get('scatter')) { + + this.get('scatter').params({filter: keyFilter}); + this.get('scatter').params().refresh = true; + d3.select(this.get('id')).call(this.get('scatter')); + } + }); + }), update: observer('data.@each', 'varRca', 'i18n.locale', 'dataType', function() { if(!this.element){ return ; } //do not redraw if not there d3.select(this.get('id')).select('svg').remove(); From f0c18dbc464de8b28f8c395ac3b77feffa0728c7 Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:39:32 +0200 Subject: [PATCH 29/35] Support for interactive legend --- app/components/vistk-network.js | 45 +++++++++++++++++++++++++++++++-- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/app/components/vistk-network.js b/app/components/vistk-network.js index f198398d..5df58fca 100644 --- a/app/components/vistk-network.js +++ b/app/components/vistk-network.js @@ -22,6 +22,7 @@ export default Ember.Component.extend({ d.name_short_en = datum.name_short_en + ` (${datum.code})`; d.name_short_es = datum.name_short_es + ` (${datum.code})`; d.color = datum.color; + d.group = datum.group; d[this.get('varDependent')] = datum[this.get('varDependent')]; d[this.get('varRCA')] = datum[this.get('varRCA')]; } @@ -47,6 +48,7 @@ export default Ember.Component.extend({ return this.get('graph').edges; }), network: computed('data.[]', 'varDependent', 'dataType', 'vis', 'i18n.locale', function() { + let keyFilter = this.get('keyFilter'); return vistk.viz().params({ type: 'productspace', height: this.get('height'), @@ -68,10 +70,16 @@ export default Ember.Component.extend({ attr: 'name', marks: [{ type: 'circle', - fill: (d) => { + fill: (d, i, vars) => { //if there is no search, color products export > 0 and rca > 1 // industries if RCA > 1 ( varDependent for industries is also rca ) - if(d[this.get('varRCA')] >= 1){ + if(keyFilter.length > 0) { + if(d.group === keyFilter[0]) { + return d.color; + } else { + return 'white'; + } + } else if(d[this.get('varRCA')] >= 1) { return d.color; } }, @@ -142,6 +150,39 @@ export default Ember.Component.extend({ this.removeObserver('i18n.locale', this, this.update); this.removeObserver('data.[]', this, this.update); }, + refresh: observer('keyFilter', function() { + if(!this.element){ return ; } //do not redraw if not there + let keyFilter = this.get('keyFilter'); + + Ember.run.later(this , function() { + if(this.get('network')) { + console.log('filter netowr', keyFilter) + d3.select(this.get('id')).call(this.get('network')); + this.get('network').params({filter: keyFilter}); + this.get('network').params({ + y_invert: true, + items: [{ + marks: [{ + type: 'circle', + fill: (d, i, vars) => { + if(keyFilter.length > 0) { + if(d.group === keyFilter[0]) { + return d.color; + } else { + return 'white'; + } + } else if(d[this.get('varRCA')] >= 1) { + return d.color; + } + } + }] + }] + }); + this.get('network').params().refresh = true; + d3.select(this.get('id')).call(this.get('network')); + } + }); + }), update: observer('data.[]', 'varDependent', 'i18n.locale', function() { if(!this.element){ return false; } //do not redraw if not there d3.select(this.get('id')).select('svg').remove(); From 65fc896a1236c1eb1492c9eb5bb01e174a534777 Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 8 Apr 2016 14:41:54 +0200 Subject: [PATCH 30/35] Cleanup --- app/components/vistk-network.js | 6 +++--- app/components/vistk-scatterplot.js | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/components/vistk-network.js b/app/components/vistk-network.js index 5df58fca..29c7d8ba 100644 --- a/app/components/vistk-network.js +++ b/app/components/vistk-network.js @@ -63,6 +63,7 @@ export default Ember.Component.extend({ var_y: 'y', radius: 5, var_color: 'color', + var_group: 'group', color: (d) => { return d; }, y_invert: true, var_id: 'id', @@ -74,7 +75,7 @@ export default Ember.Component.extend({ //if there is no search, color products export > 0 and rca > 1 // industries if RCA > 1 ( varDependent for industries is also rca ) if(keyFilter.length > 0) { - if(d.group === keyFilter[0]) { + if(d[vars.var_group] === keyFilter[0]) { return d.color; } else { return 'white'; @@ -156,7 +157,6 @@ export default Ember.Component.extend({ Ember.run.later(this , function() { if(this.get('network')) { - console.log('filter netowr', keyFilter) d3.select(this.get('id')).call(this.get('network')); this.get('network').params({filter: keyFilter}); this.get('network').params({ @@ -166,7 +166,7 @@ export default Ember.Component.extend({ type: 'circle', fill: (d, i, vars) => { if(keyFilter.length > 0) { - if(d.group === keyFilter[0]) { + if(d[vars.var_group] === keyFilter[0]) { return d.color; } else { return 'white'; diff --git a/app/components/vistk-scatterplot.js b/app/components/vistk-scatterplot.js index 0563e55b..f4acce73 100644 --- a/app/components/vistk-scatterplot.js +++ b/app/components/vistk-scatterplot.js @@ -203,7 +203,6 @@ export default Ember.Component.extend({ Ember.run.later(this , function() { if(this.get('scatter')) { - this.get('scatter').params({filter: keyFilter}); this.get('scatter').params().refresh = true; d3.select(this.get('id')).call(this.get('scatter')); From aa2db94d049020cb583fcde311f1507f69924f2d Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 15 Apr 2016 15:22:05 +0200 Subject: [PATCH 31/35] Turning scatter config into variable so it can easily be re-used --- app/components/vistk-scatterplot.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/components/vistk-scatterplot.js b/app/components/vistk-scatterplot.js index f4acce73..5453ae4f 100644 --- a/app/components/vistk-scatterplot.js +++ b/app/components/vistk-scatterplot.js @@ -14,13 +14,12 @@ export default Ember.Component.extend({ id: computed('elementId', function() { return `#${this.get('elementId')}`; }), - scatter: computed('data.@each', 'dataType','eciValue','i18n.locale', function() { + config: computed('data.@each', 'dataType','eciValue','i18n.locale', function() { let eci = this.get('eciValue'); let lang = this.get('i18n.locale') === 'en-col' ? 'en_EN': 'es_ES'; let keyFilter = this.get('keyFilter'); let format = function(value) { return numeral(value).format('0.00'); }; - return vistk.viz() - .params({ + return { type: 'scatterplot', margin: {top: 10, right: 20, bottom: 30, left: 30}, height: this.get('height'), @@ -163,7 +162,10 @@ export default Ember.Component.extend({ }], filter: keyFilter, lang: lang - }); + } + }), + scatter: computed('data.@each', 'dataType','eciValue','i18n.locale', function() { + return vistk.viz().params(this.get('config')); }), varSize: computed('dataType', function() { if(this.get('dataType') === 'products') { return 'cog'; } @@ -203,6 +205,7 @@ export default Ember.Component.extend({ Ember.run.later(this , function() { if(this.get('scatter')) { + this.get('scatter').params(this.get('config')); this.get('scatter').params({filter: keyFilter}); this.get('scatter').params().refresh = true; d3.select(this.get('id')).call(this.get('scatter')); From 2c50df3bb6070ab2a38b4ce2664fd9fbc520e91e Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 15 Apr 2016 15:23:09 +0200 Subject: [PATCH 32/35] Making sure keyFilter array exists --- app/components/vistk-network.js | 4 ++-- app/components/vistk-scatterplot.js | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/app/components/vistk-network.js b/app/components/vistk-network.js index 29c7d8ba..71cb25dd 100644 --- a/app/components/vistk-network.js +++ b/app/components/vistk-network.js @@ -48,7 +48,7 @@ export default Ember.Component.extend({ return this.get('graph').edges; }), network: computed('data.[]', 'varDependent', 'dataType', 'vis', 'i18n.locale', function() { - let keyFilter = this.get('keyFilter'); + let keyFilter = this.get('keyFilter') || []; return vistk.viz().params({ type: 'productspace', height: this.get('height'), @@ -153,7 +153,7 @@ export default Ember.Component.extend({ }, refresh: observer('keyFilter', function() { if(!this.element){ return ; } //do not redraw if not there - let keyFilter = this.get('keyFilter'); + let keyFilter = this.get('keyFilter') || []; Ember.run.later(this , function() { if(this.get('network')) { diff --git a/app/components/vistk-scatterplot.js b/app/components/vistk-scatterplot.js index 5453ae4f..d5343c51 100644 --- a/app/components/vistk-scatterplot.js +++ b/app/components/vistk-scatterplot.js @@ -17,7 +17,7 @@ export default Ember.Component.extend({ config: computed('data.@each', 'dataType','eciValue','i18n.locale', function() { let eci = this.get('eciValue'); let lang = this.get('i18n.locale') === 'en-col' ? 'en_EN': 'es_ES'; - let keyFilter = this.get('keyFilter'); + let keyFilter = this.get('keyFilter') || []; let format = function(value) { return numeral(value).format('0.00'); }; return { type: 'scatterplot', @@ -201,11 +201,10 @@ export default Ember.Component.extend({ }, refresh: observer('keyFilter', function() { if(!this.element){ return ; } //do not redraw if not there - let keyFilter = this.get('keyFilter'); + let keyFilter = this.get('keyFilter') || []; Ember.run.later(this , function() { if(this.get('scatter')) { - this.get('scatter').params(this.get('config')); this.get('scatter').params({filter: keyFilter}); this.get('scatter').params().refresh = true; d3.select(this.get('id')).call(this.get('scatter')); From 15b5446ffe1d02a6e87789852dd629e583ad45c5 Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 15 Apr 2016 15:43:49 +0200 Subject: [PATCH 33/35] Network config as a variable --- app/components/vistk-network.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/components/vistk-network.js b/app/components/vistk-network.js index 71cb25dd..1f652a48 100644 --- a/app/components/vistk-network.js +++ b/app/components/vistk-network.js @@ -47,9 +47,9 @@ export default Ember.Component.extend({ edges: computed('dataType', function() { return this.get('graph').edges; }), - network: computed('data.[]', 'varDependent', 'dataType', 'vis', 'i18n.locale', function() { - let keyFilter = this.get('keyFilter') || []; - return vistk.viz().params({ + config: computed('data.[]', 'varDependent', 'dataType', 'vis', 'i18n.locale', function() { + let keyFilter = this.get('keyFilter') || []; + return { type: 'productspace', height: this.get('height'), width: this.get('width'), @@ -138,7 +138,10 @@ export default Ember.Component.extend({ translate: [0, -10] }] }] - }); + } + }), + network: computed('data.[]', 'varDependent', 'dataType', 'vis', 'i18n.locale', function() { + return vistk.viz().params(this.get('config')); }), didInsertElement: function() { Ember.run.scheduleOnce('afterRender', this , function() { From 53475bec177ff6c06544cbd41c881baa773dba04 Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 15 Apr 2016 15:44:18 +0200 Subject: [PATCH 34/35] Making sure filter don't color non-exported products --- app/components/vistk-network.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/vistk-network.js b/app/components/vistk-network.js index 1f652a48..75b91fd4 100644 --- a/app/components/vistk-network.js +++ b/app/components/vistk-network.js @@ -75,7 +75,7 @@ export default Ember.Component.extend({ //if there is no search, color products export > 0 and rca > 1 // industries if RCA > 1 ( varDependent for industries is also rca ) if(keyFilter.length > 0) { - if(d[vars.var_group] === keyFilter[0]) { + if(d[vars.var_group] === keyFilter[0] && d[this.get('varRCA')] >= 1) { return d.color; } else { return 'white'; @@ -169,7 +169,7 @@ export default Ember.Component.extend({ type: 'circle', fill: (d, i, vars) => { if(keyFilter.length > 0) { - if(d[vars.var_group] === keyFilter[0]) { + if(d[vars.var_group] === keyFilter[0] && d[this.get('varRCA')] >= 1) { return d.color; } else { return 'white'; From 2469bebe28ff092e791ef4d343be89ebfb568da6 Mon Sep 17 00:00:00 2001 From: romsson Date: Fri, 15 Apr 2016 15:46:13 +0200 Subject: [PATCH 35/35] Making exported products slightly more prominent --- app/styles/components/_visualizations/_network.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/components/_visualizations/_network.scss b/app/styles/components/_visualizations/_network.scss index 319545f3..6ef57b16 100644 --- a/app/styles/components/_visualizations/_network.scss +++ b/app/styles/components/_visualizations/_network.scss @@ -12,7 +12,7 @@ .node--is--highlighted { stroke: $colorBlack; - stroke-width: 1px; + stroke-width: 1.5px; } .connect__line {