From bd62a17412626e564bb89499a4ca2b5268fed38f Mon Sep 17 00:00:00 2001 From: David Vega Fontelos Date: Sat, 27 Feb 2016 11:56:09 +0100 Subject: [PATCH 1/2] Squashed commits from opacity fix #6346 --- src/ui/public/vislib/lib/dispatch.js | 23 +++++++++++++------ .../vislib/visualizations/area_chart.js | 21 ++++++++++++++++- src/ui/public/visualize/visualize_legend.html | 6 ++--- src/ui/public/visualize/visualize_legend.js | 14 +++++++---- 4 files changed, 49 insertions(+), 15 deletions(-) diff --git a/src/ui/public/vislib/lib/dispatch.js b/src/ui/public/vislib/lib/dispatch.js index 9aa02b594e6bba..ab349a70879fad 100644 --- a/src/ui/public/vislib/lib/dispatch.js +++ b/src/ui/public/vislib/lib/dispatch.js @@ -106,6 +106,9 @@ 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 @@ -113,7 +116,7 @@ define(function (require) { 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); }; diff --git a/src/ui/public/vislib/visualizations/area_chart.js b/src/ui/public/vislib/visualizations/area_chart.js index 447d24a6885d4a..dd1172ee499b24 100644 --- a/src/ui/public/vislib/visualizations/area_chart.js +++ b/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(); diff --git a/src/ui/public/visualize/visualize_legend.html b/src/ui/public/visualize/visualize_legend.html index 568541d530afc9..3f8e2b4a09b390 100644 --- a/src/ui/public/visualize/visualize_legend.html +++ b/src/ui/public/visualize/visualize_legend.html @@ -6,8 +6,8 @@
  • @@ -38,4 +38,4 @@
    • - \ No newline at end of file + diff --git a/src/ui/public/visualize/visualize_legend.js b/src/ui/public/visualize/visualize_legend.js index 619ff57987f8a4..6218be6407dcd1 100644 --- a/src/ui/public/visualize/visualize_legend.js +++ b/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) { From d5d27d113aa08806337f241ef2188b6adffd37e1 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 8 Mar 2016 13:45:34 -0500 Subject: [PATCH 2/2] fix linter errors --- src/ui/public/vislib/lib/dispatch.js | 4 ++-- src/ui/public/visualize/visualize_legend.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ui/public/vislib/lib/dispatch.js b/src/ui/public/vislib/lib/dispatch.js index ab349a70879fad..948535bc6e9d93 100644 --- a/src/ui/public/vislib/lib/dispatch.js +++ b/src/ui/public/vislib/lib/dispatch.js @@ -106,7 +106,7 @@ define(function (require) { var isClickable = this.listenerCount('click') > 0; var addEvent = this.addEvent; var $el = this.handler.el; - if(!this.handler.highlight) { + if (!this.handler.highlight) { this.handler.highlight = self.highlight; } @@ -132,7 +132,7 @@ define(function (require) { var self = this; var addEvent = this.addEvent; var $el = this.handler.el; - if(!this.handler.unHighlight) { + if (!this.handler.unHighlight) { this.handler.unHighlight = self.unHighlight; } diff --git a/src/ui/public/visualize/visualize_legend.js b/src/ui/public/visualize/visualize_legend.js index 6218be6407dcd1..6ef1fd30c3168f 100644 --- a/src/ui/public/visualize/visualize_legend.js +++ b/src/ui/public/visualize/visualize_legend.js @@ -29,14 +29,14 @@ define(function (require) { $scope.highlight = function (event) { var el = event.currentTarget; var handler = $scope.renderbot.vislibVis.handler; - if(!handler) return; + if (!handler) return; handler.highlight.call(el, handler.el); }; $scope.unhighlight = function (event) { var el = event.currentTarget; var handler = $scope.renderbot.vislibVis.handler; - if(!handler) return; + if (!handler) return; handler.unHighlight.call(el, handler.el); };