SONAR-5207 Dynamic size of labels. Show labels in two lines. l10n messages.

2 files changed, 34 insertions, 20 deletions

diff --git a/sonar-server/src/main/coffee/widgets/treemap.coffee b/sonar-server/src/main/coffee/widgets/treemap.coffee
index 6b2ce67acca..72f4f2e04d0 100644
--- a/sonar-server/src/main/coffee/widgets/treemap.coffee
+++ b/sonar-server/src/main/coffee/widgets/treemap.coffee
@@ -1,7 +1,6 @@
 class Treemap extends window.SonarWidgets.BaseWidget
   sizeLow: 11
-  sizeMedium: 13
-  sizeHigh: 20
+  sizeHigh: 18
 
 
   constructor: ->
@@ -28,8 +27,13 @@ class Treemap extends window.SonarWidgets.BaseWidget
     @cells.style 'background-color', (d) =>
       if @colorMetric.value(d)? then @color @colorMetric.value(d) else @colorUnknown
 
+    prefix = @mostCommonPrefix _.pluck @components(), 'longName'
+    prefixLength = prefix.length
     @cellsInner = @box.selectAll('.treemap-inner').data nodes
-    @cellsInner.text (d) -> d.longName
+    @cellsInner.html (d) ->
+      if prefixLength > 0
+        "#{prefix}<br>#{d.longName.substr prefixLength}"
+      else d.longName
 
     @attachEvents cellsEnter
 
@@ -54,9 +58,12 @@ class Treemap extends window.SonarWidgets.BaseWidget
     @cells.style 'left', (d) -> "#{d.x}px"
     @cells.style 'top', (d) -> "#{d.y}px"
     @cells.style 'width', (d) -> "#{d.dx}px"
+    @cellsInner.style 'max-width', (d) -> "#{d.dx}px"
     @cells.style 'height', (d) -> "#{d.dy}px"
     @cells.style 'line-height', (d) -> "#{d.dy}px"
-    @cells.style 'font-size', (d) => "#{@size d.dx}px"
+    @cells.style 'font-size', (d) => "#{@size (d.dx / d.longName.length)}px"
+    @cells.classed 'treemap-cell-small', (d) ->
+      (d.dx / d.longName.length) < 1 || d.dy < 40
 
 
   renderLegend: (box) ->
@@ -120,7 +127,7 @@ class Treemap extends window.SonarWidgets.BaseWidget
       @color.range @colors5
     else
       @color.range @colors5r
-    @size = d3.scale.linear().domain([80, 300]).range([@sizeLow, @sizeHigh]).clamp true
+    @size = d3.scale.linear().domain([3, 15]).range([@sizeLow, @sizeHigh]).clamp true
 
     @treemap = d3.layout.treemap()
     @treemap.value (d) => @sizeMetric.value d
@@ -177,5 +184,19 @@ class Treemap extends window.SonarWidgets.BaseWidget
       else @stopDrilldown()
 
 
+  mostCommonPrefix: (strings) ->
+    sortedStrings = strings.slice(0).sort()
+    firstString = sortedStrings[0]
+    firstStringLength = firstString.length
+    lastString = sortedStrings[sortedStrings.length - 1]
+    i = 0
+    while i < firstStringLength && firstString.charAt(i) == lastString.charAt(i)
+      i++
+    prefix = firstString.substr 0, i
+    lastPrefixPart = _.last prefix.split /[\s\\\/]/
+    prefix.substr 0, prefix.length - lastPrefixPart.length
+
+
+
 
 window.SonarWidgets.Treemap = Treemap
diff --git a/sonar-server/src/main/less/style.less b/sonar-server/src/main/less/style.less
index 4d625437987..b431f3df0dd 100644
--- a/sonar-server/src/main/less/style.less
+++ b/sonar-server/src/main/less/style.less
@@ -2819,17 +2819,19 @@ div.rule-title {
   border-right: 1px solid #fff;
   border-bottom: 1px solid #fff;
   .box-sizing(border-box);
+  text-align: center;
   cursor: pointer;
 }
 
 .sonar-d3 .treemap-inner {
-  position: absolute;
-  z-index: 1;
-  top: 0; left: 0; bottom: 0; right: 0;
-  padding: 0 5px;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.2;
+  padding: 5px;
+  .box-sizing(border-box);
   color: #fff;
   font-weight: 300;
-  text-align: center;
+  text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2847,16 +2849,7 @@ div.rule-title {
 }
 
 .sonar-d3 .treemap-cell-small {
-  .treemap-inner { text-indent: -9999px; }
-  .treemap-dashboard {
-    top: 50%; left: 50%;
-    margin: -8px 0 0 -8px;
-  }
-}
-
-.sonar-d3 .treemap-cell-very-small {
-  .treemap-inner { text-indent: -9999px; }
-  .treemap-dashboard { display: none; }
+  .treemap-inner { display: none; }
 }
 
 .sonar-d3 .treemap-breadcrumbs {