StatPanel: Fixed value being under graph and reduced likley hood for white and…

StatPanel: Fixed value being under graph and reduced likley hood for white and dark value text mixing (#28641)

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

* Updated snapshot

* Updated storybook config

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({}),
         ]
       : [],

packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx

 // Libraries
-import React, { CSSProperties, Suspense } from 'react';
+import React, { CSSProperties } from 'react';
 import tinycolor from 'tinycolor2';
+import { Chart, Geom } from 'bizcharts';
 
 // Utils
 import { formattedValueToString, DisplayValue, getColorForTheme } from '@grafana/data';
@@ -13,16 +14,6 @@ import { getTextColorForBackground } from '../../utils';
 const LINE_HEIGHT = 1.2;
 const MAX_TITLE_SIZE = 30;
 
-const Chart = React.lazy(async () => {
-  const { Chart } = await import(/* webpackChunkName: "bizcharts" */ 'bizcharts');
-  return { default: Chart };
-});
-
-const Geom = React.lazy(async () => {
-  const { Geom } = await import(/* webpackChunkName: "bizcharts" */ 'bizcharts');
-  return { default: Geom };
-});
-
 export abstract class BigValueLayout {
   titleFontSize: number;
   valueFontSize: number;
@@ -72,6 +63,8 @@ export abstract class BigValueLayout {
       fontSize: this.valueFontSize,
       fontWeight: 500,
       lineHeight: LINE_HEIGHT,
+      position: 'relative',
+      zIndex: 1,
     };
 
     switch (this.props.colorMode) {
@@ -175,19 +168,17 @@ export abstract class BigValueLayout {
     }
 
     return (
-      <Suspense fallback={<div>Loading chart...</div>}>
-        <Chart
-          height={this.chartHeight}
-          width={this.chartWidth}
-          data={data}
-          animate={false}
-          padding={[4, 0, 0, 0]}
-          scale={scales}
-          style={this.getChartStyles()}
-        >
-          {this.renderGeom()}
-        </Chart>
-      </Suspense>
+      <Chart
+        height={this.chartHeight}
+        width={this.chartWidth}
+        data={data}
+        animate={false}
+        padding={[4, 0, 0, 0]}
+        scale={scales}
+        style={this.getChartStyles()}
+      >
+        {this.renderGeom()}
+      </Chart>
     );
   }
 
@@ -220,10 +211,10 @@ export abstract class BigValueLayout {
     lineStyle.stroke = lineColor;
 
     return (
-      <Suspense fallback={<div>Loading chart...</div>}>
+      <>
         <Geom type="area" position="time*value" size={0} color={fillColor} style={lineStyle} shape="smooth" />
         <Geom type="line" position="time*value" size={1} color={lineColor} style={lineStyle} shape="smooth" />
-      </Suspense>
+      </>
     );
   }
 

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={

packages/grafana-ui/src/utils/colors.ts

@@ -122,7 +122,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);