From 260939349784a1b3bccd447cd5ab7231ec7c50cc Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Thu, 15 May 2014 10:03:34 +0200
Subject: [PATCH] Improve ui of the size widget

---
 .../sonar/plugins/core/widgets/size.html.erb  | 44 +++++++++----------
 sonar-server/src/main/less/style.less         | 27 ++++++++++++
 .../WEB-INF/app/helpers/application_helper.rb |  8 +++-
 3 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb
index 495005cb8b5..bd98536bad0 100644
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb
@@ -25,30 +25,28 @@
             <%= dashboard_configuration.selected_period? ? format_variation(ncloc) : trend_icon(ncloc) -%>
           </p>
           <% if ncloc_language_dist_hash %>
-            <table class="clear width100">
-              <%
-                 max = ncloc_language_dist_hash.max_by{|_k,v| v.to_i}[1].to_i
+            <div class="widget-histogram">
+              <table class="clear width100">
+                <%
+                   max = ncloc_language_dist_hash.max_by{|_k,v| v.to_i}[1].to_i
 
-                 # Sort lines language distribution by language name
-                 languages_by_key = Hash[languages.collect { |l| [l.getKey(), l.getName] }]
-                 puts "#### " + languages_by_key.inspect
-                 ncloc_language_dist_hash.sort {|v1,v2| (languages_by_key[v1[0]] ? languages_by_key[v1[0]].to_s : v1[0]) <=> (languages_by_key[v2[0]] ? languages_by_key[v2[0]].to_s : v2[0]) }.each do |language_key, language_ncloc|
-              %>
-              <tr>
-                <td>
-                  <% language = languages.find { |l| l.getKey()==language_key.to_s } -%>
-                  <%= language ? language.getName() : language_key -%>
-                </td>
-                <td style="padding: 0 5px;" align="right">
-                  <%= ncloc.format_numeric_value(language_ncloc) %>
-                </td>
-                <td>&nbsp;</td>
-                <td align="left" style="padding-bottom:2px; padding-top:2px;">
-                  <%= barchart(:width => 70, :percent => (100 * language_ncloc.to_i / max).to_i)%>
-                </td>
-              </tr>
-              <% end %>
-            </table>
+                   # Sort lines language distribution by language name
+                   languages_by_key = Hash[languages.collect { |l| [l.getKey(), l.getName] }]
+                   puts "#### " + languages_by_key.inspect
+                   ncloc_language_dist_hash.sort {|v1,v2| (languages_by_key[v1[0]] ? languages_by_key[v1[0]].to_s : v1[0]) <=> (languages_by_key[v2[0]] ? languages_by_key[v2[0]].to_s : v2[0]) }.each do |language_key, language_ncloc|
+                %>
+                <tr>
+                  <td class="widget-histogram-label">
+                    <% language = languages.find { |l| l.getKey()==language_key.to_s } -%>
+                    <%= language ? language.getName() : language_key -%>
+                  </td>
+                  <td class="widget-histogram-bar">
+                    <%= barchart(:width => 70, :percent => (100 * language_ncloc.to_i / max).to_i, :value => ncloc.format_numeric_value(language_ncloc), :color => '#1f77b4')%>
+                  </td>
+                </tr>
+                <% end %>
+              </table>
+            </div>
           <% end %>
 
         <% else %>
diff --git a/sonar-server/src/main/less/style.less b/sonar-server/src/main/less/style.less
index 41c7e7a8c54..555cd42c2fc 100644
--- a/sonar-server/src/main/less/style.less
+++ b/sonar-server/src/main/less/style.less
@@ -2026,6 +2026,33 @@ ul.bullet li {
   padding: 0.1em;
 }
 
+.widget-histogram {
+  margin-top: 10px;
+}
+
+.widget-histogram-label {
+  padding-right: 10px;
+  line-height: 16px;
+  font-size: 12px;
+}
+
+.widget-histogram-bar {
+  line-height: 16px;
+
+  div.barchart > div {
+    display: inline-block;
+    vertical-align: middle;
+    height: 16px;
+    border-top: 1px solid #fff;
+  }
+
+  .barchart-value {
+    vertical-align: middle;
+    padding-left: 6px;
+    font-size: 12px;
+  }
+}
+
 div.barchart {
   border: 0;
   margin: 0;
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb b/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb
index 401ea7f193d..c6637744593 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb
@@ -392,7 +392,13 @@ module ApplicationHelper
     end
 
     align=(percent<0 ? 'float: right;' : nil)
-    "<div class='barchart' style='width: #{width}px' title='#{options[:tooltip]}'><div style='width: #{percent.abs}%;background-color:#{color};#{align}'></div></div>"
+    html = "<div class='barchart' style='width: #{width}px' title='#{options[:tooltip]}'><div style='width: #{percent.abs}%;background-color:#{color};#{align}'></div>"
+    value = options[:value]
+    if value
+      html += "<span class='barchart-value'>#{value}</span>"
+    end
+    html += "</div>"
+    html
   end
 
   def chart(parameters, options={})
-- 
2.39.5