Merge pull request elastic#2820 from stormpython/2803

Remove Clipping

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/data.js

@@ -114,41 +114,6 @@ define(function (require) {
       return visData;
     };
 
-    /**
-     * Function to determine whether to display the legend or not
-     * Displays legend when more than one series of data present
-     *
-     * @method isLegendShown
-     * @returns {boolean}
-     */
-    Data.prototype.isLegendShown = function () {
-      var isLegend = false;
-      var visData = this.getVisData();
-      var sameSeriesLabel = true;
-      var seriesLabel;
-
-      _.forEach(visData, function countSeriesLength(obj) {
-        var rootSeries = obj.series || (obj.slices && obj.slices.children);
-        var dataLength = rootSeries ? rootSeries.length : 0;
-        var label = dataLength === 1 ? rootSeries[0].label || rootSeries[0].name : undefined;
-        var children = (obj.slices && obj.slices.children && obj.slices.children[0] && obj.slices.children[0].children);
-
-        if (!seriesLabel) {
-          seriesLabel = label;
-        }
-
-        if (seriesLabel !== label) {
-          sameSeriesLabel = false;
-        }
-
-        if (dataLength > 1 || children || !sameSeriesLabel) {
-          isLegend = true;
-        }
-      });
-
-      return isLegend;
-    };
-
     /**
      * Returns array of chart data objects for pie data objects
      *
@@ -245,9 +210,9 @@ define(function (require) {
       // push the calculated y value to the initialized array (arr)
       _.forEach(this.flatten(), function (series) {
         if (self.shouldBeStacked(series) && !grouped) {
-          return arr.push(self.getYStackMax(series));
+          return arr.push(self._getYMax(series, self._getYStack));
         }
-        return arr.push(self.getYMax(series));
+        return arr.push(self._getYMax(series, self._getY));
       });
 
       return _.max(arr);
@@ -261,53 +226,33 @@ define(function (require) {
      * @returns {*} Array of data objects with x, y, y0 keys
      */
     Data.prototype.stackData = function (series) {
+      // SHould not stack values on line chart
+      if (this._attr.type === 'line') return series;
       return this._attr.stack(series);
     };
 
     /**
-     * Calculates the largest y stack value among all data objects
-     *
-     * @method getYStackMax
-     * @param series {Array} Array of data objects
-     * @returns {Number} Y stack max value
+     * Returns the max Y axis value for a `series` array based on
+     * a specified callback function (calculation).
      */
-    Data.prototype.getYStackMax = function (series) {
-      var isOrdered = (this.data.ordered && this.data.ordered.date);
-      var minDate = isOrdered ? this.data.ordered.min : undefined;
-      var maxDate = isOrdered ? this.data.ordered.max : undefined;
-
+    Data.prototype._getYMax = function (series, calculation) {
       return d3.max(this.stackData(series), function (data) {
-        return d3.max(data, function (d) {
-          if (isOrdered) {
-            return (d.x >= minDate && d.x <= maxDate) ? d.y0 + d.y : undefined;
-          }
-
-          return d.y0 + d.y;
-        });
+        return d3.max(data, calculation);
       });
     };
 
     /**
-     * Calculates the Y domain max value
-     *
-     * @method getMax
-     * @param series {Array} Array of data objects
-     * @returns {Number} Y domain max value
+     * Calculates the y stack value for each data object
      */
-    Data.prototype.getYMax = function (series) {
-      var isOrdered = (this.data.ordered && this.data.ordered.date);
-      var minDate = isOrdered ? this.data.ordered.min : undefined;
-      var maxDate = isOrdered ? this.data.ordered.max : undefined;
-
-      return d3.max(series, function (data) {
-        return d3.max(data, function (d) {
-          if (isOrdered) {
-            return (d.x >= minDate && d.x <= maxDate) ? d.y : undefined;
-          }
-
-          return d.y;
-        });
-      });
+    Data.prototype._getYStack = function (d) {
+      return d.y0 + d.y;
+    };
+
+    /**
+     * Calculates the Y max value
+     */
+    Data.prototype._getY = function (d) {
+      return d.y;
     };
 
     /**

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
@@ -158,7 +160,9 @@ define(function (require) {
      */
     Dispatch.prototype.addBrushEvent = function (svg) {
       if (!this.isBrushable()) return;
+
       var xScale = this.handler.xAxis.xScale;
+      var yScale = this.handler.xAxis.yScale;
       var brush = this.createBrush(xScale, svg);
 
       function brushEnd() {
@@ -206,40 +210,41 @@ define(function (require) {
 
       // Brush scale
       var brush = d3.svg.brush()
-        .x(xScale)
-        .on('brushend', function brushEnd() {
-
-          // Assumes data is selected at the chart level
-          // In this case, the number of data objects should always be 1
-          var data = d3.select(this).data()[0];
-          var isTimeSeries = (data.ordered && data.ordered.date);
-
-          // Allows for brushing on d3.scale.ordinal()
-          var selected = xScale.domain().filter(function (d) {
-            return (brush.extent()[0] <= xScale(d)) && (xScale(d) <= brush.extent()[1]);
-          });
-          var range = isTimeSeries ? brush.extent() : selected;
-
-          return dispatch.brush({
-            range: range,
-            config: attr,
-            e: d3.event,
-            data: data
-          });
+      .x(xScale)
+      .on('brushend', function brushEnd() {
+
+        // Assumes data is selected at the chart level
+        // In this case, the number of data objects should always be 1
+        var data = d3.select(this).data()[0];
+        var isTimeSeries = (data.ordered && data.ordered.date);
+
+        // Allows for brushing on d3.scale.ordinal()
+        var selected = xScale.domain().filter(function (d) {
+          return (brush.extent()[0] <= xScale(d)) && (xScale(d) <= brush.extent()[1]);
         });
+        var range = isTimeSeries ? brush.extent() : selected;
+
+        return dispatch.brush({
+          range: range,
+          config: attr,
+          e: d3.event,
+          data: data
+        });
+      });
 
       // if `addBrushing` is true, add brush canvas
       if (dispatch.on('brush')) {
         svg.insert('g', 'g')
-          .attr('class', 'brush')
-          .call(brush)
-          .selectAll('rect')
-          .attr('height', height - margin.top - margin.bottom);
+        .attr('class', 'brush')
+        .call(brush)
+        .selectAll('rect')
+        .attr('height', height - margin.top - margin.bottom);
 
         return brush;
       }
     };
 
+
     return Dispatch;
   };
 });