Skip to content

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

migrated jquery.flot.events to ts

parent 0841e67d
Showing with 537 additions and 478 deletions
public/app/plugins/panel/graph/jquery.flot.events.js → public/app/plugins/panel/graph/jquery.flot.events.ts
define([ import $ from 'jquery';
'jquery', import _ from 'lodash';
'lodash', import angular from 'angular';
'angular', import Drop from 'tether-drop';
'tether-drop',
], function createAnnotationToolip(element, event, plot) {
function ($, _, angular, Drop) { let injector = angular.element(document).injector();
'use strict'; let content = document.createElement('div');
content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>';
function createAnnotationToolip(element, event, plot) {
var injector = angular.element(document).injector(); injector.invoke([
var content = document.createElement('div'); '$compile',
content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>'; '$rootScope',
function($compile, $rootScope) {
injector.invoke(["$compile", "$rootScope", function($compile, $rootScope) { let eventManager = plot.getOptions().events.manager;
var eventManager = plot.getOptions().events.manager; let tmpScope = $rootScope.$new(true);
var tmpScope = $rootScope.$new(true);
tmpScope.event = event; tmpScope.event = event;
tmpScope.onEdit = function() { tmpScope.onEdit = function() {
eventManager.editEvent(event); eventManager.editEvent(event);
...@@ -24,16 +23,16 @@ function ($, _, angular, Drop) { ...@@ -24,16 +23,16 @@ function ($, _, angular, Drop) {
tmpScope.$digest(); tmpScope.$digest();
tmpScope.$destroy(); tmpScope.$destroy();
var drop = new Drop({ let drop = new Drop({
target: element[0], target: element[0],
content: content, content: content,
position: "bottom center", position: 'bottom center',
classes: 'drop-popover drop-popover--annotation', classes: 'drop-popover drop-popover--annotation',
openOn: 'hover', openOn: 'hover',
hoverCloseDelay: 200, hoverCloseDelay: 200,
tetherOptions: { tetherOptions: {
constraints: [{to: 'window', pin: true, attachment: "both"}] constraints: [{ to: 'window', pin: true, attachment: 'both' }],
} },
}); });
drop.open(); drop.open();
...@@ -43,35 +42,38 @@ function ($, _, angular, Drop) { ...@@ -43,35 +42,38 @@ function ($, _, angular, Drop) {
drop.destroy(); drop.destroy();
}); });
}); });
}]); },
} ]);
}
var markerElementToAttachTo = null;
function createEditPopover(element, event, plot) { let markerElementToAttachTo = null;
var 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)
markerElementToAttachTo = element;
return;
}
// mark as openend function createEditPopover(element, event, plot) {
eventManager.editorOpened(); let eventManager = plot.getOptions().events.manager;
// set marker element to attache to 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 inital marker element is removed)
markerElementToAttachTo = element; markerElementToAttachTo = element;
return;
}
// wait for element to be attached and positioned // mark as openend
setTimeout(function() { eventManager.editorOpened();
// set marker elment to attache to
markerElementToAttachTo = element;
var injector = angular.element(document).injector(); // wait for element to be attached and positioned
var content = document.createElement('div'); setTimeout(function() {
content.innerHTML = '<event-editor panel-ctrl="panelCtrl" event="event" close="close()"></event-editor>'; 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) { injector.invoke([
var scope = $rootScope.$new(true); '$compile',
var drop; '$rootScope',
function($compile, $rootScope) {
let scope = $rootScope.$new(true);
let drop;
scope.event = event; scope.event = event;
scope.panelCtrl = eventManager.panelCtrl; scope.panelCtrl = eventManager.panelCtrl;
...@@ -85,12 +87,12 @@ function ($, _, angular, Drop) { ...@@ -85,12 +87,12 @@ function ($, _, angular, Drop) {
drop = new Drop({ drop = new Drop({
target: markerElementToAttachTo[0], target: markerElementToAttachTo[0],
content: content, content: content,
position: "bottom center", position: 'bottom center',
classes: 'drop-popover drop-popover--form', classes: 'drop-popover drop-popover--form',
openOn: 'click', openOn: 'click',
tetherOptions: { tetherOptions: {
constraints: [{to: 'window', pin: true, attachment: "both"}] constraints: [{ to: 'window', pin: true, attachment: 'both' }],
} },
}); });
drop.open(); drop.open();
...@@ -104,501 +106,558 @@ function ($, _, angular, Drop) { ...@@ -104,501 +106,558 @@ function ($, _, angular, Drop) {
drop.destroy(); drop.destroy();
}); });
}); });
}]); },
]);
}, 100);
}
/*
* jquery.flot.events
*
* description: Flot plugin for adding events/markers to the plot
* version: 0.2.5
* authors:
* Alexander Wunschik <alex@wunschik.net>
* Joel Oughton <joeloughton@gmail.com>
* Nicolas Joseph <www.nicolasjoseph.com>
*
* website: https://github.com/mojoaxel/flot-events
*
* released under MIT License and GPLv2+
*/
/**
* A class that allows for the drawing an remove of some 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.
*/
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;
};
};
}, 100); /**
} * A Class that handles the event-markers inside the given plot
*/
let EventMarkers = function(plot) {
let _events = [];
/* this._types = [];
* jquery.flot.events this._plot = plot;
* this.eventsEnabled = false;
* description: Flot plugin for adding events/markers to the plot
* version: 0.2.5
* authors:
* Alexander Wunschik <alex@wunschik.net>
* Joel Oughton <joeloughton@gmail.com>
* Nicolas Joseph <www.nicolasjoseph.com>
*
* website: https://github.com/mojoaxel/flot-events
*
* released under MIT License and GPLv2+
*/
/** this.getEvents = function() {
* A class that allows for the drawing an remove of some object return _events;
*/
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; };
this.moveTo = function(position) {
_position = position;
_moveFunc(_object, _position);
};
}; };
/** this.setTypes = function(types) {
* Event class that stores options (eventType, min, max, title, description) and the object to draw. return (this._types = types);
*/
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; };
}; };
/** /**
* A Class that handles the event-markers inside the given plot * create internal objects for the given events
*/ */
var EventMarkers = function(plot) { this.setupEvents = function(events) {
var _events = []; let that = this;
let parts = _.partition(events, 'isRegion');
this._types = []; let regions = parts[0];
this._plot = plot; events = parts[1];
this.eventsEnabled = false;
$.each(events, function(index, event) {
this.getEvents = function() { let ve = new VisualEvent(event, that._buildDiv(event));
return _events; _events.push(ve);
}; });
this.setTypes = function(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];
events = parts[1];
$.each(events, function(index, event) {
var ve = new VisualEvent(event, that._buildDiv(event));
_events.push(ve);
});
$.each(regions, function (index, event) {
var 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; }
return 0;
});
};
/**
* draw the events to the plot
*/
this.drawEvents = function() {
var that = this;
// var 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();
}
});
};
/**
* 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];
$.each(_events, function(index, event) {
top = o.top + that._plot.height() - event.visual().height();
left = xaxis.p2c(event.getOptions().min) + o.left - event.visual().width() / 2;
event.visual().moveTo({ top: top, left: left });
});
};
/**
* remove all events from the plot
*/
this._clearEvents = function() {
$.each(_events, function(index, val) {
val.visual().clear();
});
_events = [];
};
/**
* create a DOM element for the given event
*/
this._buildDiv = function(event) {
var 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;
// determine the y axis used
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;
if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].color) {
color = '#666';
} else {
color = this._types[eventTypeId].color;
}
if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].markerSize) {
markerSize = 8; //default marker size
} else {
markerSize = this._types[eventTypeId].markerSize;
}
if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerShow === undefined) { $.each(regions, function(index, event) {
markerShow = true; let vre = new VisualEvent(event, that._buildRegDiv(event));
} else { _events.push(vre);
markerShow = this._types[eventTypeId].markerShow; });
}
if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerTooltip === undefined) { _events.sort(function(a, b) {
markerTooltip = true; let ao = a.getOptions(),
} else { bo = b.getOptions();
markerTooltip = this._types[eventTypeId].markerTooltip; if (ao.min > bo.min) {
return 1;
} }
if (ao.min < bo.min) {
if (this._types == null || !this._types[eventTypeId] || !this._types[eventTypeId].lineStyle) { return -1;
lineStyle = 'dashed'; //default line style
} else {
lineStyle = this._types[eventTypeId].lineStyle.toLowerCase();
} }
return 0;
});
};
if (this._types == null || !this._types[eventTypeId] || this._types[eventTypeId].lineWidth === undefined) { /**
lineWidth = 1; //default line width * draw the events to the plot
*/
this.drawEvents = function() {
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 { } else {
lineWidth = this._types[eventTypeId].lineWidth; event
.visual()
.getObject()
.hide();
} }
});
};
var topOffset = xaxis.options.eventSectionHeight || 0; /**
topOffset = topOffset / 3; * update the position of the event-markers (e.g. after scrolling or zooming)
*/
top = o.top + this._plot.height() + topOffset; this.updateEvents = function() {
left = xaxis.p2c(event.min) + o.left; let that = this;
let o = this._plot.getPlotOffset(),
var line = $('<div class="events_line flot-temp-elem"></div>').css({ left,
"position": "absolute", top;
"opacity": 0.8, let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
"left": left + 'px',
"top": 8, $.each(_events, function(index, event) {
"width": lineWidth + "px", top = o.top + that._plot.height() - event.visual().height();
"height": this._plot.height() + topOffset * 0.8, left = xaxis.p2c(event.getOptions().min) + o.left - event.visual().width() / 2;
"border-left-width": lineWidth + "px", event.visual().moveTo({ top: top, left: left });
"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"
});
marker.appendTo(line);
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
});
} else {
marker.css({
"top": "0px",
"border-top": markerSize+"px solid " + color,
"border-bottom": "none"
});
}
marker.data({
"event": event
});
var mouseenter = function() {
createAnnotationToolip(marker, $(this).data("event"), that._plot);
};
if (event.editModel) {
createEditPopover(marker, event.editModel, that._plot);
}
var mouseleave = function() { /**
that._plot.clearSelection(); * remove all events from the plot
}; */
this._clearEvents = function() {
$.each(_events, function(index, val) {
val.visual().clear();
});
_events = [];
};
if (markerTooltip) { /**
marker.css({ "cursor": "help" }); * create a DOM element for the given event
marker.hover(mouseenter, mouseleave); */
} this._buildDiv = function(event) {
} let that = this;
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;
}
var drawableEvent = new DrawableEvent( // map the eventType to a types object
line, let eventTypeId = event.eventType;
function drawFunc(obj) { obj.show(); },
function(obj) { obj.remove(); },
function(obj, position) {
obj.css({
top: position.top,
left: position.left
});
},
left,
top,
line.width(),
line.height()
);
return drawableEvent; if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].color) {
}; color = '#666';
} else {
color = this._types[eventTypeId].color;
}
/** if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].markerSize) {
* create a DOM element for the given region markerSize = 8; //default marker size
*/ } else {
this._buildRegDiv = function (event) { markerSize = this._types[eventTypeId].markerSize;
var that = this; }
var container = this._plot.getPlaceholder(); if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerShow === undefined) {
var o = this._plot.getPlotOffset(); markerShow = true;
var axes = this._plot.getAxes(); } else {
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; markerShow = this._types[eventTypeId].markerShow;
var yaxis, top, left, lineWidth, regionWidth, lineStyle, color, markerTooltip; }
// determine the y axis used if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerTooltip === undefined) {
if (axes.yaxis && axes.yaxis.used) { yaxis = axes.yaxis; } markerTooltip = true;
if (axes.yaxis2 && axes.yaxis2.used) { yaxis = axes.yaxis2; } } else {
markerTooltip = this._types[eventTypeId].markerTooltip;
}
// map the eventType to a types object if (this._types == null || !this._types[eventTypeId] || !this._types[eventTypeId].lineStyle) {
var eventTypeId = event.eventType; lineStyle = 'dashed'; //default line style
} else {
lineStyle = this._types[eventTypeId].lineStyle.toLowerCase();
}
if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].color) { if (this._types == null || !this._types[eventTypeId] || this._types[eventTypeId].lineWidth === undefined) {
color = '#666'; lineWidth = 1; //default line width
} else { } else {
color = this._types[eventTypeId].color; lineWidth = this._types[eventTypeId].lineWidth;
} }
if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerTooltip === undefined) { let topOffset = xaxis.options.eventSectionHeight || 0;
markerTooltip = true; topOffset = topOffset / 3;
} else {
markerTooltip = this._types[eventTypeId].markerTooltip; top = o.top + this._plot.height() + topOffset;
} left = xaxis.p2c(event.min) + o.left;
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 (this._types == null || !this._types[eventTypeId] || this._types[eventTypeId].lineWidth === undefined) { if (markerShow) {
lineWidth = 1; //default line width let marker = $('<div class="events_marker"></div>').css({
} else { position: 'absolute',
lineWidth = this._types[eventTypeId].lineWidth; 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',
});
if (this._types == null || !this._types[eventTypeId] || !this._types[eventTypeId].lineStyle) { marker.appendTo(line);
lineStyle = 'dashed'; //default line style
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,
});
} else { } else {
lineStyle = this._types[eventTypeId].lineStyle.toLowerCase(); marker.css({
} top: '0px',
'border-top': markerSize + 'px solid ' + color,
var topOffset = 2; 'border-bottom': 'none',
top = o.top + this._plot.height() + topOffset;
var timeFrom = Math.min(event.min, event.timeEnd);
var timeTo = Math.max(event.min, event.timeEnd);
left = xaxis.p2c(timeFrom) + o.left;
var 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
}); });
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
});
region.appendTo(container);
region.data({ marker.data({
"event": event event: event,
}); });
var mouseenter = function () { let mouseenter = function() {
createAnnotationToolip(region, $(this).data("event"), that._plot); createAnnotationToolip(marker, $(this).data('event'), that._plot);
}; };
if (event.editModel) { if (event.editModel) {
createEditPopover(region, event.editModel, that._plot); createEditPopover(marker, event.editModel, that._plot);
} }
var mouseleave = function () { let mouseleave = function() {
that._plot.clearSelection(); that._plot.clearSelection();
}; };
if (markerTooltip) { if (markerTooltip) {
region.css({ "cursor": "help" }); marker.css({ cursor: 'help' });
region.hover(mouseenter, mouseleave); marker.hover(mouseenter, mouseleave);
} }
}
var drawableEvent = new DrawableEvent( let drawableEvent = new DrawableEvent(
region, line,
function drawFunc(obj) { obj.show(); }, function drawFunc(obj) {
function (obj) { obj.remove(); }, obj.show();
function (obj, position) { },
obj.css({ function(obj) {
top: position.top, obj.remove();
left: position.left },
}); function(obj, position) {
}, obj.css({
left, top: position.top,
top, left: position.left,
region.width(), });
region.height() },
); left,
top,
return drawableEvent; line.width(),
}; line.height()
);
/**
* check if the event is inside visible range return drawableEvent;
*/
this._insidePlot = function(x) {
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
var xc = xaxis.p2c(x);
return xc > 0 && xc < xaxis.p2c(xaxis.max);
};
}; };
/** /**
* initialize the plugin for the given plot * create a DOM element for the given region
*/ */
function init(plot) { this._buildRegDiv = function(event) {
/*jshint validthis:true */ let that = this;
var that = this;
var eventMarkers = new EventMarkers(plot); 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;
}
plot.getEvents = function() { // map the eventType to a types object
return eventMarkers._events; let eventTypeId = event.eventType;
};
plot.hideEvents = function() { if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].color) {
$.each(eventMarkers._events, function(index, event) { color = '#666';
event.visual().getObject().hide(); } else {
}); color = this._types[eventTypeId].color;
}; }
if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerTooltip === undefined) {
markerTooltip = true;
} else {
markerTooltip = this._types[eventTypeId].markerTooltip;
}
plot.showEvents = function() { if (this._types == null || !this._types[eventTypeId] || this._types[eventTypeId].lineWidth === undefined) {
plot.hideEvents(); lineWidth = 1; //default line width
$.each(eventMarkers._events, function(index, event) { } else {
event.hide(); lineWidth = this._types[eventTypeId].lineWidth;
}
if (this._types == null || !this._types[eventTypeId] || !this._types[eventTypeId].lineStyle) {
lineStyle = 'dashed'; //default line style
} else {
lineStyle = this._types[eventTypeId].lineStyle.toLowerCase();
}
let topOffset = 2;
top = o.top + this._plot.height() + topOffset;
let timeFrom = Math.min(event.min, event.timeEnd);
let timeTo = Math.max(event.min, event.timeEnd);
left = xaxis.p2c(timeFrom) + o.left;
let right = xaxis.p2c(timeTo) + o.left;
regionWidth = right - left;
_.each([left, right], function(position) {
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);
});
that.eventMarkers.drawEvents(); 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,
});
let mouseenter = function() {
createAnnotationToolip(region, $(this).data('event'), that._plot);
}; };
// change events on an existing plot if (event.editModel) {
plot.setEvents = function(events) { createEditPopover(region, event.editModel, that._plot);
if (eventMarkers.eventsEnabled) { }
eventMarkers.setupEvents(events);
} let mouseleave = function() {
that._plot.clearSelection();
}; };
plot.hooks.processOptions.push(function(plot, options) { if (markerTooltip) {
// enable the plugin region.css({ cursor: 'help' });
if (options.events.data != null) { region.hover(mouseenter, mouseleave);
eventMarkers.eventsEnabled = true; }
}
});
plot.hooks.draw.push(function(plot) { let drawableEvent = new DrawableEvent(
var options = plot.getOptions(); region,
function drawFunc(obj) {
if (eventMarkers.eventsEnabled) { obj.show();
// check for first run },
if (eventMarkers.getEvents().length < 1) { function(obj) {
eventMarkers.setTypes(options.events.types); obj.remove();
eventMarkers.setupEvents(options.events.data); },
} else { function(obj, position) {
eventMarkers.updateEvents(); obj.css({
} top: position.top,
} left: position.left,
});
},
left,
top,
region.width(),
region.height()
);
return drawableEvent;
};
eventMarkers.drawEvents(); /**
* check if the event is inside visible range
*/
this._insidePlot = function(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) {
/*jshint validthis:true */
let that = this;
let eventMarkers = new EventMarkers(plot);
plot.getEvents = function() {
return eventMarkers._events;
};
plot.hideEvents = function() {
$.each(eventMarkers._events, function(index, event) {
event
.visual()
.getObject()
.hide();
});
};
plot.showEvents = function() {
plot.hideEvents();
$.each(eventMarkers._events, function(index, event) {
event.hide();
}); });
}
var defaultOptions = { that.eventMarkers.drawEvents();
events: { };
data: null,
types: null, // change events on an existing plot
xaxis: 1, plot.setEvents = function(events) {
position: 'BOTTOM' if (eventMarkers.eventsEnabled) {
eventMarkers.setupEvents(events);
} }
}; };
$.plot.plugins.push({ plot.hooks.processOptions.push(function(plot, options) {
init: init, // enable the plugin
options: defaultOptions, if (options.events.data != null) {
name: "events", eventMarkers.eventsEnabled = true;
version: "0.2.5" }
});
plot.hooks.draw.push(function(plot) {
let options = plot.getOptions();
if (eventMarkers.eventsEnabled) {
// check for first run
if (eventMarkers.getEvents().length < 1) {
eventMarkers.setTypes(options.events.types);
eventMarkers.setupEvents(options.events.data);
} else {
eventMarkers.updateEvents();
}
}
eventMarkers.drawEvents();
}); });
}
let defaultOptions = {
events: {
data: null,
types: null,
xaxis: 1,
position: 'BOTTOM',
},
};
$.plot.plugins.push({
init: init,
options: defaultOptions,
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