Merge pull request #636 from pyrra-dev/release-0.5-errorbudgetgraph-g…

…radient-fix

ui: Fix the ErrorBudgetGraph's gradient

ui/src/components/graphs/ErrorBudgetGraph.tsx

@@ -100,8 +100,6 @@ const ErrorBudgetGraph = ({
   const canvasPadding = 20
 
   const budgetGradient = (u: uPlot) => {
-    const width = u.ctx.canvas.width
-    const height = u.ctx.canvas.height
     const min = u.scales.y.min
     const max = u.scales.y.max
 
@@ -117,19 +115,17 @@ const ErrorBudgetGraph = ({
       return `#${reds[0]}`
     }
 
+    const y0 = u.valToPos(u.scales.y.min ?? 0, 'y', true)
+    const y1 = u.valToPos(u.scales.y.max ?? 0, 'y', true)
     const zeroHeight = u.valToPos(0, 'y', true)
-    const zeroPercentage = zeroHeight / (height - canvasPadding)
+    const zeroPercentage = (y0 - zeroHeight) / (y0 - y1)
+
+    const gradient = u.ctx.createLinearGradient(0, y0, 0, y1)
+    gradient.addColorStop(0, `#${reds[0]}`)
 
-    const gradient = u.ctx.createLinearGradient(
-      width / 2,
-      canvasPadding - 2,
-      width / 2,
-      height - canvasPadding,
-    )
-    gradient.addColorStop(0, `#${greens[0]}`)
-    gradient.addColorStop(zeroPercentage, `#${greens[0]}`)
     gradient.addColorStop(zeroPercentage, `#${reds[0]}`)
-    gradient.addColorStop(1, `#${reds[0]}`)
+    gradient.addColorStop(zeroPercentage, `#${greens[0]}`)
+    gradient.addColorStop(1, `#${greens[0]}`)
     return gradient
   }