Merge pull request #8593 from elastic/jasper/backport/8448/5.x

[backport] PR #8448 to 5.x - Add highlight opacity as global setting

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

@@ -2,8 +2,9 @@ import d3 from 'd3';
 import _ from 'lodash';
 import $ from 'jquery';
 import SimpleEmitter from 'ui/utils/simple_emitter';
-import VislibComponentsTooltipProvider from 'ui/vislib/components/tooltip';
-export default function DispatchClass(Private) {
+
+export default function DispatchClass(Private, config) {
+
   /**
    * Handles event responses
    *
@@ -214,33 +215,33 @@ export default function DispatchClass(Private) {
      * Mouseover Behavior
      *
      * @method addMousePointer
-     * @returns {D3.Selection}
+     * @returns {d3.Selection}
      */
     addMousePointer() {
       return d3.select(this).style('cursor', 'pointer');
     };
 
     /**
-     * Mouseover Behavior
-     *
-     * @param element {D3.Selection}
+     * Highlight the element that is under the cursor
+     * by reducing the opacity of all the elements on the graph.
+     * @param element {d3.Selection}
      * @method highlight
      */
     highlight(element) {
       const label = this.getAttribute('data-label');
       if (!label) return;
-      //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);
-    };
+
+      const dimming = config.get('visualization:dimmingOpacity');
+      $(element).parent().find('[data-label]')
+        .css('opacity', 1)//Opacity 1 is needed to avoid the css application
+        .not((els, el) => $(el).data('label') === label)
+        .css('opacity', justifyOpacity(dimming));
+    }
 
     /**
      * Mouseout Behavior
      *
-     * @param element {D3.Selection}
+     * @param element {d3.Selection}
      * @method unHighlight
      */
     unHighlight(element) {
@@ -310,5 +311,11 @@ export default function DispatchClass(Private) {
   }
 
 
+  function justifyOpacity(opacity) {
+    const decimalNumber = parseFloat(opacity, 10);
+    const fallbackOpacity = 0.5;
+    return (0 <= decimalNumber  && decimalNumber <= 1) ? decimalNumber : fallbackOpacity;
+  }
+
   return Dispatch;
 };

src/ui/settings/defaults.js

@@ -135,6 +135,13 @@ export default function defaultSettingsProvider() {
       value: '2s',
       description: 'Time to wait before dimming visualizations during query'
     },
+    'visualization:dimmingOpacity': {
+      type: 'number',
+      value: 0.5,
+      description: 'The opacity of the chart items that are dimmed when highlighting another element of the chart. ' +
+      'The lower this number, the more the highlighted element will stand out.' +
+      'This must be a number between 0 and 1.'
+    },
     'csv:separator': {
       value: ',',
       description: 'Separate exported values with this string',