Backport of area chart opacity fix - 4.4

src/ui/public/vislib/lib/dispatch.js

@@ -106,14 +106,17 @@ define(function (require) {
       var isClickable = this.listenerCount('click') > 0;
       var addEvent = this.addEvent;
       var $el = this.handler.el;
+      if (!this.handler.highlight) {
+        this.handler.highlight = self.highlight;
+      }
 
       function hover(d, i) {
         // Add pointer if item is clickable
         if (isClickable) {
           self.addMousePointer.call(this, arguments);
         }
 
-        self.highlightLegend.call(this, $el);
+        self.handler.highlight.call(this, $el);
         self.emit('hover', self.eventResponse(d, i));
       }
 
@@ -129,9 +132,12 @@ define(function (require) {
       var self = this;
       var addEvent = this.addEvent;
       var $el = this.handler.el;
+      if (!this.handler.unHighlight) {
+        this.handler.unHighlight = self.unHighlight;
+      }
 
       function mouseout() {
-        self.unHighlightLegend.call(this, $el);
+        self.handler.unHighlight.call(this, $el);
       }
 
       return addEvent('mouseout', mouseout);
@@ -225,21 +231,24 @@ define(function (require) {
      * Mouseover Behavior
      *
      * @param element {D3.Selection}
-     * @method highlightLegend
+     * @method highlight
      */
-    Dispatch.prototype.highlightLegend = function (element) {
+    Dispatch.prototype.highlight = function (element) {
       var label = this.getAttribute('data-label');
       if (!label) return;
-      $('[data-label]', element.parentNode).not(function (els, el) { return $(el).data('label') !== label; }).css('opacity', 0.5);
+      //Opacity 1 is needed to avoid the css application
+      $('[data-label]', element.parentNode).css('opacity', 1).not(
+        function (els, el) { return `${$(el).data('label')}` === label;}
+      ).css('opacity', 0.5);
     };
 
     /**
      * Mouseout Behavior
      *
      * @param element {D3.Selection}
-     * @method unHighlightLegend
+     * @method unHighlight
      */
-    Dispatch.prototype.unHighlightLegend = function (element) {
+    Dispatch.prototype.unHighlight = function (element) {
       $('[data-label]', element.parentNode).css('opacity', 1);
     };
 

src/ui/public/vislib/visualizations/area_chart.js

@@ -32,7 +32,26 @@ define(function (require) {
       if (this.isOverlapping) {
 
         // Default opacity should return to 0.6 on mouseout
-        handler._attr.defaultOpacity = 0.6;
+        var defaultOpacity = 0.6;
+        handler._attr.defaultOpacity = defaultOpacity;
+        handler.highlight = function (element) {
+          var label = this.getAttribute('data-label');
+          if (!label) return;
+
+          var highlightOpacity = 0.8;
+          var highlightElements = $('[data-label]', element.parentNode).filter(
+            function (els, el) {
+              return `${$(el).data('label')}` === label;
+            });
+          $('[data-label]', element.parentNode).not(highlightElements).css('opacity', defaultOpacity / 2); // half of the default opacity
+          highlightElements.css('opacity', highlightOpacity);
+        };
+        handler.unHighlight = function (element) {
+          $('[data-label]', element).css('opacity', defaultOpacity);
+
+          //The legend should keep max opacity
+          $('[data-label]', $(element).siblings()).css('opacity', 1);
+        };
       }
 
       this.checkIfEnoughData();

src/ui/public/visualize/visualize_legend.html

@@ -6,8 +6,8 @@
 
     <li
       ng-repeat="legendData in labels track by legendData.label"
-      ng-mouseenter="highlightSeries(legendData.label)"
-      ng-mouseleave="unhighlightSeries()"
+      ng-mouseenter="highlight($event)"
+      ng-mouseleave="unhighlight($event)"
       data-label="{{legendData.label}}"
       class="legend-value color">
 
@@ -38,4 +38,4 @@
 
     </li>
   </ul>
-</div>
+</div>

src/ui/public/visualize/visualize_legend.js

@@ -26,12 +26,18 @@ define(function (require) {
           refresh();
         });
 
-        $scope.highlightSeries = function (label) {
-          $('[data-label]', $elem.siblings()).not(function (els, el) { return $(el).data('label') !== label;}).css('opacity', 0.5);
+        $scope.highlight = function (event) {
+          var el = event.currentTarget;
+          var handler = $scope.renderbot.vislibVis.handler;
+          if (!handler) return;
+          handler.highlight.call(el, handler.el);
         };
 
-        $scope.unhighlightSeries = function () {
-          $('[data-label]', $elem.siblings()).css('opacity', 1);
+        $scope.unhighlight = function (event) {
+          var el = event.currentTarget;
+          var handler = $scope.renderbot.vislibVis.handler;
+          if (!handler) return;
+          handler.unHighlight.call(el, handler.el);
         };
 
         $scope.setColor = function (label, color) {