Revert "Stat: Add ability to remove default single-color background gradient" (#65002)

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

This reverts commit de901560d7.

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

@@ -27,7 +27,6 @@ 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

@@ -216,7 +216,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 each update
+// this is a significant optimization for streaming, where we currently re-process all values in the buffer on ech 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,8 +53,6 @@ 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, hasGradient } = this.props;
+    const { width, height, theme, colorMode } = this.props;
 
     const panelStyles: CSSProperties = {
       width: `${width}px`,
@@ -130,23 +130,17 @@ 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:
-        panelStyles.background =
-          hasGradient === false ? `none ${this.valueColor}` : buildGradientBackground(this.valueColor);
+        const bgColor2 = tinycolor(this.valueColor)
+          .darken(15 * themeFactor)
+          .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,7 +37,6 @@ 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 the display of the name and value',
+      description: 'Control if name and value is displayed or just name',
       category: mainCategory,
       settings: {
         options: [
@@ -38,7 +38,7 @@ export const plugin = new PanelPlugin<PanelOptions>(StatPanel)
       .addRadio({
         path: 'colorMode',
         name: 'Color mode',
-        defaultValue: defaultPanelOptions.colorMode,
+        defaultValue: BigValueColorMode.Value,
         category: mainCategory,
         settings: {
           options: [
@@ -48,15 +48,6 @@ 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,11 +28,10 @@ composableKinds: PanelCfg: {
 					{
 						PanelOptions: {
 							common.SingleStatBaseOptions
-							graphMode:    common.BigValueGraphMode | *"area"
-							colorMode:    common.BigValueColorMode | *"value"
-							hasGradient?: bool | *true
-							justifyMode:  common.BigValueJustifyMode | *"auto"
-							textMode:     common.BigValueTextMode | *"auto"
+							graphMode:   common.BigValueGraphMode | *"area"
+							colorMode:   common.BigValueColorMode | *"value"
+							justifyMode: common.BigValueJustifyMode | *"auto"
+							textMode:    common.BigValueTextMode | *"auto"
 						} @cuetsy(kind="interface")
 					},
 				]

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

@@ -15,7 +15,6 @@ 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;
 }
@@ -23,7 +22,6 @@ 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,
 };