Merge pull request #9 from spenceralger/2803

Added tooltips to endzones

src/kibana/components/vislib/components/tooltip/tooltip.js

@@ -3,6 +3,8 @@ define(function (require) {
     var _ = require('lodash');
     var $ = require('jquery');
 
+    var allContents = [];
+
     require('css!components/vislib/styles/main');
 
     /**
@@ -14,16 +16,20 @@ define(function (require) {
      * @param formatter {Function} Tooltip formatter
      * @param events {Constructor} Allows tooltip to return event response data
      */
-    function Tooltip(el, formatter, events) {
+    function Tooltip(id, el, formatter, events) {
       if (!(this instanceof Tooltip)) {
-        return new Tooltip(el, formatter, events);
+        return new Tooltip(id, el, formatter, events);
       }
+
+      this.id = id; // unique id for this tooltip type
       this.el = el;
+      this.order = 100; // higher ordered contents are rendered below the others
       this.formatter = formatter;
       this.events = events;
       this.containerClass = 'vis-wrapper';
       this.tooltipClass = 'vis-tooltip';
       this.tooltipSizerClass = 'vis-tooltip-sizing-clone';
+      this.showCondition = _.constant(true);
 
       this.$window = $(window);
       this.$chart = $(el).find('.' + this.containerClass);
@@ -63,6 +69,9 @@ define(function (require) {
       return function (selection) {
         var $tooltip = self.$get();
         var $sizer = self.$getSizer();
+        var id = self.id;
+        var order = self.order;
+
         var tooltipSelection = d3.select($tooltip.get(0));
 
         if (self.container === undefined || self.container !== d3.select(self.el).select('.' + self.containerClass)) {
@@ -76,44 +85,71 @@ define(function (require) {
 
           // only clear when we leave the chart, so that
           // moving between points doesn't make it reposition
-          self.previousPlacement = null;
+          self.$chart.removeData('previousPlacement');
         });
 
         selection.each(function (d, i) {
           var element = d3.select(this);
 
-          function show() {
-            var placement = self.previousPlacement = self.getTooltipPlacement({
+          function render(html, placement) {
+            allContents = _.filter(allContents, function (content) {
+              return content.id !== id;
+            });
+
+            if (html) allContents.push({ id: id, html: html, order: order });
+
+            var allHtml = _(allContents)
+            .sortBy('order')
+            .pluck('html')
+            .compact()
+            .join('\n');
+
+            if (allHtml) {
+              $tooltip.html(allHtml).css('visibility', 'visible');
+            } else {
+              $tooltip.css({
+                visibility: 'hidden',
+                left: '-500px',
+                top: '-500px'
+              });
+            }
+
+            if (placement) {
+              $tooltip.css({
+                left: placement.left + 'px',
+                top: placement.top + 'px'
+              });
+            }
+          }
+
+          element
+          .on('mousemove.tip', function update() {
+            if (!self.showCondition.call(element, d, i)) {
+              return render();
+            }
+
+            var event = d3.event;
+            var placement = self.getTooltipPlacement({
               $window: self.$window,
               $chart: self.$chart,
               $el: $tooltip,
               $sizer: $sizer,
-              event: d3.event,
-              prev: self.previousPlacement
+              event: event,
+              prev: self.$chart.data('previousPlacement')
             });
+
+            self.$chart.data('previousPlacement', placement);
             if (!placement) return;
 
             var events = self.events ? self.events.eventResponse(d, i) : d;
             var html = tooltipFormatter(events);
-            if (!html) return hide();
-
-            // return text and position for tooltip
-            return tooltipSelection
-            .html(html)
-            .style('visibility', 'visible')
-            .style('left', placement.left + 'px')
-            .style('top', placement.top + 'px');
-          }
+            if (!html) return render();
 
-          function hide() {
-            return tooltipSelection.style('visibility', 'hidden')
-              .style('left', '-500px')
-              .style('top', '-500px');
-          }
-
-          element
-          .on('mousemove.tip', show)
-          .on('mouseout.tip', hide);
+            render(html, placement);
+          })
+          .on('mouseout.tip', function () {
+            render();
+          });
         });
       };
     };

src/kibana/components/vislib/lib/chart_title.js

@@ -20,7 +20,7 @@ define(function (require) {
       }
 
       this.el = el;
-      this.tooltip = new Tooltip(el, function (d) {
+      this.tooltip = new Tooltip('chart-title', el, function (d) {
         return d.label;
       });
     }

src/kibana/components/vislib/lib/dispatch.js

@@ -1,6 +1,8 @@
 define(function (require) {
-  return function DispatchClass(d3) {
+  return function DispatchClass(d3, Private) {
     var _ = require('lodash');
+    var $ = require('jquery');
+    var Tooltip = Private(require('components/vislib/components/tooltip/tooltip'));
 
     /**
      * Handles event responses
@@ -162,7 +164,6 @@ define(function (require) {
       var xScale = this.handler.xAxis.xScale;
       var yScale = this.handler.xAxis.yScale;
       var brush = this.createBrush(xScale, svg);
-      var endZones = this.createEndZones(xScale, yScale, svg);
 
       function brushEnd() {
         var bar = d3.select(this);
@@ -243,69 +244,6 @@ define(function (require) {
       }
     };
 
-    /**
-     * Creates rects to show buckets outside of the ordered.min and max, returns rects
-     *
-     * @param xScale {Function} D3 xScale function
-     * @param svg {HTMLElement} Reference to SVG
-     * @method createEndZones
-     * @returns {D3.Selection}
-     */
-    Dispatch.prototype.createEndZones = function (xScale, yScale, svg) {
-      var attr = this.handler._attr;
-      var height = attr.height;
-      var width = attr.width;
-      var margin = attr.margin;
-      var ordered = this.handler.xAxis.ordered;
-      var xVals = this.handler.xAxis.xValues;
-      var color = '#004c99';
-      var data = [
-        {
-          x: 0,
-          w: xScale(ordered.min) > 0 ? xScale(ordered.min) : 0
-        },
-        {
-          x: xScale(ordered.max),
-          w: width - xScale(ordered.max) > 0 ? width - xScale(ordered.max) : 0
-        }
-      ];
-
-      // svg diagonal line pattern
-      var pattern = svg.append('defs')
-        .append('pattern')
-        .attr('id', 'DiagonalLines')
-        .attr('patternUnits', 'userSpaceOnUse')
-        .attr('patternTransform', 'rotate(45)')
-        .attr('x', '0')
-        .attr('y', '0')
-        .attr('width', '4')
-        .attr('height', '4')
-        .append('rect')
-        .attr('stroke', 'none')
-        .attr('fill', color)
-        .attr('width', 2)
-        .attr('height', 4);
-
-      var endzones = svg.selectAll('.layer')
-      .data(data)
-      .enter()
-      .insert('g', '.brush')
-      .attr('class', 'endzone')
-      .append('rect')
-      .attr('class', 'zone')
-      .attr('x', function (d) {
-        return d.x;
-      })
-      .attr('y', 0)
-      .attr('height', height - margin.top - margin.bottom)
-      .attr('width', function (d) {
-        return d.w;
-      })
-      .attr('fill', 'url(#DiagonalLines)');
-
-      return endzones;
-    };
-
 
     return Dispatch;
   };

src/kibana/components/vislib/partials/touchdown.html

@@ -0,0 +1,3 @@
+<p class="vis-tooltip-header bg-warning">
+  <i class="fa fa-warning"></i> This area is outside of the selected time range
+</p>

src/kibana/components/vislib/styles/_tooltip.less

@@ -1,21 +1,26 @@
 @import (reference) "../../../styles/main";
 
+@tooltip-padding: 8px;
+
 .vis-tooltip,
 .vis-tooltip-sizing-clone {
   visibility: hidden;
   line-height: 1.1;
   font-size: 12px;
   font-weight: normal;
-  padding: 8px;
+  padding: 0 @tooltip-padding @tooltip-padding;
   background: rgba(70, 82, 93, 0.95);
   color: @gray-lighter;
   border-radius: 4px;
   position: fixed;
   z-index: 120;
   word-wrap: break-word;
   max-width: 40%;
+  overflow: hidden;
 
   table {
+    margin: @tooltip-padding 0 0;
+
     td,th {
       padding: 2px 4px;
 
@@ -40,6 +45,16 @@
   }
 }
 
+.vis-tooltip-header {
+  margin: 0 (@tooltip-padding * -1);
+  padding: (@tooltip-padding / 2) @tooltip-padding;
+  text-align: center;
+
+  &:last-child {
+    margin-bottom: (@tooltip-padding * -1);
+  }
+}
+
 .vis-tooltip-sizing-clone {
   visibility: hidden;
   position: fixed;

src/kibana/components/vislib/visualizations/_chart.js

@@ -31,8 +31,7 @@ define(function (require) {
         var formatter = this.handler.data.get('tooltipFormatter');
 
         // Add tooltip
-        this.tooltip = new Tooltip($el, formatter, events);
-
+        this.tooltip = new Tooltip('chart', $el, formatter, events);
       }
 
       this._attr = _.defaults(handler._attr || {}, {});