Stat Panel: Add an option for a non-gradient/solid background (#65052)

* baldm0mma/statNoGrad/ add no gradient option

* baldm0mma/statsNoGrad/ update migration and tests

* baldm0mma/statsNoGrad/ update suggestions module

* baldm0mma/statsNoGrad/ update bigValueLayout test

* baldm0mma/statNoGrad/ remove unused comment

* baldm0mma/statNoGrad/ revert to background

* baldm0mma/statNoGrad/ update enum values

packages/grafana-schema/src/common/common.gen.ts

@@ -479,6 +479,7 @@ export interface OptionsWithTextFormatting {
  */
 export enum BigValueColorMode {
   Background = 'background',
+  BackgroundSolid = 'background_solid',
   None = 'none',
   Value = 'value',
 }

packages/grafana-schema/src/common/mudball.cue

@@ -178,7 +178,7 @@ OptionsWithTextFormatting: {
 } @cuetsy(kind="interface")
 
 // TODO docs
-BigValueColorMode: "value" | "background" | "none" @cuetsy(kind="enum")
+BigValueColorMode: "value" | "background" | "background_solid" | "none" @cuetsy(kind="enum", memberNames="Value|Background|BackgroundSolid|None")
 
 // TODO docs
 BigValueGraphMode: "none" | "line" | "area" @cuetsy(kind="enum")

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

@@ -31,7 +31,9 @@ const meta: Meta = {
   argTypes: {
     width: { control: { type: 'range', min: 200, max: 800 } },
     height: { control: { type: 'range', min: 200, max: 800 } },
-    colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
+    colorMode: {
+      control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] },
+    },
     graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
     justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
     textMode: {

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

@@ -11,9 +11,10 @@ import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDi
 import { buildLayout } from './BigValueLayout';
 
 export enum BigValueColorMode {
-  Value = 'value',
   Background = 'background',
+  BackgroundSolid = 'background_solid',
   None = 'none',
+  Value = 'value',
 }
 
 export enum BigValueGraphMode {

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

@@ -67,7 +67,10 @@ export abstract class BigValueLayout {
       styles.paddingRight = '0.75ch';
     }
 
-    if (this.props.colorMode === BigValueColorMode.Background) {
+    if (
+      this.props.colorMode === BigValueColorMode.Background ||
+      this.props.colorMode === BigValueColorMode.BackgroundSolid
+    ) {
       styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
     }
 
@@ -92,6 +95,7 @@ export abstract class BigValueLayout {
         styles.color = this.valueColor;
         break;
       case BigValueColorMode.Background:
+      case BigValueColorMode.BackgroundSolid:
         styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
         break;
       case BigValueColorMode.None:
@@ -142,6 +146,9 @@ export abstract class BigValueLayout {
           .toRgbString();
         panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
         break;
+      case BigValueColorMode.BackgroundSolid:
+        panelStyles.background = tinycolor(this.valueColor).toString();
+        break;
       case BigValueColorMode.Value:
         panelStyles.background = `transparent`;
         break;
@@ -167,6 +174,7 @@ export abstract class BigValueLayout {
 
     switch (colorMode) {
       case BigValueColorMode.Background:
+      case BigValueColorMode.BackgroundSolid:
         fillColor = 'rgba(255,255,255,0.4)';
         lineColor = tinycolor(this.valueColor).brighten(40).toRgbString();
         break;

public/app/plugins/panel/stat/module.tsx

@@ -35,7 +35,7 @@ export const plugin = new PanelPlugin<PanelOptions>(StatPanel)
     });
 
     builder
-      .addRadio({
+      .addSelect({
         path: 'colorMode',
         name: 'Color mode',
         defaultValue: BigValueColorMode.Value,
@@ -44,7 +44,8 @@ export const plugin = new PanelPlugin<PanelOptions>(StatPanel)
           options: [
             { value: BigValueColorMode.None, label: 'None' },
             { value: BigValueColorMode.Value, label: 'Value' },
-            { value: BigValueColorMode.Background, label: 'Background' },
+            { value: BigValueColorMode.Background, label: 'Background Gradient' },
+            { value: BigValueColorMode.BackgroundSolid, label: 'Background Solid' },
           ],
         },
       })