fix a couple of bugs

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

@@ -8,12 +8,12 @@ import { Sparkline } from '../Sparkline/Sparkline';
 import { RadialShape, RadialTextMode, RadialGaugeDimensions } from './types';
 
 interface RadialSparklineProps {
-  sparkline: FieldDisplay['sparkline'];
-  dimensions: RadialGaugeDimensions;
-  theme: GrafanaTheme2;
   color?: string;
-  shape?: RadialShape;
+  dimensions: RadialGaugeDimensions;
+  shape: RadialShape;
+  sparkline: FieldDisplay['sparkline'];
   textMode: Exclude<RadialTextMode, 'auto'>;
+  theme: GrafanaTheme2;
 }
 
 const SPARKLINE_HEIGHT_DIVISOR = 4;
@@ -24,13 +24,23 @@ const SPARKLINE_TOP_OFFSET_DIVISOR_CIRCLE = 4;
 const SPARKLINE_TOP_OFFSET_DIVISOR_CIRCLE_NAME_AND_VALUE = 3.3;
 const SPARKLINE_SPACING = 8;
 
+export function getSparklineDimensions(
+  radius: number,
+  barWidth: number,
+  showNameAndValue: boolean,
+  shape: RadialShape
+): { width: number; height: number } {
+  const height = radius / (showNameAndValue ? SPARKLINE_HEIGHT_DIVISOR_NAME_AND_VALUE : SPARKLINE_HEIGHT_DIVISOR);
+  const width = radius * (shape === 'gauge' ? SPARKLINE_WIDTH_FACTOR_ARC : SPARKLINE_WIDTH_FACTOR_CIRCLE) - barWidth;
+  return { width, height };
+}
+
 export const RadialSparkline = memo(
   ({ sparkline, dimensions, theme, color, shape, textMode }: RadialSparklineProps) => {
     const { radius, barWidth } = dimensions;
 
     const showNameAndValue = textMode === 'value_and_name';
-    const height = radius / (showNameAndValue ? SPARKLINE_HEIGHT_DIVISOR_NAME_AND_VALUE : SPARKLINE_HEIGHT_DIVISOR);
-    const width = radius * (shape === 'gauge' ? SPARKLINE_WIDTH_FACTOR_ARC : SPARKLINE_WIDTH_FACTOR_CIRCLE) - barWidth;
+    const { width, height } = getSparklineDimensions(radius, barWidth, showNameAndValue, shape);
     const topPos =
       shape === 'gauge'
         ? dimensions.gaugeBottomY - height - SPARKLINE_SPACING

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

@@ -34,7 +34,9 @@ const MAX_TEXT_WIDTH_DIVISOR = 7;
 const MAX_NAME_HEIGHT_DIVISOR = 4;
 const VALUE_SPACE_PERCENTAGE = 0.7;
 const SPARKLINE_SPACING = 8;
-const MIN_UNIT_FONT_SIZE = 5;
+const MIN_VALUE_FONT_SIZE = 1;
+const MIN_NAME_FONT_SIZE = 10;
+const MIN_UNIT_FONT_SIZE = 6;
 
 export const RadialText = memo(
   ({
@@ -71,27 +73,31 @@ export const RadialText = memo(
       maxNameHeight = NAME_TO_HEIGHT_FACTOR * Math.pow(radius, LARGE_RADIUS_SCALING_DECAY);
     }
 
-    const valueFontSize =
+    const valueFontSize = Math.max(
       valueManualFontSize ??
-      calculateFontSize(
-        valueToAlignTo,
-        maxTextWidth,
-        maxValueHeight,
-        LINE_HEIGHT_FACTOR,
-        undefined,
-        theme.typography.body.fontWeight
-      );
+        calculateFontSize(
+          valueToAlignTo,
+          maxTextWidth,
+          maxValueHeight,
+          LINE_HEIGHT_FACTOR,
+          undefined,
+          theme.typography.body.fontWeight
+        ),
+      MIN_VALUE_FONT_SIZE
+    );
 
-    const nameFontSize =
+    const nameFontSize = Math.max(
       nameManualFontSize ??
-      calculateFontSize(
-        nameToAlignTo,
-        maxTextWidth,
-        maxNameHeight,
-        LINE_HEIGHT_FACTOR,
-        undefined,
-        theme.typography.body.fontWeight
-      );
+        calculateFontSize(
+          nameToAlignTo,
+          maxTextWidth,
+          maxNameHeight,
+          LINE_HEIGHT_FACTOR,
+          undefined,
+          theme.typography.body.fontWeight
+        ),
+      MIN_NAME_FONT_SIZE
+    );
 
     const unitFontSize = Math.max(valueFontSize * VALUE_SPACE_PERCENTAGE, MIN_UNIT_FONT_SIZE);
     const valueHeight = valueFontSize * LINE_HEIGHT_FACTOR;

packages/grafana-ui/src/components/RadialGauge/utils.test.ts

@@ -325,11 +325,9 @@ describe('RadialGauge utils', () => {
         expect(drawRadialArcPath(0, 380, defaultDims)).toEqual(drawRadialArcPath(0, 380, defaultDims));
       });
 
-      it('should throw an error if inner radius collapses to zero or below', () => {
+      it('should return empty string if inner radius collapses to zero or below', () => {
         const smallRadiusDims = { ...defaultDims, radius: 5, barWidth: 20 };
-        expect(() => drawRadialArcPath(0, 180, smallRadiusDims)).toThrow(
-          'Inner radius collapsed to zero or below, cannot draw radial arc path'
-        );
+        expect(drawRadialArcPath(0, 180, smallRadiusDims)).toBe('');
       });
     });
   });

packages/grafana-ui/src/components/RadialGauge/utils.ts

@@ -195,7 +195,7 @@ export function drawRadialArcPath(
   const outerR = radius + barWidth / 2;
   const innerR = Math.max(0, radius - barWidth / 2);
   if (innerR <= 0) {
-    throw new Error('Inner radius collapsed to zero or below, cannot draw radial arc path');
+    return ''; // cannot draw arc with 0 inner radius
   }
 
   // get points for both an inner and outer arc. we draw