NewGauge: Adds new feature toggle named newGauge (#112593)

* NewGauge: Feature toggle and fixes * Gauge: New migration test dashboard * Update * Updates * Tweaked default barWidth * Fix multi data links * remove sizing options * merge fix * Update * Restore * Update * Tweaked name font size logic * use file snapshots instead of inline --------- Co-authored-by: Paul Marbach <paul.marbach@grafana.com>
2025-10-20 18:33:19 +02:00 · 2025-10-20 18:33:19 +02:00 · 7df537c9fc
parent 17771e0e1d
commit 7df537c9fc
28 changed files with 3157 additions and 573 deletions
--- a/apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-gauge/gauge_tests_old_to_new.v42.json
+++ b/apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-gauge/gauge_tests_old_to_new.v42.json
--- a/devenv/dev-dashboards/panel-gauge/gauge_tests_old_to_new.json
+++ b/devenv/dev-dashboards/panel-gauge/gauge_tests_old_to_new.json
--- a/devenv/jsonnet/dev-dashboards.libsonnet
+++ b/devenv/jsonnet/dev-dashboards.libsonnet
@ -38,6 +38,7 @@
    "gauge-multi-series": (import '../dev-dashboards/panel-gauge/gauge-multi-series.json'),
    "gauge_tests": (import '../dev-dashboards/panel-gauge/gauge_tests.json'),
    "gauge_tests_new": (import '../dev-dashboards/panel-gauge/gauge_tests_new.json'),
+    "gauge_tests_old_to_new": (import '../dev-dashboards/panel-gauge/gauge_tests_old_to_new.json'),
    "geomap-color-field": (import '../dev-dashboards/panel-geomap/geomap-color-field.json'),
    "geomap-photo-layer": (import '../dev-dashboards/panel-geomap/geomap-photo-layer.json'),
    "geomap-route-layer": (import '../dev-dashboards/panel-geomap/geomap-route-layer.json'),
--- a/packages/grafana-data/src/types/featureToggles.gen.ts
+++ b/packages/grafana-data/src/types/featureToggles.gen.ts
@ -1218,6 +1218,11 @@ export interface FeatureToggles {
  */
  cdnPluginsUrls?: boolean;
  /**
+  * Enable new gauge visualization
+  * @default false
+  */
+  newGauge?: boolean;
+  /**
  * Restrict PanelChrome contents with overflow: hidden;
  * @default true
  */
--- a/packages/grafana-schema/src/raw/composable/newgauge/panelcfg/x/NewGaugePanelCfg_types.gen.ts
+++ b/packages/grafana-schema/src/raw/composable/newgauge/panelcfg/x/NewGaugePanelCfg_types.gen.ts
@ -21,7 +21,7 @@ export interface GaugePanelEffects {

 export const defaultGaugePanelEffects: Partial<GaugePanelEffects> = {
  barGlow: false,
-  centerGlow: true,
+  centerGlow: false,
  rounded: false,
  spotlight: false,
 };
@ -39,13 +39,13 @@ export interface Options extends common.SingleStatBaseOptions {
 }

 export const defaultOptions: Partial<Options> = {
-  barWidthFactor: 0.4,
+  barWidthFactor: 0.5,
  effects: {},
-  gradient: 'none',
+  gradient: 'auto',
  segmentCount: 1,
  segmentSpacing: 0.3,
  shape: 'gauge',
  showThresholdLabels: false,
  showThresholdMarkers: true,
-  sparkline: false,
+  sparkline: true,
 };
--- a/packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx
@ -73,11 +73,12 @@ export class RadialColorDefs {

      this.defs.push(
        <radialGradient
+          key={id}
+          id={id}
          cx={dimensions.centerX}
          cy={dimensions.centerY}
          r={dimensions.radius + dimensions.barWidth / 2}
          fr={dimensions.radius - dimensions.barWidth / 2}
-          id={id}
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0%" stopColor={tinycolor(baseColor).spin(20).lighten(10).toString()} stopOpacity={1} />
@ -85,6 +86,8 @@ export class RadialColorDefs {
          <stop offset="100%" stopColor={color1.toString()} stopOpacity={1} />
        </radialGradient>
      );
+
+      return returnColor;
    }

    // For fixed / palette based color scales we can create a more fun
@ -103,11 +106,12 @@ export class RadialColorDefs {

    this.defs.push(
      <linearGradient
+        key={id}
+        id={id}
        x1="0"
        y1="0"
        x2={x2}
        y2={y2}
-        id={id}
        gradientUnits="userSpaceOnUse"
        gradientTransform={transform}
      >
--- a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx
@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { isNumber } from 'lodash';
 import { useId } from 'react';

@ -64,6 +64,8 @@ export interface RadialGaugeProps {
  /** Specify which text should be visible  */
  textMode?: RadialTextMode;
  showScaleLabels?: boolean;
+  /** For data links */
+  onClick?: React.MouseEventHandler<HTMLElement>;
 }

 export type RadialGradientMode = 'none' | 'auto';
@ -87,6 +89,7 @@ export function RadialGauge(props: RadialGaugeProps) {
    roundedBars = true,
    thresholdsBar = false,
    showScaleLabels = false,
+    onClick,
    values,
  } = props;
  const theme = useTheme2();
@ -247,13 +250,27 @@ export function RadialGauge(props: RadialGaugeProps) {
    }
  }

-  return (
-    <div className={styles.vizWrapper} style={{ width, height }}>
+  const body = (
+    <>
      <svg width={width} height={height} role="img" aria-label={t('gauge.category-gauge', 'Gauge')}>
        <defs>{defs}</defs>
        {graphics}
      </svg>
      {sparklineElement}
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <button onClick={onClick} className={cx(styles.clearButton, styles.vizWrapper)} style={{ width, height }}>
+        {body}
+      </button>
+    );
+  }
+
+  return (
+    <div className={styles.vizWrapper} style={{ width, height }}>
+      {body}
    </div>
  );
 }
@ -281,5 +298,12 @@ function getStyles(theme: GrafanaTheme2) {
        filter: theme.isLight ? `drop-shadow(0px 0px 1px #888);` : '',
      },
    }),
+    clearButton: css({
+      background: 'transparent',
+      color: theme.colors.text.primary,
+      border: 'none',
+      padding: 0,
+      cursor: 'context-menu',
+    }),
  };
 }
