# HG changeset patch # User Chloe Laisne # Date 1472052122 -7200 # Node ID 5995d360e6ac6d0a60eebbdf541a4b51d37ebc19 # Parent e0fc9f698b9b803e854cd94199875533d48e67a2 Discourse bubbles radius range + font size diff -r e0fc9f698b9b -r 5995d360e6ac cms/app-client/app/components/discourses-component.js --- 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 + ' (' + d.value + ')'; }) .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 = []; diff -r e0fc9f698b9b -r 5995d360e6ac cms/app-client/app/styles/app.scss --- a/cms/app-client/app/styles/app.scss Wed Aug 24 15:01:54 2016 +0200 +++ b/cms/app-client/app/styles/app.scss Wed Aug 24 17:22:02 2016 +0200 @@ -100,7 +100,6 @@ position: relative; } -#tabs-discours, #tabs-chrono, #tabs-thematiques { padding: 0px 20px; diff -r e0fc9f698b9b -r 5995d360e6ac cms/app-client/app/styles/components/discourses-component.scss --- a/cms/app-client/app/styles/components/discourses-component.scss Wed Aug 24 15:01:54 2016 +0200 +++ b/cms/app-client/app/styles/components/discourses-component.scss Wed Aug 24 17:22:02 2016 +0200 @@ -11,6 +11,10 @@ color: $dark-blue; text-align: center; font-size: 12px; - text-transform: capitalize; position: absolute; +} + +.discourses-component .caption .item .count { + font-weight: bold; + display: block; } \ No newline at end of file