21 |
19 |
22 }).on('init'), |
20 }).on('init'), |
23 |
21 |
24 didRender: function() { |
22 didRender: function() { |
25 var self = this; |
23 var self = this; |
26 var baseURL = (ENV.APP.backRootURL || ENV.rootURL).replace(/\/$/,"")+'/api/v1/stats'; |
|
27 var url = URI(baseURL+"/discourses").search(this.get('filter').get('queryParamsValuesURI')); |
|
28 |
24 |
29 d3.json(url.href(), function(data) { |
25 var discourses = this.get('discourses'); |
30 var discourses = data['discourses']; |
26 var array = discourses.map(function (d) { return d.get('count'); }); |
31 var array = Object.keys(discourses).map(function (key) { return discourses[key].count; }); |
27 var oldMin = Math.min(...array), |
32 var oldMin = Math.min(...array), |
28 oldMax = Math.max(...array); |
33 oldMax = Math.max(...array); |
29 var sum = array.reduce(function(a, b) { return a + b; }); |
34 var sum = array.reduce(function(a, b) { return a + b; }); |
30 var average = sum / array.length; |
35 var average = sum / array.length; |
31 var newMin = Math.floor((average - oldMin)), |
36 var newMin = Math.floor((average - oldMin)), |
32 newMax = Math.floor((oldMax - average)); |
37 newMax = Math.floor((oldMax - average)); |
|
38 |
33 |
39 var width = self.$().parent().width(); |
34 var width = self.$().parent().width(); |
40 var height = self.$().parent().height() - self.$().siblings().outerHeight(true); |
35 var height = self.$().parent().height() - self.$().siblings().outerHeight(true); |
41 |
36 |
42 var bubble = d3.layout.pack() |
37 var bubble = d3.layout.pack() |
43 .sort(function comparator(a, b) { return a.value + b.value; }) |
38 .sort(function comparator(a, b) { return a.value + b.value; }) |
44 .size([width, height]) |
39 .size([width, height]) |
45 .value(function(d){ |
40 .value(function(d){ |
46 return Math.floor((((d.value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin); |
41 return Math.floor((((d.value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin); |
47 }) |
42 }) |
48 .padding(10); |
43 .padding(10); |
49 |
44 |
50 var element = d3.select('#' + self.get('elementId')); |
45 var element = d3.select('#' + self.get('elementId')); |
51 |
46 |
52 var bubbles = bubble.nodes(self.createNodes(discourses)); |
47 var bubbles = bubble.nodes(self.createNodes()); |
53 |
48 |
54 var nodes = element |
49 var nodes = element |
55 .selectAll() |
50 .selectAll() |
56 .data(bubbles); |
51 .data(bubbles); |
57 |
52 |
58 nodes.enter().append("div") |
53 nodes.enter().append("div") |
59 .attr("class", function(d) { return ( d.children ? "category": "item" ) + ( (self.get('filter').get('discourse') !== null && _.contains(self.get('filter').get('discourse'), d.id)) ? " selected" : "" ) ; }); |
54 .attr("class", function(d) { return ( d.children ? "category": "item" ) + ( (self.get('filter').get('discourse') !== null && _.contains(self.get('filter').get('discourse'), d.id)) ? " selected" : "" ) ; }); |
60 |
55 |
61 var item = element.selectAll(".item") |
56 var item = element.selectAll(".item") |
62 .attr("data-id", function(d) { return d.id; }) |
57 .attr("data-id", function(d) { return d.id; }) |
63 .style("left", function(d) { return ( d.x - d.r) + "px"; }) |
58 .style("left", function(d) { return ( d.x - d.r) + "px"; }) |
64 .style("top", function(d) { return ( d.y - d.r) + "px"; }) |
59 .style("top", function(d) { return ( d.y - d.r) + "px"; }) |
65 .style("width", function(d) { return (d.r * 2) + "px"; }) |
60 .style("width", function(d) { return (d.r * 2) + "px"; }) |
66 .style("height", function(d) { return (d.r * 2) + "px"; }) |
61 .style("height", function(d) { return (d.r * 2) + "px"; }) |
67 .style("background-color", function(d) { return d.fill; }) |
62 .style("background-color", function(d) { return d.fill; }) |
68 .style("border-color", function(d) { return d.stroke; }) |
63 .style("border-color", function(d) { return d.stroke; }) |
69 .style("font-size", function(d) { return Math.floor((((d.value - oldMin) * (13 - 10)) / (oldMax - oldMin)) + 10) + 'px'; }) |
64 .style("font-size", function(d) { return Math.floor((((d.value - oldMin) * (13 - 10)) / (oldMax - oldMin)) + 10) + 'px'; }) |
70 .on('click', function(d) { |
65 .on('click', function(d) { |
71 self.get('filter').setFilter('discourse', d.id); |
66 self.get('filter').setFilter('discourse', d.id); |
72 }); |
67 }); |
73 |
68 |
74 item.append("span") |
69 item.append("span") |
75 .html(function(d) { return d.name + ' <span class="count">(' + d.count + ')</span>'; }) |
70 .html(function(d) { return d.name + ' <span class="count">(' + d.count + ')</span>'; }) |
76 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; }) |
71 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; }) |
77 .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; }); |
72 .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; }); |
78 }); |
|
79 |
73 |
80 this._super(...arguments); |
74 this._super(...arguments); |
81 }, |
75 }, |
82 |
76 |
83 createNodes: function(json) { |
77 createNodes: function() { |
84 var self = this; |
78 var self = this; |
85 var children = []; |
79 var children = []; |
|
80 var discourses = this.get('discourses'); |
86 |
81 |
87 Object.keys(json).forEach(function(key) { |
82 discourses.forEach(function(discourse) { |
88 var discourse = json[key]; |
83 var category_key = self.get('constants').DISCOURSE_CATEGORY_KEYS[discourse.get('id')]; |
89 var category_key = self.get('constants').DISCOURSE_CATEGORY_KEYS[key]; |
|
90 var category_value = self.get('constants').DISCOURSE_CATEGORY_VALUES[category_key]; |
84 var category_value = self.get('constants').DISCOURSE_CATEGORY_VALUES[category_key]; |
91 |
85 |
92 children.push({ |
86 children.push({ |
93 'id': key, |
87 id: discourse.get('id'), |
94 'name': discourse.label, |
88 name: discourse.get('label'), |
95 'value': discourse.count, |
89 value: discourse.get('count'), |
96 'count': discourse.count, |
90 count: discourse.get('count'), |
97 'fill': category_value.fill, |
91 fill: category_value.fill, |
98 'stroke': category_value.stroke |
92 stroke: category_value.stroke |
99 }); |
93 }); |
100 }); |
94 }); |
101 |
95 |
102 return { 'children': children }; |
96 return { 'children': children }; |
103 } |
97 } |