Gauge: Fix issues found during bug bash (#115740)

* fix warning for VizRepeater styles

* Gauge: Update test dashboard to round two of the segment panels to whole numbers

* Gauge: E2E tests

* add test for sparklines

* Gauge: Change inner glow to be friendlier to our a11y tests

* remove unused CODEOWNER declaration

* expose text mode so that old displayName usage is somewhat preserved

* update migrations to use the value_and_text mode if displayName has a non-empty value

* more test cases

* update unit tests for fixture updates

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -535,6 +535,11 @@ export const versionedComponents = {
           '12.3.0': 'data-testid viz-tooltip-wrapper',
         },
       },
+      Gauge: {
+        Container: {
+          '12.4.0': 'data-testid gauge container',
+        },
+      },
     },
   },
   VizLegend: {

packages/grafana-schema/src/raw/composable/newgauge/panelcfg/x/NewGaugePanelCfg_types.gen.ts

@@ -35,6 +35,7 @@ export interface Options extends common.SingleStatBaseOptions {
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
   sparkline?: boolean;
+  textMode?: ('auto' | 'value_and_name' | 'value' | 'name' | 'none');
 }
 
 export const defaultOptions: Partial<Options> = {
@@ -48,4 +49,5 @@ export const defaultOptions: Partial<Options> = {
   showThresholdLabels: false,
   showThresholdMarkers: true,
   sparkline: true,
+  textMode: 'auto',
 };

packages/grafana-ui/src/components/RadialGauge/RadialGauge.story.tsx

@@ -32,24 +32,6 @@ const meta: Meta<StoryProps> = {
     controls: {
       exclude: ['theme', 'values', 'vizCount'],
     },
-    a11y: {
-      config: {
-        rules: [
-          {
-            id: 'scrollable-region-focusable',
-            selector: 'body',
-            enabled: false,
-          },
-          // NOTE: this is necessary due to a false positive with the filered svg glow in one of the examples.
-          // The color-contrast in this component should be accessible!
-          {
-            id: 'color-contrast',
-            selector: 'text',
-            enabled: false,
-          },
-        ],
-      },
-    },
   },
   args: {
     barWidthFactor: 0.2,

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

@@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
 import { useId } from 'react';
 
 import { DisplayValueAlignmentFactors, FALLBACK_COLOR, FieldDisplay, GrafanaTheme2, TimeRange } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
 
 import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
@@ -275,7 +276,11 @@ export function RadialGauge(props: RadialGaugeProps) {
   }
 
   return (
-    <div className={styles.vizWrapper} style={{ width, height }}>
+    <div
+      data-testid={selectors.components.Panels.Visualization.Gauge.Container}
+      className={styles.vizWrapper}
+      style={{ width, height }}
+    >
       {body}
     </div>
   );

packages/grafana-ui/src/components/RadialGauge/effects.tsx

@@ -1,4 +1,4 @@
-import { GrafanaTheme2 } from '@grafana/data';
+import { colorManipulator, GrafanaTheme2 } from '@grafana/data';
 
 import { RadialGaugeDimensions } from './types';
 
@@ -25,13 +25,14 @@ export function GlowGradient({ id, barWidth }: GlowGradientProps) {
   );
 }
 
-const CENTER_GLOW_OPACITY = 0.15;
+const CENTER_GLOW_OPACITY = 0.25;
 
 export function CenterGlowGradient({ gaugeId, color }: { gaugeId: string; color: string }) {
+  const transparentColor = colorManipulator.alpha(color, CENTER_GLOW_OPACITY);
   return (
     <radialGradient id={`circle-glow-${gaugeId}`} r="50%" fr="0%">
-      <stop offset="0%" stopColor={color} stopOpacity={CENTER_GLOW_OPACITY} />
-      <stop offset="90%" stopColor={color} stopOpacity={0} />
+      <stop offset="0%" stopColor={transparentColor} />
+      <stop offset="90%" stopColor={'#ffffff00'} />
     </radialGradient>
   );
 }
@@ -44,13 +45,14 @@ export interface CenterGlowProps {
 
 export function MiddleCircleGlow({ dimensions, gaugeId, color }: CenterGlowProps) {
   const gradientId = `circle-glow-${gaugeId}`;
+  const transparentColor = color ? colorManipulator.alpha(color, CENTER_GLOW_OPACITY) : color;
 
   return (
     <>
       <defs>
         <radialGradient id={gradientId} r="50%" fr="0%">
-          <stop offset="0%" stopColor={color} stopOpacity={CENTER_GLOW_OPACITY} />
-          <stop offset="90%" stopColor={color} stopOpacity={0} />
+          <stop offset="0%" stopColor={transparentColor} />
+          <stop offset="90%" stopColor="#ffffff00" />
         </radialGradient>
       </defs>
       <g>
@@ -86,9 +88,9 @@ export function SpotlightGradient({
 
   return (
     <linearGradient x1={x1} y1={y1} x2={x2} y2={y2} id={id} gradientUnits="userSpaceOnUse">
-      <stop offset="0%" stopColor={'white'} stopOpacity={0.0} />
-      <stop offset="95%" stopColor={'white'} stopOpacity={0.5} />
-      {roundedBars && <stop offset="100%" stopColor={'white'} stopOpacity={roundedBars ? 0.7 : 1} />}
+      <stop offset="0%" stopColor="#ffffff00" />
+      <stop offset="95%" stopColor="#ffffff88" />
+      {roundedBars && <stop offset="100%" stopColor={roundedBars ? '#ffffffbb' : 'white'} />}
     </linearGradient>
   );
 }

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

@@ -167,7 +167,8 @@ export class VizRepeater<V, D = {}> extends PureComponent<PropsWithDefaults<V, D
 
     const repeaterStyle: React.CSSProperties = {
       display: 'flex',
-      overflow: `${minVizWidth ? 'auto' : 'hidden'} ${minVizHeight ? 'auto' : 'hidden'}`,
+      overflowX: `${minVizWidth ? 'auto' : 'hidden'}`,
+      overflowY: `${minVizHeight ? 'auto' : 'hidden'}`,
     };
 
     let vizHeight = height;