Thresholds: fix line rendering with multiple y axes (#56516)

packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts

@@ -24,7 +24,7 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
       ? [10, 10]
       : null;
 
-  function addLines(u: uPlot, steps: Threshold[], theme: GrafanaTheme2, xMin: number, xMax: number, yScaleKey: string) {
+  function addLines(u: uPlot, yScaleKey: string, steps: Threshold[], theme: GrafanaTheme2) {
     let ctx = u.ctx;
 
     // Thresholds below a transparent threshold is treated like "less than", and line drawn previous threshold
@@ -61,9 +61,9 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
         color.setAlpha(0.7);
       }
 
-      let x0 = Math.round(u.valToPos(xMin!, 'x', true));
+      let x0 = Math.round(u.bbox.left);
       let y0 = Math.round(u.valToPos(step.value, yScaleKey, true));
-      let x1 = Math.round(u.valToPos(xMax!, 'x', true));
+      let x1 = Math.round(u.bbox.left + u.bbox.width);
       let y1 = Math.round(u.valToPos(step.value, yScaleKey, true));
 
       ctx.beginPath();
@@ -75,12 +75,12 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
     }
   }
 
-  function addAreas(u: uPlot, steps: Threshold[], theme: GrafanaTheme2) {
+  function addAreas(u: uPlot, yScaleKey: string, steps: Threshold[], theme: GrafanaTheme2) {
     let ctx = u.ctx;
 
     let grd = scaleGradient(
       u,
-      u.series[1].scale!,
+      yScaleKey,
       steps.map((step) => {
         let color = tinycolor(theme.visualization.getColorByName(step.color));
 
@@ -125,15 +125,15 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
     switch (config.mode) {
       case GraphTresholdsStyleMode.Line:
       case GraphTresholdsStyleMode.Dashed:
-        addLines(u, steps, theme, xMin, xMax, scaleKey);
+        addLines(u, scaleKey, steps, theme);
         break;
       case GraphTresholdsStyleMode.Area:
-        addAreas(u, steps, theme);
+        addAreas(u, scaleKey, steps, theme);
         break;
       case GraphTresholdsStyleMode.LineAndArea:
       case GraphTresholdsStyleMode.DashedAndArea:
-        addAreas(u, steps, theme);
-        addLines(u, steps, theme, xMin, xMax, scaleKey);
+        addAreas(u, scaleKey, steps, theme);
+        addLines(u, scaleKey, steps, theme);
     }
 
     ctx.restore();