From 5b1a386dac2f9e0ca8ed5f8b4b6e39cad6e3ae62 Mon Sep 17 00:00:00 2001 From: "grafana-delivery-bot[bot]" <132647405+grafana-delivery-bot[bot]@users.noreply.github.com> Date: Sat, 9 Nov 2024 13:45:03 -0600 Subject: [PATCH] [v11.3.x] BarChart: Fix threshold lines rendering for horizontal orientation (#96137) BarChart: Fix threshold lines rendering for horizontal orientation (#95737) * Use different threshold x/y coordinates depending on orientation * invert wording / semantics --------- Co-authored-by: Leon Sorokin (cherry picked from commit 95692b3d6831dcd6e086233de9760d614479444b) Co-authored-by: Kristina --- .../src/components/uPlot/config/UPlotThresholds.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts index 8be4df87406..ff7614839b5 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts @@ -2,7 +2,7 @@ import tinycolor from 'tinycolor2'; import uPlot from 'uplot'; import { GrafanaTheme2, Threshold, ThresholdsConfig, ThresholdsMode } from '@grafana/data'; -import { GraphThresholdsStyleConfig, GraphThresholdsStyleMode } from '@grafana/schema'; +import { GraphThresholdsStyleConfig, GraphThresholdsStyleMode, ScaleOrientation } from '@grafana/schema'; import { getGradientRange, scaleGradient } from './gradientFills'; @@ -58,10 +58,13 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) { color.setAlpha(0.7); } - let x0 = Math.round(u.bbox.left); - let y0 = Math.round(u.valToPos(step.value, yScaleKey, true)); - let x1 = Math.round(u.bbox.left + u.bbox.width); - let y1 = Math.round(u.valToPos(step.value, yScaleKey, true)); + const isHorizontal = u.scales.x!.ori === ScaleOrientation.Horizontal; + const scaleVal = u.valToPos(step.value, yScaleKey, true); + + let x0 = Math.round(isHorizontal ? u.bbox.left : scaleVal); + let y0 = Math.round(isHorizontal ? scaleVal : u.bbox.top); + let x1 = Math.round(isHorizontal ? u.bbox.left + u.bbox.width : scaleVal); + let y1 = Math.round(isHorizontal ? scaleVal : u.bbox.top + u.bbox.height); ctx.beginPath(); ctx.moveTo(x0, y0);