mirror of https://github.com/grafana/grafana
Torkel Ödegaard
9 years ago
parent
55d4392d90
commit
a6a5f393cc
@ -0,0 +1,399 @@ |
|||||||
|
define([ |
||||||
|
'jquery', |
||||||
|
'lodash', |
||||||
|
'angular', |
||||||
|
'tether-drop', |
||||||
|
], |
||||||
|
function ($, _, angular, Drop) { |
||||||
|
'use strict'; |
||||||
|
|
||||||
|
function createAnnotationToolip(element, event) { |
||||||
|
var injector = angular.element(document).injector(); |
||||||
|
var content = document.createElement('div'); |
||||||
|
content.innerHTML = '<annotation-tooltip></annotation-tooltip>'; |
||||||
|
|
||||||
|
injector.invoke(["$compile", "$rootScope", function($compile, $rootScope) { |
||||||
|
var tmpScope = $rootScope.$new(true); |
||||||
|
tmpScope.event = event; |
||||||
|
|
||||||
|
$compile(content)(tmpScope); |
||||||
|
tmpScope.$digest(); |
||||||
|
tmpScope.$destroy(); |
||||||
|
|
||||||
|
var drop = new Drop({ |
||||||
|
target: element[0], |
||||||
|
content: content, |
||||||
|
position: "bottom center", |
||||||
|
classes: 'drop-popover', |
||||||
|
openOn: 'hover', |
||||||
|
hoverCloseDelay: 200, |
||||||
|
tetherOptions: { |
||||||
|
constraints: [{to: 'window', pin: true, attachment: "both"}] |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
drop.open(); |
||||||
|
|
||||||
|
drop.on('close', function() { |
||||||
|
setTimeout(function() { |
||||||
|
drop.destroy(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}]); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* 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 |
||||||
|
*/ |
||||||
|
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); |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 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; }; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* A Class that handles the event-markers inside the given plot |
||||||
|
*/ |
||||||
|
var EventMarkers = function(plot) { |
||||||
|
var _events = []; |
||||||
|
|
||||||
|
this._types = []; |
||||||
|
this._plot = plot; |
||||||
|
this.eventsEnabled = false; |
||||||
|
|
||||||
|
this.getEvents = function() { |
||||||
|
return _events; |
||||||
|
}; |
||||||
|
|
||||||
|
this.setTypes = function(types) { |
||||||
|
return this._types = types; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* create internal objects for the given events |
||||||
|
*/ |
||||||
|
this.setupEvents = function(events) { |
||||||
|
var that = this; |
||||||
|
$.each(events, function(index, event) { |
||||||
|
var ve = new VisualEvent(event, that._buildDiv(event)); |
||||||
|
_events.push(ve); |
||||||
|
}); |
||||||
|
|
||||||
|
_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) { |
||||||
|
markerShow = true; |
||||||
|
} else { |
||||||
|
markerShow = this._types[eventTypeId].markerShow; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerTooltip === undefined) { |
||||||
|
markerTooltip = true; |
||||||
|
} else { |
||||||
|
markerTooltip = this._types[eventTypeId].markerTooltip; |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types == null || !this._types[eventTypeId] || !this._types[eventTypeId].lineStyle) { |
||||||
|
lineStyle = 'dashed'; //default line style
|
||||||
|
} else { |
||||||
|
lineStyle = this._types[eventTypeId].lineStyle.toLowerCase(); |
||||||
|
} |
||||||
|
|
||||||
|
if (this._types == null || !this._types[eventTypeId] || this._types[eventTypeId].lineWidth === undefined) { |
||||||
|
lineWidth = 1; //default line width
|
||||||
|
} else { |
||||||
|
lineWidth = this._types[eventTypeId].lineWidth; |
||||||
|
} |
||||||
|
|
||||||
|
top = o.top + this._plot.height(); |
||||||
|
left = xaxis.p2c(event.min) + o.left; |
||||||
|
|
||||||
|
var line = $('<div class="events_line"></div>').css({ |
||||||
|
"position": "absolute", |
||||||
|
"opacity": 0.8, |
||||||
|
"left": left + 'px', |
||||||
|
"top": 8, |
||||||
|
"width": lineWidth + "px", |
||||||
|
"height": this._plot.height(), |
||||||
|
"border-left-width": lineWidth + "px", |
||||||
|
"border-left-style": lineStyle, |
||||||
|
"border-left-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" |
||||||
|
}) |
||||||
|
.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")); |
||||||
|
}; |
||||||
|
|
||||||
|
var mouseleave = function() { |
||||||
|
that._plot.clearSelection(); |
||||||
|
}; |
||||||
|
|
||||||
|
if (markerTooltip) { |
||||||
|
marker.css({ "cursor": "help" }); |
||||||
|
marker.hover(mouseenter, mouseleave); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var drawableEvent = new DrawableEvent( |
||||||
|
line, |
||||||
|
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; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 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); |
||||||
|
return xc > 0 && xc < xaxis.p2c(xaxis.max); |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* initialize the plugin for the given plot |
||||||
|
*/ |
||||||
|
function init(plot) { |
||||||
|
/*jshint validthis:true */ |
||||||
|
var that = this; |
||||||
|
var 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(); |
||||||
|
}); |
||||||
|
|
||||||
|
that.eventMarkers.drawEvents(); |
||||||
|
}; |
||||||
|
|
||||||
|
// change events on an existing plot
|
||||||
|
plot.setEvents = function(events) { |
||||||
|
if (eventMarkers.eventsEnabled) { |
||||||
|
eventMarkers.setupEvents(events); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
plot.hooks.processOptions.push(function(plot, options) { |
||||||
|
// enable the plugin
|
||||||
|
if (options.events.data != null) { |
||||||
|
eventMarkers.eventsEnabled = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
plot.hooks.draw.push(function(plot) { |
||||||
|
var 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(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
var defaultOptions = { |
||||||
|
events: { |
||||||
|
data: null, |
||||||
|
types: null, |
||||||
|
xaxis: 1, |
||||||
|
position: 'BOTTOM' |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
$.plot.plugins.push({ |
||||||
|
init: init, |
||||||
|
options: defaultOptions, |
||||||
|
name: "events", |
||||||
|
version: "0.2.5" |
||||||
|
}); |
||||||
|
|
||||||
|
}); |
||||||
@ -1,610 +0,0 @@ |
|||||||
/** |
|
||||||
* Flot plugin for adding 'events' to the plot. |
|
||||||
* |
|
||||||
* Events are small icons drawn onto the graph that represent something happening at that time. |
|
||||||
* |
|
||||||
* This plugin adds the following options to flot: |
|
||||||
* |
|
||||||
* options = { |
|
||||||
* events: { |
|
||||||
* levels: int // number of hierarchy levels
|
|
||||||
* data: [], // array of event objects
|
|
||||||
* types: [] // array of icons
|
|
||||||
* xaxis: int // the x axis to attach events to
|
|
||||||
* } |
|
||||||
* }; |
|
||||||
* |
|
||||||
* |
|
||||||
* An event is a javascript object in the following form: |
|
||||||
* |
|
||||||
* { |
|
||||||
* min: startTime, |
|
||||||
* max: endTime, |
|
||||||
* eventType: "type", |
|
||||||
* title: "event title", |
|
||||||
* description: "event description" |
|
||||||
* } |
|
||||||
* |
|
||||||
* Types is an array of javascript objects in the following form: |
|
||||||
* |
|
||||||
* types: [ |
|
||||||
* { |
|
||||||
* eventType: "eventType", |
|
||||||
* level: hierarchicalLevel, |
|
||||||
* icon: { |
|
||||||
image: "eventImage1.png", |
|
||||||
* width: 10, |
|
||||||
* height: 10 |
|
||||||
* } |
|
||||||
* } |
|
||||||
* ] |
|
||||||
* |
|
||||||
* @author Joel Oughton |
|
||||||
*/ |
|
||||||
(function($){ |
|
||||||
function init(plot){ |
|
||||||
var DEFAULT_ICON = { |
|
||||||
icon: "icon-caret-up", |
|
||||||
size: 20, |
|
||||||
width: 19, |
|
||||||
height: 10 |
|
||||||
}; |
|
||||||
|
|
||||||
var _events = [], _types, _eventsEnabled = false; |
|
||||||
|
|
||||||
plot.getEvents = function(){ |
|
||||||
return _events; |
|
||||||
}; |
|
||||||
|
|
||||||
plot.hideEvents = function(levelRange){ |
|
||||||
|
|
||||||
$.each(_events, function(index, event){ |
|
||||||
if (_withinHierarchy(event.level(), levelRange)) { |
|
||||||
event.visual().getObject().hide(); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
plot.showEvents = function(levelRange){ |
|
||||||
plot.hideEvents(); |
|
||||||
|
|
||||||
$.each(_events, function(index, event){ |
|
||||||
if (!_withinHierarchy(event.level(), levelRange)) { |
|
||||||
event.hide(); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
_drawEvents(); |
|
||||||
}; |
|
||||||
|
|
||||||
plot.hooks.processOptions.push(function(plot, options){ |
|
||||||
// enable the plugin
|
|
||||||
if (options.events.data != null) { |
|
||||||
_eventsEnabled = true; |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
plot.hooks.draw.push(function(plot, canvascontext){ |
|
||||||
var options = plot.getOptions(); |
|
||||||
var xaxis = plot.getXAxes()[options.events.xaxis - 1]; |
|
||||||
|
|
||||||
if (_eventsEnabled) { |
|
||||||
|
|
||||||
// check for first run
|
|
||||||
if (_events.length < 1) { |
|
||||||
|
|
||||||
// check for clustering
|
|
||||||
if (options.events.clustering) { |
|
||||||
var ed = _clusterEvents(options.events.types, options.events.data, xaxis.max - xaxis.min); |
|
||||||
_types = ed.types; |
|
||||||
_setupEvents(ed.data); |
|
||||||
} else { |
|
||||||
_types = options.events.types; |
|
||||||
_setupEvents(options.events.data); |
|
||||||
} |
|
||||||
|
|
||||||
} else { |
|
||||||
/*if (options.events.clustering) { |
|
||||||
_clearEvents(); |
|
||||||
var ed = _clusterEvents(options.events.types, options.events.data, xaxis.max - xaxis.min); |
|
||||||
_types = ed.types; |
|
||||||
_setupEvents(ed.data); |
|
||||||
}*/ |
|
||||||
_updateEvents(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
_drawEvents(); |
|
||||||
}); |
|
||||||
|
|
||||||
var _drawEvents = function() { |
|
||||||
var o = plot.getPlotOffset(); |
|
||||||
var pleft = o.left, pright = plot.width() - o.right; |
|
||||||
|
|
||||||
$.each(_events, function(index, event){ |
|
||||||
|
|
||||||
// check event is inside the graph range and inside the hierarchy level
|
|
||||||
if (_insidePlot(event.getOptions().min) && |
|
||||||
!event.isHidden()) { |
|
||||||
event.visual().draw(); |
|
||||||
} else { |
|
||||||
event.visual().getObject().hide(); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
_identicalStarts(); |
|
||||||
_overlaps(); |
|
||||||
}; |
|
||||||
|
|
||||||
var _withinHierarchy = function(level, levelRange){ |
|
||||||
var range = {}; |
|
||||||
|
|
||||||
if (!levelRange) { |
|
||||||
range.start = 0; |
|
||||||
range.end = _events.length - 1; |
|
||||||
} else { |
|
||||||
range.start = (levelRange.min == undefined) ? 0 : levelRange.min; |
|
||||||
range.end = (levelRange.max == undefined) ? _events.length - 1 : levelRange.max; |
|
||||||
} |
|
||||||
|
|
||||||
if (level >= range.start && level <= range.end) { |
|
||||||
return true; |
|
||||||
} |
|
||||||
return false; |
|
||||||
}; |
|
||||||
|
|
||||||
var _clearEvents = function(){ |
|
||||||
$.each(_events, function(index, val) { |
|
||||||
val.visual().clear(); |
|
||||||
}); |
|
||||||
|
|
||||||
_events = []; |
|
||||||
}; |
|
||||||
|
|
||||||
var _updateEvents = function() { |
|
||||||
var o = plot.getPlotOffset(), left, top; |
|
||||||
var xaxis = plot.getXAxes()[plot.getOptions().events.xaxis - 1]; |
|
||||||
|
|
||||||
$.each(_events, function(index, event) { |
|
||||||
top = o.top + plot.height() - event.visual().height(); |
|
||||||
left = xaxis.p2c(event.getOptions().min) + o.left - event.visual().width() / 2; |
|
||||||
|
|
||||||
event.visual().moveTo({ top: top, left: left }); |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
var _showTooltip = function(x, y, event){ |
|
||||||
/* |
|
||||||
var tooltip = $('<div id="tooltip" class=""></div>').appendTo('body').fadeIn(200); |
|
||||||
|
|
||||||
$('<div id="title">' + event.title + '</div>').appendTo(tooltip); |
|
||||||
$('<div id="type">Type: ' + event.eventType + '</div>').appendTo(tooltip); |
|
||||||
$('<div id="description">' + event.description + '</div>').appendTo(tooltip); |
|
||||||
|
|
||||||
tooltip.css({ |
|
||||||
top: y - tooltip.height() - 5, |
|
||||||
left: x |
|
||||||
}); |
|
||||||
console.log(tooltip); |
|
||||||
*/ |
|
||||||
|
|
||||||
// grafana addition
|
|
||||||
var $tooltip = $('<div id="tooltip" annotation-tooltip>'); |
|
||||||
if (event) { |
|
||||||
$tooltip |
|
||||||
.html(event.description) |
|
||||||
.place_tt(x, y, {offset: 10, compile: true, scopeData: {event: event}}); |
|
||||||
} else { |
|
||||||
$tooltip.remove(); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
var _setupEvents = function(events){ |
|
||||||
|
|
||||||
$.each(events, function(index, event){ |
|
||||||
var level = (plot.getOptions().events.levels == null || !_types || !_types[event.eventType]) ? 0 : _types[event.eventType].level; |
|
||||||
|
|
||||||
if (level > plot.getOptions().events.levels) { |
|
||||||
throw "A type's level has exceeded the maximum. Level=" + |
|
||||||
level + |
|
||||||
", Max levels:" + |
|
||||||
(plot.getOptions().events.levels); |
|
||||||
} |
|
||||||
|
|
||||||
_events.push(new VisualEvent(event, _buildDiv(event), level)); |
|
||||||
}); |
|
||||||
|
|
||||||
_events.sort(compareEvents); |
|
||||||
}; |
|
||||||
|
|
||||||
var _identicalStarts = function() { |
|
||||||
var ranges = [], range = {}, event, prev, offset = 0; |
|
||||||
|
|
||||||
$.each(_events, function(index, val) { |
|
||||||
|
|
||||||
if (prev) { |
|
||||||
if (val.getOptions().min == prev.getOptions().min) { |
|
||||||
|
|
||||||
if (!range.min) { |
|
||||||
range.min = index; |
|
||||||
} |
|
||||||
range.max = index; |
|
||||||
} else { |
|
||||||
if (range.min) { |
|
||||||
ranges.push(range); |
|
||||||
range = {}; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
prev = val; |
|
||||||
}); |
|
||||||
|
|
||||||
if (range.min) { |
|
||||||
ranges.push(range); |
|
||||||
} |
|
||||||
|
|
||||||
$.each(ranges, function(index, val) { |
|
||||||
var removed = _events.splice(val.min - offset, val.max - val.min + 1); |
|
||||||
|
|
||||||
$.each(removed, function(index, val) { |
|
||||||
val.visual().clear(); |
|
||||||
}); |
|
||||||
|
|
||||||
offset += val.max - val.min + 1; |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
var _overlaps = function() { |
|
||||||
var xaxis = plot.getXAxes()[plot.getOptions().events.xaxis - 1]; |
|
||||||
var range, diff, cmid, pmid, left = 0, right = -1; |
|
||||||
pright = plot.width() - plot.getPlotOffset().right; |
|
||||||
|
|
||||||
// coverts a clump of events into a single vertical line
|
|
||||||
var processClump = function() { |
|
||||||
// find the middle x value
|
|
||||||
pmid = _events[right].getOptions().min - |
|
||||||
(_events[right].getOptions().min - _events[left].getOptions().min) / 2; |
|
||||||
|
|
||||||
cmid = xaxis.p2c(pmid); |
|
||||||
|
|
||||||
// hide the events between the discovered range
|
|
||||||
while (left <= right) { |
|
||||||
_events[left++].visual().getObject().hide(); |
|
||||||
} |
|
||||||
|
|
||||||
// draw a vertical line in the middle of where they are
|
|
||||||
if (_insidePlot(pmid)) { |
|
||||||
_drawLine('#000', 1, { x: cmid, y: 0 }, { x: cmid, y: plot.height() }); |
|
||||||
|
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
if (xaxis.min && xaxis.max) { |
|
||||||
range = xaxis.max - xaxis.min; |
|
||||||
|
|
||||||
for (var i = 1; i < _events.length; i++) { |
|
||||||
diff = _events[i].getOptions().min - _events[i - 1].getOptions().min; |
|
||||||
|
|
||||||
if (diff / range > 0.007) { //enough variance
|
|
||||||
// has a clump has been found
|
|
||||||
if (right != -1) { |
|
||||||
//processClump();
|
|
||||||
} |
|
||||||
right = -1; |
|
||||||
left = i; |
|
||||||
} else { // not enough variance
|
|
||||||
right = i; |
|
||||||
// handle to final case
|
|
||||||
if (i == _events.length - 1) { |
|
||||||
//processClump();
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
var _buildDiv = function(event){ |
|
||||||
//var po = plot.pointOffset({ x: 450, y: 1});
|
|
||||||
var container = plot.getPlaceholder(), o = plot.getPlotOffset(), yaxis, |
|
||||||
xaxis = plot.getXAxes()[plot.getOptions().events.xaxis - 1], axes = plot.getAxes(); |
|
||||||
var top, left, div, icon, level, drawableEvent; |
|
||||||
|
|
||||||
// determine the y axis used
|
|
||||||
if (axes.yaxis && axes.yaxis.used) yaxis = axes.yaxis; |
|
||||||
if (axes.yaxis2 && axes.yaxis2.used) yaxis = axes.yaxis2; |
|
||||||
|
|
||||||
// use the default icon and level
|
|
||||||
if (_types == null || !_types[event.eventType] || !_types[event.eventType].icon) { |
|
||||||
icon = DEFAULT_ICON; |
|
||||||
level = 0; |
|
||||||
} else { |
|
||||||
icon = _types[event.eventType].icon; |
|
||||||
level = _types[event.eventType].level; |
|
||||||
} |
|
||||||
|
|
||||||
div = $('<i style="position:absolute" class="'+icon.icon+'"></i>').appendTo(container); |
|
||||||
|
|
||||||
top = o.top + plot.height() - icon.size + 1; |
|
||||||
left = xaxis.p2c(event.min) + o.left - icon.size / 2; |
|
||||||
|
|
||||||
div.css({ |
|
||||||
left: left + 'px', |
|
||||||
top: top, |
|
||||||
color: icon.color, |
|
||||||
"text-shadow" : "1px 1px "+icon.outline+", -1px -1px "+icon.outline+", -1px 1px "+icon.outline+", 1px -1px "+icon.outline, |
|
||||||
'font-size': icon['size']+'px', |
|
||||||
}); |
|
||||||
div.hide(); |
|
||||||
div.data({ |
|
||||||
"event": event |
|
||||||
}); |
|
||||||
div.hover( |
|
||||||
// mouseenter
|
|
||||||
function(){ |
|
||||||
var pos = $(this).offset(); |
|
||||||
|
|
||||||
_showTooltip(pos.left + $(this).width() / 2, pos.top, $(this).data("event")); |
|
||||||
}, |
|
||||||
// mouseleave
|
|
||||||
function(){ |
|
||||||
//$(this).data("bouncing", false);
|
|
||||||
$('#tooltip').remove(); |
|
||||||
plot.clearSelection(); |
|
||||||
}); |
|
||||||
|
|
||||||
drawableEvent = new DrawableEvent( |
|
||||||
div, |
|
||||||
function(obj){ |
|
||||||
obj.show(); |
|
||||||
}, |
|
||||||
function(obj){ |
|
||||||
obj.remove(); |
|
||||||
}, |
|
||||||
function(obj, position){ |
|
||||||
obj.css({ |
|
||||||
top: position.top, |
|
||||||
left: position.left |
|
||||||
}); |
|
||||||
}, |
|
||||||
left, top, div.width(), div.height()); |
|
||||||
|
|
||||||
return drawableEvent; |
|
||||||
}; |
|
||||||
|
|
||||||
var _getEventsAtPos = function(x, y){ |
|
||||||
var found = [], left, top, width, height; |
|
||||||
|
|
||||||
$.each(_events, function(index, val){ |
|
||||||
|
|
||||||
left = val.div.offset().left; |
|
||||||
top = val.div.offset().top; |
|
||||||
width = val.div.width(); |
|
||||||
height = val.div.height(); |
|
||||||
|
|
||||||
if (x >= left && x <= left + width && y >= top && y <= top + height) { |
|
||||||
found.push(val); |
|
||||||
} |
|
||||||
|
|
||||||
return found; |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
var _insidePlot = function(x) { |
|
||||||
var xaxis = plot.getXAxes()[plot.getOptions().events.xaxis - 1]; |
|
||||||
var xc = xaxis.p2c(x); |
|
||||||
|
|
||||||
return xc > 0 && xc < xaxis.p2c(xaxis.max); |
|
||||||
}; |
|
||||||
|
|
||||||
var _drawLine = function(color, lineWidth, from, to) { |
|
||||||
var ctx = plot.getCanvas().getContext("2d"); |
|
||||||
var plotOffset = plot.getPlotOffset(); |
|
||||||
|
|
||||||
ctx.save(); |
|
||||||
ctx.translate(plotOffset.left, plotOffset.top); |
|
||||||
|
|
||||||
ctx.beginPath(); |
|
||||||
ctx.strokeStyle = color; |
|
||||||
ctx.lineWidth = lineWidth; |
|
||||||
ctx.moveTo(from.x, from.y); |
|
||||||
ctx.lineTo(to.x, to.y); |
|
||||||
ctx.stroke(); |
|
||||||
|
|
||||||
ctx.restore(); |
|
||||||
}; |
|
||||||
|
|
||||||
|
|
||||||
/** |
|
||||||
* Runs over the given 2d array of event objects and returns an object |
|
||||||
* containing: |
|
||||||
* |
|
||||||
* { |
|
||||||
* types {}, // An array containing all the different event types
|
|
||||||
* data [], // An array of the clustered events
|
|
||||||
* } |
|
||||||
* |
|
||||||
* @param {Object} types |
|
||||||
* an object containing event types |
|
||||||
* @param {Object} events |
|
||||||
* an array of event to cluster |
|
||||||
* @param {Object} range |
|
||||||
* the current graph range |
|
||||||
*/ |
|
||||||
var _clusterEvents = function(types, events, range) { |
|
||||||
//TODO: support custom types
|
|
||||||
var groups, clusters = [], newEvents = []; |
|
||||||
|
|
||||||
// split into same evenType groups
|
|
||||||
groups = _groupEvents(events); |
|
||||||
|
|
||||||
$.each(groups.eventTypes, function(index, val) { |
|
||||||
clusters.push(_varianceAlgorithm(groups.groupedEvents[val], 1, range)); |
|
||||||
}); |
|
||||||
|
|
||||||
// summarise clusters
|
|
||||||
$.each(clusters, function(index, eventType) { |
|
||||||
|
|
||||||
// each cluser of each event type
|
|
||||||
$.each(eventType, function(index, cluster) { |
|
||||||
|
|
||||||
var newEvent = { |
|
||||||
min: cluster[0].min, |
|
||||||
max: cluster[cluster.length - 1].min, //TODO: needs to be max of end event if it exists
|
|
||||||
eventType: cluster[0].eventType + ",cluster", |
|
||||||
title: "Cluster of: " + cluster[0].title, |
|
||||||
description: cluster[0].description + ", Number of events in the cluster: " + cluster.length |
|
||||||
}; |
|
||||||
|
|
||||||
newEvents.push(newEvent); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
return { types: types, data: newEvents }; |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Runs over the given 2d array of event objects and returns an object |
|
||||||
* containing: |
|
||||||
* |
|
||||||
* { |
|
||||||
* eventTypes [], // An array containing all the different event types
|
|
||||||
* groupedEvents {}, // An object containing all the grouped events
|
|
||||||
* } |
|
||||||
* |
|
||||||
* @param {Object} events |
|
||||||
* an array of event objects |
|
||||||
*/ |
|
||||||
var _groupEvents = function(events) { |
|
||||||
var eventTypes = [], groupedEvents = {}; |
|
||||||
|
|
||||||
$.each(events, function(index, val) { |
|
||||||
if (!groupedEvents[val.eventType]) { |
|
||||||
groupedEvents[val.eventType] = []; |
|
||||||
eventTypes.push(val.eventType); |
|
||||||
} |
|
||||||
|
|
||||||
groupedEvents[val.eventType].push(val); |
|
||||||
}); |
|
||||||
|
|
||||||
return { eventTypes: eventTypes, groupedEvents: groupedEvents }; |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Runs over the given 2d array of event objects and returns a 3d array of |
|
||||||
* the same events,but clustered into groups with similar x deltas. |
|
||||||
* |
|
||||||
* This function assumes that the events are related. So it must be run on |
|
||||||
* each set of related events. |
|
||||||
* |
|
||||||
* @param {Object} events |
|
||||||
* an array of event objects |
|
||||||
* @param {Object} sens |
|
||||||
* a measure of the level of grouping tolerance |
|
||||||
* @param {Object} space |
|
||||||
* the size of the space we have to place clusters within |
|
||||||
*/ |
|
||||||
var _varianceAlgorithm = function(events, sens, space) { |
|
||||||
var cluster, clusters = [], sum = 0, avg, density; |
|
||||||
|
|
||||||
// find the average x delta
|
|
||||||
for (var i = 1; i < events.length - 1; i++) { |
|
||||||
sum += events[i].min - events[i - 1].min; |
|
||||||
} |
|
||||||
avg = sum / (events.length - 2); |
|
||||||
|
|
||||||
// first point
|
|
||||||
cluster = [ events[0] ]; |
|
||||||
|
|
||||||
// middle points
|
|
||||||
for (var i = 1; i < events.length; i++) { |
|
||||||
var leftDiff = events[i].min - events[i - 1].min; |
|
||||||
|
|
||||||
density = leftDiff / space; |
|
||||||
|
|
||||||
if (leftDiff > avg * sens && density > 0.05) { |
|
||||||
clusters.push(cluster); |
|
||||||
cluster = [ events[i] ]; |
|
||||||
} else { |
|
||||||
cluster.push(events[i]); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
clusters.push(cluster); |
|
||||||
|
|
||||||
return clusters; |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
var options = { |
|
||||||
events: { |
|
||||||
levels: null, |
|
||||||
data: null, |
|
||||||
types: null, |
|
||||||
xaxis: 1, |
|
||||||
clustering: false |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
$.plot.plugins.push({ |
|
||||||
init: init, |
|
||||||
options: options, |
|
||||||
name: "events", |
|
||||||
version: "0.20" |
|
||||||
}); |
|
||||||
|
|
||||||
/** |
|
||||||
* A class that allows for the drawing an remove of some object |
|
||||||
* |
|
||||||
* @param {Object} object |
|
||||||
* the drawable object |
|
||||||
* @param {Object} drawFunc |
|
||||||
* the draw function |
|
||||||
* @param {Object} clearFunc |
|
||||||
* the clear function |
|
||||||
*/ |
|
||||||
function DrawableEvent(object, drawFunc, clearFunc, moveFunc, left, top, width, height){ |
|
||||||
var _object = object, _drawFunc = drawFunc, _clearFunc = clearFunc, _moveFunc = moveFunc, |
|
||||||
_position = { left: left, top: top }, _width = width, _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. |
|
||||||
* |
|
||||||
* @param {Object} options |
|
||||||
* @param {Object} drawableEvent |
|
||||||
*/ |
|
||||||
function VisualEvent(options, drawableEvent, level){ |
|
||||||
var _parent, _options = options, _drawableEvent = drawableEvent, |
|
||||||
_level = level, _hidden = false; |
|
||||||
|
|
||||||
this.visual = function() { return _drawableEvent; } |
|
||||||
this.level = function() { return _level; }; |
|
||||||
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; }; |
|
||||||
} |
|
||||||
|
|
||||||
function compareEvents(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; |
|
||||||
}; |
|
||||||
})(jQuery); |
|
||||||
Loading…
Reference in new issue