--- 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
});
});