From 73253bb54d8fbdafaf8a9eb77f006104c2dc689a Mon Sep 17 00:00:00 2001
From: Spencer Alger <spencer@spenceralger.com>
Date: Fri, 30 Aug 2013 14:11:28 -0700
Subject: [PATCH 1/2] added a tooltip settings section to the histogram
 settings editor. Currently the only setting defines which value is displayed
 on stacked charts.

---
 panels/histogram/editor.html | 33 ++++++++++++++++++++-------------
 panels/histogram/module.js   | 11 ++++++++++-
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/panels/histogram/editor.html b/panels/histogram/editor.html
index 30be4aacbc7..6ace9611b6a 100644
--- a/panels/histogram/editor.html
+++ b/panels/histogram/editor.html
@@ -1,6 +1,6 @@
   <div class="row-fluid">
     <div class="span2">
-      <label class="small">Mode</label> 
+      <label class="small">Mode</label>
       <select ng-change="set_refresh(true)" class="input-small" ng-model="panel.mode" ng-options="f for f in ['count','min','mean','max','total']"></select>
     </div>
     <div class="span2">
@@ -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>
+  <h5>Chart Settings</h5>
   <div class="row-fluid" style="margin-bottom:10px;">
-    <h5>Chart Settings</h5>
     <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>
@@ -26,36 +26,43 @@
     <div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
     <div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
     <div class="span2" ng-show="panel.lines">
-      <label class="small">Line Fill</label> 
+      <label class="small">Line Fill</label>
       <select class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
     </div>
     <div class="span2" ng-show="panel.lines">
-      <label class="small">Line Width</label> 
+      <label class="small">Line Width</label>
       <select class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
     </div>
-  </div> 
-  <div class="row-fluid">  
+  </div>
+  <div class="row-fluid">
     <div class="span2">
-      <label class="small">Time correction</label> 
+      <label class="small">Time correction</label>
       <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
     </div>
     <div class="span1"> <label class="small">Selectable</label><input type="checkbox" ng-model="panel.interactive" ng-checked="panel.interactive"></div>
-    <div class="span2"> 
+    <div class="span2">
       <label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
     </div>
-    <div class="span2"> 
+    <div class="span2">
       <label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
     </div>
-    <div class="span2" ng-show='panel.auto_int'> 
+    <div class="span2" ng-show='panel.auto_int'>
       <label class="small">Resolution</label><input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/>
     </div>
-    <div class="span3" ng-show='panel.auto_int'> 
+    <div class="span3" ng-show='panel.auto_int'>
       <label class="small">Shoot for this many data points, rounding to sane intervals</label>
     </div>
-    <div class="span2" ng-hide='panel.auto_int'> 
+    <div class="span2" ng-hide='panel.auto_int'>
       <label class="small">Interval</label><input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
     </div>
-    <div class="span3" ng-hide='panel.auto_int'> 
+    <div class="span3" ng-hide='panel.auto_int'>
       <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" bs-tooltip="'How should the values in stacked charts to be calculated?'">Stacked Values</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
diff --git a/panels/histogram/module.js b/panels/histogram/module.js
index 5bea7af6190..b3ff837544f 100644
--- a/panels/histogram/module.js
+++ b/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);

From 603f66eeb12279ed3f0c49396b1b6122a8ef7bdb Mon Sep 17 00:00:00 2001
From: Rashid Khan <rashidkpc@gmail.com>
Date: Fri, 30 Aug 2013 14:49:36 -0700
Subject: [PATCH 2/2] Add question mark icon for tooltip

---
 panels/histogram/editor.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panels/histogram/editor.html b/panels/histogram/editor.html
index 6ace9611b6a..c200849fa6c 100644
--- a/panels/histogram/editor.html
+++ b/panels/histogram/editor.html
@@ -62,7 +62,7 @@
   <h5>Tooltip Settings</h5>
   <div class="row-fluid" style="margin-bottom:10px;">
     <div class="span3">
-      <label class="small" bs-tooltip="'How should the values in stacked charts to be calculated?'">Stacked Values</label>
+      <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