Merge pull request #437 from spenceralger/better_tooltips

Better tooltips
elastic · Oct 1, 2014 · 7dfb1cb · 7dfb1cb
2 parents 91c2644 + 70eb086
commit 7dfb1cb
Show file tree

Hide file tree

Showing 19 changed files with 755 additions and 209 deletions.
diff --git a/src/kibana/components/vis/_agg_config.js b/src/kibana/components/vis/_agg_config.js
@@ -122,6 +122,11 @@ define(function (require) {
       );
     };
 
+    AggConfig.prototype.makeLabel = function () {
+      if (!this.type) return '';
+      return this.type.makeLabel(this);
+    };
+
     return AggConfig;
   };
 });
diff --git a/src/kibana/components/vis_types/converters/histogram.js b/src/kibana/components/vis_types/converters/histogram.js
@@ -1,9 +1,14 @@
 define(function (require) {
-  return function HistogramConverterFn(Private, timefilter) {
+  return function HistogramConverterFn(Private, timefilter, $compile, $rootScope) {
     var _ = require('lodash');
+    var $ = require('jquery');
     var moment = require('moment');
     var interval = require('utils/interval');
 
+    var $tooltipScope = $rootScope.$new();
+    var $tooltip = $(require('text!components/vis_types/tooltips/histogram.html'));
+    $compile($tooltip)($tooltipScope);
+
     return function (chart, columns, rows) {
       // index of color
       var iColor = _.findIndex(columns, { categoryName: 'group' });
@@ -79,24 +84,41 @@ define(function (require) {
 
 
       // setup the formatter for the label
-      chart.tooltipFormatter = function (datum) {
-        var vals = [['x', colX], ['y', colY]]
-        .map(function (set) {
-          var axis = set[0];
-          var col = set[1];
-          var val = datum[axis];
-
-          var name = (col.field && col.field.name) || col.label || axis;
+      chart.tooltipFormatter = function (event) {
+        $tooltipScope.details = columns.map(function (col) {
+          var datum = event.point;
+          var aggConfig = col.aggConfig;
+
+          var label;
+          var val;
+
+          switch (col) {
+          case colX:
+            label = 'x';
+            val = datum.x;
+            break;
+          case colY:
+            label = 'y';
+            val = datum.y;
+            break;
+          case colColor:
+            label = 'color';
+            val = datum.label;
+            break;
+          }
+
+          label = aggConfig.makeLabel() || (col.field && col.field.name) || label;
           if (col.field) val = col.field.format.convert(val);
 
-          return name + ': ' + val;
-        }).join('<br>');
+          return {
+            label: label,
+            value: val
+          };
 
-        var out = '';
-        if (datum.label) out += colColor.field.name + ': ' + datum.label + '<br>';
-        out += vals;
+        });
 
-        return out;
+        $tooltipScope.$apply();
+        return $tooltip[0].outerHTML;
       };
 
       var series = chart.series = [];

diff --git a/src/kibana/components/vis_types/converters/pie.js b/src/kibana/components/vis_types/converters/pie.js
@@ -1,9 +1,14 @@
 define(function (require) {
-  return function HistogramConverterFn(Private, timefilter) {
+  return function HistogramConverterFn(Private, timefilter, $compile, $rootScope, $sce) {
     var _ = require('lodash');
+    var $ = require('jquery');
     var moment = require('moment');
     var interval = require('utils/interval');
 
+    var $tooltip = $(require('text!components/vis_types/tooltips/pie.html'));
+    var $tooltipScope = $rootScope.$new();
+    $compile($tooltip)($tooltipScope);
+
     return function (chart, columns, rows) {
 
       // Checks for obj.parent.name and
@@ -24,31 +29,44 @@ define(function (require) {
       }
 
       // tooltip formatter for pie charts
-      chart.tooltipFormatter = function (datum) {
-        function sumValue(sum, cur) {
-          return sum + cur.value;
+      chart.tooltipFormatter = function (event) {
+        var datum = event.point;
+        var parent;
+        var sum;
+
+        // the sum of values at all levels/generations is the same, but levels
+        // are seperated by their parents so the root is the simplest to find
+        for (parent = datum; parent; parent = parent.parent) {
+          sum = parent.value;
         }
 
-        // find the root datum
-        var root = datum;
-        while (root.parent) root = root.parent;
+        var rows = $tooltipScope.rows = [];
+        for (parent = datum; parent.parent; parent = parent.parent) {
+          var i = parent.depth - 1;
+          var col = columns[i];
 
-        // the value of the root datum is the sum of every row. coincidental? not certain
-        var sum = root.value;
+          // field/agg details
+          var group = (col.field && col.field.name) || col.label || ('level ' + datum.depth);
 
-        var labels = [];
-        for (var cur = datum; cur.parent; cur = cur.parent) {
-          var label = cur.name + ': ' + cur.value;
-          label += ' (' + Math.round((cur.value / sum) * 100) + '%)';
+          // field value that defines the bucket
+          var bucket = parent.name;
+          if (col.field) bucket = col.field.format.convert(bucket);
 
-          if (cur === datum) {
-            label = '<b>' + label + '</b>';
-          }
+          // metric for the bucket
+          var val = parent.value;
 
-          labels.unshift(label);
+          rows.unshift({
+            spacer: $sce.trustAsHtml(_.repeat('&nbsp;', i)),
+            field: group,
+            bucket: bucket,
+            metric: val + ' (' + Math.round((parent.value / sum) * 100) + '%)'
+          });
         }
 
-        return labels.join('<br>');
+        $tooltipScope.metricCol = _.find(columns, { categoryName: 'metric' });
+
+        $tooltipScope.$apply();
+        return $tooltip[0].outerHTML;
       };
 
 

diff --git a/src/kibana/components/vis_types/tooltips/histogram.html b/src/kibana/components/vis_types/tooltips/histogram.html
@@ -0,0 +1,14 @@
+<table>
+  <thead>
+    <tr>
+      <th></th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr ng-repeat="detail in details">
+      <td>{{detail.label}}</td>
+      <td>{{detail.value}}</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/src/kibana/components/vis_types/tooltips/pie.html b/src/kibana/components/vis_types/tooltips/pie.html
@@ -0,0 +1,16 @@
+<table>
+  <thead>
+    <tr>
+      <th>field</th>
+      <th>value</th>
+      <th>{{metricCol.label}}</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr ng-repeat="row in rows track by $index">
+      <td><span ng-bind-html="row.spacer"></span>{{row.field}}</td>
+      <td>{{row.bucket}}</td>
+      <td>{{row.metric}}</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/src/kibana/components/vislib/lib/dispatch.js b/src/kibana/components/vislib/lib/dispatch.js
@@ -5,16 +5,16 @@ define(function (require) {
     /**
      * Events Class
      */
-    function Dispatch(vis, chartData) {
+    function Dispatch(handler, chartData) {
       if (!(this instanceof Dispatch)) {
-        return new Dispatch(vis, chartData);
+        return new Dispatch(handler, chartData);
       }
-      var type = vis._attr.type;
+      var type = handler._attr.type;
 
-      this.vis = vis;
+      this.handler = handler;
       this.chartData = chartData;
-      this.color = type === 'pie' ? vis.data.getPieColorFunc() : vis.data.getColorFunc();
-      this._attr = _.defaults(vis._attr || {}, {
+      this.color = type === 'pie' ? handler.data.getPieColorFunc() : handler.data.getColorFunc();
+      this._attr = _.defaults(handler._attr || {}, {
         yValue: function (d) {
           return d.y;
         },
@@ -24,24 +24,48 @@ define(function (require) {
 
     // Response to `click` and `hover` events
     Dispatch.prototype.eventResponse = function (d, i) {
-      var label = d.label ? d.label : d.name;
+      var label = d.label;
       var getYValue = this._attr.yValue;
       var color = this.color;
       var chartData = this.chartData;
       var attr = this._attr;
-      var vis = this.vis;
+      var handler = this.handler;
 
       return {
-        value     : getYValue(d, i),
-        point     : d,
-        label     : label,
-        color     : color(label),
+        value: getYValue(d, i),
+        point: d,
+        label: label,
+        color: color(label),
         pointIndex: i,
-        series    : chartData.series,
-        config    : attr,
-        data      : chartData,
-        e         : d3.event,
-        vis       : vis
+        series: chartData.series,
+        config: attr,
+        data: chartData,
+        e: d3.event,
+        handler: handler
+      };
+    };
+
+    // Pie response to `click` and `hover` events
+    Dispatch.prototype.pieResponse = function (d, i) {
+      var label = d.key;
+      var color = this.color;
+      var chartData = this.chartData;
+      var attr = this._attr;
+      var handler = this.handler;
+
+      return {
+        value: d.value,
+        point: d,
+        label: label,
+        color: color(label),
+        pointIndex: i,
+        children: d.children ? d.children : undefined,
+        parent: d.parent ? d.parent : undefined,
+        appConfig: d.appConfig,
+        config: attr,
+        data: chartData,
+        e: d3.event,
+        handler: handler
       };
     };
 

diff --git a/src/kibana/components/vislib/lib/handler/handler.js b/src/kibana/components/vislib/lib/handler/handler.js
@@ -4,7 +4,6 @@ define(function (require) {
 
     var Data = Private(require('components/vislib/lib/data'));
     var Layout = Private(require('components/vislib/lib/layout/layout'));
-    var Tooltip = Private(require('components/vislib/lib/tooltip'));
 
     /*
      * Handles building all the components of the visualization
@@ -34,10 +33,6 @@ define(function (require) {
       this.chartTitle = opts.chartTitle;
       this.axisTitle = opts.axisTitle;
 
-      if (this._attr.addTooltip) {
-        this.tooltip = new Tooltip(this.el, this.data.get('tooltipFormatter'));
-      }
-
       if (this._attr.addLegend && this.data.isLegendShown()) {
         this.legend = opts.legend;
       }

diff --git a/src/kibana/components/vislib/lib/legend.js b/src/kibana/components/vislib/lib/legend.js
@@ -25,7 +25,6 @@ define(function (require) {
       this.el = el;
       this.labels = labels;
       this.color = color;
-      this.tooltip = new Tooltip(this.el, function (d) { return d; });
       this._attr = _.defaults(_attr || {}, {
         // Legend specific attributes
         'legendClass' : 'legend-col-wrapper',
@@ -109,10 +108,6 @@ define(function (require) {
         }
       });
 
-      headerIcon
-      .datum(['Legend'])
-      .call(self.tooltip.render());
-
       visEl.selectAll('.color')
         .on('mouseover', function (d) {
           var liClass = '.' + self.colorToClass(self.color(d));