Backport PR elastic#8448

---------

**Commit 1:**
Add highlight opacity as global setting

The opacity of the items that are dimmed on a chart can now be configured. This is useful for users who want to increase or decrease the contrast between the element under focus and the other elements.

* Original sha: 761a92ee5d8270800c1291e64e4b8967c467aee6 [formerly b02bbad]
* Authored by Thomas Neirynck <[email protected]> on 2016-09-23T05:12:59Z

**Commit 2:**
coerce opacity to valid value

* Original sha: d629ff57449fa6bdc8e4b420f876c222172be8c2 [formerly 8d10852]
* Authored by Thomas Neirynck <[email protected]> on 2016-09-23T17:09:31Z

**Commit 3:**
improve code style

* Original sha: 234e2b1da0335555653d201a7d44cc262adcf84b [formerly 807cc1b]
* Authored by Thomas Neirynck <[email protected]> on 2016-09-23T17:41:47Z


Former-commit-id: 4ef4434

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',