From 1ccd13a94b68d30a80f1beae6bd6d42c12951289 Mon Sep 17 00:00:00 2001 From: David Vega Fontelos Date: Sat, 27 Feb 2016 11:56:09 +0100 Subject: [PATCH 1/7] Fixes opacity on mouseover/mouseout in the chart --- src/ui/public/vislib/lib/dispatch.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/ui/public/vislib/lib/dispatch.js b/src/ui/public/vislib/lib/dispatch.js index 93766383b58e47..71100f28c9b4b8 100644 --- a/src/ui/public/vislib/lib/dispatch.js +++ b/src/ui/public/vislib/lib/dispatch.js @@ -106,6 +106,7 @@ export default function DispatchClass(Private) { var isClickable = this.listenerCount('click') > 0; var addEvent = this.addEvent; var $el = this.handler.el; + var defaultOpacity = this.handler._attr.defaultOpacity || 1; function hover(d, i) { // Add pointer if item is clickable @@ -113,7 +114,7 @@ export default function DispatchClass(Private) { self.addMousePointer.call(this, arguments); } - self.highlightLegend.call(this, $el); + self.highlightLegend.call(this, $el, defaultOpacity); self.emit('hover', self.eventResponse(d, i)); } @@ -129,9 +130,10 @@ export default function DispatchClass(Private) { var self = this; var addEvent = this.addEvent; var $el = this.handler.el; + var defaultOpacity = this.handler._attr.defaultOpacity || 1; function mouseout() { - self.unHighlightLegend.call(this, $el); + self.unHighlightLegend.call(this, $el, defaultOpacity); } return addEvent('mouseout', mouseout); @@ -227,10 +229,14 @@ export default function DispatchClass(Private) { * @param element {D3.Selection} * @method highlightLegend */ - Dispatch.prototype.highlightLegend = function (element) { + Dispatch.prototype.highlightLegend = function (element, defaultOpacity) { var label = this.getAttribute('data-label'); + var highlightOpacity = (defaultOpacity < 1) ? 0.8 : 1; if (!label) return; - $('[data-label]', element.parentNode).not('[data-label="' + label + '"]').css('opacity', 0.5); + + var highlightElements = $('[data-label="' + label + '"]', element.parentNode); + $('[data-label]', element.parentNode).not(highlightElements).css('opacity', defaultOpacity / 2); + highlightElements.css('opacity', highlightOpacity); }; /** @@ -239,8 +245,8 @@ export default function DispatchClass(Private) { * @param element {D3.Selection} * @method unHighlightLegend */ - Dispatch.prototype.unHighlightLegend = function (element) { - $('[data-label]', element.parentNode).css('opacity', 1); + Dispatch.prototype.unHighlightLegend = function (element, defaultOpacity) { + $('[data-label]', element.parentNode).css('opacity', defaultOpacity); }; /** From 6f49e46ccd60a33097643359df861d6418ffbe0e Mon Sep 17 00:00:00 2001 From: David Vega Fontelos Date: Sat, 27 Feb 2016 23:22:58 +0100 Subject: [PATCH 2/7] Fixes opacity when hovering the Legend. Also refactors the previous commit to be able to use the same function for both the chart and legend with area charts overlapped --- src/ui/public/vislib/lib/dispatch.js | 24 ++++++++----------- .../vislib/visualizations/area_chart.js | 15 +++++++++++- src/ui/public/visualize/visualize_legend.html | 6 ++--- src/ui/public/visualize/visualize_legend.js | 22 +++++++++++++---- 4 files changed, 45 insertions(+), 22 deletions(-) diff --git a/src/ui/public/vislib/lib/dispatch.js b/src/ui/public/vislib/lib/dispatch.js index 71100f28c9b4b8..6c1f41b9f2e8c5 100644 --- a/src/ui/public/vislib/lib/dispatch.js +++ b/src/ui/public/vislib/lib/dispatch.js @@ -106,7 +106,7 @@ export default function DispatchClass(Private) { var isClickable = this.listenerCount('click') > 0; var addEvent = this.addEvent; var $el = this.handler.el; - var defaultOpacity = this.handler._attr.defaultOpacity || 1; + var highlight = this.handler.highlight || self.highlight; function hover(d, i) { // Add pointer if item is clickable @@ -114,7 +114,7 @@ export default function DispatchClass(Private) { self.addMousePointer.call(this, arguments); } - self.highlightLegend.call(this, $el, defaultOpacity); + highlight.call(this, $el); self.emit('hover', self.eventResponse(d, i)); } @@ -130,10 +130,10 @@ export default function DispatchClass(Private) { var self = this; var addEvent = this.addEvent; var $el = this.handler.el; - var defaultOpacity = this.handler._attr.defaultOpacity || 1; + var unHighlight = this.handler.unHighlight || self.unHighlight; function mouseout() { - self.unHighlightLegend.call(this, $el, defaultOpacity); + unHighlight.call(this, $el); } return addEvent('mouseout', mouseout); @@ -227,26 +227,22 @@ export default function DispatchClass(Private) { * Mouseover Behavior * * @param element {D3.Selection} - * @method highlightLegend + * @method highlight */ - Dispatch.prototype.highlightLegend = function (element, defaultOpacity) { + Dispatch.prototype.highlight = function (element) { var label = this.getAttribute('data-label'); - var highlightOpacity = (defaultOpacity < 1) ? 0.8 : 1; if (!label) return; - - var highlightElements = $('[data-label="' + label + '"]', element.parentNode); - $('[data-label]', element.parentNode).not(highlightElements).css('opacity', defaultOpacity / 2); - highlightElements.css('opacity', highlightOpacity); + $('[data-label]', element.parentNode).not('[data-label="' + label + '"]').css('opacity', 0.5); }; /** * Mouseout Behavior * * @param element {D3.Selection} - * @method unHighlightLegend + * @method unHighlight */ - Dispatch.prototype.unHighlightLegend = function (element, defaultOpacity) { - $('[data-label]', element.parentNode).css('opacity', defaultOpacity); + 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 a132b52ad6b806..7872cdf1d75119 100644 --- a/src/ui/public/vislib/visualizations/area_chart.js +++ b/src/ui/public/vislib/visualizations/area_chart.js @@ -33,7 +33,20 @@ 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="' + label + '"]', element.parentNode); + $('[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.parentNode).css('opacity', defaultOpacity); + }; } this.checkIfEnoughData(); diff --git a/src/ui/public/visualize/visualize_legend.html b/src/ui/public/visualize/visualize_legend.html index 568541d530afc9..45856c58d182aa 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 9d3edea59b79df..5821d7501183a8 100644 --- a/src/ui/public/visualize/visualize_legend.js +++ b/src/ui/public/visualize/visualize_legend.js @@ -29,12 +29,26 @@ uiModules.get('kibana') refresh(); }); - $scope.highlightSeries = function (label) { - $('[data-label]', $elem.siblings()).not('[data-label="' + label + '"]').css('opacity', 0.5); + $scope.highlightSeries = function (event) { + var el = event.currentTarget; + var handler = $scope.renderbot.vislibVis.handler; + if(handler.highlight) { + handler.highlight.call(el, handler.el); + }else{ + var label = el.getAttribute('data-label'); + if (!label) return; + $('[data-label]', el.siblings()).not('[data-label="' + label + '"]').css('opacity', 0.5); + } }; - $scope.unhighlightSeries = function () { - $('[data-label]', $elem.siblings()).css('opacity', 1); + $scope.unhighlightSeries = function (event) { + var el = event.currentTarget; + var handler = $scope.renderbot.vislibVis.handler; + if(handler.unHighlight) { + handler.unHighlight.call(el, handler.el); + }else{ + $('[data-label]', el.siblings()).css('opacity', 1); + } }; $scope.setColor = function (label, color) { From 3602964435af031bd738a16ae8a9bdfda454353d Mon Sep 17 00:00:00 2001 From: David Vega Fontelos Date: Sun, 28 Feb 2016 01:21:18 +0100 Subject: [PATCH 3/7] Fixes an issue when hovering the legend in area charts. Also, other charts now have the same behavior --- src/ui/public/vislib/visualizations/area_chart.js | 5 ++++- src/ui/public/visualize/visualize_legend.html | 4 ++-- src/ui/public/visualize/visualize_legend.js | 10 ++++++---- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/ui/public/vislib/visualizations/area_chart.js b/src/ui/public/vislib/visualizations/area_chart.js index 7872cdf1d75119..cd18fd947e50c7 100644 --- a/src/ui/public/vislib/visualizations/area_chart.js +++ b/src/ui/public/vislib/visualizations/area_chart.js @@ -45,7 +45,10 @@ export default function AreaChartFactory(Private) { highlightElements.css('opacity', highlightOpacity); }; handler.unHighlight = function (element) { - $('[data-label]', element.parentNode).css('opacity', defaultOpacity); + $('[data-label]', element).css('opacity', defaultOpacity); + + //The legend should keep max opacity + $('[data-label]', $(element).siblings()).css('opacity', 1); }; } diff --git a/src/ui/public/visualize/visualize_legend.html b/src/ui/public/visualize/visualize_legend.html index 45856c58d182aa..3f8e2b4a09b390 100644 --- a/src/ui/public/visualize/visualize_legend.html +++ b/src/ui/public/visualize/visualize_legend.html @@ -6,8 +6,8 @@
  • diff --git a/src/ui/public/visualize/visualize_legend.js b/src/ui/public/visualize/visualize_legend.js index 5821d7501183a8..2cf9651650d1b0 100644 --- a/src/ui/public/visualize/visualize_legend.js +++ b/src/ui/public/visualize/visualize_legend.js @@ -29,7 +29,7 @@ uiModules.get('kibana') refresh(); }); - $scope.highlightSeries = function (event) { + $scope.highlight = function (event) { var el = event.currentTarget; var handler = $scope.renderbot.vislibVis.handler; if(handler.highlight) { @@ -37,17 +37,19 @@ uiModules.get('kibana') }else{ var label = el.getAttribute('data-label'); if (!label) return; - $('[data-label]', el.siblings()).not('[data-label="' + label + '"]').css('opacity', 0.5); + var highlightElements = $('[data-label="' + label + '"]', handler.el.parentNode); + $('[data-label]', handler.el.parentNode).not(highlightElements).css('opacity', 0.5); + $(highlightElements).css('opacity', 1); } }; - $scope.unhighlightSeries = function (event) { + $scope.unhighlight = function (event) { var el = event.currentTarget; var handler = $scope.renderbot.vislibVis.handler; if(handler.unHighlight) { handler.unHighlight.call(el, handler.el); }else{ - $('[data-label]', el.siblings()).css('opacity', 1); + $('[data-label]', handler.el.parentNode).css('opacity', 1); } }; From 9c969346b1f757a8d45b4a2bde13a0846a04878e Mon Sep 17 00:00:00 2001 From: David Vega Fontelos Date: Sun, 28 Feb 2016 01:50:59 +0100 Subject: [PATCH 4/7] Harmonizes the hover behavior --- src/ui/public/vislib/lib/dispatch.js | 12 ++++++++---- src/ui/public/visualize/visualize_legend.js | 18 ++++-------------- 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/src/ui/public/vislib/lib/dispatch.js b/src/ui/public/vislib/lib/dispatch.js index 6c1f41b9f2e8c5..924fb91be41390 100644 --- a/src/ui/public/vislib/lib/dispatch.js +++ b/src/ui/public/vislib/lib/dispatch.js @@ -106,7 +106,9 @@ export default function DispatchClass(Private) { var isClickable = this.listenerCount('click') > 0; var addEvent = this.addEvent; var $el = this.handler.el; - var highlight = this.handler.highlight || self.highlight; + if(!this.handler.highlight) { + this.handler.highlight = self.highlight; + } function hover(d, i) { // Add pointer if item is clickable @@ -114,7 +116,7 @@ export default function DispatchClass(Private) { self.addMousePointer.call(this, arguments); } - highlight.call(this, $el); + self.handler.highlight.call(this, $el); self.emit('hover', self.eventResponse(d, i)); } @@ -130,10 +132,12 @@ export default function DispatchClass(Private) { var self = this; var addEvent = this.addEvent; var $el = this.handler.el; - var unHighlight = this.handler.unHighlight || self.unHighlight; + if(!this.handler.unHighlight) { + this.handler.unHighlight = self.unHighlight; + } function mouseout() { - unHighlight.call(this, $el); + self.handler.unHighlight.call(this, $el); } return addEvent('mouseout', mouseout); diff --git a/src/ui/public/visualize/visualize_legend.js b/src/ui/public/visualize/visualize_legend.js index 2cf9651650d1b0..1924e4e97cc094 100644 --- a/src/ui/public/visualize/visualize_legend.js +++ b/src/ui/public/visualize/visualize_legend.js @@ -32,25 +32,15 @@ uiModules.get('kibana') $scope.highlight = function (event) { var el = event.currentTarget; var handler = $scope.renderbot.vislibVis.handler; - if(handler.highlight) { - handler.highlight.call(el, handler.el); - }else{ - var label = el.getAttribute('data-label'); - if (!label) return; - var highlightElements = $('[data-label="' + label + '"]', handler.el.parentNode); - $('[data-label]', handler.el.parentNode).not(highlightElements).css('opacity', 0.5); - $(highlightElements).css('opacity', 1); - } + 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.unHighlight) { - handler.unHighlight.call(el, handler.el); - }else{ - $('[data-label]', handler.el.parentNode).css('opacity', 1); - } + if(!handler) return; + handler.unHighlight.call(el, handler.el); }; $scope.setColor = function (label, color) { From f4d3e03ed319d819f1103e9c1ef228a47ac67067 Mon Sep 17 00:00:00 2001 From: David Vega Fontelos Date: Sat, 5 Mar 2016 06:00:47 +0100 Subject: [PATCH 5/7] Now hightlights the hovered element --- src/ui/public/vislib/lib/dispatch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/public/vislib/lib/dispatch.js b/src/ui/public/vislib/lib/dispatch.js index c375583d3af342..3d756970852874 100644 --- a/src/ui/public/vislib/lib/dispatch.js +++ b/src/ui/public/vislib/lib/dispatch.js @@ -236,7 +236,7 @@ export default function DispatchClass(Private) { 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); + $('[data-label]', element.parentNode).not(function (els, el) { return $(el).data('label') === label; }).css('opacity', 0.5); }; /** From ca2264d12c04b3a0c30f5bf103fbf7a9edaf4238 Mon Sep 17 00:00:00 2001 From: David Vega Fontelos Date: Sat, 5 Mar 2016 06:19:32 +0100 Subject: [PATCH 6/7] Prevent css application to the hovered element --- src/ui/public/vislib/lib/dispatch.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ui/public/vislib/lib/dispatch.js b/src/ui/public/vislib/lib/dispatch.js index 3d756970852874..dfc476054103cd 100644 --- a/src/ui/public/vislib/lib/dispatch.js +++ b/src/ui/public/vislib/lib/dispatch.js @@ -236,7 +236,10 @@ export default function DispatchClass(Private) { 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); }; /** From 2d04b3a09ce9b8446e93269b3b24521c19175125 Mon Sep 17 00:00:00 2001 From: David Vega Fontelos Date: Sat, 5 Mar 2016 06:21:04 +0100 Subject: [PATCH 7/7] Change to a filter function instead of string concatenation --- src/ui/public/vislib/visualizations/area_chart.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ui/public/vislib/visualizations/area_chart.js b/src/ui/public/vislib/visualizations/area_chart.js index cd18fd947e50c7..63afcdd2822659 100644 --- a/src/ui/public/vislib/visualizations/area_chart.js +++ b/src/ui/public/vislib/visualizations/area_chart.js @@ -40,7 +40,9 @@ export default function AreaChartFactory(Private) { if (!label) return; var highlightOpacity = 0.8; - var highlightElements = $('[data-label="' + label + '"]', element.parentNode); + 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); };