From 66a3c0fa7a902300f8a117657b3f0195651ede6e Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Mon, 8 Aug 2022 09:29:57 +0100 Subject: [PATCH] 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 2fea3f0d9ab4e1d8ee99ab88c41aeba7765f2402) Co-authored-by: Ashley Harrison --- packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx | 4 ++++ packages/grafana-ui/src/components/BarGauge/BarGauge.tsx | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx index d34b27d943d..3f0cfc2de07 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx +++ b/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', () => { diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index 4971d4f2323..fd5bd1ad8d9 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/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; } /**