Stat: Add ability to remove default single-color background gradient (#64353)

* baldm0mma/feature/solidOption/ update cue and ts types

* baldm0mma/feature/solidOption/ update data structures

* baldm0mma/feature/solidOption/ vizrepeater investigation

* baldm0mma/feature/solidOption/ add buildGradientBackground

* baldm0mma/feature/solidOption/ remove conlogs from fieldDisplay.ts

* baldm0mma/feature/solidOption/ rem destruct in fielddisplay.ts

* baldm0mma/feature/solidOption/ rem conlogs from bivaluelayout.tsx

* baldm0mma/feature/solidOption/ rem conlogs in visrepeater

* baldm0mma/feature/solidOption/ rem conlogs from statpanel.tsx

* baldm0mma/feature/solidOption/ add annotations in BigValue.tsx

* baldm0mma/feature/solidOption/ update cue

* baldm0mma/feature/solidOption/ remove unused anno

* baldm0mma/feature/solidOption/ update with toggle conditinal

* Update module.tsx

update anno

* baldm0mma/feature/solidOption/ update annos

* baldm0mma/feature/solidOption/ undo change

* baldm0mma/featurew/solidOption/ add anno for boolean toggle in stat module

* baldm0mma/featurew/solidOption/ update anno in BigValue.tsx for hasGradient

* baldm0mma/featurew/solidOption/ updart default logic in bigValueLayout.tsx

docs/sources/developers/kinds/composable/statpanelcfg/schema-reference.md

@@ -27,6 +27,7 @@ It extends [SingleStatBaseOptions](#singlestatbaseoptions).
 | `graphMode`     | string                                          | **Yes**  | TODO docs<br/>Possible values are: `none`, `line`, `area`.                                                                                  |
 | `justifyMode`   | string                                          | **Yes**  | TODO docs<br/>Possible values are: `auto`, `center`.                                                                                        |
 | `textMode`      | string                                          | **Yes**  | TODO docs<br/>Possible values are: `auto`, `value`, `value_and_name`, `name`, `none`.                                                       |
+| `hasGradient`   | boolean                                         | No       | Default: `true`.                                                                                                                            |
 | `orientation`   | string                                          | No       | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs<br/>Possible values are: `auto`, `vertical`, `horizontal`. |
 | `reduceOptions` | [ReduceDataOptions](#reducedataoptions)         | No       | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs                                                            |
 | `text`          | [VizTextDisplayOptions](#viztextdisplayoptions) | No       | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs                                                            |

packages/grafana-data/src/field/fieldOverrides.ts

@@ -214,7 +214,7 @@ export function applyFieldOverrides(options: ApplyFieldOverrideOptions): DataFra
   });
 }
 
-// this is a significant optimization for streaming, where we currently re-process all values in the buffer on ech update
+// this is a significant optimization for streaming, where we currently re-process all values in the buffer on each update
 // via field.display(value). this can potentially be removed once we...
 // 1. process data packets incrementally and/if cache the results in the streaming datafame (maybe by buffer index)
 // 2. have the ability to selectively get display color or text (but not always both, which are each quite expensive)

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

@@ -53,6 +53,8 @@ export interface Props extends Themeable2 {
   className?: string;
   /** Color mode for coloring the value or the background */
   colorMode: BigValueColorMode;
+  /** Whether or not a horizontal gradient is applied to the panel background */
+  hasGradient?: boolean;
   /** Show a graph behind/under the value */
   graphMode: BigValueGraphMode;
   /** Auto justify value and text or center it */

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

@@ -117,7 +117,7 @@ export abstract class BigValueLayout {
   }
 
   getPanelStyles(): CSSProperties {
-    const { width, height, theme, colorMode } = this.props;
+    const { width, height, theme, colorMode, hasGradient } = this.props;
 
     const panelStyles: CSSProperties = {
       width: `${width}px`,
@@ -130,17 +130,23 @@ export abstract class BigValueLayout {
 
     const themeFactor = theme.isDark ? 1 : -0.7;
 
+    function buildGradientBackground(valueColor: BigValueLayout['valueColor']) {
+      const bgColor2 = tinycolor(valueColor)
+        .darken(15 * themeFactor)
+        .spin(8)
+        .toRgbString();
+      const bgColor3 = tinycolor(valueColor)
+        .darken(5 * themeFactor)
+        .spin(-8)
+        .toRgbString();
+
+      return `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
+    }
+
     switch (colorMode) {
       case BigValueColorMode.Background:
-        const bgColor2 = tinycolor(this.valueColor)
+        panelStyles.background =
-          .darken(15 * themeFactor)
+          hasGradient === false ? `none ${this.valueColor}` : buildGradientBackground(this.valueColor);
-          .spin(8)
-          .toRgbString();
-        const bgColor3 = tinycolor(this.valueColor)
-          .darken(5 * themeFactor)
-          .spin(-8)
-          .toRgbString();
-        panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
         break;
       case BigValueColorMode.Value:
         panelStyles.background = `transparent`;

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

@@ -37,6 +37,7 @@ export class StatPanel extends PureComponent<PanelProps<PanelOptions>> {
         count={count}
         sparkline={sparkline}
         colorMode={options.colorMode}
+        hasGradient={options.hasGradient}
         graphMode={options.graphMode}
         justifyMode={options.justifyMode}
         textMode={this.getTextMode()}

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

@@ -20,7 +20,7 @@ export const plugin = new PanelPlugin<PanelOptions>(StatPanel)
     builder.addSelect({
       path: 'textMode',
       name: 'Text mode',
-      description: 'Control if name and value is displayed or just name',
+      description: 'Control the display of the name and value',
       category: mainCategory,
       settings: {
         options: [
@@ -38,7 +38,7 @@ export const plugin = new PanelPlugin<PanelOptions>(StatPanel)
       .addRadio({
         path: 'colorMode',
         name: 'Color mode',
-        defaultValue: BigValueColorMode.Value,
+        defaultValue: defaultPanelOptions.colorMode,
         category: mainCategory,
         settings: {
           options: [
@@ -48,6 +48,15 @@ export const plugin = new PanelPlugin<PanelOptions>(StatPanel)
           ],
         },
       })
+      // Boolean toggle for removing the gradient panel background
+      .addBooleanSwitch({
+        path: 'hasGradient',
+        name: 'Background gradient',
+        defaultValue: defaultPanelOptions.hasGradient,
+        category: mainCategory,
+        // This toggle really only applies when the BigValueColorMode === `background`
+        showIf: (panelOptions) => panelOptions.colorMode === BigValueColorMode.Background,
+      })
       .addRadio({
         path: 'graphMode',
         name: 'Graph mode',

public/app/plugins/panel/stat/panelcfg.cue

@@ -28,10 +28,11 @@ composableKinds: PanelCfg: {
 					{
 						PanelOptions: {
 							common.SingleStatBaseOptions
-							graphMode:   common.BigValueGraphMode | *"area"
+							graphMode:    common.BigValueGraphMode | *"area"
-							colorMode:   common.BigValueColorMode | *"value"
+							colorMode:    common.BigValueColorMode | *"value"
-							justifyMode: common.BigValueJustifyMode | *"auto"
+							hasGradient?: bool | *true
-							textMode:    common.BigValueTextMode | *"auto"
+							justifyMode:  common.BigValueJustifyMode | *"auto"
+							textMode:     common.BigValueTextMode | *"auto"
 						} @cuetsy(kind="interface")
 					},
 				]

public/app/plugins/panel/stat/panelcfg.gen.ts

@@ -15,6 +15,7 @@ export const PanelCfgModelVersion = Object.freeze([0, 0]);
 export interface PanelOptions extends common.SingleStatBaseOptions {
   colorMode: common.BigValueColorMode;
   graphMode: common.BigValueGraphMode;
+  hasGradient?: boolean;
   justifyMode: common.BigValueJustifyMode;
   textMode: common.BigValueTextMode;
 }
@@ -22,6 +23,7 @@ export interface PanelOptions extends common.SingleStatBaseOptions {
 export const defaultPanelOptions: Partial<PanelOptions> = {
   colorMode: common.BigValueColorMode.Value,
   graphMode: common.BigValueGraphMode.Area,
+  hasGradient: true,
   justifyMode: common.BigValueJustifyMode.Auto,
   textMode: common.BigValueTextMode.Auto,
 };