--- 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; })
--- 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 {