Show percentage in tooltips for histograms

achied · Jul 20, 2012 · 2e7ec7d · 2e7ec7d
1 parent 72f3acd
commit 2e7ec7d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/web/haml/distribution_gauge.haml b/web/haml/distribution_gauge.haml
@@ -3,7 +3,7 @@
   %ul.ui_numbers(style="float:right;")
     %li
       .val
-        %span.ui_value(data-value="#{@samples}")
+        %span.ui_value.samples(data-value="#{@samples}")
       .title Number of Samples
     %li
       .val
@@ -96,23 +96,23 @@
     no_headbar: true,
     default_style: 'line',
     series_resolutions: #{@zooms.to_json},
-    series: [      
+    series: [
-      { 
+      {
         name: 'Max',
         color: "#{FnordMetric::COLORS[-1]}",
         data: #{@mmm_timeseries_arr.map{|t,v| {:x=>t.to_i,:y=>v[:max]} }.to_json}
       },
-      { 
+      {
         name: 'Min',
         color: "#{FnordMetric::COLORS[-1]}",
         data: #{@mmm_timeseries_arr.map{|t,v| {:x=>t.to_i,:y=>v[:min]} }.to_json}
       },
-      { 
+      {
         name: 'Mean',
         color: "#{FnordMetric::COLORS[-2]}",
         data: #{@mmm_timeseries_arr.map{|t,v| {:x=>t.to_i,:y=>v[:avg].average} }.to_json}
       }
     ]
   });
 
-  
+
diff --git a/web/vendor/rickshaw.fnordmetric.js b/web/vendor/rickshaw.fnordmetric.js
@@ -2183,13 +2183,15 @@ Rickshaw.Graph.Renderer.Bar = Rickshaw.Class.create( Rickshaw.Graph.Renderer, {
       } );
 
 
+      var total = $('.ui_numbers .samples').data('value');
       $('.widget_histogram_bars .tooltip').remove();
       $('.widget_histogram_bars rect').each(function(hist_i) {
+        var percentage = Math.round(sdata[hist_i].y * 1000 / total) / 10;
         var left = parseInt($(this).offset().left);
         var top = parseInt($(this).offset().top) - 23;
         var tooltip = '<div class="tooltip" data-hist-id="' + hist_i
           + '" style="left:' + left + 'px; top: ' + top + 'px">'
-          + sdata[hist_i].y + '</div>';
+          + sdata[hist_i].y + ' (' + percentage + '%)' + '</div>';
         $(this).parents('.widget_histogram_bars:first').append(tooltip);
         $(this).attr('data-id', hist_i);
       });