Skip to content

N
nexpie-grafana-theme
Commit d83f8865 by Patrick O'Carroll
Options

migrated jquery.flot.events to ts

parent 0841e67d
Showing with 257 additions and 198 deletions
public/app/plugins/panel/graph/jquery.flot.events.js → public/app/plugins/panel/graph/jquery.flot.events.ts
define([
'jquery',
'lodash',
'angular',
'tether-drop',
],
function ($, _, angular, Drop) {
'use strict';
function createAnnotationToolip(element, event, plot) {
var injector = angular.element(document).injector();
var content = document.createElement('div');
import $ from 'jquery';
import _ from 'lodash';
import angular from 'angular';
import Drop from 'tether-drop';
function createAnnotationToolip(element, event, plot) {
let injector = angular.element(document).injector();
let content = document.createElement('div');
content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>';
injector.invoke(["$compile", "$rootScope", function($compile, $rootScope) {
var eventManager = plot.getOptions().events.manager;
var tmpScope = $rootScope.$new(true);
injector.invoke([
'$compile',
'$rootScope',
function($compile, $rootScope) {
let eventManager = plot.getOptions().events.manager;
let tmpScope = $rootScope.$new(true);
tmpScope.event = event;
tmpScope.onEdit = function() {
eventManager.editEvent(event);
......@@ -24,16 +23,16 @@ function ($, _, angular, Drop) {
tmpScope.$digest();
tmpScope.$destroy();
var drop = new Drop({
let drop = new Drop({
target: element[0],
content: content,
position: "bottom center",
position: 'bottom center',
classes: 'drop-popover drop-popover--annotation',
openOn: 'hover',
hoverCloseDelay: 200,
tetherOptions: {
constraints: [{to: 'window', pin: true, attachment: "both"}]
}
constraints: [{ to: 'window', pin: true, attachment: 'both' }],
},
});
drop.open();
......@@ -43,35 +42,38 @@ function ($, _, angular, Drop) {
drop.destroy();
});
});
}]);
}
},
]);
}
var markerElementToAttachTo = null;
let markerElementToAttachTo = null;
function createEditPopover(element, event, plot) {
var eventManager = plot.getOptions().events.manager;
function createEditPopover(element, event, plot) {
let eventManager = plot.getOptions().events.manager;
if (eventManager.editorOpen) {
// update marker element to attach to (needed in case of legend on the right
// when there is a double render pass and the initial marker element is removed)
// when there is a double render pass and the inital marker element is removed)
markerElementToAttachTo = element;
return;
}
// mark as openend
eventManager.editorOpened();
// set marker element to attache to
// set marker elment to attache to
markerElementToAttachTo = element;
// wait for element to be attached and positioned
setTimeout(function() {
var injector = angular.element(document).injector();
var content = document.createElement('div');
let injector = angular.element(document).injector();
let content = document.createElement('div');
content.innerHTML = '<event-editor panel-ctrl="panelCtrl" event="event" close="close()"></event-editor>';
injector.invoke(["$compile", "$rootScope", function($compile, $rootScope) {
var scope = $rootScope.$new(true);
var drop;
injector.invoke([
'$compile',
'$rootScope',
function($compile, $rootScope) {
let scope = $rootScope.$new(true);
let drop;
scope.event = event;
scope.panelCtrl = eventManager.panelCtrl;
......@@ -85,12 +87,12 @@ function ($, _, angular, Drop) {
drop = new Drop({
target: markerElementToAttachTo[0],
content: content,
position: "bottom center",
position: 'bottom center',
classes: 'drop-popover drop-popover--form',
openOn: 'click',
tetherOptions: {
constraints: [{to: 'window', pin: true, attachment: "both"}]
}
constraints: [{ to: 'window', pin: true, attachment: 'both' }],
},
});
drop.open();
......@@ -104,12 +106,12 @@ function ($, _, angular, Drop) {
drop.destroy();
});
});
}]);
},
]);
}, 100);
}
}
/*
/*
* jquery.flot.events
*
* description: Flot plugin for adding events/markers to the plot
......@@ -124,52 +126,76 @@ function ($, _, angular, Drop) {
* released under MIT License and GPLv2+
*/
/**
/**
* A class that allows for the drawing an remove of some object
*/
var DrawableEvent = function(object, drawFunc, clearFunc, moveFunc, left, top, width, height) {
var _object = object;
var _drawFunc = drawFunc;
var _clearFunc = clearFunc;
var _moveFunc = moveFunc;
var _position = { left: left, top: top };
var _width = width;
var _height = height;
this.width = function() { return _width; };
this.height = function() { return _height; };
this.position = function() { return _position; };
this.draw = function() { _drawFunc(_object); };
this.clear = function() { _clearFunc(_object); };
this.getObject = function() { return _object; };
let DrawableEvent = function(object, drawFunc, clearFunc, moveFunc, left, top, width, height) {
let _object = object;
let _drawFunc = drawFunc;
let _clearFunc = clearFunc;
let _moveFunc = moveFunc;
let _position = { left: left, top: top };
let _width = width;
let _height = height;
this.width = function() {
return _width;
};
this.height = function() {
return _height;
};
this.position = function() {
return _position;
};
this.draw = function() {
_drawFunc(_object);
};
this.clear = function() {
_clearFunc(_object);
};
this.getObject = function() {
return _object;
};
this.moveTo = function(position) {
_position = position;
_moveFunc(_object, _position);
};
};
};
/**
/**
* Event class that stores options (eventType, min, max, title, description) and the object to draw.
*/
var VisualEvent = function(options, drawableEvent) {
var _parent;
var _options = options;
var _drawableEvent = drawableEvent;
var _hidden = false;
this.visual = function() { return _drawableEvent; };
this.getOptions = function() { return _options; };
this.getParent = function() { return _parent; };
this.isHidden = function() { return _hidden; };
this.hide = function() { _hidden = true; };
this.unhide = function() { _hidden = false; };
let VisualEvent = function(options, drawableEvent) {
let _parent;
let _options = options;
let _drawableEvent = drawableEvent;
let _hidden = false;
this.visual = function() {
return _drawableEvent;
};
this.getOptions = function() {
return _options;
};
this.getParent = function() {
return _parent;
};
this.isHidden = function() {
return _hidden;
};
this.hide = function() {
_hidden = true;
};
this.unhide = function() {
_hidden = false;
};
};
/**
/**
* A Class that handles the event-markers inside the given plot
*/
var EventMarkers = function(plot) {
var _events = [];
let EventMarkers = function(plot) {
let _events = [];
this._types = [];
this._plot = plot;
......@@ -180,32 +206,37 @@ function ($, _, angular, Drop) {
};
this.setTypes = function(types) {
return this._types = types;
return (this._types = types);
};
/**
* create internal objects for the given events
*/
this.setupEvents = function(events) {
var that = this;
var parts = _.partition(events, 'isRegion');
var regions = parts[0];
let that = this;
let parts = _.partition(events, 'isRegion');
let regions = parts[0];
events = parts[1];
$.each(events, function(index, event) {
var ve = new VisualEvent(event, that._buildDiv(event));
let ve = new VisualEvent(event, that._buildDiv(event));
_events.push(ve);
});
$.each(regions, function (index, event) {
var vre = new VisualEvent(event, that._buildRegDiv(event));
$.each(regions, function(index, event) {
let vre = new VisualEvent(event, that._buildRegDiv(event));
_events.push(vre);
});
_events.sort(function(a, b) {
var ao = a.getOptions(), bo = b.getOptions();
if (ao.min > bo.min) { return 1; }
if (ao.min < bo.min) { return -1; }
let ao = a.getOptions(),
bo = b.getOptions();
if (ao.min > bo.min) {
return 1;
}
if (ao.min < bo.min) {
return -1;
}
return 0;
});
};
......@@ -214,15 +245,18 @@ function ($, _, angular, Drop) {
* draw the events to the plot
*/
this.drawEvents = function() {
var that = this;
// var o = this._plot.getPlotOffset();
let that = this;
// let o = this._plot.getPlotOffset();
$.each(_events, function(index, event) {
// check event is inside the graph range
if (that._insidePlot(event.getOptions().min) && !event.isHidden()) {
event.visual().draw();
} else {
event.visual().getObject().hide();
event
.visual()
.getObject()
.hide();
}
});
};
......@@ -231,9 +265,11 @@ function ($, _, angular, Drop) {
* update the position of the event-markers (e.g. after scrolling or zooming)
*/
this.updateEvents = function() {
var that = this;
var o = this._plot.getPlotOffset(), left, top;
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
let that = this;
let o = this._plot.getPlotOffset(),
left,
top;
let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
$.each(_events, function(index, event) {
top = o.top + that._plot.height() - event.visual().height();
......@@ -256,21 +292,25 @@ function ($, _, angular, Drop) {
* create a DOM element for the given event
*/
this._buildDiv = function(event) {
var that = this;
let that = this;
var container = this._plot.getPlaceholder();
var o = this._plot.getPlotOffset();
var axes = this._plot.getAxes();
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
var yaxis, top, left, color, markerSize, markerShow, lineStyle, lineWidth;
var markerTooltip;
let container = this._plot.getPlaceholder();
let o = this._plot.getPlotOffset();
let axes = this._plot.getAxes();
let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
let yaxis, top, left, color, markerSize, markerShow, lineStyle, lineWidth;
let markerTooltip;
// determine the y axis used
if (axes.yaxis && axes.yaxis.used) { yaxis = axes.yaxis; }
if (axes.yaxis2 && axes.yaxis2.used) { yaxis = axes.yaxis2; }
if (axes.yaxis && axes.yaxis.used) {
yaxis = axes.yaxis;
}
if (axes.yaxis2 && axes.yaxis2.used) {
yaxis = axes.yaxis2;
}
// map the eventType to a types object
var eventTypeId = event.eventType;
let eventTypeId = event.eventType;
if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].color) {
color = '#666';
......@@ -308,84 +348,93 @@ function ($, _, angular, Drop) {
lineWidth = this._types[eventTypeId].lineWidth;
}
var topOffset = xaxis.options.eventSectionHeight || 0;
let topOffset = xaxis.options.eventSectionHeight || 0;
topOffset = topOffset / 3;
top = o.top + this._plot.height() + topOffset;
left = xaxis.p2c(event.min) + o.left;
var line = $('<div class="events_line flot-temp-elem"></div>').css({
"position": "absolute",
"opacity": 0.8,
"left": left + 'px',
"top": 8,
"width": lineWidth + "px",
"height": this._plot.height() + topOffset * 0.8,
"border-left-width": lineWidth + "px",
"border-left-style": lineStyle,
"border-left-color": color,
"color": color
let line = $('<div class="events_line flot-temp-elem"></div>')
.css({
position: 'absolute',
opacity: 0.8,
left: left + 'px',
top: 8,
width: lineWidth + 'px',
height: this._plot.height() + topOffset * 0.8,
'border-left-width': lineWidth + 'px',
'border-left-style': lineStyle,
'border-left-color': color,
color: color,
})
.appendTo(container);
if (markerShow) {
var marker = $('<div class="events_marker"></div>').css({
"position": "absolute",
"left": (-markerSize - Math.round(lineWidth / 2)) + "px",
"font-size": 0,
"line-height": 0,
"width": 0,
"height": 0,
"border-left": markerSize+"px solid transparent",
"border-right": markerSize+"px solid transparent"
let marker = $('<div class="events_marker"></div>').css({
position: 'absolute',
left: -markerSize - Math.round(lineWidth / 2) + 'px',
'font-size': 0,
'line-height': 0,
width: 0,
height: 0,
'border-left': markerSize + 'px solid transparent',
'border-right': markerSize + 'px solid transparent',
});
marker.appendTo(line);
if (this._types[eventTypeId] && this._types[eventTypeId].position && this._types[eventTypeId].position.toUpperCase() === 'BOTTOM') {
if (
this._types[eventTypeId] &&
this._types[eventTypeId].position &&
this._types[eventTypeId].position.toUpperCase() === 'BOTTOM'
) {
marker.css({
"top": top-markerSize-8 +"px",
"border-top": "none",
"border-bottom": markerSize+"px solid " + color
top: top - markerSize - 8 + 'px',
'border-top': 'none',
'border-bottom': markerSize + 'px solid ' + color,
});
} else {
marker.css({
"top": "0px",
"border-top": markerSize+"px solid " + color,
"border-bottom": "none"
top: '0px',
'border-top': markerSize + 'px solid ' + color,
'border-bottom': 'none',
});
}
marker.data({
"event": event
event: event,
});
var mouseenter = function() {
createAnnotationToolip(marker, $(this).data("event"), that._plot);
let mouseenter = function() {
createAnnotationToolip(marker, $(this).data('event'), that._plot);
};
if (event.editModel) {
createEditPopover(marker, event.editModel, that._plot);
}
var mouseleave = function() {
let mouseleave = function() {
that._plot.clearSelection();
};
if (markerTooltip) {
marker.css({ "cursor": "help" });
marker.css({ cursor: 'help' });
marker.hover(mouseenter, mouseleave);
}
}
var drawableEvent = new DrawableEvent(
let drawableEvent = new DrawableEvent(
line,
function drawFunc(obj) { obj.show(); },
function(obj) { obj.remove(); },
function drawFunc(obj) {
obj.show();
},
function(obj) {
obj.remove();
},
function(obj, position) {
obj.css({
top: position.top,
left: position.left
left: position.left,
});
},
left,
......@@ -400,21 +449,25 @@ function ($, _, angular, Drop) {
/**
* create a DOM element for the given region
*/
this._buildRegDiv = function (event) {
var that = this;
this._buildRegDiv = function(event) {
let that = this;
var container = this._plot.getPlaceholder();
var o = this._plot.getPlotOffset();
var axes = this._plot.getAxes();
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
var yaxis, top, left, lineWidth, regionWidth, lineStyle, color, markerTooltip;
let container = this._plot.getPlaceholder();
let o = this._plot.getPlotOffset();
let axes = this._plot.getAxes();
let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
let yaxis, top, left, lineWidth, regionWidth, lineStyle, color, markerTooltip;
// determine the y axis used
if (axes.yaxis && axes.yaxis.used) { yaxis = axes.yaxis; }
if (axes.yaxis2 && axes.yaxis2.used) { yaxis = axes.yaxis2; }
if (axes.yaxis && axes.yaxis.used) {
yaxis = axes.yaxis;
}
if (axes.yaxis2 && axes.yaxis2.used) {
yaxis = axes.yaxis2;
}
// map the eventType to a types object
var eventTypeId = event.eventType;
let eventTypeId = event.eventType;
if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].color) {
color = '#666';
......@@ -440,73 +493,77 @@ function ($, _, angular, Drop) {
lineStyle = this._types[eventTypeId].lineStyle.toLowerCase();
}
var topOffset = 2;
let topOffset = 2;
top = o.top + this._plot.height() + topOffset;
var timeFrom = Math.min(event.min, event.timeEnd);
var timeTo = Math.max(event.min, event.timeEnd);
let timeFrom = Math.min(event.min, event.timeEnd);
let timeTo = Math.max(event.min, event.timeEnd);
left = xaxis.p2c(timeFrom) + o.left;
var right = xaxis.p2c(timeTo) + o.left;
let right = xaxis.p2c(timeTo) + o.left;
regionWidth = right - left;
_.each([left, right], function(position) {
var line = $('<div class="events_line flot-temp-elem"></div>').css({
"position": "absolute",
"opacity": 0.8,
"left": position + 'px',
"top": 8,
"width": lineWidth + "px",
"height": that._plot.height() + topOffset,
"border-left-width": lineWidth + "px",
"border-left-style": lineStyle,
"border-left-color": color,
"color": color
let line = $('<div class="events_line flot-temp-elem"></div>').css({
position: 'absolute',
opacity: 0.8,
left: position + 'px',
top: 8,
width: lineWidth + 'px',
height: that._plot.height() + topOffset,
'border-left-width': lineWidth + 'px',
'border-left-style': lineStyle,
'border-left-color': color,
color: color,
});
line.appendTo(container);
});
var region = $('<div class="events_marker region_marker flot-temp-elem"></div>').css({
"position": "absolute",
"opacity": 0.5,
"left": left + 'px',
"top": top,
"width": Math.round(regionWidth + lineWidth) + "px",
"height": "0.5rem",
"border-left-color": color,
"color": color,
"background-color": color
let region = $('<div class="events_marker region_marker flot-temp-elem"></div>').css({
position: 'absolute',
opacity: 0.5,
left: left + 'px',
top: top,
width: Math.round(regionWidth + lineWidth) + 'px',
height: '0.5rem',
'border-left-color': color,
color: color,
'background-color': color,
});
region.appendTo(container);
region.data({
"event": event
event: event,
});
var mouseenter = function () {
createAnnotationToolip(region, $(this).data("event"), that._plot);
let mouseenter = function() {
createAnnotationToolip(region, $(this).data('event'), that._plot);
};
if (event.editModel) {
createEditPopover(region, event.editModel, that._plot);
}
var mouseleave = function () {
let mouseleave = function() {
that._plot.clearSelection();
};
if (markerTooltip) {
region.css({ "cursor": "help" });
region.css({ cursor: 'help' });
region.hover(mouseenter, mouseleave);
}
var drawableEvent = new DrawableEvent(
let drawableEvent = new DrawableEvent(
region,
function drawFunc(obj) { obj.show(); },
function (obj) { obj.remove(); },
function (obj, position) {
function drawFunc(obj) {
obj.show();
},
function(obj) {
obj.remove();
},
function(obj, position) {
obj.css({
top: position.top,
left: position.left
left: position.left,
});
},
left,
......@@ -522,19 +579,19 @@ function ($, _, angular, Drop) {
* check if the event is inside visible range
*/
this._insidePlot = function(x) {
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
var xc = xaxis.p2c(x);
let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
let xc = xaxis.p2c(x);
return xc > 0 && xc < xaxis.p2c(xaxis.max);
};
};
};
/**
/**
* initialize the plugin for the given plot
*/
function init(plot) {
function init(plot) {
/*jshint validthis:true */
var that = this;
var eventMarkers = new EventMarkers(plot);
let that = this;
let eventMarkers = new EventMarkers(plot);
plot.getEvents = function() {
return eventMarkers._events;
......@@ -542,7 +599,10 @@ function ($, _, angular, Drop) {
plot.hideEvents = function() {
$.each(eventMarkers._events, function(index, event) {
event.visual().getObject().hide();
event
.visual()
.getObject()
.hide();
});
};
......@@ -570,7 +630,7 @@ function ($, _, angular, Drop) {
});
plot.hooks.draw.push(function(plot) {
var options = plot.getOptions();
let options = plot.getOptions();
if (eventMarkers.eventsEnabled) {
// check for first run
......@@ -584,21 +644,20 @@ function ($, _, angular, Drop) {
eventMarkers.drawEvents();
});
}
}
var defaultOptions = {
let defaultOptions = {
events: {
data: null,
types: null,
xaxis: 1,
position: 'BOTTOM'
}
};
position: 'BOTTOM',
},
};
$.plot.plugins.push({
$.plot.plugins.push({
init: init,
options: defaultOptions,
name: "events",
version: "0.2.5"
});
name: 'events',
version: '0.2.5',
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment