From b6f6ac258a823e8724181c3351bc495a261bb195 Mon Sep 17 00:00:00 2001
From: Pete Harverson <peteharverson@users.noreply.github.com>
Date: Tue, 9 Mar 2021 11:50:31 +0000
Subject: [PATCH] [ML] Fixes styling of Single Metric Viewer chart for dark
 theme (#93581)

* [ML] Fizes styling of Simgle Metric Viewer chart for dark theme

* [ML] Fix lint error in scss

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../ml/public/application/_variables.scss     |  1 +
 .../_timeseriesexplorer.scss                  | 65 ++++---------------
 .../timeseries_chart/timeseries_chart.js      |  6 +-
 3 files changed, 14 insertions(+), 58 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/_variables.scss b/x-pack/plugins/ml/public/application/_variables.scss
index 761b266cac189d..f81a97cf8c156a 100644
--- a/x-pack/plugins/ml/public/application/_variables.scss
+++ b/x-pack/plugins/ml/public/application/_variables.scss
@@ -2,6 +2,7 @@ $mlColorCritical: #FE5050;
 $mlColorMajor: #FBA740;
 $mlColorMinor: #FDEC25;
 $mlColorWarning: #8BC8FB;
+$mlColorLowWarning: #D2E9F7;
 $mlColorUnknown: #C0C0C0;
 
 $mlColorCriticalText: makeHighContrastColor($mlColorCritical, $euiColorEmptyShade);
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss b/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss
index af40e69af4124b..8a56a8f0188b8d 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss
@@ -2,29 +2,6 @@
 .ml-time-series-explorer {
   color: $euiColorDarkShade;
 
-  .no-results-container {
-    text-align: center;
-    font-size: $euiFontSizeL;
-    padding-top: 60px; // SASSTODO: variabalize
-
-    .no-results {
-      background-color: $euiFocusBackgroundColor;
-      padding: $euiSize;
-      border-radius: $euiBorderRadius;
-      display: inline-block;
-
-      i {
-        color: $euiColorPrimary;
-        margin-right: $euiSizeXS;
-      }
-
-      div:nth-child(2) {
-        margin-top: $euiSizeS;
-        font-size: $euiFontSizeXS;
-      }
-    }
-  }
-
   .results-container {
     .panel-title {
       font-size: $euiFontSizeM;
@@ -65,7 +42,7 @@
     }
 
     .axis .tick line {
-      stroke: rgba(0, 0, 0, .1);
+      stroke: $euiColorLightShade;
     }
 
     .chart-border {
@@ -89,46 +66,41 @@
     }
 
     .area.bounds {
-      fill: rgba(50, 167, 194, .25); // Needs variable
+      fill: transparentize($euiColorPrimary, .8);
       pointer-events: none;
     }
 
     .values-line {
       fill: none;
-      stroke: #32A7C2; // Needs variable
+      stroke: $euiColorPrimary;
       stroke-width: 2;
       pointer-events: none;
     }
 
     .values-line.forecast {
-      stroke: #CCA300; // Needs variable
+      stroke: $euiColorVis5;
       pointer-events: none;
     }
 
-    .values-dots circle {
-      fill: #32A7C2; // Needs variable
-      stroke-width: 0;
-    }
-
     .hidden {
       visibility: hidden;
     }
 
     .area.forecast {
-      fill: rgba(204, 163, 0, .25); // Needs variable
+      fill: transparentize($euiColorVis5, .7);
       pointer-events: none;
     }
 
     .metric-value {
       opacity: 1;
       fill: transparent;
-      stroke: #32A7C2;
+      stroke: $euiColorPrimary;
       stroke-width: 0;
     }
 
     .anomaly-marker {
       stroke-width: 1px;
-      stroke: #AAAAAA; // Needs variable
+      stroke: $euiColorMediumShade;
     }
 
     .anomaly-marker.critical {
@@ -148,7 +120,7 @@
     }
 
     .anomaly-marker.low {
-      fill: #D2E9F7; // Needs variable
+      fill: $mlColorLowWarning;
     }
 
     .metric-value:hover,
@@ -156,7 +128,7 @@
     .anomaly-marker.highlighted {
       stroke-width: 6px;
       stroke-opacity: .65;
-      stroke: #32A7C2;
+      stroke: $euiColorPrimary;
     }
 
     rect.scheduled-event-marker {
@@ -169,7 +141,7 @@
     .forecast {
       .metric-value,
       .metric-value:hover {
-        stroke: #CCA300;
+        stroke: $euiColorVis5;
       }
     }
 
@@ -214,35 +186,22 @@
         fill: $euiTextColor;
       }
 
-      .area.context {
-        fill: rgba(50, 167, 194, .25); // Needs variable
-      }
-
       .values-line {
         stroke-width: 1;
       }
 
-      .area.context.forecast {
-        fill: rgba(204, 163, 0, .25); // Needs variable
-      }
-
       .mask {
         polygon {
           fill-opacity: .1;
         }
 
         .area.bounds {
-          fill: #D6D6D6;
+          fill: $euiColorLightShade;
         }
 
         .values-line {
           stroke-width: 1;
-          stroke: #B8B8B8;
-        }
-
-        .values-dots circle {
-          fill: #B8B8B8;
-          stroke-width: 0;
+          stroke: $euiColorMediumShade;
         }
       }
     }
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
index fa172fa0c2190d..3725f57eab026f 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -1076,11 +1076,7 @@ class TimeseriesChartIntl extends Component {
       .defined((d) => d.lower !== null && d.upper !== null);
 
     if (modelPlotEnabled === true) {
-      cxtGroup
-        .append('path')
-        .datum(data)
-        .attr('class', 'area context')
-        .attr('d', contextBoundsArea);
+      cxtGroup.append('path').datum(data).attr('class', 'area bounds').attr('d', contextBoundsArea);
     }
 
     const contextValuesLine = d3.svg