make filter and theme visualisatiion change on filter modification
authorymh <ymh.work@gmail.com>
Sun, 04 Dec 2016 00:23:52 +0100
changeset 465 9df336529b2f
parent 464 c37671f197c3
child 466 a8effb60ccb6
make filter and theme visualisatiion change on filter modification
cms/app-client/app/adapters/application.js
cms/app-client/app/components/discourses-component.js
cms/app-client/app/controllers/application.js
cms/app-client/app/helpers/is-checked.js
cms/app-client/app/helpers/is-indeterminate.js
cms/app-client/app/models/discourse.js
cms/app-client/app/routes/tabs/discours.js
cms/app-client/app/serializers/discourse.js
cms/app-client/app/templates/tabs/discours.hbs
cms/app-client/tests/unit/models/discourse-test.js
cms/app-client/tests/unit/serializers/discourse-test.js
server/src/app/Http/Controllers/Api/DiscourseController.php
server/src/app/Http/Controllers/Api/ThemeController.php
--- a/cms/app-client/app/adapters/application.js	Sat Dec 03 02:49:59 2016 +0100
+++ b/cms/app-client/app/adapters/application.js	Sun Dec 04 00:23:52 2016 +0100
@@ -6,7 +6,8 @@
     geostat: 'stats/geostats',
     datestat: 'stats/datestats',
     dateminmax: 'stats/dateminmax',
