4 |
4 |
5 |
5 |
6 |
6 |
7 export default Ember.Component.extend({ |
7 export default Ember.Component.extend({ |
8 |
8 |
9 constants: Ember.inject.service(), |
9 constants: Ember.inject.service(), |
10 |
10 |
11 init: function() { |
11 init: function() { |
12 this._super(...arguments); |
12 this._super(...arguments); |
13 }, |
13 }, |
14 |
14 |
15 didRender: function() { |
15 didRender: function() { |
16 var self = this; |
16 var self = this; |
17 var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1'; |
17 var baseURL = env.baseURL.replace(/\/$/,"")+'/api/v1'; |
18 |
18 |
19 d3.json(baseURL + "/discourses", function(discourses) { |
19 d3.json(baseURL + "/discourses", function(discourses) { |
20 console.log(discourses); |
20 console.log(discourses); |
21 |
21 |
22 var width = self.$().parent().width(); |
22 var width = self.$().parent().width(); |
23 var height = self.$().parent().height(); |
23 var height = self.$().parent().height(); |
24 |
24 |
25 var bubble = d3.layout.pack() |
25 var bubble = d3.layout.pack() |
26 .sort(null) |
26 .sort(null) |
27 .size([width, height]) |
27 .size([width, height]) |
28 .padding(33); |
28 .padding(33); |
29 |
29 |
30 var element = d3.select('#' + self.get('elementId')); |
30 var element = d3.select('#' + self.get('elementId')); |
31 |
31 |
32 var svg = element.append("svg") |
32 var svg = element.append("svg") |
33 .attr("width", width) |
33 .attr("width", width) |
34 .attr("height", height) |
34 .attr("height", height) |
35 .attr("class", "bubble"); |
35 .attr("class", "bubble"); |
36 |
36 |
37 var nodes = svg.selectAll(".node") |
37 var nodes = svg.selectAll(".node") |
38 .data(bubble.nodes(self.createNodes(discourses))) |
38 .data(bubble.nodes(self.createNodes(discourses))) |
39 .enter().append("g") |
39 .enter().append("g") |
40 .attr("width", function(d) { return 2.5 * d.r + 'px'; }) |
40 .attr("width", function(d) { return 2.5 * d.r + 'px'; }) |
41 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) |
41 .attr("class", function(d) { return "node" + (!d.children ? " leaf" : ""); }) |
42 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) |
42 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) |
43 .style("font-size", function(d) { return Math.max(13, d.r / 2) + 'px'; }); |
43 .style("font-size", function(d) { return Math.max(13, d.r / 2) + 'px'; }); |
44 |
44 |
45 |
45 |
46 var leaf = svg.selectAll(".leaf") |
46 var leaf = svg.selectAll(".leaf") |
47 .on('click', function(d) { document.location = self.setQueryString('discours', d.name); }); |
47 .on('click', function(d) { document.location = self.setQueryString('discours', d.name); }); |
48 |
48 |
49 leaf.append("circle") |
49 leaf.append("circle") |
50 .attr("r", function(d) { return d.r; }) |
50 .attr("r", function(d) { return d.r; }) |
51 .attr("fill", function(d) { return d.fill; }) |
51 .attr("fill", function(d) { return d.fill; }) |
52 .attr("stroke", function(d) { return "#000"; }); |
52 .attr("stroke", function(d) { return "#000"; }); |
53 |
53 |
54 leaf.append("text") |
54 leaf.append("text") |
55 .attr("dy", ".3em") |
55 .attr("dy", ".3em") |
56 .style("text-anchor", "middle") |
56 .style("text-anchor", "middle") |
57 .text(function(d) { return d.name; }); |
57 .text(function(d) { return d.name; }); |
58 |
58 |
59 element.style("height", height + "px"); |
59 element.style("height", height + "px"); |
60 }); |
60 }); |
61 |
61 |
62 this._super(...arguments); |
62 this._super(...arguments); |
63 }, |
63 }, |
64 |
64 |
65 createNodes: function(json) { |
65 createNodes: function(json) { |
66 var self = this; |
66 var self = this; |
67 var nodes = {}; |
67 var nodes = {}; |
68 var children = {}; |
68 var children = {}; |
69 |
69 |
70 Object.keys(json).forEach(function(key) { |
70 Object.keys(json).forEach(function(key) { |
71 var discourse = json[key]; |
71 var discourse = json[key]; |
72 var index = self.get('constants').DISCOURSES[key]; |
72 var index = self.get('constants').DISCOURSES[key]; |
73 var category = self.get('constants').DISCOURSE_CATEGORIES[index]; |
73 var category = self.get('constants').DISCOURSE_CATEGORIES[index]; |
74 |
74 |
75 children[index] = children[index] || {}; |
75 children[index] = children[index] || {}; |
76 children[index]['name'] = index; |
76 children[index]['name'] = index; |
77 children[index]['children'] = children[index]['children'] || []; |
77 children[index]['children'] = children[index]['children'] || []; |
78 children[index]['children'].push({ "name": discourse.label, "value": discourse.count, "fill": category.fill }); |
78 children[index]['children'].push({ "name": discourse.label, "value": discourse.count, "fill": category.fill }); |
79 }); |
79 }); |
80 |
80 |
81 nodes.children = []; |
81 nodes.children = []; |
82 Object.keys(children).forEach(function(key) { |
82 Object.keys(children).forEach(function(key) { |
83 nodes.children.push(children[key]); |
83 nodes.children.push(children[key]); |
84 }); |
84 }); |
85 |
85 |
86 return nodes; |
86 return nodes; |
87 }, |
87 }, |
88 |
88 |
89 setQueryString: function(field, value) { |
89 setQueryString: function(field, value) { |
90 var hash = document.location.href.split('?'); |
90 var hash = document.location.href.split('?'); |
91 var query_parameters = hash.pop(); |
91 var query_parameters = hash.pop(); |
92 |
92 |
93 // Unserialize |
93 // Unserialize |
94 var parameters = []; |
94 var parameters = []; |
95 query_parameters.split('&').forEach(function(parameter){ |
95 query_parameters.split('&').forEach(function(parameter){ |
96 var object = parameter.split('='); |
96 var object = parameter.split('='); |
97 object[1] && (parameters[object[0]] = object[1]); |
97 object[1] && (parameters[object[0]] = object[1]); |
98 }); |
98 }); |
99 |
99 |
100 // Serialize |
100 // Serialize |
101 var string = []; |
101 var string = []; |
102 parameters[field] = encodeURI(value); |
102 parameters[field] = encodeURI(value); |
103 Object.keys(parameters).forEach(function(key) { |
103 Object.keys(parameters).forEach(function(key) { |
104 string.push(key + '=' + parameters[key]); |
104 string.push(key + '=' + parameters[key]); |
105 }); |
105 }); |
106 |
106 |
107 return hash + '?' + string.join('&'); |
107 return hash + '?' + string.join('&'); |
108 } |
108 } |
109 |
109 |
110 }); |
110 }); |