Stat: improve color mode migration from singlestat panels (#35538)

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

@@ -10,6 +10,7 @@ import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDi
 export enum BigValueColorMode {
   Value = 'value',
   Background = 'background',
+  None = 'none',
 }
 
 export enum BigValueGraphMode {

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

@@ -90,6 +90,10 @@ export abstract class BigValueLayout {
         break;
       case BigValueColorMode.Background:
         styles.color = getTextColorForBackground(this.valueColor);
+        break;
+      case BigValueColorMode.None:
+        styles.color = this.props.theme.colors.text.primary;
+        break;
     }
 
     return styles;
@@ -159,13 +163,16 @@ export abstract class BigValueLayout {
     let lineColor: string;
 
     switch (colorMode) {
-      case BigValueColorMode.Value:
-        lineColor = this.valueColor;
-        fillColor = tinycolor(this.valueColor).setAlpha(0.2).toRgbString();
-        break;
       case BigValueColorMode.Background:
         fillColor = 'rgba(255,255,255,0.4)';
         lineColor = tinycolor(this.valueColor).brighten(40).toRgbString();
+        break;
+      case BigValueColorMode.None:
+      case BigValueColorMode.Value:
+      default:
+        lineColor = this.valueColor;
+        fillColor = tinycolor(this.valueColor).setAlpha(0.2).toRgbString();
+        break;
     }
 
     // The graph field configuration applied to Y values

public/app/features/dashboard/state/getPanelOptionsWithDefaults.ts

@@ -160,7 +160,7 @@ function adaptFieldColorMode(
 
     // When supporting value colors and prefering thresholds, use Thresholds mode.
     // Otherwise keep current mode
-    if (colorSettings.byValueSupport && colorSettings.preferThresholdsMode) {
+    if (colorSettings.byValueSupport && colorSettings.preferThresholdsMode && mode?.id !== FieldColorModeId.Fixed) {
       if (!mode || !mode.isByValue) {
         fieldConfig.defaults.color = { mode: FieldColorModeId.Thresholds };
         return fieldConfig;

public/app/plugins/panel/stat/StatMigrations.test.ts

@@ -61,4 +61,27 @@ describe('Stat Panel Migrations', () => {
     const options = statPanelChangedHandler(panel, 'singlestat', old);
     expect(options.textMode).toBe(BigValueTextMode.Name);
   });
+
+  it('use no color unless one was configured', () => {
+    let old: any = {
+      angular: {
+        valueName: 'name',
+      },
+    };
+
+    let panel = {} as PanelModel;
+    let options = statPanelChangedHandler(panel, 'singlestat', old);
+    expect(options.colorMode).toBe(BigValueColorMode.None);
+
+    old = {
+      angular: {
+        valueName: 'name',
+        colorBackground: true,
+      },
+    };
+
+    panel = {} as PanelModel;
+    options = statPanelChangedHandler(panel, 'singlestat', old);
+    expect(options.colorMode).toBe(BigValueColorMode.Background);
+  });
 });

public/app/plugins/panel/stat/StatMigrations.ts

@@ -1,5 +1,5 @@
 import { sharedSingleStatPanelChangedHandler, BigValueGraphMode, BigValueColorMode } from '@grafana/ui';
-import { PanelModel } from '@grafana/data';
+import { FieldColorModeId, FieldConfigSource, PanelModel } from '@grafana/data';
 import { StatPanelOptions } from './types';
 import { BigValueTextMode } from '@grafana/ui/src/components/BigValue/BigValue';
 
@@ -13,16 +13,28 @@ export const statPanelChangedHandler = (
   const options = sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions) as StatPanelOptions;
 
   // Changing from angular singlestat
-  if (prevPluginId === 'singlestat' && prevOptions.angular) {
+  if (prevOptions.angular && (prevPluginId === 'singlestat' || prevPluginId === 'grafana-singlestat-panel')) {
     const oldOptions = prevOptions.angular;
 
-    options.graphMode =
+    options.graphMode = BigValueGraphMode.None;
-      oldOptions.sparkline && oldOptions.sparkline.show === true ? BigValueGraphMode.Area : BigValueGraphMode.None;
+    if (oldOptions.sparkline && oldOptions.sparkline.show) {
+      options.graphMode = BigValueGraphMode.Area;
+    }
 
     if (oldOptions.colorBackground) {
       options.colorMode = BigValueColorMode.Background;
-    } else {
+    } else if (oldOptions.colorValue) {
       options.colorMode = BigValueColorMode.Value;
+    } else {
+      options.colorMode = BigValueColorMode.None;
+      if (oldOptions.sparkline?.lineColor && options.graphMode === BigValueGraphMode.Area) {
+        const cfg: FieldConfigSource = panel.fieldConfig ?? {};
+        cfg.defaults.color = {
+          mode: FieldColorModeId.Fixed,
+          fixedColor: oldOptions.sparkline.lineColor,
+        };
+        panel.fieldConfig = cfg;
+      }
     }
 
     if (oldOptions.valueName === 'name') {

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

@@ -1,4 +1,9 @@
-import { BigValueTextMode, commonOptionsBuilder, sharedSingleStatMigrationHandler } from '@grafana/ui';
+import {
+  BigValueColorMode,
+  BigValueTextMode,
+  commonOptionsBuilder,
+  sharedSingleStatMigrationHandler,
+} from '@grafana/ui';
 import { PanelPlugin } from '@grafana/data';
 import { addOrientationOption, addStandardDataReduceOptions, StatPanelOptions } from './types';
 import { StatPanel } from './StatPanel';
@@ -34,12 +39,13 @@ export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
       .addRadio({
         path: 'colorMode',
         name: 'Color mode',
-        defaultValue: 'value',
+        defaultValue: BigValueColorMode.Value,
         category: mainCategory,
         settings: {
           options: [
-            { value: 'value', label: 'Value' },
+            { value: BigValueColorMode.None, label: 'None' },
-            { value: 'background', label: 'Background' },
+            { value: BigValueColorMode.Value, label: 'Value' },
+            { value: BigValueColorMode.Background, label: 'Background' },
           ],
         },
       })