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

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 =
-      oldOptions.sparkline && oldOptions.sparkline.show === true ? BigValueGraphMode.Area : BigValueGraphMode.None;
+    options.graphMode = 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: 'background', label: 'Background' },
+            { value: BigValueColorMode.None, label: 'None' },
+            { value: BigValueColorMode.Value, label: 'Value' },
+            { value: BigValueColorMode.Background, label: 'Background' },
           ],
         },
       })