Merge pull request #450 from rashidkpc/tooltip

Tooltip stacked values separation option

panels/histogram/editor.html

@@ -15,8 +15,8 @@
       <label class="small">Note</label><small> In <strong>{{panel.mode}}</strong> mode the configured field <strong>must</strong> be a numeric type</small>
     </div>
   </div>
-  <div class="row-fluid" style="margin-bottom:10px;">
   <h5>Chart Settings</h5>
+  <div class="row-fluid" style="margin-bottom:10px;">
     <div class="span1"> <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
     <div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
     <div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
@@ -59,3 +59,10 @@
       <label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
     </div>
   </div>
+  <h5>Tooltip Settings</h5>
+  <div class="row-fluid" style="margin-bottom:10px;">
+    <div class="span3">
+      <label class="small">Stacked Values <i class="icon-question-sign" bs-tooltip="'How should the values in stacked charts to be calculated?'"></i></label>
+      <select class="input-medium" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']"></select>
+    </div>
+  </div>
\ No newline at end of file

panels/histogram/module.js

@@ -72,6 +72,9 @@ angular.module('kibana.histogram', [])
     'y-axis'    : true,
     percentage  : false,
     interactive : true,
+    tooltip     : {
+      value_type: 'cumulative'
+    }
   };
 
   _.defaults($scope.panel,_d);
@@ -426,11 +429,17 @@ angular.module('kibana.histogram', [])
 
       var $tooltip = $('<div>');
       elem.bind("plothover", function (event, pos, item) {
+        var value;
         if (item) {
+          if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual')  {
+            value = item.datapoint[1] - item.datapoint[2];
+          } else {
+            value = item.datapoint[1];
+          }
           $tooltip
             .html(
               kbn.query_color_dot(item.series.color, 15) + ' ' +
-              item.datapoint[1].toFixed(0) + " @ " +
+              value + " @ " +
               moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
             )
             .place_tt(pos.pageX, pos.pageY);