Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
b2027af4
Commit
b2027af4
authored
Apr 10, 2018
by
Patrick O'Carroll
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
wrote classes
parent
d83f8865
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
136 additions
and
128 deletions
+136
-128
public/app/plugins/panel/graph/jquery.flot.events.ts
+136
-128
No files found.
public/app/plugins/panel/graph/jquery.flot.events.ts
View file @
b2027af4
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
,
th
at
.
_buildDiv
(
event
));
let
ve
=
new
VisualEvent
(
event
,
th
is
.
_buildDiv
(
event
));
_events
.
push
(
ve
);
this
.
_events
.
push
(
ve
);
});
});
$
.
each
(
regions
,
function
(
index
,
event
)
{
$
.
each
(
regions
,
(
index
,
event
)
=>
{
let
vre
=
new
VisualEvent
(
event
,
th
at
.
_buildRegDiv
(
event
));
let
vre
=
new
VisualEvent
(
event
,
th
is
.
_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
(
th
at
.
_insidePlot
(
event
.
getOptions
().
min
)
&&
!
event
.
isHidden
())
{
if
(
th
is
.
_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
+
th
at
.
_plot
.
height
()
-
event
.
visual
().
height
();
top
=
o
.
top
+
th
is
.
_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
:
th
at
.
_plot
.
height
()
+
topOffset
,
height
:
th
is
.
_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
();
});
});
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment