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

(cherry picked from commit 21d9cf0db4)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
This commit is contained in:
Grot (@grafanabot) 2022-10-07 01:36:07 +02:00 committed by GitHub
parent 5e0b29ed4b
commit dc04e2589c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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();