cms/app-client/app/components/discourses-component.js
changeset 265 5995d360e6ac
parent 261 02e2396bcbbc
child 266 0e1880fa7bd3
--- a/cms/app-client/app/components/discourses-component.js	Wed Aug 24 15:01:54 2016 +0200
+++ b/cms/app-client/app/components/discourses-component.js	Wed Aug 24 17:22:02 2016 +0200
@@ -16,13 +16,22 @@
         var baseURL = env.rootURL.replace(/\/$/,"")+'/api/v1';
 
         d3.json(baseURL + "/discourses", function(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 width = self.$().parent().width();
             var height = self.$().parent().height() - self.$().siblings().height();
 
             var bubble = d3.layout.pack()
                 .sort(function comparator(a, b) { return a.value + b.value; })
                 .size([width, height])
-                .padding(250);
+                .value(function(d){
+                    return Math.floor((((d.value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin);
+                })
+                .padding(25);
 
             var element = d3.select('#' + self.get('elementId'));
 
@@ -37,15 +46,18 @@
                 .attr("class", function(d) { return d.children ? " category": " item"; });
 
             var item = caption.selectAll(".item")
-                .style("width", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; })
-                .style("height", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; })
-                .style("left", function(d) { return d.x - Math.max(10 + d.r, d.r) + 'px'; })
-                .style("top", function(d) { return d.y - Math.max(10 + d.r, d.r) + 'px'; })
+                .style("width", function(d) { return (d.r * 2) + 'px'; })
+                .style("height", function(d) { return (d.r * 2) + 'px'; })
+                .style("left", function(d) { return d.x - d.r + 'px'; })
+                .style("top", function(d) { return d.y - d.r + 'px'; })
+                .style("font-size", function(d) {
+                    return Math.floor((((d.value - oldMin) * (13 - 11)) / (oldMax - oldMin)) + 11) + 'px';
+                })
                 .on('click', function(d) {
                     self.get('filter').set('discourse', d.id);
                 });
             item.append("span")
-                .text(function(d) { return d.name; })
+                .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; })
                 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; })
                 .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; })
                 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
@@ -53,7 +65,7 @@
 
             var svg = element.append("svg")
                 .style("width", width + "px")
-                .style("height", width + "px")
+                .style("height", height + "px")
                 .attr("class", "bubble");
 
             var svg_nodes = svg.selectAll(".node")
@@ -68,7 +80,7 @@
                 });
 
             leaf.append("circle")
-                .attr("r", function(d) { return Math.max(7.5 + d.r * 2, d.r * 2); })
+                .attr("r", function(d) { return d.r; })
                 .attr("fill", function(d) { return d.fill; })
                 .attr("stroke", function() { return "#859097"; });
             element.style("height", height + "px");
@@ -90,7 +102,12 @@
             children[category_key] = children[category_key] || {};
             children[category_key]['name'] = category_key;
             children[category_key]['children'] = children[category_key]['children'] || [];
-            children[category_key]['children'].push({ "id": key, "name": discourse.label, "value": discourse.count, "fill": category_value.fill });
+            children[category_key]['children'].push({
+                'id': key,
+                'name': discourse.label,
+                'value': discourse.count,
+                'fill': category_value.fill
+            });
         });
 
         nodes.children = [];