Commit b2027af4 by Patrick O'Carroll

wrote classes

parent d83f8865
import angular from 'angular';
import $ from 'jquery'; import $ from 'jquery';
import _ from 'lodash'; import _ from 'lodash';
import angular from 'angular';
import Drop from 'tether-drop'; import Drop from 'tether-drop';
function createAnnotationToolip(element, event, plot) { /** @ngInject */
export function createAnnotationToolip(element, event, plot) {
let injector = angular.element(document).injector(); let injector = angular.element(document).injector();
let content = document.createElement('div'); let content = document.createElement('div');
content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>'; content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>';
...@@ -48,7 +49,8 @@ function createAnnotationToolip(element, event, plot) { ...@@ -48,7 +49,8 @@ function createAnnotationToolip(element, event, plot) {
let markerElementToAttachTo = null; let markerElementToAttachTo = null;
function createEditPopover(element, event, plot) { /** @ngInject */
export function createEditPopover(element, event, plot) {
let eventManager = plot.getOptions().events.manager; let eventManager = plot.getOptions().events.manager;
if (eventManager.editorOpen) { if (eventManager.editorOpen) {
// update marker element to attach to (needed in case of legend on the right // update marker element to attach to (needed in case of legend on the right
...@@ -129,106 +131,130 @@ function createEditPopover(element, event, plot) { ...@@ -129,106 +131,130 @@ function createEditPopover(element, event, plot) {
/** /**
* A class that allows for the drawing an remove of some object * A class that allows for the drawing an remove of some object
*/ */
let DrawableEvent = function(object, drawFunc, clearFunc, moveFunc, left, top, width, height) { export class DrawableEvent {
let _object = object; _object: any;
let _drawFunc = drawFunc; _drawFunc: any;
let _clearFunc = clearFunc; _clearFunc: any;
let _moveFunc = moveFunc; _moveFunc: any;
let _position = { left: left, top: top }; _position: any;
let _width = width; _width: any;
let _height = height; _height: any;
this.width = function() { /** @ngInject */
return _width; constructor(object, drawFunc, clearFunc, moveFunc, left, top, width, height) {
}; this._object = object;
this.height = function() { this._drawFunc = drawFunc;
return _height; this._clearFunc = clearFunc;
}; this._moveFunc = moveFunc;
this.position = function() { this._position = { left: left, top: top };
return _position; this._width = width;
}; this._height = height;
this.draw = function() { }
_drawFunc(_object);
}; width() {
this.clear = function() { return this._width;
_clearFunc(_object); }
}; height() {
this.getObject = function() { return this._height;
return _object; }
}; position() {
this.moveTo = function(position) { return this._position;
_position = position; }
_moveFunc(_object, _position); draw() {
}; this._drawFunc(this._object);
}; }
clear() {
this._clearFunc(this._object);
}
getObject() {
return this._object;
}
moveTo(position) {
this._position = position;
this._moveFunc(this._object, this._position);
}
}
/** /**
* Event class that stores options (eventType, min, max, title, description) and the object to draw. * Event class that stores options (eventType, min, max, title, description) and the object to draw.
*/ */
let VisualEvent = function(options, drawableEvent) { export class VisualEvent {
let _parent; _parent: any;
let _options = options; _options: any;
let _drawableEvent = drawableEvent; _drawableEvent: any;
let _hidden = false; _hidden: any;
this.visual = function() { /** @ngInject */
return _drawableEvent; constructor(options, drawableEvent) {
}; this._options = options;
this.getOptions = function() { this._drawableEvent = drawableEvent;
return _options; this._hidden = false;
}; }
this.getParent = function() {
return _parent; visual() {
}; return this._drawableEvent;
this.isHidden = function() { }
return _hidden; getOptions() {
}; return this._options;
this.hide = function() { }
_hidden = true; getParent() {
}; return this._parent;
this.unhide = function() { }
_hidden = false; isHidden() {
}; return this._hidden;
}; }
hide() {
this._hidden = true;
}
unhide() {
this._hidden = false;
}
}
/** /**
* A Class that handles the event-markers inside the given plot * A Class that handles the event-markers inside the given plot
*/ */
let EventMarkers = function(plot) { export class EventMarkers {
let _events = []; _events: any;
_types: any;
this._types = []; _plot: any;
this._plot = plot; eventsEnabled: any;
this.eventsEnabled = false;
/** @ngInject */
constructor(plot) {
this._events = [];
this._types = [];
this._plot = plot;
this.eventsEnabled = false;
}
this.getEvents = function() { getEvents() {
return _events; return this._events;
}; }
this.setTypes = function(types) { setTypes(types) {
return (this._types = types); return (this._types = types);
}; }
/** /**
* create internal objects for the given events * create internal objects for the given events
*/ */
this.setupEvents = function(events) { setupEvents(events) {
let that = this;
let parts = _.partition(events, 'isRegion'); let parts = _.partition(events, 'isRegion');
let regions = parts[0]; let regions = parts[0];
events = parts[1]; events = parts[1];
$.each(events, function(index, event) { $.each(events, (index, event) => {
let ve = new VisualEvent(event, that._buildDiv(event)); let ve = new VisualEvent(event, this._buildDiv(event));
_events.push(ve); this._events.push(ve);
}); });
$.each(regions, function(index, event) { $.each(regions, (index, event) => {
let vre = new VisualEvent(event, that._buildRegDiv(event)); let vre = new VisualEvent(event, this._buildRegDiv(event));
_events.push(vre); this._events.push(vre);
}); });
_events.sort(function(a, b) { this._events.sort((a, b) => {
let ao = a.getOptions(), let ao = a.getOptions(),
bo = b.getOptions(); bo = b.getOptions();
if (ao.min > bo.min) { if (ao.min > bo.min) {
...@@ -239,18 +265,17 @@ let EventMarkers = function(plot) { ...@@ -239,18 +265,17 @@ let EventMarkers = function(plot) {
} }
return 0; return 0;
}); });
}; }
/** /**
* draw the events to the plot * draw the events to the plot
*/ */
this.drawEvents = function() { drawEvents() {
let that = this; // var o = this._plot.getPlotOffset();
// let o = this._plot.getPlotOffset();
$.each(_events, function(index, event) { $.each(this._events, (index, event) => {
// check event is inside the graph range // check event is inside the graph range
if (that._insidePlot(event.getOptions().min) && !event.isHidden()) { if (this._insidePlot(event.getOptions().min) && !event.isHidden()) {
event.visual().draw(); event.visual().draw();
} else { } else {
event event
...@@ -259,56 +284,46 @@ let EventMarkers = function(plot) { ...@@ -259,56 +284,46 @@ let EventMarkers = function(plot) {
.hide(); .hide();
} }
}); });
}; }
/** /**
* update the position of the event-markers (e.g. after scrolling or zooming) * update the position of the event-markers (e.g. after scrolling or zooming)
*/ */
this.updateEvents = function() { updateEvents() {
let that = this;
let o = this._plot.getPlotOffset(), let o = this._plot.getPlotOffset(),
left, left,
top; top;
let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
$.each(_events, function(index, event) { $.each(this._events, (index, event) => {
top = o.top + that._plot.height() - event.visual().height(); top = o.top + this._plot.height() - event.visual().height();
left = xaxis.p2c(event.getOptions().min) + o.left - event.visual().width() / 2; left = xaxis.p2c(event.getOptions().min) + o.left - event.visual().width() / 2;
event.visual().moveTo({ top: top, left: left }); event.visual().moveTo({ top: top, left: left });
}); });
}; }
/** /**
* remove all events from the plot * remove all events from the plot
*/ */
this._clearEvents = function() { _clearEvents() {
$.each(_events, function(index, val) { $.each(this._events, (index, val) => {
val.visual().clear(); val.visual().clear();
}); });
_events = []; this._events = [];
}; }
/** /**
* create a DOM element for the given event * create a DOM element for the given event
*/ */
this._buildDiv = function(event) { _buildDiv(event) {
let that = this; let that = this;
let container = this._plot.getPlaceholder(); let container = this._plot.getPlaceholder();
let o = this._plot.getPlotOffset(); let o = this._plot.getPlotOffset();
let axes = this._plot.getAxes();
let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
let yaxis, top, left, color, markerSize, markerShow, lineStyle, lineWidth; let top, left, color, markerSize, markerShow, lineStyle, lineWidth;
let markerTooltip; 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;
}
// map the eventType to a types object // map the eventType to a types object
let eventTypeId = event.eventType; let eventTypeId = event.eventType;
...@@ -444,27 +459,18 @@ let EventMarkers = function(plot) { ...@@ -444,27 +459,18 @@ let EventMarkers = function(plot) {
); );
return drawableEvent; return drawableEvent;
}; }
/** /**
* create a DOM element for the given region * create a DOM element for the given region
*/ */
this._buildRegDiv = function(event) { _buildRegDiv(event) {
let that = this; let that = this;
let container = this._plot.getPlaceholder(); let container = this._plot.getPlaceholder();
let o = this._plot.getPlotOffset(); let o = this._plot.getPlotOffset();
let axes = this._plot.getAxes();
let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
let yaxis, top, left, lineWidth, regionWidth, lineStyle, color, markerTooltip; let 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;
}
// map the eventType to a types object // map the eventType to a types object
let eventTypeId = event.eventType; let eventTypeId = event.eventType;
...@@ -502,14 +508,14 @@ let EventMarkers = function(plot) { ...@@ -502,14 +508,14 @@ let EventMarkers = function(plot) {
let right = xaxis.p2c(timeTo) + o.left; let right = xaxis.p2c(timeTo) + o.left;
regionWidth = right - left; regionWidth = right - left;
_.each([left, right], function(position) { _.each([left, right], position => {
let line = $('<div class="events_line flot-temp-elem"></div>').css({ let line = $('<div class="events_line flot-temp-elem"></div>').css({
position: 'absolute', position: 'absolute',
opacity: 0.8, opacity: 0.8,
left: position + 'px', left: position + 'px',
top: 8, top: 8,
width: lineWidth + 'px', width: lineWidth + 'px',
height: that._plot.height() + topOffset, height: this._plot.height() + topOffset,
'border-left-width': lineWidth + 'px', 'border-left-width': lineWidth + 'px',
'border-left-style': lineStyle, 'border-left-style': lineStyle,
'border-left-color': color, 'border-left-color': color,
...@@ -573,22 +579,24 @@ let EventMarkers = function(plot) { ...@@ -573,22 +579,24 @@ let EventMarkers = function(plot) {
); );
return drawableEvent; return drawableEvent;
}; }
/** /**
* check if the event is inside visible range * check if the event is inside visible range
*/ */
this._insidePlot = function(x) { _insidePlot(x) {
let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; let xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
let xc = xaxis.p2c(x); let xc = xaxis.p2c(x);
return xc > 0 && xc < xaxis.p2c(xaxis.max); return xc > 0 && xc < xaxis.p2c(xaxis.max);
}; }
}; }
/** /**
* initialize the plugin for the given plot * initialize the plugin for the given plot
*/ */
function init(plot) {
/** @ngInject */
export function init(plot) {
/*jshint validthis:true */ /*jshint validthis:true */
let that = this; let that = this;
let eventMarkers = new EventMarkers(plot); let eventMarkers = new EventMarkers(plot);
...@@ -598,7 +606,7 @@ function init(plot) { ...@@ -598,7 +606,7 @@ function init(plot) {
}; };
plot.hideEvents = function() { plot.hideEvents = function() {
$.each(eventMarkers._events, function(index, event) { $.each(eventMarkers._events, (index, event) => {
event event
.visual() .visual()
.getObject() .getObject()
...@@ -608,7 +616,7 @@ function init(plot) { ...@@ -608,7 +616,7 @@ function init(plot) {
plot.showEvents = function() { plot.showEvents = function() {
plot.hideEvents(); plot.hideEvents();
$.each(eventMarkers._events, function(index, event) { $.each(eventMarkers._events, (index, event) => {
event.hide(); event.hide();
}); });
......
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