fix off-by-one, update tests

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

@@ -96,7 +96,7 @@ export function RadialGauge(props: RadialGaugeProps) {
     roundedBars = true,
     thresholdsBar = false,
     showScaleLabels = false,
-    neutral: rawNeutral,
+    neutral,
     endpointMarker,
     onClick,
     values,
@@ -119,8 +119,6 @@ export function RadialGauge(props: RadialGaugeProps) {
 
   for (let barIndex = 0; barIndex < values.length; barIndex++) {
     const displayValue = values[barIndex];
-    const [min, max] = getFieldConfigMinMax(displayValue);
-    const neutral = typeof rawNeutral === 'number' ? Math.min(Math.max(min, rawNeutral), max) : undefined;
     const { startValueAngle, endValueAngle, angleRange } = getValueAngleForValue(
       displayValue,
       startAngle,

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

@@ -283,7 +283,37 @@ describe('RadialGauge utils', () => {
       expect(result.endValueAngle).toBe(240);
     });
 
-    // TODO add tests for neutral handling once implemented
+    it('should handle neutral values', () => {
+      const fieldDisplay = createFieldDisplay(75, 0, 100);
+      const result = getValueAngleForValue(fieldDisplay, 0, 360, 50);
+
+      expect(result.startValueAngle).toBe(180); // Neutral at 50% of 360°
+      expect(result.endValueAngle).toBe(90); // 75% - 50% = 25% of 360°
+    });
+
+    it('should handle neutral values equal to value', () => {
+      const fieldDisplay = createFieldDisplay(50, 0, 100);
+      const result = getValueAngleForValue(fieldDisplay, 0, 360, 50);
+
+      expect(result.startValueAngle).toBe(180); // Neutral at 50% of 360°
+      expect(result.endValueAngle).toBe(0); // No difference
+    });
+
+    it('should handle neutral values greater than value', () => {
+      const fieldDisplay = createFieldDisplay(25, 0, 100);
+      const result = getValueAngleForValue(fieldDisplay, 0, 360, 150);
+
+      expect(result.startValueAngle).toBe(90);
+      expect(result.endValueAngle).toBe(270); // remaining angle to 360
+    });
+
+    it('should handle neutral values below range', () => {
+      const fieldDisplay = createFieldDisplay(25, 0, 100);
+      const result = getValueAngleForValue(fieldDisplay, 0, 360, -50);
+
+      expect(result.startValueAngle).toBe(0);
+      expect(result.endValueAngle).toBe(90);
+    });
   });
 
   describe('drawRadialArcPath', () => {

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

@@ -39,7 +39,9 @@ export function getValueAngleForValue(
 
   let startValueAngle = 0;
   if (typeof neutral === 'number') {
-    const neutralAngle = getValuePercentageForValue(fieldDisplay, neutral) * angleRange;
+    const [min, max] = getFieldConfigMinMax(fieldDisplay);
+    const clampedNeutral = Math.min(Math.max(min, neutral), max);
+    const neutralAngle = getValuePercentageForValue(fieldDisplay, clampedNeutral) * angleRange;
     if (neutralAngle <= valueAngle) {
       startValueAngle = neutralAngle;
       endValueAngle = valueAngle - neutralAngle;