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

GraphPanel: fix annotations overflowing panels (#25606)

Browse Source
This commit is contained in:
Harrison Shoff 2020-06-16 09:27:12 -04:00 committed by GitHub
parent 35e2b87b61
commit b4136c1eca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
public/app/plugins/panel/graph/jquery.flot.events.ts
View File

@ -287,8 +287,11 @@ export class EventMarkers {
// var o = this._plot.getPlotOffset(); // var o = this._plot.getPlotOffset();
$.each(this._events, (index, event) => { $.each(this._events, (index, event) => {
const options = event.getOptions();
const insidePlot = this._insidePlot(options.min) || this._insidePlot(options.timeEnd);
const overlapPlot = this._overlapPlot(options.min, options.timeEnd);
// check event is inside the graph range // check event is inside the graph range
if (this._insidePlot(event.getOptions().min) && !event.isHidden()) { if ((insidePlot || overlapPlot) && !event.isHidden()) {
event.visual().draw(); event.visual().draw();
} else { } else {
event event
@ -525,30 +528,38 @@ export class EventMarkers {
const timeTo = Math.max(event.min, event.timeEnd); const timeTo = Math.max(event.min, event.timeEnd);
left = xaxis.p2c(timeFrom) + o.left; left = xaxis.p2c(timeFrom) + o.left;
const right = xaxis.p2c(timeTo) + o.left; const right = xaxis.p2c(timeTo) + o.left;
regionWidth = right - left;
const [xmin, xmax] = [o.left, o.left + this._plot.width()];
const regionStart = Math.max(left, xmin);
const regionEnd = Math.min(right, xmax);
const regionOffset = right > xmax ? 0 : lineWidth; // only include lineWidth when right line is visible
regionWidth = regionEnd - regionStart + regionOffset;
_.each([left, right], position => { _.each([left, right], position => {
const line = $('<div class="events_line flot-temp-elem"></div>').css({ // only draw visible region lines
position: 'absolute', if (xmin <= position && position < xmax) {
opacity: 0.8, const line = $('<div class="events_line flot-temp-elem"></div>').css({
left: position + 'px', position: 'absolute',
top: 8, opacity: 0.8,
width: lineWidth + 'px', left: position + 'px',
height: this._plot.height() + topOffset, top: 8,
'border-left-width': lineWidth + 'px', width: lineWidth + 'px',
'border-left-style': lineStyle, height: this._plot.height() + topOffset,
'border-left-color': color, 'border-left-width': lineWidth + 'px',
color: color, 'border-left-style': lineStyle,
}); 'border-left-color': color,
line.appendTo(container); color: color,
});
line.appendTo(container);
}
}); });
const region = $('<div class="events_marker region_marker flot-temp-elem"></div>').css({ const region = $('<div class="events_marker region_marker flot-temp-elem"></div>').css({
position: 'absolute', position: 'absolute',
opacity: 0.5, opacity: 0.5,
left: left + 'px', left: regionStart + 'px',
top: top, top: top,
width: Math.round(regionWidth + lineWidth) + 'px', width: regionWidth + 'px',
height: '0.5rem', height: '0.5rem',
'border-left-color': color, 'border-left-color': color,
color: color, color: color,
@ -608,6 +619,16 @@ export class EventMarkers {
const xc = xaxis.p2c(x); const xc = xaxis.p2c(x);
return xc > 0 && xc < xaxis.p2c(xaxis.max); return xc > 0 && xc < xaxis.p2c(xaxis.max);
} }
/**
* check if the event overlaps the visible range
*/
_overlapPlot(point0: number, point1: number) {
const xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
const [coord0, coord1] = [xaxis.p2c(point0), xaxis.p2c(point1)];
const [coordMin, coordMax] = [0, xaxis.p2c(xaxis.max)];
return coordMin < coord0 && coord1 < coordMax;
}
} }
/** /**