--- a/packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx
@ -25,7 +25,7 @@ export function RadialSparkline({ sparkline, dimensions, theme, color, shape }:
  const height = radius / 4;
  const widthFactor = shape === 'gauge' ? 1.6 : 1.4;
  const width = radius * widthFactor - barWidth;
-  const topPos = shape === 'gauge' ? `calc(50% + ${radius / 1.75}px)` : `calc(50% + ${radius / 2.8}px)`;
+  const topPos = shape === 'gauge' ? `${dimensions.gaugeBottomY - height}px` : `calc(50% + ${radius / 2.8}px)`;

  const styles = css({
    position: 'absolute',
--- a/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx
@ -59,9 +59,9 @@ export function RadialText({

  // Not sure where this comes from but svg text is not using body line-height
  const lineHeight = 1.21;
-  const valueWidthToRadiusFactor = 0.6;
-  const nameToHeightFactor = 0.3;
-  const largeRadiusScalingDecay = 0.92;
+  const valueWidthToRadiusFactor = 0.85;
+  const nameToHeightFactor = 0.45;
+  const largeRadiusScalingDecay = 0.86;

  // This pow 0.92 factor is to create a decay so the font size does not become rediculously large for very large panels
  let maxValueHeight = valueWidthToRadiusFactor * Math.pow(radius, largeRadiusScalingDecay);
@ -99,7 +99,8 @@ export function RadialText({
  const nameHeight = nameFontSize * lineHeight;

  const valueY = showName ? centerY - nameHeight / 2 : centerY;
-  const nameY = showValue ? valueY + valueHeight * 0.7 : centerY;
+  const valueNameSpacing = valueHeight / 3.5;
+  const nameY = showValue ? valueY + valueHeight / 2 + valueNameSpacing : centerY;
  const nameColor = showValue ? theme.colors.text.secondary : theme.colors.text.primary;
  const suffixShift = (valueFontSize - unitFontSize * 1.2) / 2;

--- a/packages/grafana-ui/src/components/RadialGauge/ThresholdsBar.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/ThresholdsBar.tsx
@ -40,8 +40,15 @@ export function ThresholdsBar({

  for (let i = 1; i < thresholds.length; i++) {
    const threshold = thresholds[i];
-    const valueDeg = ((threshold.value - min) / (max - min)) * angleRange;
-    const lengthDeg = valueDeg - currentStart + startAngle;
+    let valueDeg = ((threshold.value - min) / (max - min)) * angleRange;
+
+    if (valueDeg > angleRange) {
+      valueDeg = angleRange;
+    } else if (valueDeg < 0) {
+      valueDeg = 0;
+    }
+
+    let lengthDeg = valueDeg - currentStart + startAngle;

    paths.push(
      <RadialArcPath
--- a/packages/grafana-ui/src/components/RadialGauge/utils.test.ts
+++ b/packages/grafana-ui/src/components/RadialGauge/utils.test.ts
@ -178,5 +178,20 @@ describe('RadialGauge utils', () => {

      expect(result.angle).toBe(360);
    });
+
+    it('should handle values lower than min', () => {
+      const fieldDisplay = createFieldDisplay(-50, 0, 100);
+      const result = getValueAngleForValue(fieldDisplay, 240, 120);
+
+      expect(result.angle).toBe(0);
+    });
+
+    it('should handle values higher than max', () => {
+      const fieldDisplay = createFieldDisplay(200, 0, 100);
+      const result = getValueAngleForValue(fieldDisplay, 240, 120);
+
+      // Expect the angle to be clamped to the maximum range
+      expect(result.angle).toBe(240);
+    });
  });
 });
--- a/packages/grafana-ui/src/components/RadialGauge/utils.ts
+++ b/packages/grafana-ui/src/components/RadialGauge/utils.ts
@ -9,6 +9,8 @@ export function getValueAngleForValue(fieldDisplay: FieldDisplay, startAngle: nu

  if (angle > angleRange) {
    angle = angleRange;
+  } else if (angle < 0) {
+    angle = 0;
  }

  return { angleRange, angle };
@ -39,6 +41,7 @@ export interface GaugeDimensions {
  scaleLabelsFontSize: number;
  scaleLabelsSpacing: number;
  scaleLabelsRadius: number;
+  gaugeBottomY: number;
 }

 export function calculateDimensions(
@ -119,8 +122,8 @@ export function calculateDimensions(

  let innerRadius = outerRadius - barWidth / 2;

-  const maxY = maxRadius * Math.sin(toRad(yMaxAngle)) + maxRadius;
-  const rest = height - maxY - margin * 2;
+  const belowCenterY = maxRadius * Math.sin(toRad(yMaxAngle));
+  const rest = height - belowCenterY - margin * 2 - maxRadius;
  const centerX = width / 2;
  const centerY = maxRadius + margin + rest / 2;

@ -130,6 +133,7 @@ export function calculateDimensions(

  return {
    margin,
+    gaugeBottomY: centerY + belowCenterY,
    radius: innerRadius,
    centerX,
    centerY,
--- a/pkg/services/featuremgmt/registry.go
+++ b/pkg/services/featuremgmt/registry.go
@ -2110,6 +2110,14 @@ var (
 			Owner:        grafanaPluginsPlatformSquad,
 			Expression:   "false",
 		},
+		{
+			Name:         "newGauge",
+			Description:  "Enable new gauge visualization",
+			Stage:        FeatureStageExperimental,
+			FrontendOnly: true,
+			Owner:        grafanaDatavizSquad,
+			Expression:   "false",
+		},
 		{
 			Name:         "preventPanelChromeOverflow",
 			Description:  "Restrict PanelChrome contents with overflow: hidden;",
--- a/pkg/services/featuremgmt/toggles_gen.csv
+++ b/pkg/services/featuremgmt/toggles_gen.csv
@ -271,6 +271,7 @@ pluginContainers,privatePreview,@grafana/plugins-platform-backend,false,true,fal
 tempoSearchBackendMigration,GA,@grafana/oss-big-tent,false,true,false
 cdnPluginsLoadFirst,experimental,@grafana/plugins-platform-backend,false,false,false
 cdnPluginsUrls,experimental,@grafana/plugins-platform-backend,false,false,false
+newGauge,experimental,@grafana/dataviz-squad,false,false,true
 preventPanelChromeOverflow,preview,@grafana/grafana-frontend-platform,false,false,true
 pluginStoreServiceLoading,experimental,@grafana/plugins-platform-backend,false,false,false
 onlyStoreActionSets,GA,@grafana/identity-access-team,false,false,false
--- a/pkg/services/featuremgmt/toggles_gen.go
+++ b/pkg/services/featuremgmt/toggles_gen.go
@ -1094,6 +1094,10 @@ const (
 	// Enable loading plugins via declarative URLs
 	FlagCdnPluginsUrls = "cdnPluginsUrls"

+	// FlagNewGauge
+	// Enable new gauge visualization
+	FlagNewGauge = "newGauge"
+
 	// FlagPreventPanelChromeOverflow
 	// Restrict PanelChrome contents with overflow: hidden;
 	FlagPreventPanelChromeOverflow = "preventPanelChromeOverflow"
--- a/pkg/services/featuremgmt/toggles_gen.json
+++ b/pkg/services/featuremgmt/toggles_gen.json
@ -2694,6 +2694,20 @@
        "expression": "true"
      }
    },
+    {
+      "metadata": {
+        "name": "newGauge",
+        "resourceVersion": "1760700645318",
+        "creationTimestamp": "2025-10-17T11:30:45Z"
+      },
+      "spec": {
+        "description": "Enable new gauge visualization",
+        "stage": "experimental",
+        "codeowner": "@grafana/dataviz-squad",
+        "frontend": true,
+        "expression": "false"
+      }
+    },
    {
      "metadata": {
        "name": "newInfluxDSConfigPageDesign",
--- a/public/app/features/plugins/built_in_plugins.ts
+++ b/public/app/features/plugins/built_in_plugins.ts
@ -1,3 +1,5 @@
+import { config } from '@grafana/runtime';
+
 const cloudwatchPlugin = async () =>
  await import(/* webpackChunkName: "cloudwatchPlugin" */ 'app/plugins/datasource/cloudwatch/module');
 const dashboardDSPlugin = async () =>
@ -104,7 +106,7 @@ const builtInPlugins: Record<string, System.Module | (() => Promise<System.Modul
  'core:plugin/debug': debugPanel,
  'core:plugin/flamegraph': flamegraphPanel,
  'core:plugin/gettingstarted': gettingStartedPanel,
-  'core:plugin/gauge': gaugePanel,
+  'core:plugin/gauge': config.featureToggles.newGauge ? radialBar : gaugePanel,
  'core:plugin/piechart': pieChartPanel,
  'core:plugin/bargauge': barGaugePanel,
  'core:plugin/barchart': barChartPanel,
--- a/public/app/features/theme-playground/schema.generated.json
+++ b/public/app/features/theme-playground/schema.generated.json
@ -28,7 +28,10 @@
                    "$ref": "#/definitions/DeepPartial<ThemeRichColor>"
                },
                "mode": {
-          "enum": ["dark", "light"],
+                    "enum": [
+                        "dark",
+                        "light"
+                    ],
                    "type": "string"
                },
                "primary": {
@ -350,27 +353,63 @@
            "type": "object"
        },
        "ThemeVizColorShadeName": {
-      "enum": ["dark-red", "light-red", "red", "semi-dark-red", "super-light-red"],
+            "enum": [
+                "dark-red",
+                "light-red",
+                "red",
+                "semi-dark-red",
+                "super-light-red"
+            ],
            "type": "string"
        },
        "ThemeVizColorShadeName_1": {
-      "enum": ["dark-orange", "light-orange", "orange", "semi-dark-orange", "super-light-orange"],
+            "enum": [
+                "dark-orange",
+                "light-orange",
+                "orange",
+                "semi-dark-orange",
+                "super-light-orange"
+            ],
            "type": "string"
        },
        "ThemeVizColorShadeName_2": {
-      "enum": ["dark-yellow", "light-yellow", "semi-dark-yellow", "super-light-yellow", "yellow"],
+            "enum": [
+                "dark-yellow",
+                "light-yellow",
+                "semi-dark-yellow",
+                "super-light-yellow",
+                "yellow"
+            ],
            "type": "string"
        },
        "ThemeVizColorShadeName_3": {
-      "enum": ["dark-green", "green", "light-green", "semi-dark-green", "super-light-green"],
+            "enum": [
+                "dark-green",
+                "green",
+                "light-green",
+                "semi-dark-green",
+                "super-light-green"
+            ],
            "type": "string"
        },
        "ThemeVizColorShadeName_4": {
-      "enum": ["blue", "dark-blue", "light-blue", "semi-dark-blue", "super-light-blue"],
+            "enum": [
+                "blue",
+                "dark-blue",
+                "light-blue",
+                "semi-dark-blue",
+                "super-light-blue"
+            ],
            "type": "string"
        },
        "ThemeVizColorShadeName_5": {
-      "enum": ["dark-purple", "light-purple", "purple", "semi-dark-purple", "super-light-purple"],
+            "enum": [
+                "dark-purple",
+                "light-purple",
+                "purple",
+                "semi-dark-purple",
+                "super-light-purple"
+            ],
            "type": "string"
        },
        "ThemeVizHue": {
@ -509,3 +548,4 @@
    },
    "type": "object"
 }
+
--- a/public/app/plugins/panel/gauge/GaugeMigrations.test.ts
+++ b/public/app/plugins/panel/gauge/GaugeMigrations.test.ts
@ -88,56 +88,7 @@ describe('Gauge Panel Migrations', () => {
    //@ts-ignore
    expect(result.reduceOptions.overrides).toBeUndefined();

-    expect((panel as PanelModel).fieldConfig).toMatchInlineSnapshot(`
-      {
-        "defaults": {
-          "color": {
-            "mode": "thresholds",
-          },
-          "decimals": 3,
-          "mappings": [
-            {
-              "from": "50",
-              "id": 1,
-              "operator": "",
-              "text": "BIG",
-              "to": "1000",
-              "type": 2,
-              "value": "",
-            },
-          ],
-          "max": "50",
-          "min": "-50",
-          "thresholds": {
-            "mode": "absolute",
-            "steps": [
-              {
-                "color": "green",
-                "index": 0,
-                "value": -Infinity,
-              },
-              {
-                "color": "#EAB839",
-                "index": 1,
-                "value": -25,
-              },
-              {
-                "color": "#6ED0E0",
-                "index": 2,
-                "value": 0,
-              },
-              {
-                "color": "red",
-                "index": 3,
-                "value": 25,
-              },
-            ],
-          },
-          "unit": "accMS2",
-        },
-        "overrides": [],
-      }
-    `);
+    expect((panel as PanelModel).fieldConfig).toMatchSnapshot();
  });

  it('change from angular singlestat to gauge', () => {
--- a/public/app/plugins/panel/gauge/snapshots/GaugeMigrations.test.ts.snap
+++ b/public/app/plugins/panel/gauge/snapshots/GaugeMigrations.test.ts.snap
@ -14,3 +14,54 @@ exports[`Gauge Panel Migrations from 6.1.1 1`] = `
  "showThresholdMarkers": true,
 }
 `;
+
+exports[`Gauge Panel Migrations from 6.1.1 2`] = `
+{
+  "defaults": {
+    "color": {
+      "mode": "thresholds",
+    },
+    "decimals": 3,
+    "mappings": [
+      {
+        "from": "50",
+        "id": 1,
+        "operator": "",
+        "text": "BIG",
+        "to": "1000",
+        "type": 2,
+        "value": "",
+      },
+    ],
+    "max": "50",
+    "min": "-50",
+    "thresholds": {
+      "mode": "absolute",
+      "steps": [
+        {
+          "color": "green",
+          "index": 0,
+          "value": -Infinity,
+        },
+        {
+          "color": "#EAB839",
+          "index": 1,
+          "value": -25,
+        },
+        {
+          "color": "#6ED0E0",
+          "index": 2,
+          "value": 0,
+        },
+        {
+          "color": "red",
+          "index": 3,
+          "value": 25,
+        },
+      ],
+    },
+    "unit": "accMS2",
+  },
+  "overrides": [],
+}
+`;
--- a/public/app/plugins/panel/radialbar/GaugeMigrations.test.ts
+++ b/public/app/plugins/panel/radialbar/GaugeMigrations.test.ts
@ -0,0 +1,146 @@
+import { PanelModel } from '@grafana/data';
+import { FieldColorModeId } from '@grafana/schema/dist/esm/index.gen';
+
+import { gaugePanelMigrationHandler, gaugePanelChangedHandler } from './GaugeMigrations';
+
+describe('Gauge Panel Migrations', () => {
+  it('from old gauge', () => {
+    const panel = {
+      id: 2,
+      options: {
+        reduceOptions: {
+          calcs: ['lastNotNull'],
+        },
+        showThresholdLabels: false,
+        showThresholdMarkers: true,
+      },
+      fieldConfig: {
+        defaults: {
+          color: {
+            mode: FieldColorModeId.Fixed,
+            fixedColor: 'blue',
+          },
+        },
+        overrides: [],
+      },
+      pluginVersion: '12.3.0',
+      type: 'gauge',
+    } as Omit<PanelModel, 'fieldConfig'>;
+
+    const result = gaugePanelMigrationHandler(panel as PanelModel);
+    expect(result.showThresholdMarkers).toBe(false);
+    expect(result.sparkline).toBe(false);
+  });
+
+  it('from 6.1.1', () => {
+    const panel = {
+      datasource: '-- Grafana --',
+      gridPos: {
+        h: 9,
+        w: 12,
+        x: 0,
+        y: 0,
+      },
+      id: 2,
+      options: {
+        maxValue: '50',
+        minValue: '-50',
+        orientation: 'auto',
+        showThresholdLabels: true,
+        showThresholdMarkers: true,
+        thresholds: [
+          {
+            color: 'green',
+            index: 0,
+            value: -Infinity,
+          },
+          {
+            color: '#EAB839',
+            index: 1,
+            value: -25,
+          },
+          {
+            color: '#6ED0E0',
+            index: 2,
+            value: 0,
+          },
+          {
+            color: 'red',
+            index: 3,
+            value: 25,
+          },
+        ],
+        valueMappings: [
+          {
+            id: 1,
+            operator: '',
+            value: '',
+            text: 'BIG',
+            type: 2,
+            from: '50',
+            to: '1000',
+          },
+        ],
+        valueOptions: {
+          decimals: 3,
+          prefix: 'XX',
+          stat: 'last',
+          suffix: 'YY',
+          unit: 'accMS2',
+        },
+      },
+      pluginVersion: '6.1.6',
+      targets: [
+        {
+          refId: 'A',
+        },
+        {
+          refId: 'B',
+        },
+        {
+          refId: 'C',
+        },
+      ],
+      timeFrom: null,
+      timeShift: null,
+      title: 'Panel Title',
+      type: 'gauge',
+    } as Omit<PanelModel, 'fieldConfig'>;
+
+    const result = gaugePanelMigrationHandler(panel as PanelModel);
+
+    // Ignored due to the API change
+    //@ts-ignore
+    expect(result.reduceOptions.defaults).toBeUndefined();
+    // Ignored due to the API change
+    //@ts-ignore
+    expect(result.reduceOptions.overrides).toBeUndefined();
+
+    expect((panel as PanelModel).fieldConfig).toMatchSnapshot();
+  });
+
+  it('change from angular singlestat to gauge', () => {
+    const old = {
+      angular: {
+        format: 'ms',
+        decimals: 7,
+        gauge: {
+          maxValue: 150,
+          minValue: -10,
+          show: true,
+          thresholdLabels: true,
+          thresholdMarkers: true,
+        },
+      },
+    };
+
+    const panel = {} as PanelModel;
+    const newOptions = gaugePanelChangedHandler(panel, 'singlestat', old, { defaults: {}, overrides: [] });
+    expect(panel.fieldConfig.defaults.unit).toBe('ms');
+    expect(panel.fieldConfig.defaults.min).toBe(-10);
+    expect(panel.fieldConfig.defaults.max).toBe(150);
+    expect(panel.fieldConfig.defaults.decimals).toBe(7);
+    expect(newOptions.showThresholdMarkers).toBe(true);
+    expect(newOptions.showThresholdLabels).toBe(true);
+  });
+});
--- a/public/app/plugins/panel/radialbar/GaugeMigrations.ts
+++ b/public/app/plugins/panel/radialbar/GaugeMigrations.ts
@ -0,0 +1,64 @@
+import { PanelModel, PanelTypeChangedHandler } from '@grafana/data';
+import { FieldColorModeId } from '@grafana/schema/dist/esm/index.gen';
+import { sharedSingleStatPanelChangedHandler, sharedSingleStatMigrationHandler } from '@grafana/ui';
+
+import { Options } from './panelcfg.gen';
+
+// This is called when the panel first loads
+export function gaugePanelMigrationHandler(panel: PanelModel<Options>): Partial<Options> {
+  const sharedOptions = sharedSingleStatMigrationHandler(panel);
+  const newOptions: Partial<Options> = { ...sharedOptions };
+
+  const previousVersion = parseFloat(panel.pluginVersion || '8');
+  const fieldConfig = panel.fieldConfig;
+
+  if (previousVersion <= 12.3) {
+    // This option had no effect in old gauge unless color mode was 'From thresholds'
+    if (newOptions.showThresholdMarkers && fieldConfig?.defaults?.color?.mode !== FieldColorModeId.Thresholds) {
+      newOptions.showThresholdMarkers = false;
+    }
+
+    // This option is enabled by default in new gauge but does not exist in old gauge
+    newOptions.sparkline = false;
+
+    // Remove deprecated sizing options
+    if ('sizing' in newOptions) {
+      delete newOptions.sizing;
+    }
+
+    if ('minVizHeight' in newOptions) {
+      delete newOptions.minVizHeight;
+    }
+
+    if ('minVizWidth' in newOptions) {
+      delete newOptions.minVizWidth;
+    }
+  }
+
+  return newOptions;
+}
+
+export function shouldMigrateGauge(panel: PanelModel): boolean {
+  const previousVersion = parseFloat(panel.pluginVersion ?? '8');
+  return previousVersion <= 12.3;
+}
+
+// This is called when the panel changes from another panel
+export const gaugePanelChangedHandler: PanelTypeChangedHandler<Options> = (
+  panel,
+  prevPluginId: string,
+  prevOptions
+) => {
+  // This handles most config changes
+  const opts: Options = sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions);
+
+  // Changing from angular singlestat
+  if (prevPluginId === 'singlestat' && prevOptions.angular) {
+    const gauge = prevOptions.angular.gauge;
+    if (gauge) {
+      opts.showThresholdMarkers = gauge.thresholdMarkers;
+      opts.showThresholdLabels = gauge.thresholdLabels;
+    }
+  }
+  return opts;
+};
--- a/public/app/plugins/panel/radialbar/RadialBarPanel.tsx
+++ b/public/app/plugins/panel/radialbar/RadialBarPanel.tsx
@ -47,6 +47,7 @@ export function RadialBarPanel({
        alignmentFactors={valueProps.alignmentFactors}
        valueManualFontSize={options.text?.valueSize}
        nameManualFontSize={options.text?.titleSize}
+        onClick={menuProps.openMenu}
      />
    );
  }
--- a/public/app/plugins/panel/radialbar/snapshots/GaugeMigrations.test.ts.snap
+++ b/public/app/plugins/panel/radialbar/snapshots/GaugeMigrations.test.ts.snap
@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Gauge Panel Migrations from 6.1.1 1`] = `
+{
+  "defaults": {
+    "color": {
+      "mode": "thresholds",
+    },
+    "decimals": 3,
+    "mappings": [
+      {
+        "from": "50",
+        "id": 1,
+        "operator": "",
+        "text": "BIG",
+        "to": "1000",
+        "type": 2,
+        "value": "",
+      },
+    ],
+    "max": "50",
+    "min": "-50",
+    "thresholds": {
+      "mode": "absolute",
+      "steps": [
+        {
+          "color": "green",
+          "index": 0,
+          "value": -Infinity,
+        },
+        {
+          "color": "#EAB839",
+          "index": 1,
+          "value": -25,
+        },
+        {
+          "color": "#6ED0E0",
+          "index": 2,
+          "value": 0,
+        },
+        {
+          "color": "red",
+          "index": 3,
+          "value": 25,
+        },
+      ],
+    },
+    "unit": "accMS2",
+  },
+  "overrides": [],
+}
+`;
--- a/public/app/plugins/panel/radialbar/module.tsx
+++ b/public/app/plugins/panel/radialbar/module.tsx
@ -5,6 +5,7 @@ import { commonOptionsBuilder } from '@grafana/ui';
 import { addOrientationOption, addStandardDataReduceOptions } from '../stat/common';

 import { EffectsEditor } from './EffectsEditor';
+import { gaugePanelChangedHandler, gaugePanelMigrationHandler, shouldMigrateGauge } from './GaugeMigrations';
 import { RadialBarPanel } from './RadialBarPanel';
 import { defaultGaugePanelEffects, defaultOptions, Options } from './panelcfg.gen';
 import { GaugeSuggestionsSupplier } from './suggestions';
@ -111,4 +112,6 @@ export const plugin = new PanelPlugin<Options>(RadialBarPanel)
      defaultValue: defaultGaugePanelEffects,
    });
  })
-  .setSuggestionsSupplier(new GaugeSuggestionsSupplier());
+  .setSuggestionsSupplier(new GaugeSuggestionsSupplier())
+  .setMigrationHandler(gaugePanelMigrationHandler, shouldMigrateGauge)
+  .setPanelChangeHandler(gaugePanelChangedHandler);
--- a/public/app/plugins/panel/radialbar/notes.txt
+++ b/public/app/plugins/panel/radialbar/notes.txt
@ -10,3 +10,9 @@
 Gauge => new gauge migration notes

 Old gauge "Show threshold markers" does nothing when color scheme != From thresholds 
+
+Decide what to do with 
+
+sizing: manual & minVizHeight & minVizWidth (do not think this panel should scroll, and minWidth is broken/does not scroll)
+neutral value
+
--- a/public/app/plugins/panel/radialbar/panelcfg.cue
+++ b/public/app/plugins/panel/radialbar/panelcfg.cue
@ -29,7 +29,7 @@ composableKinds: PanelCfg: {
 					barGlow?: bool | *false
 					spotlight?: bool | *false
 					rounded?: bool | *false	
-					centerGlow?: bool | *true
+					centerGlow?: bool | *false
 				 } @cuetsy(kind="interface")

 				Options: {
@ -38,10 +38,10 @@ composableKinds: PanelCfg: {
 					showThresholdLabels: bool | *false
 					segmentCount: number | *1
 					segmentSpacing: number | *0.3
-					sparkline?: bool | *false
+					sparkline?: bool | *true
 					shape: "circle" | *"gauge"	
-					barWidthFactor: number | *0.4
-					gradient: *"none" | "auto" 
+					barWidthFactor: number | *0.5
+					gradient: "none" | *"auto" 
 					effects: GaugePanelEffects | *{}
 				} @cuetsy(kind="interface")
 			}
--- a/public/app/plugins/panel/radialbar/panelcfg.gen.ts
+++ b/public/app/plugins/panel/radialbar/panelcfg.gen.ts
@ -19,7 +19,7 @@ export interface GaugePanelEffects {

 export const defaultGaugePanelEffects: Partial<GaugePanelEffects> = {
  barGlow: false,
-  centerGlow: true,
+  centerGlow: false,
  rounded: false,
  spotlight: false,
 };
@ -37,13 +37,13 @@ export interface Options extends common.SingleStatBaseOptions {
 }

 export const defaultOptions: Partial<Options> = {
-  barWidthFactor: 0.4,
+  barWidthFactor: 0.5,
  effects: {},
-  gradient: 'none',
+  gradient: 'auto',
  segmentCount: 1,
  segmentSpacing: 0.3,
  shape: 'gauge',
  showThresholdLabels: false,
  showThresholdMarkers: true,
-  sparkline: false,
+  sparkline: true,
 };