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

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

@ -287,8 +287,11 @@ export class EventMarkers {
// var o = this._plot.getPlotOffset();
$.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
if (this._insidePlot(event.getOptions().min) && !event.isHidden()) {
if ((insidePlot || overlapPlot) && !event.isHidden()) {
event.visual().draw();
} else {
event
@ -525,9 +528,16 @@ export class EventMarkers {
const timeTo = Math.max(event.min, event.timeEnd);
left = xaxis.p2c(timeFrom) + 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 => {
// only draw visible region lines
if (xmin <= position && position < xmax) {
const line = $('<div class="events_line flot-temp-elem"></div>').css({
position: 'absolute',
opacity: 0.8,
@ -541,14 +551,15 @@ export class EventMarkers {
color: color,
});
line.appendTo(container);
}
});
const region = $('<div class="events_marker region_marker flot-temp-elem"></div>').css({
position: 'absolute',
opacity: 0.5,
left: left + 'px',
left: regionStart + 'px',
top: top,
width: Math.round(regionWidth + lineWidth) + 'px',
width: regionWidth + 'px',
height: '0.5rem',
'border-left-color': color,
color: color,
@ -608,6 +619,16 @@ export class EventMarkers {
const xc = xaxis.p2c(x);
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;
}
}
/**