From de9ac280b22c61a73edee04a7e57ef1ff69f5b75 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 29 Oct 2020 19:29:00 +0530
Subject: [PATCH] StatPanel: Fixed value being under graph and reduced likley
 hood for white and dark value text mixing (#28641) (#28655)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* StatPanel: Fixed value being under graph and reduced likley hood for white and dark value text mixing

* Updated snapshot

* Updated storybook config

(cherry picked from commit b46ac2891db257eaa2e1612c2f809b70c38bf485)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
---
 packages/grafana-ui/.storybook/webpack.config.js              | 2 +-
 .../grafana-ui/src/components/BigValue/BigValueLayout.tsx     | 2 ++
 .../components/BigValue/__snapshots__/BigValue.test.tsx.snap  | 4 +++-
 packages/grafana-ui/src/utils/colors.ts                       | 2 +-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/.storybook/webpack.config.js b/packages/grafana-ui/.storybook/webpack.config.js
index bfdf4d0f3cc..792759122a4 100644
--- a/packages/grafana-ui/.storybook/webpack.config.js
+++ b/packages/grafana-ui/.storybook/webpack.config.js
@@ -103,7 +103,7 @@ module.exports = ({ config, mode }) => {
     minimize: isProductionBuild,
     minimizer: isProductionBuild
       ? [
-          new TerserPlugin({ cache: false, parallel: false, sourceMap: false, exclude: /monaco/ }),
+          new TerserPlugin({ cache: false, parallel: false, sourceMap: false, exclude: /monaco|bizcharts/ }),
           new OptimizeCSSAssetsPlugin({}),
         ]
       : [],
diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
index eabd079f09f..95eea803376 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
@@ -63,6 +63,8 @@ export abstract class BigValueLayout {
       fontSize: this.valueFontSize,
       fontWeight: 500,
       lineHeight: LINE_HEIGHT,
+      position: 'relative',
+      zIndex: 1,
     };
 
     switch (this.props.colorMode) {
diff --git a/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap b/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap
index cfaf1b3416b..3f57fd43340 100644
--- a/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap
+++ b/packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap
@@ -30,10 +30,12 @@ exports[`BigValue Render with basic options should render 1`] = `
     <FormattedDisplayValue
       style={
         Object {
-          "color": "#202226",
+          "color": "#f7f8fa",
           "fontSize": 230,
           "fontWeight": 500,
           "lineHeight": 1.2,
+          "position": "relative",
+          "zIndex": 1,
         }
       }
       value={
diff --git a/packages/grafana-ui/src/utils/colors.ts b/packages/grafana-ui/src/utils/colors.ts
index cf6365557a8..51cb38363b8 100644
--- a/packages/grafana-ui/src/utils/colors.ts
+++ b/packages/grafana-ui/src/utils/colors.ts
@@ -99,7 +99,7 @@ function hslToHex(color: any) {
 
 export function getTextColorForBackground(color: string) {
   const b = tinycolor(color).getBrightness();
-  return b > 150 ? lightTheme.colors.textStrong : darkTheme.colors.textStrong;
+  return b > 180 ? lightTheme.colors.textStrong : darkTheme.colors.textStrong;
 }
 
 export let sortedColors = sortColorsByHue(colors);