-    theme: 'stats/themes'
+    theme: 'stats/themes',
+    discourse: 'stats/discourses'
 };
 
 export default RESTAdapter.extend({
--- a/cms/app-client/app/components/discourses-component.js	Sat Dec 03 02:49:59 2016 +0100
+++ b/cms/app-client/app/components/discourses-component.js	Sun Dec 04 00:23:52 2016 +0100
@@ -1,8 +1,6 @@
 import Ember from 'ember';
 import d3 from 'd3';
-import ENV from 'app-client/config/environment';
 import _ from 'lodash/lodash';
-import URI from 'urijs';
 
 export default Ember.Component.extend({
 
@@ -23,79 +21,75 @@
 
     didRender: function() {
         var self = this;
-        var baseURL = (ENV.APP.backRootURL || ENV.rootURL).replace(/\/$/,"")+'/api/v1/stats';
-        var url = URI(baseURL+"/discourses").search(this.get('filter').get('queryParamsValuesURI'));
 
-        d3.json(url.href(), function(data) {
-            var discourses = data['discourses'];
-            var array = Object.keys(discourses).map(function (key) { return discourses[key].count; });
-            var oldMin = Math.min(...array),
-                oldMax = Math.max(...array);
-            var sum = array.reduce(function(a, b) { return a + b; });
-            var average = sum / array.length;
-            var newMin = Math.floor((average - oldMin)),
-                newMax = Math.floor((oldMax - average));
+        var discourses = this.get('discourses');
+        var array = discourses.map(function (d) { return d.get('count'); });
+        var oldMin = Math.min(...array),
+            oldMax = Math.max(...array);
+        var sum = array.reduce(function(a, b) { return a + b; });
+        var average = sum / array.length;
+        var newMin = Math.floor((average - oldMin)),
+            newMax = Math.floor((oldMax - average));
 
-            var width = self.$().parent().width();
-            var height = self.$().parent().height() - self.$().siblings().outerHeight(true);
+        var width = self.$().parent().width();
+        var height = self.$().parent().height() - self.$().siblings().outerHeight(true);
 
-            var bubble = d3.layout.pack()
-                .sort(function comparator(a, b) { return a.value + b.value; })
-                .size([width, height])
-                .value(function(d){
-                    return Math.floor((((d.value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin);
-                })
-                .padding(10);
+        var bubble = d3.layout.pack()
+            .sort(function comparator(a, b) { return a.value + b.value; })
+            .size([width, height])
+            .value(function(d){
+                return Math.floor((((d.value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin);
+            })
+            .padding(10);
 
-            var element = d3.select('#' + self.get('elementId'));
+        var element = d3.select('#' + self.get('elementId'));
+
+        var bubbles = bubble.nodes(self.createNodes());
 
-            var bubbles = bubble.nodes(self.createNodes(discourses));
+        var nodes = element
+            .selectAll()
+            .data(bubbles);
 
-            var nodes = element
-                .selectAll()
-                .data(bubbles);
-
-            nodes.enter().append("div")
-                .attr("class", function(d) { return ( d.children ? "category": "item" ) + ( (self.get('filter').get('discourse') !== null && _.contains(self.get('filter').get('discourse'), d.id)) ? " selected" : "" ) ; });
+        nodes.enter().append("div")
+            .attr("class", function(d) { return ( d.children ? "category": "item" ) + ( (self.get('filter').get('discourse') !== null && _.contains(self.get('filter').get('discourse'), d.id)) ? " selected" : "" ) ; });
 
-            var item = element.selectAll(".item")
-                .attr("data-id", function(d) { return d.id; })
-                .style("left", function(d) { return ( d.x - d.r)  + "px"; })
-                .style("top", function(d) { return ( d.y - d.r)  + "px"; })
-                .style("width", function(d) { return (d.r * 2) + "px"; })
-                .style("height", function(d) { return (d.r * 2) + "px"; })
-                .style("background-color", function(d) { return d.fill; })
-                .style("border-color", function(d) { return d.stroke; })
-                .style("font-size", function(d) { return Math.floor((((d.value - oldMin) * (13 - 10)) / (oldMax - oldMin)) + 10) + 'px'; })
-                .on('click', function(d) {
-                    self.get('filter').setFilter('discourse', d.id);
-                });
+        var item = element.selectAll(".item")
+            .attr("data-id", function(d) { return d.id; })
+            .style("left", function(d) { return ( d.x - d.r)  + "px"; })
+            .style("top", function(d) { return ( d.y - d.r)  + "px"; })
+            .style("width", function(d) { return (d.r * 2) + "px"; })
+            .style("height", function(d) { return (d.r * 2) + "px"; })
+            .style("background-color", function(d) { return d.fill; })
+            .style("border-color", function(d) { return d.stroke; })
+            .style("font-size", function(d) { return Math.floor((((d.value - oldMin) * (13 - 10)) / (oldMax - oldMin)) + 10) + 'px'; })
+            .on('click', function(d) {
+                self.get('filter').setFilter('discourse', d.id);
+            });
 
-            item.append("span")
-                .html(function(d) { return d.name + ' <span class="count">(' + d.count + ')</span>'; })
-                .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
-                .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; });
-        });
+        item.append("span")
+            .html(function(d) { return d.name + ' <span class="count">(' + d.count + ')</span>'; })
+            .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
+            .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; });
 
         this._super(...arguments);
     },
 
-    createNodes: function(json) {
+    createNodes: function() {
         var self = this;
         var children = [];
+        var discourses = this.get('discourses');
 
-        Object.keys(json).forEach(function(key) {
-            var discourse = json[key];
-            var category_key = self.get('constants').DISCOURSE_CATEGORY_KEYS[key];
+        discourses.forEach(function(discourse) {
+            var category_key = self.get('constants').DISCOURSE_CATEGORY_KEYS[discourse.get('id')];
             var category_value = self.get('constants').DISCOURSE_CATEGORY_VALUES[category_key];
 
             children.push({
-                'id': key,
-                'name': discourse.label,
-                'value': discourse.count,
-                'count': discourse.count,
-                'fill': category_value.fill,
-                'stroke': category_value.stroke
+                id: discourse.get('id'),
+                name: discourse.get('label'),
+                value: discourse.get('count'),
+                count: discourse.get('count'),
+                fill: category_value.fill,
+                stroke: category_value.stroke
             });
         });
 
--- a/cms/app-client/app/controllers/application.js	Sat Dec 03 02:49:59 2016 +0100
+++ b/cms/app-client/app/controllers/application.js	Sun Dec 04 00:23:52 2016 +0100
@@ -51,7 +51,6 @@
         this.store.findRecord('document', this.get('player').get('item'), { reload: true }).then(function(model){
             self.get('player').set('model', model);
             let transcript = self.get('player').get('model').get('transcript');
-            console.log("transcript", transcript);
             if (transcript && transcript.format === "application/pdf") {
                 self.get('player').set('transcript', transcript.url);
                 self.get('player').set('transcriptIframe', true);
--- a/cms/app-client/app/helpers/is-checked.js	Sat Dec 03 02:49:59 2016 +0100
+++ b/cms/app-client/app/helpers/is-checked.js	Sun Dec 04 00:23:52 2016 +0100
@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import _ from 'lodash/lodash';
 
 export function isChecked(params) {
     var dates = params[0];
@@ -6,12 +7,7 @@
         return false;
     }
 
-    var decade = [];
-    var next = params[1] + 10;
-    while(params[1] < next) {
-        decade.push(params[1]);
-        params[1] ++;
-    }
+    var decade = _.range(params[1], params[1] + 10);
 
     var filter = decade.filter(function(date){ return dates.indexOf(date) > -1; });
     if(filter.length === decade.length) {
--- a/cms/app-client/app/helpers/is-indeterminate.js	Sat Dec 03 02:49:59 2016 +0100
+++ b/cms/app-client/app/helpers/is-indeterminate.js	Sun Dec 04 00:23:52 2016 +0100
@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import _ from 'lodash/lodash';
 
 export function isIndeterminate(params) {
     var dates = params[0];
@@ -6,12 +7,7 @@
         return false;
     }
 
-    var decade = [];
-    var next = params[1] + 10;
-    while(params[1] < next) {
-        decade.push(params[1]);
-        params[1] ++;
-    }
+    var decade = _.range(params[1], params[1] + 10);
 
     var filter = decade.filter(function(date){ return dates.indexOf(date) > -1; });
     if(filter.length !== decade.length && filter.length) {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/models/discourse.js	Sun Dec 04 00:23:52 2016 +0100
@@ -0,0 +1,6 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  label: DS.attr('string'),
+  count: DS.attr('number')
+});
--- a/cms/app-client/app/routes/tabs/discours.js	Sat Dec 03 02:49:59 2016 +0100
+++ b/cms/app-client/app/routes/tabs/discours.js	Sun Dec 04 00:23:52 2016 +0100
@@ -3,8 +3,13 @@
 export default Ember.Route.extend({
 
     player: Ember.inject.service(),
+    filter: Ember.inject.service(),
 
-    activate: function() {
+    model() {
+      return this.get('store').query('discourse', this.get('filter').get('queryParamsValues'));
+    },
+
+    activate() {
         this.get('player').set('window', false);
     }
 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/serializers/discourse.js	Sun Dec 04 00:23:52 2016 +0100
@@ -0,0 +1,23 @@
+import DS from 'ember-data';
+
+export default DS.JSONSerializer.extend({
+
+  normalizeResponse: function (store, primaryModelClass, payload) {
+    var data = [];
+    var discourses = payload['discourses'];
+    Object.keys(discourses).forEach(function (key) {
+      data.push({
+        'id': key,
+        'type': 'discourse',
+        'attributes': {
+          'label': discourses[key].label,
+          'count': discourses[key].count
+        }
+      });
+    });
+    return {
+      'data': data
+    };
+  }
+
+});
--- a/cms/app-client/app/templates/tabs/discours.hbs	Sat Dec 03 02:49:59 2016 +0100
+++ b/cms/app-client/app/templates/tabs/discours.hbs	Sun Dec 04 00:23:52 2016 +0100
@@ -1,3 +1,3 @@
 <div id="tabs-discours">
-    {{discourses-component}}
+    {{discourses-component discourses=model}}
 </div>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/models/discourse-test.js	Sun Dec 04 00:23:52 2016 +0100
@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('discourse', 'Unit | Model | discourse', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/serializers/discourse-test.js	Sun Dec 04 00:23:52 2016 +0100
@@ -0,0 +1,15 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('discourse', 'Unit | Serializer | discourse', {
+  // Specify the other units that are required for this test.
+  needs: ['serializer:discourse']
+});
+
+// Replace this with your real tests.
+test('it serializes records', function(assert) {
+  let record = this.subject();
+
+  let serializedRecord = record.serialize();
+
+  assert.ok(serializedRecord);
+});
--- a/server/src/app/Http/Controllers/Api/DiscourseController.php	Sat Dec 03 02:49:59 2016 +0100
+++ b/server/src/app/Http/Controllers/Api/DiscourseController.php	Sun Dec 04 00:23:52 2016 +0100
@@ -22,7 +22,7 @@
 
         $filterManager = new CorpusFilterManager();
         $filters = $filterManager->prepareFilters($request);
-        unset($filters['discourses']);
+        //unset($filters['discourses']);
         $qFilterParts = $filterManager->buildESFilters($filters);
 
         $query = $filterManager->buildQuery($qFilterParts);
--- a/server/src/app/Http/Controllers/Api/ThemeController.php	Sat Dec 03 02:49:59 2016 +0100
+++ b/server/src/app/Http/Controllers/Api/ThemeController.php	Sun Dec 04 00:23:52 2016 +0100
@@ -73,7 +73,7 @@
 
         $filterManager = new CorpusFilterManager();
         $filters = $filterManager->prepareFilters($request);
-        unset($filters['themes']);
+        //unset($filters['themes']);
         $qFilterParts = $filterManager->buildESFilters($filters);
         $query = $filterManager->buildQuery($qFilterParts);