Fixes opacity issue in area charts (overlaping) and harmonize the behavior with other charts

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

@@ -106,14 +106,17 @@ export default function DispatchClass(Private) {
     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 @@ export default function DispatchClass(Private) {
     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 @@ export default function DispatchClass(Private) {
    * 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

@@ -33,7 +33,25 @@ export default function AreaChartFactory(Private) {
     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

@@ -29,12 +29,18 @@ uiModules.get('kibana')
         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) {