# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1475428266 -7200
# Node ID 706f10bcdc3c8e183e3cc5d3aa995870114a4baf
# Parent  cd62bbf96322c7f82a82b840e5492a535b44b39e
Treemap shades to node count

diff -r cd62bbf96322 -r 706f10bcdc3c cms/app-client/app/components/visu-langues.js
--- a/cms/app-client/app/components/visu-langues.js	Sun Oct 02 15:27:15 2016 +0200
+++ b/cms/app-client/app/components/visu-langues.js	Sun Oct 02 19:11:06 2016 +0200
@@ -114,6 +114,14 @@
                     .style("top", function(d) { return y(d.y) + 'px'; });
             }
 
+            function hexadecimalToInteger(hexadecimal) {
+                var integer = [];
+                for(var i = 1; i < 7; i += 2) {
+                    integer.push(parseInt(hexadecimal.slice(i, i + 2), 16));
+                }
+                return integer;
+            }
+
             function display(d) {
                 breadcrumbs
                     .datum(d.parent)
@@ -130,8 +138,24 @@
                     .append("div")
                     .attr("data-id", function(d) { return d.id; });
 
+                var dMin = Math.min.apply(null, d._children.map(function(d){ return d.count; }));
+                var dMax = Math.max.apply(null, d._children.map(function(d){ return d.count; }));
+
+                function shade(d) {
+                    var color = "#becfd4";
+                    var aColor = hexadecimalToInteger(color);
+                    var solidColor = "#71848d";
+                    var aSolidColor = hexadecimalToInteger(solidColor);
+                    var aFillColor = [];
+                    for(var i = 0; i < 3; i++) {
+                        aFillColor.push((d.count - dMin) * (aSolidColor[i] - aColor[i]) / (dMax - dMin) + aColor[i]);
+                    }
+                    return '#' + (aFillColor.map(i => parseInt(i).toString(16))).join('');
+                }
+
                 node.attr("class", function(d) { return "node" + ( d.id === self.get('filter').get('language') ? " selected" : "" ); })
                     .call(position)
+                    .style("background-color", function(d) { return shade(d); })
                     .on("click", selectHandler);
 
                 node.filter(function(d) { return d._children; })
diff -r cd62bbf96322 -r 706f10bcdc3c cms/app-client/app/styles/tabs/langues.scss
--- a/cms/app-client/app/styles/tabs/langues.scss	Sun Oct 02 15:27:15 2016 +0200
+++ b/cms/app-client/app/styles/tabs/langues.scss	Sun Oct 02 19:11:06 2016 +0200
@@ -9,13 +9,14 @@
 }
 
 #tabs-langues .breadcrumbs:hover,
-#tabs-langues .node:hover {
-	background-color: $medium-blue;
-	color: $light-white;
+#tabs-langues .node:hover,
+#tabs-langues .node.selected {
+	background-color: $medium-blue!important;
+	color: $light-blue!important;
 }
 
 #tabs-langues .breadcrumbs {
-	background-color: $light-blue;
+	background-color: $medium-white;
     color: $medium-blue;
     position: relative;
 	line-height: 30px;
@@ -53,11 +54,7 @@
 	padding: 10px;
 	box-sizing: border-box;
 	background-color: $medium-white;
-}
-
-#tabs-langues .node.selected {
-	background-color: $medium-blue;
-	color: $light-blue;
+	color: $light-white;
 }
 
 #tabs-langues .node:hover {