IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Leon Sorokin 2022-10-06 18:18:47 -05:00 committed by GitHub
parent b5cb917dfa
commit 21d9cf0db4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
? [10, 10] ? [10, 10]
: null; : 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; let ctx = u.ctx;
// Thresholds below a transparent threshold is treated like "less than", and line drawn previous threshold // 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); 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 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)); let y1 = Math.round(u.valToPos(step.value, yScaleKey, true));
ctx.beginPath(); 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 ctx = u.ctx;
let grd = scaleGradient( let grd = scaleGradient(
u, u,
u.series[1].scale!, yScaleKey,
steps.map((step) => { steps.map((step) => {
let color = tinycolor(theme.visualization.getColorByName(step.color)); let color = tinycolor(theme.visualization.getColorByName(step.color));
@ -125,15 +125,15 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
switch (config.mode) { switch (config.mode) {
case GraphTresholdsStyleMode.Line: case GraphTresholdsStyleMode.Line:
case GraphTresholdsStyleMode.Dashed: case GraphTresholdsStyleMode.Dashed:
addLines(u, steps, theme, xMin, xMax, scaleKey); addLines(u, scaleKey, steps, theme);
break; break;
case GraphTresholdsStyleMode.Area: case GraphTresholdsStyleMode.Area:
addAreas(u, steps, theme); addAreas(u, scaleKey, steps, theme);
break; break;
case GraphTresholdsStyleMode.LineAndArea: case GraphTresholdsStyleMode.LineAndArea:
case GraphTresholdsStyleMode.DashedAndArea: case GraphTresholdsStyleMode.DashedAndArea:
addAreas(u, steps, theme); addAreas(u, scaleKey, steps, theme);
addLines(u, steps, theme, xMin, xMax, scaleKey); addLines(u, scaleKey, steps, theme);
} }
ctx.restore(); ctx.restore();