From e91085a32b917a36220f5f98b98d5e6edfa9e55b Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Thu, 25 Jan 2018 18:07:00 +0100
Subject: [PATCH 1/2] Update EUI to 0.0.14

---
 package.json | 2 +-
 yarn.lock    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index a301c8e28b934..f5f42ac4d3815 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,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.1",
     "@elastic/test-subj-selector": "0.2.1",
diff --git a/yarn.lock b/yarn.lock
index 824240160fd09..3de11bfb54022 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -87,9 +87,9 @@
   version "0.0.0"
   uid ""
 
-"@elastic/eui@0.0.13":
-  version "0.0.13"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.13.tgz#aa3a71c6bfc41978366c29a4254b3a8d1953108f"
+"@elastic/eui@0.0.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"

From 6a4cfdc1009c1dff509f1094113fd14043271dbf Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Thu, 25 Jan 2018 18:15:35 +0100
Subject: [PATCH 2/2] Make metrics text white when on dark color

---
 .../metric_vis/public/metric_vis.less         |  4 ++++
 .../public/metric_vis_controller.js           | 19 +++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/core_plugins/metric_vis/public/metric_vis.less b/src/core_plugins/metric_vis/public/metric_vis.less
index e98e1b5d8d995..f63fb29e29b39 100644
--- a/src/core_plugins/metric_vis/public/metric_vis.less
+++ b/src/core_plugins/metric_vis/public/metric_vis.less
@@ -16,4 +16,8 @@
     margin: auto;
     padding: 16px;
   }
+
+  .metric-container--light {
+    color: white;
+  }
 }
diff --git a/src/core_plugins/metric_vis/public/metric_vis_controller.js b/src/core_plugins/metric_vis/public/metric_vis_controller.js
index d0aa5d4e08d85..5190690c1e91a 100644
--- a/src/core_plugins/metric_vis/public/metric_vis_controller.js
+++ b/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