Fix metric contrast (#16296) (#16410)

* Update EUI to 0.0.14

* Make metrics text white when on dark color

package.json

@@ -75,7 +75,7 @@
   },
   "dependencies": {
     "@elastic/datemath": "4.0.2",
-    "@elastic/eui": "0.0.13",
+    "@elastic/eui": "0.0.14",
     "@elastic/filesaver": "1.1.2",
     "@elastic/numeral": "2.3.0",
     "@elastic/test-subj-selector": "0.2.1",

src/core_plugins/metric_vis/public/metric_vis.less

@@ -16,4 +16,8 @@
     margin: auto;
     padding: 16px;
   }
+
+  .metric-container--light {
+    color: white;
+  }
 }

src/core_plugins/metric_vis/public/metric_vis_controller.js

@@ -1,6 +1,8 @@
 import _ from 'lodash';
 import React, { Component } from 'react';
 import { getHeatmapColors } from 'ui/vislib/components/color/heatmap_color';
+import { isColorDark } from '@elastic/eui';
+import classNames from 'classnames';
 
 export class MetricVisComponent extends Component {
 
@@ -54,6 +56,14 @@ export class MetricVisComponent extends Component {
     return colors[label];
   }
 
+  _needsLightText(bgColor) {
+    const color = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(bgColor);
+    if (!color) {
+      return false;
+    }
+    return isColorDark(parseInt(color[1]), parseInt(color[2]), parseInt(color[3]));
+  }
+
   _processTableGroups(tableGroups) {
     const config = this.props.vis.params.metric;
     const isPercentageMode = config.percentageMode;
@@ -101,7 +111,8 @@ export class MetricVisComponent extends Component {
             label: title,
             value: value,
             color: shouldColor && config.style.labelColor ? color : null,
-            bgColor: shouldColor && config.style.bgColor ? color : null
+            bgColor: shouldColor && config.style.bgColor ? color : null,
+            lightText: shouldColor && config.style.bgColor && this._needsLightText(color),
           });
         });
       });
@@ -116,10 +127,14 @@ export class MetricVisComponent extends Component {
       color: metric.color
     };
 
+    const containerClassName = classNames('metric-container', {
+      'metric-container--light': metric.lightText
+    });
+
     return (
       <div
         key={index}
-        className="metric-container"
+        className={containerClassName}
         style={{ backgroundColor: metric.bgColor }}
       >
         <div

yarn.lock

@@ -87,9 +87,9 @@
   version "0.0.0"
   uid ""
 
-"@elastic/[email protected].13":
-  version "0.0.13"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.13.tgz#aa3a71c6bfc41978366c29a4254b3a8d1953108f"
+"@elastic/[email protected].14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.14.tgz#18842465e11ee96d1b90813e7fd38bef2c65bc8b"
   dependencies:
     brace "^0.10.0"
     classnames "^2.2.5"