Merge pull request #452 from spenceralger/tooltip-header

Tooltip series identifier

panels/histogram/editor.html

@@ -21,7 +21,7 @@
     <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>
     <div class="span1"> <label class="small">Stack</label><input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
-    <!--<div class="span1" ng-show="panel.stack"> <label class="small" bs-tooltip="'Stack as a percentage of total'">Percent</label><input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage"></div>-->
+    <!--<div class="span1" ng-show="panel.stack">Percent <tip>Stack as a percentage of total</tip></label><input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage"></div>-->
     <div class="span1"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
     <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>
@@ -62,7 +62,11 @@
   <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>
+      <label class="small">Stacked Values <tip>How should the values in stacked charts to be calculated?></tip></label>
       <select class="input-medium" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']"></select>
     </div>
+    <div class="span3">
+      <label class="small">Display Query <tip>If an alias is set, it will be shown in the tooltip. If not, should it show the query?</tip></label>
+      <input type="checkbox" ng-model="panel.tooltip.query_as_alias" />
+    </div>
   </div>

panels/histogram/module.js

@@ -73,7 +73,8 @@ angular.module('kibana.histogram', [])
     percentage  : false,
     interactive : true,
     tooltip     : {
-      value_type: 'cumulative'
+      value_type: 'cumulative',
+      query_as_alias: false
     }
   };
 
@@ -429,8 +430,16 @@ angular.module('kibana.histogram', [])
 
       var $tooltip = $('<div>');
       elem.bind("plothover", function (event, pos, item) {
-        var value;
+        var group, value;
         if (item) {
+          if (item.series.info.alias || scope.panel.tooltip.query_as_alias) {
+            group = '<small style="font-size:0.9em;">' +
+              '<i class="icon-circle" style="color:'+item.series.color+';"></i>' + ' ' +
+              (item.series.info.alias || item.series.info.query)+
+            '</small><br>';
+          } else {
+            group = kbn.query_color_dot(item.series.color, 15) + ' ';
+          }
           if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual')  {
             value = item.datapoint[1] - item.datapoint[2];
           } else {
@@ -438,9 +447,7 @@ angular.module('kibana.histogram', [])
           }
           $tooltip
             .html(
-              kbn.query_color_dot(item.series.color, 15) + ' ' +
-              value + " @ " +
-              moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
+              group + value + " @ " + moment(item.datapoint[0]).format('MM/DD HH:mm:ss')
             )
             .place_tt(pos.pageX, pos.pageY);
         } else {