Improve ui of the size widget

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 495005cb8b54ec5293c78f77e5498a98c9303cd7..bd98536bad0f004d264f636288bd99ef1be00067 100644 (file)
--- 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 41c7e7a8c544570bd58ea41666c3b5b3f0f66a37..555cd42c2fcf702c4abbcedd87f492e6b74e76e3 100644 (file)
--- 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 401ea7f193da4fac233a782715afc1b736a585e8..c6637744593917b0b9df935beed85c7ea8ecf17b 100644 (file)
--- 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={})