added a tooltip settings section to the histogram settings editor. Cu…

…rrently the only setting defines which value is displayed on stacked charts.
elastic · Aug 30, 2013 · 73253bb · 73253bb
1 parent 2e9bded
commit 73253bb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git 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 @@ <h5>Chart Settings</h5>
     <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>
diff --git 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);