From 6015432f075f54c3cf8a36fd95e5e2b21a513489 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Mon, 29 Mar 2021 15:11:23 +0100
Subject: [PATCH] BarGauge: Fix percentage-based thresholds (#32415)

Closes #31756
---
 .../grafana-ui/src/components/BarGauge/BarGauge.tsx  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
index 66d1c738aff..deb29615c95 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
@@ -538,13 +538,19 @@ export function getBarGradient(props: Props, maxSize: number): string {
     for (let i = 0; i < thresholds.steps.length; i++) {
       const threshold = thresholds.steps[i];
       const color = getColorForTheme(threshold.color, props.theme);
-      const valuePercent = getValuePercent(threshold.value, minValue, maxValue);
+      const valuePercent =
+        thresholds.mode === ThresholdsMode.Percentage
+          ? threshold.value / 100
+          : getValuePercent(threshold.value, minValue, maxValue);
       const pos = valuePercent * maxSize;
       const offset = Math.round(pos - (pos - lastpos) / 2);
-
+      const thresholdValue =
+        thresholds.mode === ThresholdsMode.Percentage
+          ? minValue + (maxValue - minValue) * valuePercent
+          : threshold.value;
       if (gradient === '') {
         gradient = `linear-gradient(${cssDirection}, ${color}, ${color}`;
-      } else if (value.numeric < threshold.value) {
+      } else if (value.numeric < thresholdValue) {
         break;
       } else {
         lastpos = pos;