BarGauge: Show empty bar when value, minValue and maxValue are all equal (#53314) (#53371)

* prevent returning NaN from getValuePercent

* return 0 instead of NaN always

(cherry picked from commit 2fea3f0d9a)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx

@@ -159,6 +159,10 @@ describe('BarGauge', () => {
     it('-30 to 30 and value 30', () => {
       expect(getValuePercent(30, -30, 30)).toEqual(1);
     });
+
+    it('returns 0 if the min, max and value are all the same value', () => {
+      expect(getValuePercent(25, 25, 25)).toEqual(0);
+    });
   });
 
   describe('Vertical bar', () => {

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

@@ -430,7 +430,9 @@ export function getCellColor(
 }
 
 export function getValuePercent(value: number, minValue: number, maxValue: number): number {
-  return Math.min((value - minValue) / (maxValue - minValue), 1);
+  // Need special logic for when minValue === maxValue === value to prevent returning NaN
+  const valueRatio = Math.min((value - minValue) / (maxValue - minValue), 1);
+  return isNaN(valueRatio) ? 0 : valueRatio;
 }
 
 /**