mirror of https://github.com/sipwise/www_admin.git
Andreas Granig
16 years ago
parent
32bb12817d
commit
1fb33d9fef
@ -0,0 +1,57 @@
|
||||
package admin::Controller::dashboard;
|
||||
|
||||
use strict;
|
||||
use warnings;
|
||||
use base 'Catalyst::Controller';
|
||||
use Data::Dumper;
|
||||
use UNIVERSAL 'isa';
|
||||
|
||||
|
||||
=head1 NAME
|
||||
|
||||
admin::Controller::dashboard - Catalyst Controller
|
||||
|
||||
=head1 DESCRIPTION
|
||||
|
||||
Catalyst Controller.
|
||||
|
||||
=head1 METHODS
|
||||
|
||||
=head2 index
|
||||
|
||||
Control the statistics dashboard.
|
||||
|
||||
=cut
|
||||
|
||||
sub index : Private {
|
||||
my ( $self, $c ) = @_;
|
||||
$c->stash->{template} = 'tt/dashboard.tt';
|
||||
|
||||
return 1;
|
||||
}
|
||||
|
||||
=head1 BUGS AND LIMITATIONS
|
||||
|
||||
=over
|
||||
|
||||
=item none
|
||||
|
||||
=back
|
||||
|
||||
=head1 SEE ALSO
|
||||
|
||||
Provisioning model, Sipwise::Provisioning::Billing, Catalyst
|
||||
|
||||
=head1 AUTHORS
|
||||
|
||||
Andreas Granig <agranig@sipwise.com>
|
||||
|
||||
=head1 COPYRIGHT
|
||||
|
||||
The dashboard controller is Copyright (c) 2010 Sipwise GmbH, Austria. All
|
||||
rights reserved.
|
||||
|
||||
=cut
|
||||
|
||||
# ende gelaende
|
||||
1;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,174 @@
|
||||
/* Plugin for jQuery for working with colors.
|
||||
*
|
||||
* Version 1.0.
|
||||
*
|
||||
* Inspiration from jQuery color animation plugin by John Resig.
|
||||
*
|
||||
* Released under the MIT license by Ole Laursen, October 2009.
|
||||
*
|
||||
* Examples:
|
||||
*
|
||||
* $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
|
||||
* var c = $.color.extract($("#mydiv"), 'background-color');
|
||||
* console.log(c.r, c.g, c.b, c.a);
|
||||
* $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
|
||||
*
|
||||
* Note that .scale() and .add() work in-place instead of returning
|
||||
* new objects.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
jQuery.color = {};
|
||||
|
||||
// construct color object with some convenient chainable helpers
|
||||
jQuery.color.make = function (r, g, b, a) {
|
||||
var o = {};
|
||||
o.r = r || 0;
|
||||
o.g = g || 0;
|
||||
o.b = b || 0;
|
||||
o.a = a != null ? a : 1;
|
||||
|
||||
o.add = function (c, d) {
|
||||
for (var i = 0; i < c.length; ++i)
|
||||
o[c.charAt(i)] += d;
|
||||
return o.normalize();
|
||||
};
|
||||
|
||||
o.scale = function (c, f) {
|
||||
for (var i = 0; i < c.length; ++i)
|
||||
o[c.charAt(i)] *= f;
|
||||
return o.normalize();
|
||||
};
|
||||
|
||||
o.toString = function () {
|
||||
if (o.a >= 1.0) {
|
||||
return "rgb("+[o.r, o.g, o.b].join(",")+")";
|
||||
} else {
|
||||
return "rgba("+[o.r, o.g, o.b, o.a].join(",")+")";
|
||||
}
|
||||
};
|
||||
|
||||
o.normalize = function () {
|
||||
function clamp(min, value, max) {
|
||||
return value < min ? min: (value > max ? max: value);
|
||||
}
|
||||
|
||||
o.r = clamp(0, parseInt(o.r), 255);
|
||||
o.g = clamp(0, parseInt(o.g), 255);
|
||||
o.b = clamp(0, parseInt(o.b), 255);
|
||||
o.a = clamp(0, o.a, 1);
|
||||
return o;
|
||||
};
|
||||
|
||||
o.clone = function () {
|
||||
return jQuery.color.make(o.r, o.b, o.g, o.a);
|
||||
};
|
||||
|
||||
return o.normalize();
|
||||
}
|
||||
|
||||
// extract CSS color property from element, going up in the DOM
|
||||
// if it's "transparent"
|
||||
jQuery.color.extract = function (elem, css) {
|
||||
var c;
|
||||
do {
|
||||
c = elem.css(css).toLowerCase();
|
||||
// keep going until we find an element that has color, or
|
||||
// we hit the body
|
||||
if (c != '' && c != 'transparent')
|
||||
break;
|
||||
elem = elem.parent();
|
||||
} while (!jQuery.nodeName(elem.get(0), "body"));
|
||||
|
||||
// catch Safari's way of signalling transparent
|
||||
if (c == "rgba(0, 0, 0, 0)")
|
||||
c = "transparent";
|
||||
|
||||
return jQuery.color.parse(c);
|
||||
}
|
||||
|
||||
// parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
|
||||
// returns color object
|
||||
jQuery.color.parse = function (str) {
|
||||
var res, m = jQuery.color.make;
|
||||
|
||||
// Look for rgb(num,num,num)
|
||||
if (res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))
|
||||
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
|
||||
|
||||
// Look for rgba(num,num,num,num)
|
||||
if (res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
|
||||
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
|
||||
|
||||
// Look for rgb(num%,num%,num%)
|
||||
if (res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))
|
||||
return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55);
|
||||
|
||||
// Look for rgba(num%,num%,num%,num)
|
||||
if (res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
|
||||
return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55, parseFloat(res[4]));
|
||||
|
||||
// Look for #a0b1c2
|
||||
if (res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))
|
||||
return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
|
||||
|
||||
// Look for #fff
|
||||
if (res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))
|
||||
return m(parseInt(res[1]+res[1], 16), parseInt(res[2]+res[2], 16), parseInt(res[3]+res[3], 16));
|
||||
|
||||
// Otherwise, we're most likely dealing with a named color
|
||||
var name = jQuery.trim(str).toLowerCase();
|
||||
if (name == "transparent")
|
||||
return m(255, 255, 255, 0);
|
||||
else {
|
||||
res = lookupColors[name];
|
||||
return m(res[0], res[1], res[2]);
|
||||
}
|
||||
}
|
||||
|
||||
var lookupColors = {
|
||||
aqua:[0,255,255],
|
||||
azure:[240,255,255],
|
||||
beige:[245,245,220],
|
||||
black:[0,0,0],
|
||||
blue:[0,0,255],
|
||||
brown:[165,42,42],
|
||||
cyan:[0,255,255],
|
||||
darkblue:[0,0,139],
|
||||
darkcyan:[0,139,139],
|
||||
darkgrey:[169,169,169],
|
||||
darkgreen:[0,100,0],
|
||||
darkkhaki:[189,183,107],
|
||||
darkmagenta:[139,0,139],
|
||||
darkolivegreen:[85,107,47],
|
||||
darkorange:[255,140,0],
|
||||
darkorchid:[153,50,204],
|
||||
darkred:[139,0,0],
|
||||
darksalmon:[233,150,122],
|
||||
darkviolet:[148,0,211],
|
||||
fuchsia:[255,0,255],
|
||||
gold:[255,215,0],
|
||||
green:[0,128,0],
|
||||
indigo:[75,0,130],
|
||||
khaki:[240,230,140],
|
||||
lightblue:[173,216,230],
|
||||
lightcyan:[224,255,255],
|
||||
lightgreen:[144,238,144],
|
||||
lightgrey:[211,211,211],
|
||||
lightpink:[255,182,193],
|
||||
lightyellow:[255,255,224],
|
||||
lime:[0,255,0],
|
||||
magenta:[255,0,255],
|
||||
maroon:[128,0,0],
|
||||
navy:[0,0,128],
|
||||
olive:[128,128,0],
|
||||
orange:[255,165,0],
|
||||
pink:[255,192,203],
|
||||
purple:[128,0,128],
|
||||
violet:[128,0,128],
|
||||
red:[255,0,0],
|
||||
silver:[192,192,192],
|
||||
white:[255,255,255],
|
||||
yellow:[255,255,0]
|
||||
};
|
||||
})();
|
||||
@ -0,0 +1 @@
|
||||
(function(){jQuery.color={};jQuery.color.make=function(E,D,B,C){var F={};F.r=E||0;F.g=D||0;F.b=B||0;F.a=C!=null?C:1;F.add=function(I,H){for(var G=0;G<I.length;++G){F[I.charAt(G)]+=H}return F.normalize()};F.scale=function(I,H){for(var G=0;G<I.length;++G){F[I.charAt(G)]*=H}return F.normalize()};F.toString=function(){if(F.a>=1){return"rgb("+[F.r,F.g,F.b].join(",")+")"}else{return"rgba("+[F.r,F.g,F.b,F.a].join(",")+")"}};F.normalize=function(){function G(I,J,H){return J<I?I:(J>H?H:J)}F.r=G(0,parseInt(F.r),255);F.g=G(0,parseInt(F.g),255);F.b=G(0,parseInt(F.b),255);F.a=G(0,F.a,1);return F};F.clone=function(){return jQuery.color.make(F.r,F.b,F.g,F.a)};return F.normalize()};jQuery.color.extract=function(C,B){var D;do{D=C.css(B).toLowerCase();if(D!=""&&D!="transparent"){break}C=C.parent()}while(!jQuery.nodeName(C.get(0),"body"));if(D=="rgba(0, 0, 0, 0)"){D="transparent"}return jQuery.color.parse(D)};jQuery.color.parse=function(E){var D,B=jQuery.color.make;if(D=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(E)){return B(parseInt(D[1],10),parseInt(D[2],10),parseInt(D[3],10))}if(D=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(E)){return B(parseInt(D[1],10),parseInt(D[2],10),parseInt(D[3],10),parseFloat(D[4]))}if(D=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(E)){return B(parseFloat(D[1])*2.55,parseFloat(D[2])*2.55,parseFloat(D[3])*2.55)}if(D=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(E)){return B(parseFloat(D[1])*2.55,parseFloat(D[2])*2.55,parseFloat(D[3])*2.55,parseFloat(D[4]))}if(D=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(E)){return B(parseInt(D[1],16),parseInt(D[2],16),parseInt(D[3],16))}if(D=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(E)){return B(parseInt(D[1]+D[1],16),parseInt(D[2]+D[2],16),parseInt(D[3]+D[3],16))}var C=jQuery.trim(E).toLowerCase();if(C=="transparent"){return B(255,255,255,0)}else{D=A[C];return B(D[0],D[1],D[2])}};var A={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})();
|
||||
@ -0,0 +1,156 @@
|
||||
/*
|
||||
Flot plugin for showing a crosshair, thin lines, when the mouse hovers
|
||||
over the plot.
|
||||
|
||||
crosshair: {
|
||||
mode: null or "x" or "y" or "xy"
|
||||
color: color
|
||||
lineWidth: number
|
||||
}
|
||||
|
||||
Set the mode to one of "x", "y" or "xy". The "x" mode enables a
|
||||
vertical crosshair that lets you trace the values on the x axis, "y"
|
||||
enables a horizontal crosshair and "xy" enables them both. "color" is
|
||||
the color of the crosshair (default is "rgba(170, 0, 0, 0.80)"),
|
||||
"lineWidth" is the width of the drawn lines (default is 1).
|
||||
|
||||
The plugin also adds four public methods:
|
||||
|
||||
- setCrosshair(pos)
|
||||
|
||||
Set the position of the crosshair. Note that this is cleared if
|
||||
the user moves the mouse. "pos" should be on the form { x: xpos,
|
||||
y: ypos } (or x2 and y2 if you're using the secondary axes), which
|
||||
is coincidentally the same format as what you get from a "plothover"
|
||||
event. If "pos" is null, the crosshair is cleared.
|
||||
|
||||
- clearCrosshair()
|
||||
|
||||
Clear the crosshair.
|
||||
|
||||
- lockCrosshair(pos)
|
||||
|
||||
Cause the crosshair to lock to the current location, no longer
|
||||
updating if the user moves the mouse. Optionally supply a position
|
||||
(passed on to setCrosshair()) to move it to.
|
||||
|
||||
Example usage:
|
||||
var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } };
|
||||
$("#graph").bind("plothover", function (evt, position, item) {
|
||||
if (item) {
|
||||
// Lock the crosshair to the data point being hovered
|
||||
myFlot.lockCrosshair({ x: item.datapoint[0], y: item.datapoint[1] });
|
||||
}
|
||||
else {
|
||||
// Return normal crosshair operation
|
||||
myFlot.unlockCrosshair();
|
||||
}
|
||||
});
|
||||
|
||||
- unlockCrosshair()
|
||||
|
||||
Free the crosshair to move again after locking it.
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
crosshair: {
|
||||
mode: null, // one of null, "x", "y" or "xy",
|
||||
color: "rgba(170, 0, 0, 0.80)",
|
||||
lineWidth: 1
|
||||
}
|
||||
};
|
||||
|
||||
function init(plot) {
|
||||
// position of crosshair in pixels
|
||||
var crosshair = { x: -1, y: -1, locked: false };
|
||||
|
||||
plot.setCrosshair = function setCrosshair(pos) {
|
||||
if (!pos)
|
||||
crosshair.x = -1;
|
||||
else {
|
||||
var axes = plot.getAxes();
|
||||
|
||||
crosshair.x = Math.max(0, Math.min(pos.x != null ? axes.xaxis.p2c(pos.x) : axes.x2axis.p2c(pos.x2), plot.width()));
|
||||
crosshair.y = Math.max(0, Math.min(pos.y != null ? axes.yaxis.p2c(pos.y) : axes.y2axis.p2c(pos.y2), plot.height()));
|
||||
}
|
||||
|
||||
plot.triggerRedrawOverlay();
|
||||
};
|
||||
|
||||
plot.clearCrosshair = plot.setCrosshair; // passes null for pos
|
||||
|
||||
plot.lockCrosshair = function lockCrosshair(pos) {
|
||||
if (pos)
|
||||
plot.setCrosshair(pos);
|
||||
crosshair.locked = true;
|
||||
}
|
||||
|
||||
plot.unlockCrosshair = function unlockCrosshair() {
|
||||
crosshair.locked = false;
|
||||
}
|
||||
|
||||
plot.hooks.bindEvents.push(function (plot, eventHolder) {
|
||||
if (!plot.getOptions().crosshair.mode)
|
||||
return;
|
||||
|
||||
eventHolder.mouseout(function () {
|
||||
if (crosshair.x != -1) {
|
||||
crosshair.x = -1;
|
||||
plot.triggerRedrawOverlay();
|
||||
}
|
||||
});
|
||||
|
||||
eventHolder.mousemove(function (e) {
|
||||
if (plot.getSelection && plot.getSelection()) {
|
||||
crosshair.x = -1; // hide the crosshair while selecting
|
||||
return;
|
||||
}
|
||||
|
||||
if (crosshair.locked)
|
||||
return;
|
||||
|
||||
var offset = plot.offset();
|
||||
crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
|
||||
crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
|
||||
plot.triggerRedrawOverlay();
|
||||
});
|
||||
});
|
||||
|
||||
plot.hooks.drawOverlay.push(function (plot, ctx) {
|
||||
var c = plot.getOptions().crosshair;
|
||||
if (!c.mode)
|
||||
return;
|
||||
|
||||
var plotOffset = plot.getPlotOffset();
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(plotOffset.left, plotOffset.top);
|
||||
|
||||
if (crosshair.x != -1) {
|
||||
ctx.strokeStyle = c.color;
|
||||
ctx.lineWidth = c.lineWidth;
|
||||
ctx.lineJoin = "round";
|
||||
|
||||
ctx.beginPath();
|
||||
if (c.mode.indexOf("x") != -1) {
|
||||
ctx.moveTo(crosshair.x, 0);
|
||||
ctx.lineTo(crosshair.x, plot.height());
|
||||
}
|
||||
if (c.mode.indexOf("y") != -1) {
|
||||
ctx.moveTo(0, crosshair.y);
|
||||
ctx.lineTo(plot.width(), crosshair.y);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.restore();
|
||||
});
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'crosshair',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
@ -0,0 +1 @@
|
||||
(function(B){var A={crosshair:{mode:null,color:"rgba(170, 0, 0, 0.80)",lineWidth:1}};function C(G){var H={x:-1,y:-1,locked:false};G.setCrosshair=function D(J){if(!J){H.x=-1}else{var I=G.getAxes();H.x=Math.max(0,Math.min(J.x!=null?I.xaxis.p2c(J.x):I.x2axis.p2c(J.x2),G.width()));H.y=Math.max(0,Math.min(J.y!=null?I.yaxis.p2c(J.y):I.y2axis.p2c(J.y2),G.height()))}G.triggerRedrawOverlay()};G.clearCrosshair=G.setCrosshair;G.lockCrosshair=function E(I){if(I){G.setCrosshair(I)}H.locked=true};G.unlockCrosshair=function F(){H.locked=false};G.hooks.bindEvents.push(function(J,I){if(!J.getOptions().crosshair.mode){return }I.mouseout(function(){if(H.x!=-1){H.x=-1;J.triggerRedrawOverlay()}});I.mousemove(function(K){if(J.getSelection&&J.getSelection()){H.x=-1;return }if(H.locked){return }var L=J.offset();H.x=Math.max(0,Math.min(K.pageX-L.left,J.width()));H.y=Math.max(0,Math.min(K.pageY-L.top,J.height()));J.triggerRedrawOverlay()})});G.hooks.drawOverlay.push(function(K,I){var L=K.getOptions().crosshair;if(!L.mode){return }var J=K.getPlotOffset();I.save();I.translate(J.left,J.top);if(H.x!=-1){I.strokeStyle=L.color;I.lineWidth=L.lineWidth;I.lineJoin="round";I.beginPath();if(L.mode.indexOf("x")!=-1){I.moveTo(H.x,0);I.lineTo(H.x,K.height())}if(L.mode.indexOf("y")!=-1){I.moveTo(0,H.y);I.lineTo(K.width(),H.y)}I.stroke()}I.restore()})}B.plot.plugins.push({init:C,options:A,name:"crosshair",version:"1.0"})})(jQuery);
|
||||
@ -0,0 +1,237 @@
|
||||
/*
|
||||
Flot plugin for plotting images, e.g. useful for putting ticks on a
|
||||
prerendered complex visualization.
|
||||
|
||||
The data syntax is [[image, x1, y1, x2, y2], ...] where (x1, y1) and
|
||||
(x2, y2) are where you intend the two opposite corners of the image to
|
||||
end up in the plot. Image must be a fully loaded Javascript image (you
|
||||
can make one with new Image()). If the image is not complete, it's
|
||||
skipped when plotting.
|
||||
|
||||
There are two helpers included for retrieving images. The easiest work
|
||||
the way that you put in URLs instead of images in the data (like
|
||||
["myimage.png", 0, 0, 10, 10]), then call $.plot.image.loadData(data,
|
||||
options, callback) where data and options are the same as you pass in
|
||||
to $.plot. This loads the images, replaces the URLs in the data with
|
||||
the corresponding images and calls "callback" when all images are
|
||||
loaded (or failed loading). In the callback, you can then call $.plot
|
||||
with the data set. See the included example.
|
||||
|
||||
A more low-level helper, $.plot.image.load(urls, callback) is also
|
||||
included. Given a list of URLs, it calls callback with an object
|
||||
mapping from URL to Image object when all images are loaded or have
|
||||
failed loading.
|
||||
|
||||
Options for the plugin are
|
||||
|
||||
series: {
|
||||
images: {
|
||||
show: boolean
|
||||
anchor: "corner" or "center"
|
||||
alpha: [0,1]
|
||||
}
|
||||
}
|
||||
|
||||
which can be specified for a specific series
|
||||
|
||||
$.plot($("#placeholder"), [{ data: [ ... ], images: { ... } ])
|
||||
|
||||
Note that because the data format is different from usual data points,
|
||||
you can't use images with anything else in a specific data series.
|
||||
|
||||
Setting "anchor" to "center" causes the pixels in the image to be
|
||||
anchored at the corner pixel centers inside of at the pixel corners,
|
||||
effectively letting half a pixel stick out to each side in the plot.
|
||||
|
||||
|
||||
A possible future direction could be support for tiling for large
|
||||
images (like Google Maps).
|
||||
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
series: {
|
||||
images: {
|
||||
show: false,
|
||||
alpha: 1,
|
||||
anchor: "corner" // or "center"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.plot.image = {};
|
||||
|
||||
$.plot.image.loadDataImages = function (series, options, callback) {
|
||||
var urls = [], points = [];
|
||||
|
||||
var defaultShow = options.series.images.show;
|
||||
|
||||
$.each(series, function (i, s) {
|
||||
if (!(defaultShow || s.images.show))
|
||||
return;
|
||||
|
||||
if (s.data)
|
||||
s = s.data;
|
||||
|
||||
$.each(s, function (i, p) {
|
||||
if (typeof p[0] == "string") {
|
||||
urls.push(p[0]);
|
||||
points.push(p);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$.plot.image.load(urls, function (loadedImages) {
|
||||
$.each(points, function (i, p) {
|
||||
var url = p[0];
|
||||
if (loadedImages[url])
|
||||
p[0] = loadedImages[url];
|
||||
});
|
||||
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
$.plot.image.load = function (urls, callback) {
|
||||
var missing = urls.length, loaded = {};
|
||||
if (missing == 0)
|
||||
callback({});
|
||||
|
||||
$.each(urls, function (i, url) {
|
||||
var handler = function () {
|
||||
--missing;
|
||||
|
||||
loaded[url] = this;
|
||||
|
||||
if (missing == 0)
|
||||
callback(loaded);
|
||||
};
|
||||
|
||||
$('<img />').load(handler).error(handler).attr('src', url);
|
||||
});
|
||||
}
|
||||
|
||||
function draw(plot, ctx) {
|
||||
var plotOffset = plot.getPlotOffset();
|
||||
|
||||
$.each(plot.getData(), function (i, series) {
|
||||
var points = series.datapoints.points,
|
||||
ps = series.datapoints.pointsize;
|
||||
|
||||
for (var i = 0; i < points.length; i += ps) {
|
||||
var img = points[i],
|
||||
x1 = points[i + 1], y1 = points[i + 2],
|
||||
x2 = points[i + 3], y2 = points[i + 4],
|
||||
xaxis = series.xaxis, yaxis = series.yaxis,
|
||||
tmp;
|
||||
|
||||
// actually we should check img.complete, but it
|
||||
// appears to be a somewhat unreliable indicator in
|
||||
// IE6 (false even after load event)
|
||||
if (!img || img.width <= 0 || img.height <= 0)
|
||||
continue;
|
||||
|
||||
if (x1 > x2) {
|
||||
tmp = x2;
|
||||
x2 = x1;
|
||||
x1 = tmp;
|
||||
}
|
||||
if (y1 > y2) {
|
||||
tmp = y2;
|
||||
y2 = y1;
|
||||
y1 = tmp;
|
||||
}
|
||||
|
||||
// if the anchor is at the center of the pixel, expand the
|
||||
// image by 1/2 pixel in each direction
|
||||
if (series.images.anchor == "center") {
|
||||
tmp = 0.5 * (x2-x1) / (img.width - 1);
|
||||
x1 -= tmp;
|
||||
x2 += tmp;
|
||||
tmp = 0.5 * (y2-y1) / (img.height - 1);
|
||||
y1 -= tmp;
|
||||
y2 += tmp;
|
||||
}
|
||||
|
||||
// clip
|
||||
if (x1 == x2 || y1 == y2 ||
|
||||
x1 >= xaxis.max || x2 <= xaxis.min ||
|
||||
y1 >= yaxis.max || y2 <= yaxis.min)
|
||||
continue;
|
||||
|
||||
var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
|
||||
if (x1 < xaxis.min) {
|
||||
sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
|
||||
x1 = xaxis.min;
|
||||
}
|
||||
|
||||
if (x2 > xaxis.max) {
|
||||
sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
|
||||
x2 = xaxis.max;
|
||||
}
|
||||
|
||||
if (y1 < yaxis.min) {
|
||||
sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
|
||||
y1 = yaxis.min;
|
||||
}
|
||||
|
||||
if (y2 > yaxis.max) {
|
||||
sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
|
||||
y2 = yaxis.max;
|
||||
}
|
||||
|
||||
x1 = xaxis.p2c(x1);
|
||||
x2 = xaxis.p2c(x2);
|
||||
y1 = yaxis.p2c(y1);
|
||||
y2 = yaxis.p2c(y2);
|
||||
|
||||
// the transformation may have swapped us
|
||||
if (x1 > x2) {
|
||||
tmp = x2;
|
||||
x2 = x1;
|
||||
x1 = tmp;
|
||||
}
|
||||
if (y1 > y2) {
|
||||
tmp = y2;
|
||||
y2 = y1;
|
||||
y1 = tmp;
|
||||
}
|
||||
|
||||
tmp = ctx.globalAlpha;
|
||||
ctx.globalAlpha *= series.images.alpha;
|
||||
ctx.drawImage(img,
|
||||
sx1, sy1, sx2 - sx1, sy2 - sy1,
|
||||
x1 + plotOffset.left, y1 + plotOffset.top,
|
||||
x2 - x1, y2 - y1);
|
||||
ctx.globalAlpha = tmp;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function processRawData(plot, series, data, datapoints) {
|
||||
if (!series.images.show)
|
||||
return;
|
||||
|
||||
// format is Image, x1, y1, x2, y2 (opposite corners)
|
||||
datapoints.format = [
|
||||
{ required: true },
|
||||
{ x: true, number: true, required: true },
|
||||
{ y: true, number: true, required: true },
|
||||
{ x: true, number: true, required: true },
|
||||
{ y: true, number: true, required: true }
|
||||
];
|
||||
}
|
||||
|
||||
function init(plot) {
|
||||
plot.hooks.processRawData.push(processRawData);
|
||||
plot.hooks.draw.push(draw);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'image',
|
||||
version: '1.1'
|
||||
});
|
||||
})(jQuery);
|
||||
@ -0,0 +1 @@
|
||||
(function(D){var B={series:{images:{show:false,alpha:1,anchor:"corner"}}};D.plot.image={};D.plot.image.loadDataImages=function(G,F,K){var J=[],H=[];var I=F.series.images.show;D.each(G,function(L,M){if(!(I||M.images.show)){return }if(M.data){M=M.data}D.each(M,function(N,O){if(typeof O[0]=="string"){J.push(O[0]);H.push(O)}})});D.plot.image.load(J,function(L){D.each(H,function(N,O){var M=O[0];if(L[M]){O[0]=L[M]}});K()})};D.plot.image.load=function(H,I){var G=H.length,F={};if(G==0){I({})}D.each(H,function(K,J){var L=function(){--G;F[J]=this;if(G==0){I(F)}};D("<img />").load(L).error(L).attr("src",J)})};function A(H,F){var G=H.getPlotOffset();D.each(H.getData(),function(O,P){var X=P.datapoints.points,I=P.datapoints.pointsize;for(var O=0;O<X.length;O+=I){var Q=X[O],M=X[O+1],V=X[O+2],K=X[O+3],T=X[O+4],W=P.xaxis,S=P.yaxis,N;if(!Q||Q.width<=0||Q.height<=0){continue}if(M>K){N=K;K=M;M=N}if(V>T){N=T;T=V;V=N}if(P.images.anchor=="center"){N=0.5*(K-M)/(Q.width-1);M-=N;K+=N;N=0.5*(T-V)/(Q.height-1);V-=N;T+=N}if(M==K||V==T||M>=W.max||K<=W.min||V>=S.max||T<=S.min){continue}var L=0,U=0,J=Q.width,R=Q.height;if(M<W.min){L+=(J-L)*(W.min-M)/(K-M);M=W.min}if(K>W.max){J+=(J-L)*(W.max-K)/(K-M);K=W.max}if(V<S.min){R+=(U-R)*(S.min-V)/(T-V);V=S.min}if(T>S.max){U+=(U-R)*(S.max-T)/(T-V);T=S.max}M=W.p2c(M);K=W.p2c(K);V=S.p2c(V);T=S.p2c(T);if(M>K){N=K;K=M;M=N}if(V>T){N=T;T=V;V=N}N=F.globalAlpha;F.globalAlpha*=P.images.alpha;F.drawImage(Q,L,U,J-L,R-U,M+G.left,V+G.top,K-M,T-V);F.globalAlpha=N}})}function C(I,F,G,H){if(!F.images.show){return }H.format=[{required:true},{x:true,number:true,required:true},{y:true,number:true,required:true},{x:true,number:true,required:true},{y:true,number:true,required:true}]}function E(F){F.hooks.processRawData.push(C);F.hooks.draw.push(A)}D.plot.plugins.push({init:E,options:B,name:"image",version:"1.1"})})(jQuery);
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,272 @@
|
||||
/*
|
||||
Flot plugin for adding panning and zooming capabilities to a plot.
|
||||
|
||||
The default behaviour is double click and scrollwheel up/down to zoom
|
||||
in, drag to pan. The plugin defines plot.zoom({ center }),
|
||||
plot.zoomOut() and plot.pan(offset) so you easily can add custom
|
||||
controls. It also fires a "plotpan" and "plotzoom" event when
|
||||
something happens, useful for synchronizing plots.
|
||||
|
||||
Example usage:
|
||||
|
||||
plot = $.plot(...);
|
||||
|
||||
// zoom default amount in on the pixel (100, 200)
|
||||
plot.zoom({ center: { left: 10, top: 20 } });
|
||||
|
||||
// zoom out again
|
||||
plot.zoomOut({ center: { left: 10, top: 20 } });
|
||||
|
||||
// pan 100 pixels to the left and 20 down
|
||||
plot.pan({ left: -100, top: 20 })
|
||||
|
||||
|
||||
Options:
|
||||
|
||||
zoom: {
|
||||
interactive: false
|
||||
trigger: "dblclick" // or "click" for single click
|
||||
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
||||
}
|
||||
|
||||
pan: {
|
||||
interactive: false
|
||||
}
|
||||
|
||||
xaxis, yaxis, x2axis, y2axis: {
|
||||
zoomRange: null // or [number, number] (min range, max range)
|
||||
panRange: null // or [number, number] (min, max)
|
||||
}
|
||||
|
||||
"interactive" enables the built-in drag/click behaviour. "amount" is
|
||||
the amount to zoom the viewport relative to the current range, so 1 is
|
||||
100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out).
|
||||
|
||||
"zoomRange" is the interval in which zooming can happen, e.g. with
|
||||
zoomRange: [1, 100] the zoom will never scale the axis so that the
|
||||
difference between min and max is smaller than 1 or larger than 100.
|
||||
You can set either of them to null to ignore.
|
||||
|
||||
"panRange" confines the panning to stay within a range, e.g. with
|
||||
panRange: [-10, 20] panning stops at -10 in one end and at 20 in the
|
||||
other. Either can be null.
|
||||
*/
|
||||
|
||||
|
||||
// First two dependencies, jquery.event.drag.js and
|
||||
// jquery.mousewheel.js, we put them inline here to save people the
|
||||
// effort of downloading them.
|
||||
|
||||
/*
|
||||
jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
|
||||
Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
|
||||
*/
|
||||
(function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function D(){return(F.dragging===false)}function G(K,J){if(!K){return }K.unselectable=J?"off":"on";K.onselectstart=function(){return J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery);
|
||||
|
||||
|
||||
/* jquery.mousewheel.min.js
|
||||
* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
|
||||
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
||||
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
||||
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||
*
|
||||
* Version: 3.0.2
|
||||
*
|
||||
* Requires: 1.2.2+
|
||||
*/
|
||||
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
|
||||
|
||||
|
||||
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
xaxis: {
|
||||
zoomRange: null, // or [number, number] (min range, max range)
|
||||
panRange: null // or [number, number] (min, max)
|
||||
},
|
||||
zoom: {
|
||||
interactive: false,
|
||||
trigger: "dblclick", // or "click" for single click
|
||||
amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
||||
},
|
||||
pan: {
|
||||
interactive: false
|
||||
}
|
||||
};
|
||||
|
||||
function init(plot) {
|
||||
function bindEvents(plot, eventHolder) {
|
||||
var o = plot.getOptions();
|
||||
if (o.zoom.interactive) {
|
||||
function clickHandler(e, zoomOut) {
|
||||
var c = plot.offset();
|
||||
c.left = e.pageX - c.left;
|
||||
c.top = e.pageY - c.top;
|
||||
if (zoomOut)
|
||||
plot.zoomOut({ center: c });
|
||||
else
|
||||
plot.zoom({ center: c });
|
||||
}
|
||||
|
||||
eventHolder[o.zoom.trigger](clickHandler);
|
||||
|
||||
eventHolder.mousewheel(function (e, delta) {
|
||||
clickHandler(e, delta < 0);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
if (o.pan.interactive) {
|
||||
var prevCursor = 'default', pageX = 0, pageY = 0;
|
||||
|
||||
eventHolder.bind("dragstart", { distance: 10 }, function (e) {
|
||||
if (e.which != 1) // only accept left-click
|
||||
return false;
|
||||
eventHolderCursor = eventHolder.css('cursor');
|
||||
eventHolder.css('cursor', 'move');
|
||||
pageX = e.pageX;
|
||||
pageY = e.pageY;
|
||||
});
|
||||
eventHolder.bind("drag", function (e) {
|
||||
// unused at the moment, but we need it here to
|
||||
// trigger the dragstart/dragend events
|
||||
});
|
||||
eventHolder.bind("dragend", function (e) {
|
||||
eventHolder.css('cursor', prevCursor);
|
||||
plot.pan({ left: pageX - e.pageX,
|
||||
top: pageY - e.pageY });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
plot.zoomOut = function (args) {
|
||||
if (!args)
|
||||
args = {};
|
||||
|
||||
if (!args.amount)
|
||||
args.amount = plot.getOptions().zoom.amount
|
||||
|
||||
args.amount = 1 / args.amount;
|
||||
plot.zoom(args);
|
||||
}
|
||||
|
||||
plot.zoom = function (args) {
|
||||
if (!args)
|
||||
args = {};
|
||||
|
||||
var axes = plot.getAxes(),
|
||||
options = plot.getOptions(),
|
||||
c = args.center,
|
||||
amount = args.amount ? args.amount : options.zoom.amount,
|
||||
w = plot.width(), h = plot.height();
|
||||
|
||||
if (!c)
|
||||
c = { left: w / 2, top: h / 2 };
|
||||
|
||||
var xf = c.left / w,
|
||||
x1 = c.left - xf * w / amount,
|
||||
x2 = c.left + (1 - xf) * w / amount,
|
||||
yf = c.top / h,
|
||||
y1 = c.top - yf * h / amount,
|
||||
y2 = c.top + (1 - yf) * h / amount;
|
||||
|
||||
function scaleAxis(min, max, name) {
|
||||
var axis = axes[name],
|
||||
axisOptions = options[name];
|
||||
|
||||
if (!axis.used)
|
||||
return;
|
||||
|
||||
min = axis.c2p(min);
|
||||
max = axis.c2p(max);
|
||||
if (max < min) { // make sure min < max
|
||||
var tmp = min
|
||||
min = max;
|
||||
max = tmp;
|
||||
}
|
||||
|
||||
var range = max - min, zr = axisOptions.zoomRange;
|
||||
if (zr &&
|
||||
((zr[0] != null && range < zr[0]) ||
|
||||
(zr[1] != null && range > zr[1])))
|
||||
return;
|
||||
|
||||
axisOptions.min = min;
|
||||
axisOptions.max = max;
|
||||
}
|
||||
|
||||
scaleAxis(x1, x2, 'xaxis');
|
||||
scaleAxis(x1, x2, 'x2axis');
|
||||
scaleAxis(y1, y2, 'yaxis');
|
||||
scaleAxis(y1, y2, 'y2axis');
|
||||
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
|
||||
if (!args.preventEvent)
|
||||
plot.getPlaceholder().trigger("plotzoom", [ plot ]);
|
||||
}
|
||||
|
||||
plot.pan = function (args) {
|
||||
var l = +args.left, t = +args.top,
|
||||
axes = plot.getAxes(), options = plot.getOptions();
|
||||
|
||||
if (isNaN(l))
|
||||
l = 0;
|
||||
if (isNaN(t))
|
||||
t = 0;
|
||||
|
||||
function panAxis(delta, name) {
|
||||
var axis = axes[name],
|
||||
axisOptions = options[name],
|
||||
min, max;
|
||||
|
||||
if (!axis.used)
|
||||
return;
|
||||
|
||||
min = axis.c2p(axis.p2c(axis.min) + delta),
|
||||
max = axis.c2p(axis.p2c(axis.max) + delta);
|
||||
|
||||
var pr = axisOptions.panRange;
|
||||
if (pr) {
|
||||
// check whether we hit the wall
|
||||
if (pr[0] != null && pr[0] > min) {
|
||||
delta = pr[0] - min;
|
||||
min += delta;
|
||||
max += delta;
|
||||
}
|
||||
|
||||
if (pr[1] != null && pr[1] < max) {
|
||||
delta = pr[1] - max;
|
||||
min += delta;
|
||||
max += delta;
|
||||
}
|
||||
}
|
||||
|
||||
axisOptions.min = min;
|
||||
axisOptions.max = max;
|
||||
}
|
||||
|
||||
panAxis(l, 'xaxis');
|
||||
panAxis(l, 'x2axis');
|
||||
panAxis(t, 'yaxis');
|
||||
panAxis(t, 'y2axis');
|
||||
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
|
||||
if (!args.preventEvent)
|
||||
plot.getPlaceholder().trigger("plotpan", [ plot ]);
|
||||
}
|
||||
|
||||
plot.hooks.bindEvents.push(bindEvents);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'navigate',
|
||||
version: '1.1'
|
||||
});
|
||||
})(jQuery);
|
||||
@ -0,0 +1 @@
|
||||
(function(R){R.fn.drag=function(A,B,C){if(B){this.bind("dragstart",A)}if(C){this.bind("dragend",C)}return !A?this.trigger("drag"):this.bind("drag",B?B:A)};var M=R.event,L=M.special,Q=L.drag={not:":input",distance:0,which:1,dragging:false,setup:function(A){A=R.extend({distance:Q.distance,which:Q.which,not:Q.not},A||{});A.distance=N(A.distance);M.add(this,"mousedown",O,A);if(this.attachEvent){this.attachEvent("ondragstart",J)}},teardown:function(){M.remove(this,"mousedown",O);if(this===Q.dragging){Q.dragging=Q.proxy=false}P(this,true);if(this.detachEvent){this.detachEvent("ondragstart",J)}}};L.dragstart=L.dragend={setup:function(){},teardown:function(){}};function O(A){var B=this,C,D=A.data||{};if(D.elem){B=A.dragTarget=D.elem;A.dragProxy=Q.proxy||B;A.cursorOffsetX=D.pageX-D.left;A.cursorOffsetY=D.pageY-D.top;A.offsetX=A.pageX-A.cursorOffsetX;A.offsetY=A.pageY-A.cursorOffsetY}else{if(Q.dragging||(D.which>0&&A.which!=D.which)||R(A.target).is(D.not)){return }}switch(A.type){case"mousedown":R.extend(D,R(B).offset(),{elem:B,target:A.target,pageX:A.pageX,pageY:A.pageY});M.add(document,"mousemove mouseup",O,D);P(B,false);Q.dragging=null;return false;case !Q.dragging&&"mousemove":if(N(A.pageX-D.pageX)+N(A.pageY-D.pageY)<D.distance){break}A.target=D.target;C=K(A,"dragstart",B);if(C!==false){Q.dragging=B;Q.proxy=A.dragProxy=R(C||B)[0]}case"mousemove":if(Q.dragging){C=K(A,"drag",B);if(L.drop){L.drop.allowed=(C!==false);L.drop.handler(A)}if(C!==false){break}A.type="mouseup"}case"mouseup":M.remove(document,"mousemove mouseup",O);if(Q.dragging){if(L.drop){L.drop.handler(A)}K(A,"dragend",B)}P(B,true);Q.dragging=Q.proxy=D.elem=false;break}return true}function K(D,B,A){D.type=B;var C=R.event.handle.call(A,D);return C===false?false:C||D.result}function N(A){return Math.pow(A,2)}function J(){return(Q.dragging===false)}function P(A,B){if(!A){return }A.unselectable=B?"off":"on";A.onselectstart=function(){return B};if(A.style){A.style.MozUserSelect=B?"":"none"}}})(jQuery);(function(C){var B=["DOMMouseScroll","mousewheel"];C.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var D=B.length;D;){this.addEventListener(B[--D],A,false)}}else{this.onmousewheel=A}},teardown:function(){if(this.removeEventListener){for(var D=B.length;D;){this.removeEventListener(B[--D],A,false)}}else{this.onmousewheel=null}}};C.fn.extend({mousewheel:function(D){return D?this.bind("mousewheel",D):this.trigger("mousewheel")},unmousewheel:function(D){return this.unbind("mousewheel",D)}});function A(E){var G=[].slice.call(arguments,1),D=0,F=true;E=C.event.fix(E||window.event);E.type="mousewheel";if(E.wheelDelta){D=E.wheelDelta/120}if(E.detail){D=-E.detail/3}G.unshift(E,D);return C.event.handle.apply(this,G)}})(jQuery);(function(B){var A={xaxis:{zoomRange:null,panRange:null},zoom:{interactive:false,trigger:"dblclick",amount:1.5},pan:{interactive:false}};function C(D){function E(J,F){var K=J.getOptions();if(K.zoom.interactive){function L(N,M){var O=J.offset();O.left=N.pageX-O.left;O.top=N.pageY-O.top;if(M){J.zoomOut({center:O})}else{J.zoom({center:O})}}F[K.zoom.trigger](L);F.mousewheel(function(M,N){L(M,N<0);return false})}if(K.pan.interactive){var I="default",H=0,G=0;F.bind("dragstart",{distance:10},function(M){if(M.which!=1){return false}eventHolderCursor=F.css("cursor");F.css("cursor","move");H=M.pageX;G=M.pageY});F.bind("drag",function(M){});F.bind("dragend",function(M){F.css("cursor",I);J.pan({left:H-M.pageX,top:G-M.pageY})})}}D.zoomOut=function(F){if(!F){F={}}if(!F.amount){F.amount=D.getOptions().zoom.amount}F.amount=1/F.amount;D.zoom(F)};D.zoom=function(M){if(!M){M={}}var L=D.getAxes(),S=D.getOptions(),N=M.center,J=M.amount?M.amount:S.zoom.amount,R=D.width(),I=D.height();if(!N){N={left:R/2,top:I/2}}var Q=N.left/R,G=N.left-Q*R/J,F=N.left+(1-Q)*R/J,H=N.top/I,P=N.top-H*I/J,O=N.top+(1-H)*I/J;function K(X,T,V){var Y=L[V],a=S[V];if(!Y.used){return }X=Y.c2p(X);T=Y.c2p(T);if(T<X){var W=X;X=T;T=W}var U=T-X,Z=a.zoomRange;if(Z&&((Z[0]!=null&&U<Z[0])||(Z[1]!=null&&U>Z[1]))){return }a.min=X;a.max=T}K(G,F,"xaxis");K(G,F,"x2axis");K(P,O,"yaxis");K(P,O,"y2axis");D.setupGrid();D.draw();if(!M.preventEvent){D.getPlaceholder().trigger("plotzoom",[D])}};D.pan=function(I){var F=+I.left,J=+I.top,K=D.getAxes(),H=D.getOptions();if(isNaN(F)){F=0}if(isNaN(J)){J=0}function G(R,M){var O=K[M],Q=H[M],N,L;if(!O.used){return }N=O.c2p(O.p2c(O.min)+R),L=O.c2p(O.p2c(O.max)+R);var P=Q.panRange;if(P){if(P[0]!=null&&P[0]>N){R=P[0]-N;N+=R;L+=R}if(P[1]!=null&&P[1]<L){R=P[1]-L;N+=R;L+=R}}Q.min=N;Q.max=L}G(F,"xaxis");G(F,"x2axis");G(J,"yaxis");G(J,"y2axis");D.setupGrid();D.draw();if(!I.preventEvent){D.getPlaceholder().trigger("plotpan",[D])}};D.hooks.bindEvents.push(E)}B.plot.plugins.push({init:C,options:A,name:"navigate",version:"1.1"})})(jQuery);
|
||||
@ -0,0 +1,299 @@
|
||||
/*
|
||||
Flot plugin for selecting regions.
|
||||
|
||||
The plugin defines the following options:
|
||||
|
||||
selection: {
|
||||
mode: null or "x" or "y" or "xy",
|
||||
color: color
|
||||
}
|
||||
|
||||
You enable selection support by setting the mode to one of "x", "y" or
|
||||
"xy". In "x" mode, the user will only be able to specify the x range,
|
||||
similarly for "y" mode. For "xy", the selection becomes a rectangle
|
||||
where both ranges can be specified. "color" is color of the selection.
|
||||
|
||||
When selection support is enabled, a "plotselected" event will be emitted
|
||||
on the DOM element you passed into the plot function. The event
|
||||
handler gets one extra parameter with the ranges selected on the axes,
|
||||
like this:
|
||||
|
||||
placeholder.bind("plotselected", function(event, ranges) {
|
||||
alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
|
||||
// similar for yaxis, secondary axes are in x2axis
|
||||
// and y2axis if present
|
||||
});
|
||||
|
||||
The "plotselected" event is only fired when the user has finished
|
||||
making the selection. A "plotselecting" event is fired during the
|
||||
process with the same parameters as the "plotselected" event, in case
|
||||
you want to know what's happening while it's happening,
|
||||
|
||||
A "plotunselected" event with no arguments is emitted when the user
|
||||
clicks the mouse to remove the selection.
|
||||
|
||||
The plugin allso adds the following methods to the plot object:
|
||||
|
||||
- setSelection(ranges, preventEvent)
|
||||
|
||||
Set the selection rectangle. The passed in ranges is on the same
|
||||
form as returned in the "plotselected" event. If the selection
|
||||
mode is "x", you should put in either an xaxis (or x2axis) object,
|
||||
if the mode is "y" you need to put in an yaxis (or y2axis) object
|
||||
and both xaxis/x2axis and yaxis/y2axis if the selection mode is
|
||||
"xy", like this:
|
||||
|
||||
setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
|
||||
|
||||
setSelection will trigger the "plotselected" event when called. If
|
||||
you don't want that to happen, e.g. if you're inside a
|
||||
"plotselected" handler, pass true as the second parameter.
|
||||
|
||||
- clearSelection(preventEvent)
|
||||
|
||||
Clear the selection rectangle. Pass in true to avoid getting a
|
||||
"plotunselected" event.
|
||||
|
||||
- getSelection()
|
||||
|
||||
Returns the current selection in the same format as the
|
||||
"plotselected" event. If there's currently no selection, the
|
||||
function returns null.
|
||||
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
function init(plot) {
|
||||
var selection = {
|
||||
first: { x: -1, y: -1}, second: { x: -1, y: -1},
|
||||
show: false,
|
||||
active: false
|
||||
};
|
||||
|
||||
// FIXME: The drag handling implemented here should be
|
||||
// abstracted out, there's some similar code from a library in
|
||||
// the navigation plugin, this should be massaged a bit to fit
|
||||
// the Flot cases here better and reused. Doing this would
|
||||
// make this plugin much slimmer.
|
||||
var savedhandlers = {};
|
||||
|
||||
function onMouseMove(e) {
|
||||
if (selection.active) {
|
||||
plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
|
||||
|
||||
updateSelection(e);
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
if (e.which != 1) // only accept left-click
|
||||
return;
|
||||
|
||||
// cancel out any text selections
|
||||
document.body.focus();
|
||||
|
||||
// prevent text selection and drag in old-school browsers
|
||||
if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
|
||||
savedhandlers.onselectstart = document.onselectstart;
|
||||
document.onselectstart = function () { return false; };
|
||||
}
|
||||
if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
|
||||
savedhandlers.ondrag = document.ondrag;
|
||||
document.ondrag = function () { return false; };
|
||||
}
|
||||
|
||||
setSelectionPos(selection.first, e);
|
||||
|
||||
selection.active = true;
|
||||
|
||||
$(document).one("mouseup", onMouseUp);
|
||||
}
|
||||
|
||||
function onMouseUp(e) {
|
||||
// revert drag stuff for old-school browsers
|
||||
if (document.onselectstart !== undefined)
|
||||
document.onselectstart = savedhandlers.onselectstart;
|
||||
if (document.ondrag !== undefined)
|
||||
document.ondrag = savedhandlers.ondrag;
|
||||
|
||||
// no more draggy-dee-drag
|
||||
selection.active = false;
|
||||
updateSelection(e);
|
||||
|
||||
if (selectionIsSane())
|
||||
triggerSelectedEvent();
|
||||
else {
|
||||
// this counts as a clear
|
||||
plot.getPlaceholder().trigger("plotunselected", [ ]);
|
||||
plot.getPlaceholder().trigger("plotselecting", [ null ]);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getSelection() {
|
||||
if (!selectionIsSane())
|
||||
return null;
|
||||
|
||||
var x1 = Math.min(selection.first.x, selection.second.x),
|
||||
x2 = Math.max(selection.first.x, selection.second.x),
|
||||
y1 = Math.max(selection.first.y, selection.second.y),
|
||||
y2 = Math.min(selection.first.y, selection.second.y);
|
||||
|
||||
var r = {};
|
||||
var axes = plot.getAxes();
|
||||
if (axes.xaxis.used)
|
||||
r.xaxis = { from: axes.xaxis.c2p(x1), to: axes.xaxis.c2p(x2) };
|
||||
if (axes.x2axis.used)
|
||||
r.x2axis = { from: axes.x2axis.c2p(x1), to: axes.x2axis.c2p(x2) };
|
||||
if (axes.yaxis.used)
|
||||
r.yaxis = { from: axes.yaxis.c2p(y1), to: axes.yaxis.c2p(y2) };
|
||||
if (axes.y2axis.used)
|
||||
r.y2axis = { from: axes.y2axis.c2p(y1), to: axes.y2axis.c2p(y2) };
|
||||
return r;
|
||||
}
|
||||
|
||||
function triggerSelectedEvent() {
|
||||
var r = getSelection();
|
||||
|
||||
plot.getPlaceholder().trigger("plotselected", [ r ]);
|
||||
|
||||
// backwards-compat stuff, to be removed in future
|
||||
var axes = plot.getAxes();
|
||||
if (axes.xaxis.used && axes.yaxis.used)
|
||||
plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
|
||||
}
|
||||
|
||||
function clamp(min, value, max) {
|
||||
return value < min? min: (value > max? max: value);
|
||||
}
|
||||
|
||||
function setSelectionPos(pos, e) {
|
||||
var o = plot.getOptions();
|
||||
var offset = plot.getPlaceholder().offset();
|
||||
var plotOffset = plot.getPlotOffset();
|
||||
pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
|
||||
pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
|
||||
|
||||
if (o.selection.mode == "y")
|
||||
pos.x = pos == selection.first? 0: plot.width();
|
||||
|
||||
if (o.selection.mode == "x")
|
||||
pos.y = pos == selection.first? 0: plot.height();
|
||||
}
|
||||
|
||||
function updateSelection(pos) {
|
||||
if (pos.pageX == null)
|
||||
return;
|
||||
|
||||
setSelectionPos(selection.second, pos);
|
||||
if (selectionIsSane()) {
|
||||
selection.show = true;
|
||||
plot.triggerRedrawOverlay();
|
||||
}
|
||||
else
|
||||
clearSelection(true);
|
||||
}
|
||||
|
||||
function clearSelection(preventEvent) {
|
||||
if (selection.show) {
|
||||
selection.show = false;
|
||||
plot.triggerRedrawOverlay();
|
||||
if (!preventEvent)
|
||||
plot.getPlaceholder().trigger("plotunselected", [ ]);
|
||||
}
|
||||
}
|
||||
|
||||
function setSelection(ranges, preventEvent) {
|
||||
var axis, range, axes = plot.getAxes();
|
||||
var o = plot.getOptions();
|
||||
|
||||
if (o.selection.mode == "y") {
|
||||
selection.first.x = 0;
|
||||
selection.second.x = plot.width();
|
||||
}
|
||||
else {
|
||||
axis = ranges["xaxis"]? axes["xaxis"]: (ranges["x2axis"]? axes["x2axis"]: axes["xaxis"]);
|
||||
range = ranges["xaxis"] || ranges["x2axis"] || { from:ranges["x1"], to:ranges["x2"] }
|
||||
selection.first.x = axis.p2c(Math.min(range.from, range.to));
|
||||
selection.second.x = axis.p2c(Math.max(range.from, range.to));
|
||||
}
|
||||
|
||||
if (o.selection.mode == "x") {
|
||||
selection.first.y = 0;
|
||||
selection.second.y = plot.height();
|
||||
}
|
||||
else {
|
||||
axis = ranges["yaxis"]? axes["yaxis"]: (ranges["y2axis"]? axes["y2axis"]: axes["yaxis"]);
|
||||
range = ranges["yaxis"] || ranges["y2axis"] || { from:ranges["y1"], to:ranges["y2"] }
|
||||
selection.first.y = axis.p2c(Math.min(range.from, range.to));
|
||||
selection.second.y = axis.p2c(Math.max(range.from, range.to));
|
||||
}
|
||||
|
||||
selection.show = true;
|
||||
plot.triggerRedrawOverlay();
|
||||
if (!preventEvent)
|
||||
triggerSelectedEvent();
|
||||
}
|
||||
|
||||
function selectionIsSane() {
|
||||
var minSize = 5;
|
||||
return Math.abs(selection.second.x - selection.first.x) >= minSize &&
|
||||
Math.abs(selection.second.y - selection.first.y) >= minSize;
|
||||
}
|
||||
|
||||
plot.clearSelection = clearSelection;
|
||||
plot.setSelection = setSelection;
|
||||
plot.getSelection = getSelection;
|
||||
|
||||
plot.hooks.bindEvents.push(function(plot, eventHolder) {
|
||||
var o = plot.getOptions();
|
||||
if (o.selection.mode != null)
|
||||
eventHolder.mousemove(onMouseMove);
|
||||
|
||||
if (o.selection.mode != null)
|
||||
eventHolder.mousedown(onMouseDown);
|
||||
});
|
||||
|
||||
|
||||
plot.hooks.drawOverlay.push(function (plot, ctx) {
|
||||
// draw selection
|
||||
if (selection.show && selectionIsSane()) {
|
||||
var plotOffset = plot.getPlotOffset();
|
||||
var o = plot.getOptions();
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(plotOffset.left, plotOffset.top);
|
||||
|
||||
var c = $.color.parse(o.selection.color);
|
||||
|
||||
ctx.strokeStyle = c.scale('a', 0.8).toString();
|
||||
ctx.lineWidth = 1;
|
||||
ctx.lineJoin = "round";
|
||||
ctx.fillStyle = c.scale('a', 0.4).toString();
|
||||
|
||||
var x = Math.min(selection.first.x, selection.second.x),
|
||||
y = Math.min(selection.first.y, selection.second.y),
|
||||
w = Math.abs(selection.second.x - selection.first.x),
|
||||
h = Math.abs(selection.second.y - selection.first.y);
|
||||
|
||||
ctx.fillRect(x, y, w, h);
|
||||
ctx.strokeRect(x, y, w, h);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: {
|
||||
selection: {
|
||||
mode: null, // one of null, "x", "y" or "xy"
|
||||
color: "#e8cfac"
|
||||
}
|
||||
},
|
||||
name: 'selection',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
@ -0,0 +1 @@
|
||||
(function(A){function B(J){var O={first:{x:-1,y:-1},second:{x:-1,y:-1},show:false,active:false};var L={};function D(Q){if(O.active){J.getPlaceholder().trigger("plotselecting",[F()]);K(Q)}}function M(Q){if(Q.which!=1){return }document.body.focus();if(document.onselectstart!==undefined&&L.onselectstart==null){L.onselectstart=document.onselectstart;document.onselectstart=function(){return false}}if(document.ondrag!==undefined&&L.ondrag==null){L.ondrag=document.ondrag;document.ondrag=function(){return false}}C(O.first,Q);O.active=true;A(document).one("mouseup",I)}function I(Q){if(document.onselectstart!==undefined){document.onselectstart=L.onselectstart}if(document.ondrag!==undefined){document.ondrag=L.ondrag}O.active=false;K(Q);if(E()){H()}else{J.getPlaceholder().trigger("plotunselected",[]);J.getPlaceholder().trigger("plotselecting",[null])}return false}function F(){if(!E()){return null}var R=Math.min(O.first.x,O.second.x),Q=Math.max(O.first.x,O.second.x),T=Math.max(O.first.y,O.second.y),S=Math.min(O.first.y,O.second.y);var U={};var V=J.getAxes();if(V.xaxis.used){U.xaxis={from:V.xaxis.c2p(R),to:V.xaxis.c2p(Q)}}if(V.x2axis.used){U.x2axis={from:V.x2axis.c2p(R),to:V.x2axis.c2p(Q)}}if(V.yaxis.used){U.yaxis={from:V.yaxis.c2p(T),to:V.yaxis.c2p(S)}}if(V.y2axis.used){U.y2axis={from:V.y2axis.c2p(T),to:V.y2axis.c2p(S)}}return U}function H(){var Q=F();J.getPlaceholder().trigger("plotselected",[Q]);var R=J.getAxes();if(R.xaxis.used&&R.yaxis.used){J.getPlaceholder().trigger("selected",[{x1:Q.xaxis.from,y1:Q.yaxis.from,x2:Q.xaxis.to,y2:Q.yaxis.to}])}}function G(R,S,Q){return S<R?R:(S>Q?Q:S)}function C(U,R){var T=J.getOptions();var S=J.getPlaceholder().offset();var Q=J.getPlotOffset();U.x=G(0,R.pageX-S.left-Q.left,J.width());U.y=G(0,R.pageY-S.top-Q.top,J.height());if(T.selection.mode=="y"){U.x=U==O.first?0:J.width()}if(T.selection.mode=="x"){U.y=U==O.first?0:J.height()}}function K(Q){if(Q.pageX==null){return }C(O.second,Q);if(E()){O.show=true;J.triggerRedrawOverlay()}else{P(true)}}function P(Q){if(O.show){O.show=false;J.triggerRedrawOverlay();if(!Q){J.getPlaceholder().trigger("plotunselected",[])}}}function N(R,Q){var T,S,U=J.getAxes();var V=J.getOptions();if(V.selection.mode=="y"){O.first.x=0;O.second.x=J.width()}else{T=R.xaxis?U.xaxis:(R.x2axis?U.x2axis:U.xaxis);S=R.xaxis||R.x2axis||{from:R.x1,to:R.x2};O.first.x=T.p2c(Math.min(S.from,S.to));O.second.x=T.p2c(Math.max(S.from,S.to))}if(V.selection.mode=="x"){O.first.y=0;O.second.y=J.height()}else{T=R.yaxis?U.yaxis:(R.y2axis?U.y2axis:U.yaxis);S=R.yaxis||R.y2axis||{from:R.y1,to:R.y2};O.first.y=T.p2c(Math.min(S.from,S.to));O.second.y=T.p2c(Math.max(S.from,S.to))}O.show=true;J.triggerRedrawOverlay();if(!Q){H()}}function E(){var Q=5;return Math.abs(O.second.x-O.first.x)>=Q&&Math.abs(O.second.y-O.first.y)>=Q}J.clearSelection=P;J.setSelection=N;J.getSelection=F;J.hooks.bindEvents.push(function(R,Q){var S=R.getOptions();if(S.selection.mode!=null){Q.mousemove(D)}if(S.selection.mode!=null){Q.mousedown(M)}});J.hooks.drawOverlay.push(function(T,Y){if(O.show&&E()){var R=T.getPlotOffset();var Q=T.getOptions();Y.save();Y.translate(R.left,R.top);var U=A.color.parse(Q.selection.color);Y.strokeStyle=U.scale("a",0.8).toString();Y.lineWidth=1;Y.lineJoin="round";Y.fillStyle=U.scale("a",0.4).toString();var W=Math.min(O.first.x,O.second.x),V=Math.min(O.first.y,O.second.y),X=Math.abs(O.second.x-O.first.x),S=Math.abs(O.second.y-O.first.y);Y.fillRect(W,V,X,S);Y.strokeRect(W,V,X,S);Y.restore()}})}A.plot.plugins.push({init:B,options:{selection:{mode:null,color:"#e8cfac"}},name:"selection",version:"1.0"})})(jQuery);
|
||||
@ -0,0 +1,152 @@
|
||||
/*
|
||||
Flot plugin for stacking data sets, i.e. putting them on top of each
|
||||
other, for accumulative graphs. Note that the plugin assumes the data
|
||||
is sorted on x. Also note that stacking a mix of positive and negative
|
||||
values in most instances doesn't make sense (so it looks weird).
|
||||
|
||||
Two or more series are stacked when their "stack" attribute is set to
|
||||
the same key (which can be any number or string or just "true"). To
|
||||
specify the default stack, you can set
|
||||
|
||||
series: {
|
||||
stack: null or true or key (number/string)
|
||||
}
|
||||
|
||||
or specify it for a specific series
|
||||
|
||||
$.plot($("#placeholder"), [{ data: [ ... ], stack: true ])
|
||||
|
||||
The stacking order is determined by the order of the data series in
|
||||
the array (later series end up on top of the previous).
|
||||
|
||||
Internally, the plugin modifies the datapoints in each series, adding
|
||||
an offset to the y value. For line series, extra data points are
|
||||
inserted through interpolation. For bar charts, the second y value is
|
||||
also adjusted.
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
series: { stack: null } // or number/string
|
||||
};
|
||||
|
||||
function init(plot) {
|
||||
function findMatchingSeries(s, allseries) {
|
||||
var res = null
|
||||
for (var i = 0; i < allseries.length; ++i) {
|
||||
if (s == allseries[i])
|
||||
break;
|
||||
|
||||
if (allseries[i].stack == s.stack)
|
||||
res = allseries[i];
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
function stackData(plot, s, datapoints) {
|
||||
if (s.stack == null)
|
||||
return;
|
||||
|
||||
var other = findMatchingSeries(s, plot.getData());
|
||||
if (!other)
|
||||
return;
|
||||
|
||||
var ps = datapoints.pointsize,
|
||||
points = datapoints.points,
|
||||
otherps = other.datapoints.pointsize,
|
||||
otherpoints = other.datapoints.points,
|
||||
newpoints = [],
|
||||
px, py, intery, qx, qy, bottom,
|
||||
withlines = s.lines.show, withbars = s.bars.show,
|
||||
withsteps = withlines && s.lines.steps,
|
||||
i = 0, j = 0, l;
|
||||
|
||||
while (true) {
|
||||
if (i >= points.length)
|
||||
break;
|
||||
|
||||
l = newpoints.length;
|
||||
|
||||
if (j >= otherpoints.length
|
||||
|| otherpoints[j] == null
|
||||
|| points[i] == null) {
|
||||
// degenerate cases
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
i += ps;
|
||||
}
|
||||
else {
|
||||
// cases where we actually got two points
|
||||
px = points[i];
|
||||
py = points[i + 1];
|
||||
qx = otherpoints[j];
|
||||
qy = otherpoints[j + 1];
|
||||
bottom = 0;
|
||||
|
||||
if (px == qx) {
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
|
||||
newpoints[l + 1] += qy;
|
||||
bottom = qy;
|
||||
|
||||
i += ps;
|
||||
j += otherps;
|
||||
}
|
||||
else if (px > qx) {
|
||||
// we got past point below, might need to
|
||||
// insert interpolated extra point
|
||||
if (withlines && i > 0 && points[i - ps] != null) {
|
||||
intery = py + (points[i - ps + 1] - py) * (qx - px) / (points[i - ps] - px);
|
||||
newpoints.push(qx);
|
||||
newpoints.push(intery + qy)
|
||||
for (m = 2; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
bottom = qy;
|
||||
}
|
||||
|
||||
j += otherps;
|
||||
}
|
||||
else {
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
|
||||
// we might be able to interpolate a point below,
|
||||
// this can give us a better y
|
||||
if (withlines && j > 0 && otherpoints[j - ps] != null)
|
||||
bottom = qy + (otherpoints[j - ps + 1] - qy) * (px - qx) / (otherpoints[j - ps] - qx);
|
||||
|
||||
newpoints[l + 1] += bottom;
|
||||
|
||||
i += ps;
|
||||
}
|
||||
|
||||
if (l != newpoints.length && withbars)
|
||||
newpoints[l + 2] += bottom;
|
||||
}
|
||||
|
||||
// maintain the line steps invariant
|
||||
if (withsteps && l != newpoints.length && l > 0
|
||||
&& newpoints[l] != null
|
||||
&& newpoints[l] != newpoints[l - ps]
|
||||
&& newpoints[l + 1] != newpoints[l - ps + 1]) {
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints[l + ps + m] = newpoints[l + m];
|
||||
newpoints[l + 1] = newpoints[l - ps + 1];
|
||||
}
|
||||
}
|
||||
|
||||
datapoints.points = newpoints;
|
||||
}
|
||||
|
||||
plot.hooks.processDatapoints.push(stackData);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'stack',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
@ -0,0 +1 @@
|
||||
(function(B){var A={series:{stack:null}};function C(F){function D(J,I){var H=null;for(var G=0;G<I.length;++G){if(J==I[G]){break}if(I[G].stack==J.stack){H=I[G]}}return H}function E(W,P,G){if(P.stack==null){return }var L=D(P,W.getData());if(!L){return }var T=G.pointsize,Y=G.points,H=L.datapoints.pointsize,S=L.datapoints.points,N=[],R,Q,I,a,Z,M,O=P.lines.show,K=P.bars.show,J=O&&P.lines.steps,X=0,V=0,U;while(true){if(X>=Y.length){break}U=N.length;if(V>=S.length||S[V]==null||Y[X]==null){for(m=0;m<T;++m){N.push(Y[X+m])}X+=T}else{R=Y[X];Q=Y[X+1];a=S[V];Z=S[V+1];M=0;if(R==a){for(m=0;m<T;++m){N.push(Y[X+m])}N[U+1]+=Z;M=Z;X+=T;V+=H}else{if(R>a){if(O&&X>0&&Y[X-T]!=null){I=Q+(Y[X-T+1]-Q)*(a-R)/(Y[X-T]-R);N.push(a);N.push(I+Z);for(m=2;m<T;++m){N.push(Y[X+m])}M=Z}V+=H}else{for(m=0;m<T;++m){N.push(Y[X+m])}if(O&&V>0&&S[V-T]!=null){M=Z+(S[V-T+1]-Z)*(R-a)/(S[V-T]-a)}N[U+1]+=M;X+=T}}if(U!=N.length&&K){N[U+2]+=M}}if(J&&U!=N.length&&U>0&&N[U]!=null&&N[U]!=N[U-T]&&N[U+1]!=N[U-T+1]){for(m=0;m<T;++m){N[U+T+m]=N[U+m]}N[U+1]=N[U-T+1]}}G.points=N}F.hooks.processDatapoints.push(E)}B.plot.plugins.push({init:C,options:A,name:"stack",version:"1.0"})})(jQuery);
|
||||
@ -0,0 +1,103 @@
|
||||
/*
|
||||
Flot plugin for thresholding data. Controlled through the option
|
||||
"threshold" in either the global series options
|
||||
|
||||
series: {
|
||||
threshold: {
|
||||
below: number
|
||||
color: colorspec
|
||||
}
|
||||
}
|
||||
|
||||
or in a specific series
|
||||
|
||||
$.plot($("#placeholder"), [{ data: [ ... ], threshold: { ... }}])
|
||||
|
||||
The data points below "below" are drawn with the specified color. This
|
||||
makes it easy to mark points below 0, e.g. for budget data.
|
||||
|
||||
Internally, the plugin works by splitting the data into two series,
|
||||
above and below the threshold. The extra series below the threshold
|
||||
will have its label cleared and the special "originSeries" attribute
|
||||
set to the original series. You may need to check for this in hover
|
||||
events.
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
series: { threshold: null } // or { below: number, color: color spec}
|
||||
};
|
||||
|
||||
function init(plot) {
|
||||
function thresholdData(plot, s, datapoints) {
|
||||
if (!s.threshold)
|
||||
return;
|
||||
|
||||
var ps = datapoints.pointsize, i, x, y, p, prevp,
|
||||
thresholded = $.extend({}, s); // note: shallow copy
|
||||
|
||||
thresholded.datapoints = { points: [], pointsize: ps };
|
||||
thresholded.label = null;
|
||||
thresholded.color = s.threshold.color;
|
||||
thresholded.threshold = null;
|
||||
thresholded.originSeries = s;
|
||||
thresholded.data = [];
|
||||
|
||||
var below = s.threshold.below,
|
||||
origpoints = datapoints.points,
|
||||
addCrossingPoints = s.lines.show;
|
||||
|
||||
threspoints = [];
|
||||
newpoints = [];
|
||||
|
||||
for (i = 0; i < origpoints.length; i += ps) {
|
||||
x = origpoints[i]
|
||||
y = origpoints[i + 1];
|
||||
|
||||
prevp = p;
|
||||
if (y < below)
|
||||
p = threspoints;
|
||||
else
|
||||
p = newpoints;
|
||||
|
||||
if (addCrossingPoints && prevp != p && x != null
|
||||
&& i > 0 && origpoints[i - ps] != null) {
|
||||
var interx = (x - origpoints[i - ps]) / (y - origpoints[i - ps + 1]) * (below - y) + x;
|
||||
prevp.push(interx);
|
||||
prevp.push(below);
|
||||
for (m = 2; m < ps; ++m)
|
||||
prevp.push(origpoints[i + m]);
|
||||
|
||||
p.push(null); // start new segment
|
||||
p.push(null);
|
||||
for (m = 2; m < ps; ++m)
|
||||
p.push(origpoints[i + m]);
|
||||
p.push(interx);
|
||||
p.push(below);
|
||||
for (m = 2; m < ps; ++m)
|
||||
p.push(origpoints[i + m]);
|
||||
}
|
||||
|
||||
p.push(x);
|
||||
p.push(y);
|
||||
}
|
||||
|
||||
datapoints.points = newpoints;
|
||||
thresholded.datapoints.points = threspoints;
|
||||
|
||||
if (thresholded.datapoints.points.length > 0)
|
||||
plot.getData().push(thresholded);
|
||||
|
||||
// FIXME: there are probably some edge cases left in bars
|
||||
}
|
||||
|
||||
plot.hooks.processDatapoints.push(thresholdData);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'threshold',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
@ -0,0 +1 @@
|
||||
(function(B){var A={series:{threshold:null}};function C(D){function E(L,S,M){if(!S.threshold){return }var F=M.pointsize,I,O,N,G,K,H=B.extend({},S);H.datapoints={points:[],pointsize:F};H.label=null;H.color=S.threshold.color;H.threshold=null;H.originSeries=S;H.data=[];var P=S.threshold.below,Q=M.points,R=S.lines.show;threspoints=[];newpoints=[];for(I=0;I<Q.length;I+=F){O=Q[I];N=Q[I+1];K=G;if(N<P){G=threspoints}else{G=newpoints}if(R&&K!=G&&O!=null&&I>0&&Q[I-F]!=null){var J=(O-Q[I-F])/(N-Q[I-F+1])*(P-N)+O;K.push(J);K.push(P);for(m=2;m<F;++m){K.push(Q[I+m])}G.push(null);G.push(null);for(m=2;m<F;++m){G.push(Q[I+m])}G.push(J);G.push(P);for(m=2;m<F;++m){G.push(Q[I+m])}}G.push(O);G.push(N)}M.points=newpoints;H.datapoints.points=threspoints;if(H.datapoints.points.length>0){L.getData().push(H)}}D.hooks.processDatapoints.push(E)}B.plot.plugins.push({init:C,options:A,name:"threshold",version:"1.0"})})(jQuery);
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,234 @@
|
||||
|
||||
/*
|
||||
* BinaryFile over XMLHttpRequest
|
||||
* Part of the javascriptRRD package
|
||||
* Copyright (c) 2009 Frank Wuerthwein, fkw@ucsd.edu
|
||||
* MIT License [http://www.opensource.org/licenses/mit-license.php]
|
||||
*
|
||||
* Original repository: http://javascriptrrd.sourceforge.net/
|
||||
*
|
||||
* Based on:
|
||||
* Binary Ajax 0.1.5
|
||||
* Copyright (c) 2008 Jacob Seidelin, cupboy@gmail.com, http://blog.nihilogic.dk/
|
||||
* MIT License [http://www.opensource.org/licenses/mit-license.php]
|
||||
*/
|
||||
|
||||
// ============================================================
|
||||
// Exception class
|
||||
function InvalidBinaryFile(msg) {
|
||||
this.message=msg;
|
||||
this.name="Invalid BinaryFile";
|
||||
}
|
||||
|
||||
// pretty print
|
||||
InvalidBinaryFile.prototype.toString = function() {
|
||||
return this.name + ': "' + this.message + '"';
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// BinaryFile class
|
||||
// Allows access to element inside a binary stream
|
||||
function BinaryFile(strData, iDataOffset, iDataLength) {
|
||||
var data = strData;
|
||||
var dataOffset = iDataOffset || 0;
|
||||
var dataLength = 0;
|
||||
// added
|
||||
var doubleMantExpHi=Math.pow(2,-28);
|
||||
var doubleMantExpLo=Math.pow(2,-52);
|
||||
var doubleMantExpFast=Math.pow(2,-20);
|
||||
|
||||
this.getRawData = function() {
|
||||
return data;
|
||||
}
|
||||
|
||||
if (typeof strData == "string") {
|
||||
dataLength = iDataLength || data.length;
|
||||
|
||||
this.getByteAt = function(iOffset) {
|
||||
return data.charCodeAt(iOffset + dataOffset) & 0xFF;
|
||||
}
|
||||
} else if (typeof strData == "unknown") {
|
||||
dataLength = iDataLength || IEBinary_getLength(data);
|
||||
|
||||
this.getByteAt = function(iOffset) {
|
||||
return IEBinary_getByteAt(data, iOffset + dataOffset);
|
||||
}
|
||||
} else {
|
||||
throw new InvalidBinaryFile("Unsupported type " + (typeof strData));
|
||||
}
|
||||
|
||||
this.getLength = function() {
|
||||
return dataLength;
|
||||
}
|
||||
|
||||
this.getSByteAt = function(iOffset) {
|
||||
var iByte = this.getByteAt(iOffset);
|
||||
if (iByte > 127)
|
||||
return iByte - 256;
|
||||
else
|
||||
return iByte;
|
||||
}
|
||||
|
||||
this.getShortAt = function(iOffset) {
|
||||
var iShort = (this.getByteAt(iOffset + 1) << 8) + this.getByteAt(iOffset)
|
||||
if (iShort < 0) iShort += 65536;
|
||||
return iShort;
|
||||
}
|
||||
this.getSShortAt = function(iOffset) {
|
||||
var iUShort = this.getShortAt(iOffset);
|
||||
if (iUShort > 32767)
|
||||
return iUShort - 65536;
|
||||
else
|
||||
return iUShort;
|
||||
}
|
||||
this.getLongAt = function(iOffset) {
|
||||
var iByte1 = this.getByteAt(iOffset),
|
||||
iByte2 = this.getByteAt(iOffset + 1),
|
||||
iByte3 = this.getByteAt(iOffset + 2),
|
||||
iByte4 = this.getByteAt(iOffset + 3);
|
||||
|
||||
var iLong = (((((iByte4 << 8) + iByte3) << 8) + iByte2) << 8) + iByte1;
|
||||
if (iLong < 0) iLong += 4294967296;
|
||||
return iLong;
|
||||
}
|
||||
this.getSLongAt = function(iOffset) {
|
||||
var iULong = this.getLongAt(iOffset);
|
||||
if (iULong > 2147483647)
|
||||
return iULong - 4294967296;
|
||||
else
|
||||
return iULong;
|
||||
}
|
||||
this.getStringAt = function(iOffset, iLength) {
|
||||
var aStr = [];
|
||||
for (var i=iOffset,j=0;i<iOffset+iLength;i++,j++) {
|
||||
aStr[j] = String.fromCharCode(this.getByteAt(i));
|
||||
}
|
||||
return aStr.join("");
|
||||
}
|
||||
|
||||
// Added
|
||||
this.getCStringAt = function(iOffset, iMaxLength) {
|
||||
var aStr = [];
|
||||
for (var i=iOffset,j=0;(i<iOffset+iMaxLength) && (this.getByteAt(i)>0);i++,j++) {
|
||||
aStr[j] = String.fromCharCode(this.getByteAt(i));
|
||||
}
|
||||
return aStr.join("");
|
||||
}
|
||||
|
||||
// Added
|
||||
this.getDoubleAt = function(iOffset) {
|
||||
var iByte1 = this.getByteAt(iOffset),
|
||||
iByte2 = this.getByteAt(iOffset + 1),
|
||||
iByte3 = this.getByteAt(iOffset + 2),
|
||||
iByte4 = this.getByteAt(iOffset + 3),
|
||||
iByte5 = this.getByteAt(iOffset + 4),
|
||||
iByte6 = this.getByteAt(iOffset + 5),
|
||||
iByte7 = this.getByteAt(iOffset + 6),
|
||||
iByte8 = this.getByteAt(iOffset + 7);
|
||||
var iSign=iByte8 >> 7;
|
||||
var iExpRaw=((iByte8 & 0x7F)<< 4) + (iByte7 >> 4);
|
||||
var iMantHi=((((((iByte7 & 0x0F) << 8) + iByte6) << 8) + iByte5) << 8) + iByte4;
|
||||
var iMantLo=((((iByte3) << 8) + iByte2) << 8) + iByte1;
|
||||
|
||||
if (iExpRaw==0) return 0.0;
|
||||
if (iExpRaw==0x7ff) return undefined;
|
||||
|
||||
var iExp=(iExpRaw & 0x7FF)-1023;
|
||||
|
||||
var dDouble = ((iSign==1)?-1:1)*Math.pow(2,iExp)*(1.0 + iMantLo*doubleMantExpLo + iMantHi*doubleMantExpHi);
|
||||
return dDouble;
|
||||
}
|
||||
// added
|
||||
// Extracts only 4 bytes out of 8, loosing in precision (20 bit mantissa)
|
||||
this.getFastDoubleAt = function(iOffset) {
|
||||
var iByte5 = this.getByteAt(iOffset + 4),
|
||||
iByte6 = this.getByteAt(iOffset + 5),
|
||||
iByte7 = this.getByteAt(iOffset + 6),
|
||||
iByte8 = this.getByteAt(iOffset + 7);
|
||||
var iSign=iByte8 >> 7;
|
||||
var iExpRaw=((iByte8 & 0x7F)<< 4) + (iByte7 >> 4);
|
||||
var iMant=((((iByte7 & 0x0F) << 8) + iByte6) << 8) + iByte5;
|
||||
|
||||
if (iExpRaw==0) return 0.0;
|
||||
if (iExpRaw==0x7ff) return undefined;
|
||||
|
||||
var iExp=(iExpRaw & 0x7FF)-1023;
|
||||
|
||||
var dDouble = ((iSign==1)?-1:1)*Math.pow(2,iExp)*(1.0 + iMant*doubleMantExpFast);
|
||||
return dDouble;
|
||||
}
|
||||
|
||||
this.getCharAt = function(iOffset) {
|
||||
return String.fromCharCode(this.getByteAt(iOffset));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.write(
|
||||
"<script type='text/vbscript'>\r\n"
|
||||
+ "Function IEBinary_getByteAt(strBinary, iOffset)\r\n"
|
||||
+ " IEBinary_getByteAt = AscB(MidB(strBinary,iOffset+1,1))\r\n"
|
||||
+ "End Function\r\n"
|
||||
+ "Function IEBinary_getLength(strBinary)\r\n"
|
||||
+ " IEBinary_getLength = LenB(strBinary)\r\n"
|
||||
+ "End Function\r\n"
|
||||
+ "</script>\r\n"
|
||||
);
|
||||
|
||||
|
||||
|
||||
// ===============================================================
|
||||
// Load a binary file from the specified URL
|
||||
// Will return an object of type BinaryFile
|
||||
function FetchBinaryURL(url) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("GET", url,false);
|
||||
try {
|
||||
request.overrideMimeType('text/plain; charset=x-user-defined');
|
||||
} catch (err) {
|
||||
// ignore any error, just to make both FF and IE work
|
||||
}
|
||||
request.send(null);
|
||||
|
||||
var response=request.responseBody;
|
||||
if (response==undefined){ // responseBody is non standard, but the only way to make it work in IE
|
||||
response=request.responseText;
|
||||
}
|
||||
var bf=new BinaryFile(response);
|
||||
return bf;
|
||||
}
|
||||
|
||||
|
||||
// ===============================================================
|
||||
// Asyncronously load a binary file from the specified URL
|
||||
//
|
||||
// callback must be a function with one or two arguments:
|
||||
// - bf = an object of type BinaryFile
|
||||
// - optional argument object (used only if callback_arg not undefined)
|
||||
function FetchBinaryURLAsync(url, callback, callback_arg) {
|
||||
var callback_wrapper = function() {
|
||||
if(this.readyState == 4) {
|
||||
var response=this.responseBody;
|
||||
if (response==undefined){ // responseBody is non standard, but the only way to make it work in IE
|
||||
response=this.responseText;
|
||||
}
|
||||
var bf=new BinaryFile(response);
|
||||
if (callback_arg!=null) {
|
||||
callback(bf,callback_arg);
|
||||
} else {
|
||||
callback(bf);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = callback_wrapper;
|
||||
request.open("GET", url,true);
|
||||
try {
|
||||
request.overrideMimeType('text/plain; charset=x-user-defined');
|
||||
} catch (err) {
|
||||
// ignore any error, just to make both FF and IE work
|
||||
}
|
||||
request.send(null);
|
||||
return request
|
||||
}
|
||||
@ -0,0 +1,408 @@
|
||||
/*
|
||||
* Client library for access to RRD archive files
|
||||
* Part of the javascriptRRD package
|
||||
* Copyright (c) 2009-2010 Frank Wuerthwein, fkw@ucsd.edu
|
||||
* Igor Sfiligoi, isfiligoi@ucsd.edu
|
||||
*
|
||||
* Original repository: http://javascriptrrd.sourceforge.net/
|
||||
*
|
||||
* MIT License [http://www.opensource.org/licenses/mit-license.php]
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
*
|
||||
* RRDTool has been developed and is maintained by
|
||||
* Tobias Oether [http://oss.oetiker.ch/rrdtool/]
|
||||
*
|
||||
* This software can be used to read files produced by the RRDTool
|
||||
* but has been developed independently.
|
||||
*
|
||||
* Limitations:
|
||||
*
|
||||
* This version of the module assumes RRD files created on linux
|
||||
* with intel architecture and supports both 32 and 64 bit CPUs.
|
||||
* All integers in RRD files are suppoes to fit in 32bit values.
|
||||
*
|
||||
* Only versions 3 and 4 of the RRD archive are supported.
|
||||
*
|
||||
* Only AVERAGE,MAXIMUM,MINIMUM and LAST consolidation functions are
|
||||
* supported. For all others, the behaviour is at the moment undefined.
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
* Dependencies:
|
||||
*
|
||||
* The data provided to this module require an object of a class
|
||||
* that implements the following methods:
|
||||
* getByteAt(idx) - Return a 8 bit unsigned integer at offset idx
|
||||
* getLongAt(idx) - Return a 32 bit unsigned integer at offset idx
|
||||
* getDoubleAt(idx) - Return a double float at offset idx
|
||||
* getFastDoubleAt(idx) - Similar to getDoubleAt but with less precision
|
||||
* getCStringAt(idx,maxsize) - Return a string of at most maxsize characters
|
||||
* that was 0-terminated in the source
|
||||
*
|
||||
* The BinaryFile from binaryXHR.js implements this interface.
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
// ============================================================
|
||||
// Exception class
|
||||
function InvalidRRD(msg) {
|
||||
this.message=msg;
|
||||
this.name="Invalid RRD";
|
||||
}
|
||||
|
||||
// pretty print
|
||||
InvalidRRD.prototype.toString = function() {
|
||||
return this.name + ': "' + this.message + '"';
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// RRD DS Info class
|
||||
function RRDDS(rrd_data,rrd_data_idx,my_idx) {
|
||||
this.rrd_data=rrd_data;
|
||||
this.rrd_data_idx=rrd_data_idx;
|
||||
this.my_idx=my_idx;
|
||||
}
|
||||
|
||||
RRDDS.prototype.getIdx = function() {
|
||||
return this.my_idx;
|
||||
}
|
||||
RRDDS.prototype.getName = function() {
|
||||
return this.rrd_data.getCStringAt(this.rrd_data_idx,20);
|
||||
}
|
||||
RRDDS.prototype.getType = function() {
|
||||
return this.rrd_data.getCStringAt(this.rrd_data_idx+20,20);
|
||||
}
|
||||
RRDDS.prototype.getMin = function() {
|
||||
return this.rrd_data.getDoubleAt(this.rrd_data_idx+48);
|
||||
}
|
||||
RRDDS.prototype.getMax = function() {
|
||||
return this.rrd_data.getDoubleAt(this.rrd_data_idx+56);
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// RRD RRA Info class
|
||||
function RRDRRAInfo(rrd_data,rra_def_idx,
|
||||
rrd_align,row_cnt,pdp_step,my_idx) {
|
||||
this.rrd_data=rrd_data;
|
||||
this.rra_def_idx=rra_def_idx;
|
||||
this.rrd_align=rrd_align;
|
||||
this.row_cnt=row_cnt;
|
||||
this.pdp_step=pdp_step;
|
||||
this.my_idx=my_idx;
|
||||
}
|
||||
|
||||
RRDRRAInfo.prototype.getIdx = function() {
|
||||
return this.my_idx;
|
||||
}
|
||||
|
||||
// Get number of rows
|
||||
RRDRRAInfo.prototype.getNrRows = function() {
|
||||
return this.row_cnt;
|
||||
}
|
||||
|
||||
// Get number of slots used for consolidation
|
||||
// Mostly for internal use
|
||||
RRDRRAInfo.prototype.getPdpPerRow = function() {
|
||||
if (this.rrd_align==32)
|
||||
return this.rrd_data.getLongAt(this.rra_def_idx+24,20);
|
||||
else
|
||||
return this.rrd_data.getLongAt(this.rra_def_idx+32,20);
|
||||
}
|
||||
|
||||
// Get RRA step (expressed in seconds)
|
||||
RRDRRAInfo.prototype.getStep = function() {
|
||||
return this.pdp_step*this.getPdpPerRow();
|
||||
}
|
||||
|
||||
// Get consolidation function name
|
||||
RRDRRAInfo.prototype.getCFName = function() {
|
||||
return this.rrd_data.getCStringAt(this.rra_def_idx,20);
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// RRD RRA handling class
|
||||
function RRDRRA(rrd_data,rra_ptr_idx,
|
||||
rra_info,
|
||||
header_size,prev_row_cnts,ds_cnt) {
|
||||
this.rrd_data=rrd_data;
|
||||
this.rra_info=rra_info;
|
||||
this.row_cnt=rra_info.row_cnt;
|
||||
this.ds_cnt=ds_cnt;
|
||||
|
||||
var row_size=ds_cnt*8;
|
||||
|
||||
this.base_rrd_db_idx=header_size+prev_row_cnts*row_size;
|
||||
|
||||
// get imediately, since it will be needed often
|
||||
this.cur_row=rrd_data.getLongAt(rra_ptr_idx);
|
||||
|
||||
// calculate idx relative to base_rrd_db_idx
|
||||
// mostly used internally
|
||||
this.calc_idx = function(row_idx,ds_idx) {
|
||||
if ((row_idx>=0) && (row_idx<this.row_cnt)) {
|
||||
if ((ds_idx>=0) && (ds_idx<ds_cnt)){
|
||||
// it is round robin, starting from cur_row+1
|
||||
var real_row_idx=row_idx+this.cur_row+1;
|
||||
if (real_row_idx>=this.row_cnt) real_row_idx-=this.row_cnt;
|
||||
return row_size*real_row_idx+ds_idx*8;
|
||||
} else {
|
||||
throw RangeError("DS idx ("+ row_idx +") out of range [0-" + ds_cnt +").");
|
||||
}
|
||||
} else {
|
||||
throw RangeError("Row idx ("+ row_idx +") out of range [0-" + this.row_cnt +").");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RRDRRA.prototype.getIdx = function() {
|
||||
return this.rra_info.getIdx();
|
||||
}
|
||||
|
||||
// Get number of rows/columns
|
||||
RRDRRA.prototype.getNrRows = function() {
|
||||
return this.row_cnt;
|
||||
}
|
||||
RRDRRA.prototype.getNrDSs = function() {
|
||||
return this.ds_cnt;
|
||||
}
|
||||
|
||||
// Get RRA step (expressed in seconds)
|
||||
RRDRRA.prototype.getStep = function() {
|
||||
return this.rra_info.getStep();
|
||||
}
|
||||
|
||||
// Get consolidation function name
|
||||
RRDRRA.prototype.getCFName = function() {
|
||||
return this.rra_info.getCFName();
|
||||
}
|
||||
|
||||
RRDRRA.prototype.getEl = function(row_idx,ds_idx) {
|
||||
return this.rrd_data.getDoubleAt(this.base_rrd_db_idx+this.calc_idx(row_idx,ds_idx));
|
||||
}
|
||||
|
||||
// Low precision version of getEl
|
||||
// Uses getFastDoubleAt
|
||||
RRDRRA.prototype.getElFast = function(row_idx,ds_idx) {
|
||||
return this.rrd_data.getFastDoubleAt(this.base_rrd_db_idx+this.calc_idx(row_idx,ds_idx));
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// RRD Header handling class
|
||||
function RRDHeader(rrd_data) {
|
||||
this.rrd_data=rrd_data;
|
||||
this.validate_rrd();
|
||||
this.load_header();
|
||||
this.calc_idxs();
|
||||
}
|
||||
|
||||
// Internal, used for initialization
|
||||
RRDHeader.prototype.validate_rrd = function() {
|
||||
if (this.rrd_data.getCStringAt(0,4)!=="RRD") throw new InvalidRRD("Wrong magic id.");
|
||||
|
||||
this.rrd_version=this.rrd_data.getCStringAt(4,5);
|
||||
if ((this.rrd_version!=="0003")&&(this.rrd_version!=="0004")) {
|
||||
throw new InvalidRRD("Unsupported RRD version "+this.rrd_version+".");
|
||||
}
|
||||
|
||||
if (this.rrd_data.getDoubleAt(12)==8.642135e+130) {
|
||||
this.rrd_align=32;
|
||||
} else if (this.rrd_data.getDoubleAt(16)==8.642135e+130) {
|
||||
this.rrd_align=64;
|
||||
} else {
|
||||
throw new InvalidRRD("Unsupported platform.");
|
||||
}
|
||||
}
|
||||
|
||||
// Internal, used for initialization
|
||||
RRDHeader.prototype.load_header = function() {
|
||||
if (this.rrd_align==32) {
|
||||
this.ds_cnt=this.rrd_data.getLongAt(20,false);
|
||||
this.rra_cnt=this.rrd_data.getLongAt(24,false);
|
||||
this.pdp_step=this.rrd_data.getLongAt(28,false);
|
||||
// 8*10 unused values follow
|
||||
this.top_header_size=112;
|
||||
} else {
|
||||
//get only the low 32 bits, the high 32 should always be 0
|
||||
this.ds_cnt=this.rrd_data.getLongAt(24,false);
|
||||
this.rra_cnt=this.rrd_data.getLongAt(32,false);
|
||||
this.pdp_step=this.rrd_data.getLongAt(40,false);
|
||||
// 8*10 unused values follow
|
||||
this.top_header_size=128;
|
||||
}
|
||||
}
|
||||
|
||||
// Internal, used for initialization
|
||||
RRDHeader.prototype.calc_idxs = function() {
|
||||
this.ds_def_idx=this.top_header_size;
|
||||
// char ds_nam[20], char dst[20], unival par[10]
|
||||
this.ds_el_size=120;
|
||||
|
||||
this.rra_def_idx=this.ds_def_idx+this.ds_el_size*this.ds_cnt;
|
||||
// char cf_nam[20], uint row_cnt, uint pdp_cnt, unival par[10]
|
||||
this.row_cnt_idx;
|
||||
if (this.rrd_align==32) {
|
||||
this.rra_def_el_size=108;
|
||||
this.row_cnt_idx=20;
|
||||
} else {
|
||||
this.rra_def_el_size=120;
|
||||
this.row_cnt_idx=24;
|
||||
}
|
||||
|
||||
this.live_head_idx=this.rra_def_idx+this.rra_def_el_size*this.rra_cnt;
|
||||
// time_t last_up, int last_up_usec
|
||||
if (this.rrd_align==32) {
|
||||
this.live_head_size=8;
|
||||
} else {
|
||||
this.live_head_size=16;
|
||||
}
|
||||
|
||||
this.pdp_prep_idx=this.live_head_idx+this.live_head_size;
|
||||
// char last_ds[30], unival scratch[10]
|
||||
this.pdp_prep_el_size=112;
|
||||
|
||||
this.cdp_prep_idx=this.pdp_prep_idx+this.pdp_prep_el_size*this.ds_cnt;
|
||||
// unival scratch[10]
|
||||
this.cdp_prep_el_size=80;
|
||||
|
||||
this.rra_ptr_idx=this.cdp_prep_idx+this.cdp_prep_el_size*this.ds_cnt*this.rra_cnt;
|
||||
// uint cur_row
|
||||
if (this.rrd_align==32) {
|
||||
this.rra_ptr_el_size=4;
|
||||
} else {
|
||||
this.rra_ptr_el_size=8;
|
||||
}
|
||||
|
||||
this.header_size=this.rra_ptr_idx+this.rra_ptr_el_size*this.rra_cnt;
|
||||
}
|
||||
|
||||
// Optional initialization
|
||||
// Read and calculate row counts
|
||||
RRDHeader.prototype.load_row_cnts = function() {
|
||||
this.rra_def_row_cnts=[];
|
||||
this.rra_def_row_cnt_sums=[]; // how many rows before me
|
||||
for (var i=0; i<this.rra_cnt; i++) {
|
||||
this.rra_def_row_cnts[i]=this.rrd_data.getLongAt(this.rra_def_idx+i*this.rra_def_el_size+this.row_cnt_idx,false);
|
||||
if (i==0) {
|
||||
this.rra_def_row_cnt_sums[i]=0;
|
||||
} else {
|
||||
this.rra_def_row_cnt_sums[i]=this.rra_def_row_cnt_sums[i-1]+this.rra_def_row_cnts[i-1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------
|
||||
// Start of user functions
|
||||
|
||||
RRDHeader.prototype.getMinStep = function() {
|
||||
return this.pdp_step;
|
||||
}
|
||||
RRDHeader.prototype.getLastUpdate = function() {
|
||||
return this.rrd_data.getLongAt(this.live_head_idx,false);
|
||||
}
|
||||
|
||||
RRDHeader.prototype.getNrDSs = function() {
|
||||
return this.ds_cnt;
|
||||
}
|
||||
RRDHeader.prototype.getDSNames = function() {
|
||||
var ds_names=[]
|
||||
for (var idx=0; idx<this.ds_cnt; idx++) {
|
||||
var ds=this.getDSbyIdx(idx);
|
||||
var ds_name=ds.getName()
|
||||
ds_names.push(ds_name);
|
||||
}
|
||||
return ds_names;
|
||||
}
|
||||
RRDHeader.prototype.getDSbyIdx = function(idx) {
|
||||
if ((idx>=0) && (idx<this.ds_cnt)) {
|
||||
return new RRDDS(this.rrd_data,this.ds_def_idx+this.ds_el_size*idx,idx);
|
||||
} else {
|
||||
throw RangeError("DS idx ("+ idx +") out of range [0-" + this.ds_cnt +").");
|
||||
}
|
||||
}
|
||||
RRDHeader.prototype.getDSbyName = function(name) {
|
||||
for (var idx=0; idx<this.ds_cnt; idx++) {
|
||||
var ds=this.getDSbyIdx(idx);
|
||||
var ds_name=ds.getName()
|
||||
if (ds_name==name)
|
||||
return ds;
|
||||
}
|
||||
throw RangeError("DS name "+ name +" unknown.");
|
||||
}
|
||||
|
||||
RRDHeader.prototype.getNrRRAs = function() {
|
||||
return this.rra_cnt;
|
||||
}
|
||||
RRDHeader.prototype.getRRAInfo = function(idx) {
|
||||
if ((idx>=0) && (idx<this.rra_cnt)) {
|
||||
return new RRDRRAInfo(this.rrd_data,
|
||||
this.rra_def_idx+idx*this.rra_def_el_size,
|
||||
this.rrd_align,this.rra_def_row_cnts[idx],this.pdp_step,
|
||||
idx);
|
||||
} else {
|
||||
throw RangeError("RRA idx ("+ idx +") out of range [0-" + this.rra_cnt +").");
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// RRDFile class
|
||||
// Given a BinaryFile, gives access to the RRD archive fields
|
||||
//
|
||||
// Arguments:
|
||||
// bf must be an object compatible with the BinaryFile interface
|
||||
function RRDFile(bf) {
|
||||
var rrd_data=bf
|
||||
|
||||
this.rrd_header=new RRDHeader(rrd_data);
|
||||
this.rrd_header.load_row_cnts();
|
||||
|
||||
// ===================================
|
||||
// Start of user functions
|
||||
|
||||
this.getMinStep = function() {
|
||||
return this.rrd_header.getMinStep();
|
||||
}
|
||||
this.getLastUpdate = function() {
|
||||
return this.rrd_header.getLastUpdate();
|
||||
}
|
||||
|
||||
this.getNrDSs = function() {
|
||||
return this.rrd_header.getNrDSs();
|
||||
}
|
||||
this.getDSNames = function() {
|
||||
return this.rrd_header.getDSNames();
|
||||
}
|
||||
this.getDS = function(id) {
|
||||
if (typeof id == "number") {
|
||||
return this.rrd_header.getDSbyIdx(id);
|
||||
} else {
|
||||
return this.rrd_header.getDSbyName(id);
|
||||
}
|
||||
}
|
||||
|
||||
this.getNrRRAs = function() {
|
||||
return this.rrd_header.getNrRRAs();
|
||||
}
|
||||
|
||||
this.getRRAInfo = function(idx) {
|
||||
return this.rrd_header.getRRAInfo(idx);
|
||||
}
|
||||
|
||||
this.getRRA = function(idx) {
|
||||
rra_info=this.rrd_header.getRRAInfo(idx);
|
||||
return new RRDRRA(rrd_data,
|
||||
this.rrd_header.rra_ptr_idx+idx*this.rrd_header.rra_ptr_el_size,
|
||||
rra_info,
|
||||
this.rrd_header.header_size,
|
||||
this.rrd_header.rra_def_row_cnt_sums[idx],
|
||||
this.rrd_header.ds_cnt);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,242 @@
|
||||
/*
|
||||
* Filter classes for rrdFile
|
||||
* They implement the same interface, but changing the content
|
||||
*
|
||||
* Part of the javascriptRRD package
|
||||
* Copyright (c) 2009 Frank Wuerthwein, fkw@ucsd.edu
|
||||
*
|
||||
* Original repository: http://javascriptrrd.sourceforge.net/
|
||||
*
|
||||
* MIT License [http://www.opensource.org/licenses/mit-license.php]
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
* All filter classes must implement the following interface:
|
||||
* getMinStep()
|
||||
* getLastUpdate()
|
||||
* getNrRRAs()
|
||||
* getRRAInfo(rra_idx)
|
||||
* getFilterRRA(rra_idx)
|
||||
* getName()
|
||||
*
|
||||
* Where getFilterRRA returns an object implementing the following interface:
|
||||
* getIdx()
|
||||
* getNrRows()
|
||||
* getStep()
|
||||
* getCFName()
|
||||
* getEl(row_idx)
|
||||
* getElFast(row_idx)
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
// ================================================================
|
||||
// Filter out a subset of DSs (identified either by idx or by name)
|
||||
|
||||
function RRDRRAFilterDS(rrd_rra,ds_list) {
|
||||
this.rrd_rra=rrd_rra;
|
||||
this.ds_list=ds_list;
|
||||
}
|
||||
RRDRRAFilterDS.prototype.getIdx = function() {return this.rrd_rra.getIdx();}
|
||||
RRDRRAFilterDS.prototype.getNrRows = function() {return this.rrd_rra.getNrRows();}
|
||||
RRDRRAFilterDS.prototype.getNrDSs = function() {return this.ds_list.length;}
|
||||
RRDRRAFilterDS.prototype.getStep = function() {return this.rrd_rra.getStep();}
|
||||
RRDRRAFilterDS.prototype.getCFName = function() {return this.rrd_rra.getCFName();}
|
||||
RRDRRAFilterDS.prototype.getEl = function(row_idx,ds_idx) {
|
||||
if ((ds_idx>=0) && (ds_idx<this.ds_list.length)) {
|
||||
var real_ds_idx=this.ds_list[ds_idx].real_ds_idx;
|
||||
return this.rrd_rra.getEl(row_idx,real_ds_idx);
|
||||
} else {
|
||||
throw RangeError("DS idx ("+ ds_idx +") out of range [0-" + this.ds_list.length +").");
|
||||
}
|
||||
}
|
||||
RRDRRAFilterDS.prototype.getElFast = function(row_idx,ds_idx) {
|
||||
if ((ds_idx>=0) && (ds_idx<this.ds_list.length)) {
|
||||
var real_ds_idx=this.ds_list[ds_idx].real_ds_idx;
|
||||
return this.rrd_rra.getElFast(row_idx,real_ds_idx);
|
||||
} else {
|
||||
throw RangeError("DS idx ("+ ds_idx +") out of range [0-" + this.ds_list.length +").");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// --------------------------------------------------
|
||||
function RRDFilterDS(rrd_file,ds_id_list) {
|
||||
this.rrd_file=rrd_file;
|
||||
this.ds_list=[];
|
||||
for (var i=0; i<ds_id_list.length; i++) {
|
||||
var org_ds=rrd_file.getDS(ds_id_list[i]);
|
||||
// must create a new copy, as the index has changed
|
||||
var new_ds=new RRDDS(org_ds.rrd_data,org_ds.rrd_data_idx,i);
|
||||
// then extend it to include the real RRD index
|
||||
new_ds.real_ds_idx=org_ds.my_idx;
|
||||
|
||||
this.ds_list.push(new_ds);
|
||||
}
|
||||
}
|
||||
RRDFilterDS.prototype.getMinSteps = function() {return this.rrd_file.getMinSteps();}
|
||||
RRDFilterDS.prototype.getLastUpdate = function() {return this.rrd_file.getLastUpdate();}
|
||||
|
||||
RRDFilterDS.prototype.getNrDSs = function() {return this.ds_list.length;}
|
||||
RRDFilterDS.prototype.getDSNames = function() {
|
||||
var ds_names=[];
|
||||
for (var i=0; i<this.ds_list.length; i++) {
|
||||
ds_names.push(ds_list[i].getName());
|
||||
}
|
||||
return ds_names;
|
||||
}
|
||||
RRDFilterDS.prototype.getDS = function(id) {
|
||||
if (typeof id == "number") {
|
||||
return this.getDSbyIdx(id);
|
||||
} else {
|
||||
return this.getDSbyName(id);
|
||||
}
|
||||
}
|
||||
|
||||
// INTERNAL: Do not call directly
|
||||
RRDFilterDS.prototype.getDSbyIdx = function(idx) {
|
||||
if ((idx>=0) && (idx<this.ds_list.length)) {
|
||||
return this.ds_list[idx];
|
||||
} else {
|
||||
throw RangeError("DS idx ("+ idx +") out of range [0-" + this.ds_list.length +").");
|
||||
}
|
||||
}
|
||||
|
||||
// INTERNAL: Do not call directly
|
||||
RRDFilterDS.prototype.getDSbyName = function(name) {
|
||||
for (var idx=0; idx<this.ds_list.length; idx++) {
|
||||
var ds=this.ds_list[idx];
|
||||
var ds_name=ds.getName()
|
||||
if (ds_name==name)
|
||||
return ds;
|
||||
}
|
||||
throw RangeError("DS name "+ name +" unknown.");
|
||||
}
|
||||
|
||||
RRDFilterDS.prototype.getNrRRAs = function() {return this.rrd_file.getNrRRAs();}
|
||||
RRDFilterDS.prototype.getRRAInfo = function(idx) {return this.rrd_file.getRRAInfo(idx);}
|
||||
RRDFilterDS.prototype.getRRA = function(idx) {return new RRDRRAFilterDS(this.rrd_file.getRRA(idx),this.ds_list);}
|
||||
|
||||
// ================================================================
|
||||
// Filter out by using a user provided filter object
|
||||
// The object must implement the following interface
|
||||
// getName() - Symbolic name give to this function
|
||||
// getDSName() - list of DSs used in computing the result (names or indexes)
|
||||
// computeResult(val_list) - val_list contains the values of the requested DSs (in the same order)
|
||||
|
||||
// Example class that implements the interface:
|
||||
// function sumDS(ds1,ds2) {
|
||||
// this.getName = function() {return ds1+"+"+ds2;}
|
||||
// this.getDSNames = function() {return [ds1,ds2];}
|
||||
// this.computeResult = function(val_list) {return val_list[0]+val_list[1];}
|
||||
// }
|
||||
|
||||
function RRDDSFilterOp(rrd_file,op_obj,my_idx) {
|
||||
this.rrd_file=rrd_file;
|
||||
this.op_obj=op_obj;
|
||||
this.my_idx=my_idx;
|
||||
var ds_names=op_obj.getDSNames();
|
||||
var ds_idx_list=[];
|
||||
for (var i=0; i<ds_names.length; i++) {
|
||||
ds_idx_list.push(rrd_file.getDS(ds_names[i]).getIdx());
|
||||
}
|
||||
this.ds_idx_list=ds_idx_list;
|
||||
}
|
||||
RRDDSFilterOp.prototype.getIdx = function() {return this.my_idx;}
|
||||
RRDDSFilterOp.prototype.getName = function() {return this.op_obj.getName();}
|
||||
|
||||
RRDDSFilterOp.prototype.getType = function() {return "function";}
|
||||
RRDDSFilterOp.prototype.getMin = function() {return undefined;}
|
||||
RRDDSFilterOp.prototype.getMax = function() {return undefined;}
|
||||
|
||||
// These are new to RRDDSFilterOp
|
||||
RRDDSFilterOp.prototype.getRealDSList = function() { return this.ds_idx_list;}
|
||||
RRDDSFilterOp.prototype.computeResult = function(val_list) {return this.op_obj.computeResult(val_list);}
|
||||
|
||||
// --------------------------------------------------
|
||||
function RRDRRAFilterOp(rrd_rra,ds_list) {
|
||||
this.rrd_rra=rrd_rra;
|
||||
this.ds_list=ds_list;
|
||||
}
|
||||
RRDRRAFilterOp.prototype.getIdx = function() {return this.rrd_rra.getIdx();}
|
||||
RRDRRAFilterOp.prototype.getNrRows = function() {return this.rrd_rra.getNrRows();}
|
||||
RRDRRAFilterOp.prototype.getNrDSs = function() {return this.ds_list.length;}
|
||||
RRDRRAFilterOp.prototype.getStep = function() {return this.rrd_rra.getStep();}
|
||||
RRDRRAFilterOp.prototype.getCFName = function() {return this.rrd_rra.getCFName();}
|
||||
RRDRRAFilterOp.prototype.getEl = function(row_idx,ds_idx) {
|
||||
if ((ds_idx>=0) && (ds_idx<this.ds_list.length)) {
|
||||
var ds_idx_list=this.ds_list[ds_idx].getRealDSList();
|
||||
var val_list=[];
|
||||
for (var i=0; i<ds_idx_list.length; i++) {
|
||||
val_list.push(this.rrd_rra.getEl(row_idx,ds_idx_list[i]));
|
||||
}
|
||||
return this.ds_list[ds_idx].computeResult(val_list);
|
||||
} else {
|
||||
throw RangeError("DS idx ("+ ds_idx +") out of range [0-" + this.ds_list.length +").");
|
||||
}
|
||||
}
|
||||
RRDRRAFilterOp.prototype.getElFast = function(row_idx,ds_idx) {
|
||||
if ((ds_idx>=0) && (ds_idx<this.ds_list.length)) {
|
||||
var ds_idx_list=this.ds_list[ds_idx].getRealDSList();
|
||||
var val_list=[];
|
||||
for (var i=0; i<ds_idx_list.length; i++) {
|
||||
val_list.push(this.rrd_rra.getEl(row_idx,ds_idx_list[i]));
|
||||
}
|
||||
return this.ds_list[ds_idx].computeResult(val_list);
|
||||
} else {
|
||||
throw RangeError("DS idx ("+ ds_idx +") out of range [0-" + this.ds_list.length +").");
|
||||
}
|
||||
}
|
||||
|
||||
// --------------------------------------------------
|
||||
function RRDFilterOp(rrd_file,op_obj_list) {
|
||||
this.rrd_file=rrd_file;
|
||||
this.ds_list=[];
|
||||
for (var i=0; i<op_obj_list.length; i++) {
|
||||
this.ds_list.push(new RRDDSFilterOp(rrd_file,op_obj_list[i],i));
|
||||
}
|
||||
}
|
||||
RRDFilterOp.prototype.getMinSteps = function() {return this.rrd_file.getMinSteps();}
|
||||
RRDFilterOp.prototype.getLastUpdate = function() {return this.rrd_file.getLastUpdate();}
|
||||
|
||||
RRDFilterOp.prototype.getNrDSs = function() {return this.ds_list.length;}
|
||||
RRDFilterOp.prototype.getDSNames = function() {
|
||||
var ds_names=[];
|
||||
for (var i=0; i<this.ds_list.length; i++) {
|
||||
ds_names.push(ds_list[i].getName());
|
||||
}
|
||||
return ds_names;
|
||||
}
|
||||
RRDFilterOp.prototype.getDS = function(id) {
|
||||
if (typeof id == "number") {
|
||||
return this.getDSbyIdx(id);
|
||||
} else {
|
||||
return this.getDSbyName(id);
|
||||
}
|
||||
}
|
||||
|
||||
// INTERNAL: Do not call directly
|
||||
RRDFilterOp.prototype.getDSbyIdx = function(idx) {
|
||||
if ((idx>=0) && (idx<this.ds_list.length)) {
|
||||
return this.ds_list[idx];
|
||||
} else {
|
||||
throw RangeError("DS idx ("+ idx +") out of range [0-" + this.ds_list.length +").");
|
||||
}
|
||||
}
|
||||
|
||||
// INTERNAL: Do not call directly
|
||||
RRDFilterOp.prototype.getDSbyName = function(name) {
|
||||
for (var idx=0; idx<this.ds_list.length; idx++) {
|
||||
var ds=this.ds_list[idx];
|
||||
var ds_name=ds.getName()
|
||||
if (ds_name==name)
|
||||
return ds;
|
||||
}
|
||||
throw RangeError("DS name "+ name +" unknown.");
|
||||
}
|
||||
|
||||
RRDFilterOp.prototype.getNrRRAs = function() {return this.rrd_file.getNrRRAs();}
|
||||
RRDFilterOp.prototype.getRRAInfo = function(idx) {return this.rrd_file.getRRAInfo(idx);}
|
||||
RRDFilterOp.prototype.getRRA = function(idx) {return new RRDRRAFilterOp(this.rrd_file.getRRA(idx),this.ds_list);}
|
||||
|
||||
@ -0,0 +1,314 @@
|
||||
/*
|
||||
* RRD graphing libraries, based on Flot
|
||||
* Part of the javascriptRRD package
|
||||
* Copyright (c) 2010 Frank Wuerthwein, fkw@ucsd.edu
|
||||
* Igor Sfiligoi, isfiligoi@ucsd.edu
|
||||
*
|
||||
* Original repository: http://javascriptrrd.sourceforge.net/
|
||||
*
|
||||
* MIT License [http://www.opensource.org/licenses/mit-license.php]
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
*
|
||||
* Flot is a javascript plotting library developed and maintained by
|
||||
* Ole Laursen [http://code.google.com/p/flot/]
|
||||
*
|
||||
*/
|
||||
|
||||
function suffixFormatter(val, axis) {
|
||||
if (val > 1000000)
|
||||
return (val / 1000000).toFixed(axis.tickDecimals) + " MB";
|
||||
else if (val > 1000)
|
||||
return (val / 1000).toFixed(axis.tickDecimals) + " kB";
|
||||
else
|
||||
return val.toFixed(axis.tickDecimals) + " B";
|
||||
}
|
||||
|
||||
function rrdFlot(html_id, rrd_file, graph_options, ds_graph_options, si_suffix) {
|
||||
if(si_suffix==null)
|
||||
this.si_suffix = false;
|
||||
else
|
||||
this.si_suffix = si_suffix;
|
||||
this.html_id=html_id;
|
||||
this.rrd_file=rrd_file;
|
||||
this.graph_options=graph_options;
|
||||
if (ds_graph_options==null) {
|
||||
this.ds_graph_options=new Object();
|
||||
} else {
|
||||
this.ds_graph_options=ds_graph_options;
|
||||
}
|
||||
this.selection_range=new rrdFlotSelection();
|
||||
|
||||
this.createHTML();
|
||||
this.populateRes();
|
||||
this.populateDScb();
|
||||
this.drawFlotGraph();
|
||||
}
|
||||
|
||||
|
||||
rrdFlot.prototype.createHTML = function() {
|
||||
var rf_this=this; // use obj inside other functions
|
||||
|
||||
var base_el=document.getElementById(this.html_id);
|
||||
|
||||
this.res_id=this.html_id+"_res";
|
||||
this.ds_cb_id=this.html_id+"_ds_cb";
|
||||
this.graph_id=this.html_id+"_graph";
|
||||
this.scale_id=this.html_id+"_scale";
|
||||
this.legend_sel_id=this.html_id+"_legend_sel";
|
||||
|
||||
while (base_el.lastChild!=null) base_el.removeChild(base_el.lastChild);
|
||||
var external_table=document.createElement("Table");
|
||||
|
||||
var rowHeader=external_table.insertRow(-1);
|
||||
var cellRes=rowHeader.insertCell(-1);
|
||||
var forRes=document.createElement("Select");
|
||||
forRes.id=this.res_id;
|
||||
forRes.onChange= this.callback_res_changed;
|
||||
forRes.onchange= function () {rf_this.callback_res_changed();};
|
||||
cellRes.appendChild(forRes);
|
||||
|
||||
var cellScaleReset=rowHeader.insertCell(-1);
|
||||
cellScaleReset.vAlign="center";
|
||||
cellScaleReset.appendChild(document.createTextNode(" "));
|
||||
var elScaleReset=document.createElement("input");
|
||||
elScaleReset.type = "button";
|
||||
elScaleReset.value = "Reset selection";
|
||||
elScaleReset.onclick = function () {rf_this.callback_scale_reset();}
|
||||
cellScaleReset.appendChild(elScaleReset);
|
||||
|
||||
var rowGraph=external_table.insertRow(-1);
|
||||
var cellGraph=rowGraph.insertCell(-1);
|
||||
cellGraph.colSpan=3;
|
||||
var elGraph=document.createElement("Div");
|
||||
elGraph.style.width="300px";
|
||||
elGraph.style.height="170px";
|
||||
elGraph.id=this.graph_id;
|
||||
cellGraph.appendChild(elGraph);
|
||||
|
||||
var cellDScb=rowGraph.insertCell(-1);
|
||||
cellDScb.vAlign="top";
|
||||
var formDScb=document.createElement("Form");
|
||||
formDScb.id=this.ds_cb_id;
|
||||
formDScb.onchange= function () {rf_this.callback_ds_cb_changed();};
|
||||
cellDScb.appendChild(formDScb);
|
||||
|
||||
var rowScale=external_table.insertRow(-1);
|
||||
var cellScale=rowScale.insertCell(-1);
|
||||
cellScale.colSpan=2;
|
||||
var elScale=document.createElement("Div");
|
||||
elScale.style.width="300px";
|
||||
elScale.style.height="80px";
|
||||
elScale.id=this.scale_id;
|
||||
cellScale.appendChild(elScale);
|
||||
|
||||
base_el.appendChild(external_table);
|
||||
};
|
||||
|
||||
rrdFlot.prototype.populateRes = function() {
|
||||
var form_el=document.getElementById(this.res_id);
|
||||
|
||||
while (form_el.lastChild!=null) form_el.removeChild(form_el.lastChild);
|
||||
|
||||
var nrRRAs=this.rrd_file.getNrRRAs();
|
||||
for (var i=0; i<nrRRAs; i++) {
|
||||
var rra=this.rrd_file.getRRAInfo(i);
|
||||
var step=rra.getStep();
|
||||
var rows=rra.getNrRows();
|
||||
var period=step*rows;
|
||||
var rra_label=rfs_format_time(period) + " - " + rfs_format_time(step) + " steps";
|
||||
form_el.appendChild(new Option(rra_label,i));
|
||||
}
|
||||
};
|
||||
|
||||
rrdFlot.prototype.populateDScb = function() {
|
||||
var form_el=document.getElementById(this.ds_cb_id);
|
||||
|
||||
while (form_el.lastChild!=null) form_el.removeChild(form_el.lastChild);
|
||||
|
||||
var nrDSs=this.rrd_file.getNrDSs();
|
||||
for (var i=0; i<nrDSs; i++) {
|
||||
var ds=this.rrd_file.getDS(i);
|
||||
var name=ds.getName();
|
||||
var title=name;
|
||||
var checked=1;
|
||||
if (this.ds_graph_options[name]!=null) {
|
||||
var dgo=this.ds_graph_options[name];
|
||||
if (dgo['title']!=null) {
|
||||
title=dgo['title'];
|
||||
} else if (dgo['label']!=null) {
|
||||
title=dgo['label'];
|
||||
}
|
||||
if (dgo['checked']!=null) {
|
||||
checked=dgo['checked'];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ======================================
|
||||
//
|
||||
rrdFlot.prototype.drawFlotGraph = function() {
|
||||
var oSelect=document.getElementById(this.res_id);
|
||||
var rra_idx=Number(oSelect.options[oSelect.selectedIndex].value);
|
||||
|
||||
var ds_positive_stack_list=[];
|
||||
var ds_negative_stack_list=[];
|
||||
var ds_single_list=[];
|
||||
var ds_colors={};
|
||||
|
||||
var nrDSs=this.rrd_file.getNrDSs();
|
||||
for (var i=0; i<nrDSs; i++) {
|
||||
var ds_name=this.rrd_file.getDS(i).getName();
|
||||
var ds_stack_type='none';
|
||||
if (this.ds_graph_options[ds_name]!=null) {
|
||||
var dgo=this.ds_graph_options[ds_name];
|
||||
if (dgo['stack']!=null) {
|
||||
var ds_stack_type=dgo['stack'];
|
||||
}
|
||||
}
|
||||
if (ds_stack_type=='positive') {
|
||||
ds_positive_stack_list.push(ds_name);
|
||||
} else if (ds_stack_type=='negative') {
|
||||
ds_negative_stack_list.push(ds_name);
|
||||
} else {
|
||||
ds_single_list.push(ds_name);
|
||||
}
|
||||
ds_colors[ds_name]=i;
|
||||
}
|
||||
|
||||
var flot_obj=rrdRRAStackFlotObj(this.rrd_file,rra_idx,
|
||||
ds_positive_stack_list,ds_negative_stack_list,ds_single_list);
|
||||
|
||||
for (var i=0; i<flot_obj.data.length; i++) {
|
||||
var name=flot_obj.data[i].label;
|
||||
var color=ds_colors[name];
|
||||
if (this.ds_graph_options[name]!=null) {
|
||||
var dgo=this.ds_graph_options[name];
|
||||
if (dgo['color']!=null) {
|
||||
color=dgo['color'];
|
||||
}
|
||||
if (dgo['label']!=null) {
|
||||
flot_obj.data[i].label=dgo['label'];
|
||||
} else if (dgo['title']!=null) {
|
||||
flot_obj.data[i].label=dgo['title'];
|
||||
}
|
||||
if (dgo['lines']!=null) {
|
||||
flot_obj.data[i].lines=dgo['lines'];
|
||||
}
|
||||
if (dgo['yaxis']!=null) {
|
||||
flot_obj.data[i].yaxis=dgo['yaxis'];
|
||||
}
|
||||
}
|
||||
flot_obj.data[i].color=color;
|
||||
}
|
||||
|
||||
this.bindFlotGraph(flot_obj);
|
||||
};
|
||||
|
||||
rrdFlot.prototype.bindFlotGraph = function(flot_obj) {
|
||||
var rf_this=this;
|
||||
|
||||
var graph_jq_id="#"+this.graph_id;
|
||||
var scale_jq_id="#"+this.scale_id;
|
||||
fmt_cb = this.si_suffix ? suffixFormatter : null;
|
||||
|
||||
var graph_options = {
|
||||
legend: {show:false, position:"nw",noColumns:3},
|
||||
lines: {show:true},
|
||||
xaxis: { mode: "time" },
|
||||
yaxis: { autoscaleMargin: 0.20, tickFormatter: fmt_cb },
|
||||
selection: { mode: "x" },
|
||||
};
|
||||
|
||||
graph_options.legend.show=true;
|
||||
|
||||
if (this.selection_range.isSet()) {
|
||||
var selection_range=this.selection_range.getFlotRanges();
|
||||
graph_options.xaxis.min=selection_range.xaxis.from;
|
||||
graph_options.xaxis.max=selection_range.xaxis.to;
|
||||
} else {
|
||||
graph_options.xaxis.min=flot_obj.min;
|
||||
graph_options.xaxis.max=flot_obj.max;
|
||||
}
|
||||
|
||||
if (this.graph_options!=null) {
|
||||
if (this.graph_options.legend!=null) {
|
||||
if (this.graph_options.legend.position!=null) {
|
||||
graph_options.legend.position=this.graph_options.legend.position;
|
||||
}
|
||||
if (this.graph_options.legend.noColumns!=null) {
|
||||
graph_options.legend.noColumns=this.graph_options.legend.noColumns;
|
||||
}
|
||||
}
|
||||
if (this.graph_options.yaxis!=null) {
|
||||
if (this.graph_options.yaxis.autoscaleMargin!=null) {
|
||||
graph_options.yaxis.autoscaleMargin=this.graph_options.yaxis.autoscaleMargin;
|
||||
}
|
||||
}
|
||||
if (this.graph_options.lines!=null) {
|
||||
graph_options.lines=this.graph_options.lines;
|
||||
}
|
||||
}
|
||||
|
||||
var scale_options = {
|
||||
legend: {show:false},
|
||||
lines: {show:true},
|
||||
xaxis: { mode: "time", min:flot_obj.min, max:flot_obj.max },
|
||||
yaxis: { tickFormatter: fmt_cb },
|
||||
selection: { mode: "x" },
|
||||
};
|
||||
|
||||
var flot_data=flot_obj.data;
|
||||
|
||||
var graph_data=this.selection_range.trim_flot_data(flot_data);
|
||||
var scale_data=flot_data;
|
||||
|
||||
this.graph = $.plot($(graph_jq_id), graph_data, graph_options);
|
||||
this.scale = $.plot($(scale_jq_id), scale_data, scale_options);
|
||||
|
||||
if (this.selection_range.isSet()) {
|
||||
this.scale.setSelection(this.selection_range.getFlotRanges(),true);
|
||||
}
|
||||
|
||||
$(graph_jq_id).unbind("plotselected");
|
||||
$(graph_jq_id).bind("plotselected", function (event, ranges) {
|
||||
rf_this.selection_range.setFromFlotRanges(ranges);
|
||||
graph_options.xaxis.min=ranges.xaxis.from;
|
||||
graph_options.xaxis.max=ranges.xaxis.to;
|
||||
rf_this.graph = $.plot($(graph_jq_id), rf_this.selection_range.trim_flot_data(flot_data), graph_options);
|
||||
|
||||
rf_this.scale.setSelection(ranges, true);
|
||||
});
|
||||
|
||||
$(scale_jq_id).unbind("plotselected");
|
||||
$(scale_jq_id).bind("plotselected", function (event, ranges) {
|
||||
rf_this.graph.setSelection(ranges);
|
||||
});
|
||||
|
||||
$(scale_jq_id).bind("plotunselected", function() {
|
||||
rf_this.selection_range.reset();
|
||||
graph_options.xaxis.min=flot_obj.min;
|
||||
graph_options.xaxis.max=flot_obj.max;
|
||||
rf_this.graph = $.plot($(graph_jq_id), rf_this.selection_range.trim_flot_data(flot_data), graph_options);
|
||||
});
|
||||
};
|
||||
|
||||
rrdFlot.prototype.callback_res_changed = function() {
|
||||
this.drawFlotGraph();
|
||||
};
|
||||
|
||||
rrdFlot.prototype.callback_ds_cb_changed = function() {
|
||||
this.drawFlotGraph();
|
||||
};
|
||||
|
||||
rrdFlot.prototype.callback_scale_reset = function() {
|
||||
this.scale.clearSelection();
|
||||
};
|
||||
|
||||
rrdFlot.prototype.callback_legend_changed = function() {
|
||||
this.drawFlotGraph();
|
||||
};
|
||||
|
||||
@ -0,0 +1,487 @@
|
||||
/*
|
||||
* RRD graphing libraries, based on Flot
|
||||
* Part of the javascriptRRD package
|
||||
* Copyright (c) 2010 Frank Wuerthwein, fkw@ucsd.edu
|
||||
* Igor Sfiligoi, isfiligoi@ucsd.edu
|
||||
*
|
||||
* Original repository: http://javascriptrrd.sourceforge.net/
|
||||
*
|
||||
* MIT License [http://www.opensource.org/licenses/mit-license.php]
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
*
|
||||
* Flot is a javascript plotting library developed and maintained by
|
||||
* Ole Laursen [http://code.google.com/p/flot/]
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
* The rrd_files is a list of
|
||||
* [rrd_id,rrd_file] pairs
|
||||
* All rrd_files must have the same step, the same DSes and the same number of RRAs.
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
* The ds_list is a list of
|
||||
* [ds_id, ds_title] pairs
|
||||
* If not defined, the list will be created from the RRDs
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
* Local dependencies:
|
||||
* rrdFlotSupport.py
|
||||
*
|
||||
* External dependencies:
|
||||
* [Flot]/jquery.py
|
||||
* [Flot]/jquery.flot.js
|
||||
* [Flot]/jquery.flot.selection.js
|
||||
*/
|
||||
|
||||
/* graph_options defaults (see Flot docs for details)
|
||||
* {
|
||||
* legend: { position:"nw",noColumns:3},
|
||||
* lines: { show:true },
|
||||
* yaxis: { autoscaleMargin: 0.20}
|
||||
* }
|
||||
*
|
||||
* rrd_graph_options is a dictionary of rrd_id,
|
||||
* with each element being a graph_option
|
||||
* The defaults for each element are
|
||||
* {
|
||||
* title: label or rrd_name // this is what is displayed in the checkboxes
|
||||
* checked: true // boolean
|
||||
* label: title or rrd_name // this is what is displayed in the legend
|
||||
* color: rrd_index // see Flot docs for details
|
||||
* lines: { show:true, fill: true, fillColor:color } // see Flot docs for details
|
||||
* }
|
||||
*/
|
||||
|
||||
function rrdFlotMatrix(html_id, rrd_files, ds_list, graph_options, rrd_graph_options) {
|
||||
this.html_id=html_id;
|
||||
this.rrd_files=rrd_files;
|
||||
if (ds_list==null) {
|
||||
this.ds_list=[];
|
||||
var rrd_file=this.rrd_files[0][1]; // get the first one... they are all the same
|
||||
var nrDSs=rrd_file.getNrDSs();
|
||||
for (var i=0; i<nrDSs; i++) {
|
||||
var ds=this.rrd_files[0][1].getDS(i);
|
||||
var name=ds.getName();
|
||||
this.ds_list.push([name,name]);
|
||||
}
|
||||
} else {
|
||||
this.ds_list=ds_list;
|
||||
}
|
||||
this.graph_options=graph_options;
|
||||
if (rrd_graph_options==null) {
|
||||
this.rrd_graph_options=new Object(); // empty object, just not to be null
|
||||
} else {
|
||||
this.rrd_graph_options=rrd_graph_options;
|
||||
}
|
||||
this.selection_range=new rrdFlotSelection();
|
||||
|
||||
this.createHTML();
|
||||
this.populateDS();
|
||||
this.populateRes();
|
||||
this.populateRRDcb();
|
||||
this.drawFlotGraph()
|
||||
}
|
||||
|
||||
|
||||
// ===============================================
|
||||
// Create the HTML tags needed to host the graphs
|
||||
rrdFlotMatrix.prototype.createHTML = function() {
|
||||
var rf_this=this; // use obj inside other functions
|
||||
|
||||
var base_el=document.getElementById(this.html_id);
|
||||
|
||||
this.ds_id=this.html_id+"_ds";
|
||||
this.res_id=this.html_id+"_res";
|
||||
this.rrd_cb_id=this.html_id+"_rrd_cb";
|
||||
this.graph_id=this.html_id+"_graph";
|
||||
this.scale_id=this.html_id+"_scale";
|
||||
this.legend_sel_id=this.html_id+"_legend_sel";
|
||||
|
||||
// First clean up anything in the element
|
||||
while (base_el.lastChild!=null) base_el.removeChild(base_el.lastChild);
|
||||
|
||||
// Now create the layout
|
||||
var external_table=document.createElement("Table");
|
||||
|
||||
// DS rows: select DS
|
||||
var rowDS=external_table.insertRow(-1);
|
||||
var cellDS=rowDS.insertCell(-1);
|
||||
cellDS.colSpan=4
|
||||
cellDS.appendChild(document.createTextNode("Element:"));
|
||||
var forDS=document.createElement("Select");
|
||||
forDS.id=this.ds_id;
|
||||
forDS.onchange= function () {rf_this.callback_ds_changed();};
|
||||
cellDS.appendChild(forDS);
|
||||
|
||||
// Header row: resulution select and DS selection title
|
||||
var rowHeader=external_table.insertRow(-1);
|
||||
var cellRes=rowHeader.insertCell(-1);
|
||||
cellRes.colSpan=3;
|
||||
cellRes.appendChild(document.createTextNode("Resolution:"));
|
||||
var forRes=document.createElement("Select");
|
||||
forRes.id=this.res_id;
|
||||
forRes.onchange= function () {rf_this.callback_res_changed();};
|
||||
cellRes.appendChild(forRes);
|
||||
|
||||
var cellRRDTitle=rowHeader.insertCell(-1);
|
||||
cellRRDTitle.appendChild(document.createTextNode("Select RRDs to plot:"));
|
||||
|
||||
// Graph row: main graph and DS selection block
|
||||
var rowGraph=external_table.insertRow(-1);
|
||||
var cellGraph=rowGraph.insertCell(-1);
|
||||
cellGraph.colSpan=3;
|
||||
var elGraph=document.createElement("Div");
|
||||
elGraph.style.width="500px";
|
||||
elGraph.style.height="300px";
|
||||
elGraph.id=this.graph_id;
|
||||
cellGraph.appendChild(elGraph);
|
||||
|
||||
var cellRRDcb=rowGraph.insertCell(-1);
|
||||
cellRRDcb.vAlign="top";
|
||||
var formRRDcb=document.createElement("Form");
|
||||
formRRDcb.id=this.rrd_cb_id;
|
||||
formRRDcb.onchange= function () {rf_this.callback_rrd_cb_changed();};
|
||||
cellRRDcb.appendChild(formRRDcb);
|
||||
|
||||
// Scale row: scaled down selection graph
|
||||
var rowScale=external_table.insertRow(-1);
|
||||
|
||||
var cellScaleLegend=rowScale.insertCell(-1);
|
||||
cellScaleLegend.vAlign="top";
|
||||
cellScaleLegend.appendChild(document.createTextNode("Legend:"));
|
||||
cellScaleLegend.appendChild(document.createElement('br'));
|
||||
var forScaleLegend=document.createElement("Select");
|
||||
forScaleLegend.id=this.legend_sel_id;
|
||||
forScaleLegend.appendChild(new Option("Top","nw"));
|
||||
forScaleLegend.appendChild(new Option("Bottom","sw"));
|
||||
forScaleLegend.appendChild(new Option("TopRight","ne"));
|
||||
forScaleLegend.appendChild(new Option("BottomRight","se"));
|
||||
forScaleLegend.appendChild(new Option("None","None"));
|
||||
forScaleLegend.onchange= function () {rf_this.callback_legend_changed();};
|
||||
cellScaleLegend.appendChild(forScaleLegend);
|
||||
|
||||
var cellScale=rowScale.insertCell(-1);
|
||||
cellScale.align="right";
|
||||
var elScale=document.createElement("Div");
|
||||
elScale.style.width="250px";
|
||||
elScale.style.height="110px";
|
||||
elScale.id=this.scale_id;
|
||||
cellScale.appendChild(elScale);
|
||||
|
||||
var cellScaleReset=rowScale.insertCell(-1);
|
||||
cellScaleReset.vAlign="top";
|
||||
cellScaleReset.appendChild(document.createTextNode(" "));
|
||||
cellScaleReset.appendChild(document.createElement('br'));
|
||||
var elScaleReset=document.createElement("input");
|
||||
elScaleReset.type = "button";
|
||||
elScaleReset.value = "Reset selection";
|
||||
elScaleReset.onclick = function () {rf_this.callback_scale_reset();}
|
||||
cellScaleReset.appendChild(elScaleReset);
|
||||
|
||||
|
||||
base_el.appendChild(external_table);
|
||||
};
|
||||
|
||||
// ======================================
|
||||
// Populate DSs, RRA and RRD info
|
||||
rrdFlotMatrix.prototype.populateDS = function() {
|
||||
var form_el=document.getElementById(this.ds_id);
|
||||
|
||||
// First clean up anything in the element
|
||||
while (form_el.lastChild!=null) form_el.removeChild(form_el.lastChild);
|
||||
|
||||
for (i in this.ds_list) {
|
||||
var ds=this.ds_list[i];
|
||||
form_el.appendChild(new Option(ds[1],ds[0]));
|
||||
}
|
||||
};
|
||||
|
||||
rrdFlotMatrix.prototype.populateRes = function() {
|
||||
var form_el=document.getElementById(this.res_id);
|
||||
|
||||
// First clean up anything in the element
|
||||
while (form_el.lastChild!=null) form_el.removeChild(form_el.lastChild);
|
||||
|
||||
var rrd_file=this.rrd_files[0][1]; // get the first one... they are all the same
|
||||
// now populate with RRA info
|
||||
var nrRRAs=rrd_file.getNrRRAs();
|
||||
for (var i=0; i<nrRRAs; i++) {
|
||||
var rra=rrd_file.getRRAInfo(i);
|
||||
var step=rra.getStep();
|
||||
var rows=rra.getNrRows();
|
||||
var period=step*rows;
|
||||
var rra_label=rfs_format_time(step)+" ("+rfs_format_time(period)+" total)";
|
||||
form_el.appendChild(new Option(rra_label,i));
|
||||
}
|
||||
};
|
||||
|
||||
rrdFlotMatrix.prototype.populateRRDcb = function() {
|
||||
var form_el=document.getElementById(this.rrd_cb_id);
|
||||
|
||||
// First clean up anything in the element
|
||||
while (form_el.lastChild!=null) form_el.removeChild(form_el.lastChild);
|
||||
|
||||
var table_el=document.createElement("Table");
|
||||
var row_el=table_el.insertRow(-1);
|
||||
row_el.vAlign="top";
|
||||
var cell_el=null; // will define later
|
||||
|
||||
// now populate with RRD info
|
||||
var nrRRDs=this.rrd_files.length;
|
||||
for (var i=0; i<nrRRDs; i++) {
|
||||
if ((i%15)==0) { // one column every 15 elements
|
||||
cell_el=row_el.insertCell(-1);
|
||||
}
|
||||
|
||||
var rrd_el=this.rrd_files[i];
|
||||
var rrd_file=rrd_el[1];
|
||||
var name=rrd_el[0];
|
||||
var title=name;
|
||||
var checked=true; // all checked by default
|
||||
if (this.rrd_graph_options[name]!=null) {
|
||||
var rgo=this.rrd_graph_options[name];
|
||||
if (rgo['title']!=null) {
|
||||
// if the user provided the title, use it
|
||||
title=rgo['title'];
|
||||
} else if (rgo['label']!=null) {
|
||||
// use label as a second choice
|
||||
title=rgo['label'];
|
||||
} // else leave the ds name
|
||||
if (rgo['checked']!=null) {
|
||||
// if the user provided the title, use it
|
||||
checked=rgo['checked'];
|
||||
}
|
||||
}
|
||||
|
||||
var cb_el = document.createElement("input");
|
||||
cb_el.type = "checkbox";
|
||||
cb_el.name = "rrd";
|
||||
cb_el.value = i;
|
||||
cb_el.checked = cb_el.defaultChecked = checked;
|
||||
cell_el.appendChild(cb_el);
|
||||
cell_el.appendChild(document.createTextNode(title));
|
||||
cell_el.appendChild(document.createElement('br'));
|
||||
}
|
||||
form_el.appendChild(table_el);
|
||||
};
|
||||
|
||||
// ======================================
|
||||
//
|
||||
rrdFlotMatrix.prototype.drawFlotGraph = function() {
|
||||
// DS
|
||||
var oSelect=document.getElementById(this.ds_id);
|
||||
var ds_id=oSelect.options[oSelect.selectedIndex].value;
|
||||
|
||||
// Res contains the RRA idx
|
||||
oSelect=document.getElementById(this.res_id);
|
||||
var rra_idx=Number(oSelect.options[oSelect.selectedIndex].value);
|
||||
|
||||
// Extract ds info ... to be finished
|
||||
var ds_positive_stack=null;
|
||||
|
||||
var std_colors=["#00ff00","#00ffff","#0000ff","#ff00ff",
|
||||
"#808080","#ff0000","#ffff00","#e66266",
|
||||
"#33cccc","#fff8a9","#ccffff","#a57e81",
|
||||
"#7bea81","#8d4dff","#ffcc99","#000000"];
|
||||
|
||||
// now get the list of selected RRDs
|
||||
var rrd_list=[];
|
||||
var rrd_colors=[];
|
||||
var oCB=document.getElementById(this.rrd_cb_id);
|
||||
var nrRRDs=oCB.rrd.length;
|
||||
if (oCB.rrd.length>0) {
|
||||
for (var i=0; i<oCB.rrd.length; i++) {
|
||||
if (oCB.rrd[i].checked==true) {
|
||||
//var rrd_idx=Number(oCB.rrd[i].value);
|
||||
rrd_list.push(this.rrd_files[i]);
|
||||
color=std_colors[i%std_colors.length];
|
||||
if ((i/std_colors.length)>=1) {
|
||||
// wraparound, change them a little
|
||||
idiv=Math.floor(i/std_colors.length);
|
||||
c1=parseInt(color[1]+color[2],16);
|
||||
c2=parseInt(color[3]+color[4],16);
|
||||
c3=parseInt(color[5]+color[6],16);
|
||||
m1=Math.floor((c1-128)/Math.sqrt(idiv+1))+128;
|
||||
m2=Math.floor((c2-128)/Math.sqrt(idiv+1))+128;
|
||||
m3=Math.floor((c3-128)/Math.sqrt(idiv+1))+128;
|
||||
if (m1>15) s1=(m1).toString(16); else s1="0"+(m1).toString(16);
|
||||
if (m2>15) s2=(m2).toString(16); else s2="0"+(m2).toString(16);
|
||||
if (m3>15) s3=(m3).toString(16); else s3="0"+(m3).toString(16);
|
||||
color="#"+s1+s2+s3;
|
||||
}
|
||||
rrd_colors.push(color);
|
||||
}
|
||||
}
|
||||
} else { // single element is not treated as an array
|
||||
if (oCB.rrd.checked==true) {
|
||||
// no sense trying to stack a single element
|
||||
rrd_list.push(this.rrd_files[0]);
|
||||
rrd_colors.push(std_colors[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// then extract RRA data about those DSs... to be finished
|
||||
var flot_obj=rrdRRAMultiStackFlotObj(rrd_list,rra_idx,ds_id);
|
||||
|
||||
// fix the colors, based on the position in the RRD
|
||||
for (var i=0; i<flot_obj.data.length; i++) {
|
||||
var name=flot_obj.data[i].label; // at this point, label is the rrd_name
|
||||
var color=rrd_colors[flot_obj.data.length-i-1]; // stack inverts colors
|
||||
var lines=null;
|
||||
if (this.rrd_graph_options[name]!=null) {
|
||||
var dgo=this.rrd_graph_options[name];
|
||||
if (dgo['color']!=null) {
|
||||
color=dgo['color'];
|
||||
}
|
||||
if (dgo['label']!=null) {
|
||||
// if the user provided the label, use it
|
||||
flot_obj.data[i].label=dgo['label'];
|
||||
} else if (dgo['title']!=null) {
|
||||
// use title as a second choice
|
||||
flot_obj.data[i].label=dgo['title'];
|
||||
} // else use the rrd name
|
||||
if (dgo['lines']!=null) {
|
||||
// if the user provided the label, use it
|
||||
flot_obj.data[i].lines=dgo['lines'];
|
||||
}
|
||||
}
|
||||
if (lines==null) {
|
||||
flot_obj.data[i].lines= { show:true, fill: true, fillColor:color };
|
||||
}
|
||||
flot_obj.data[i].color=color;
|
||||
}
|
||||
|
||||
// finally do the real plotting
|
||||
this.bindFlotGraph(flot_obj);
|
||||
};
|
||||
|
||||
// ======================================
|
||||
// Bind the graphs to the HTML tags
|
||||
rrdFlotMatrix.prototype.bindFlotGraph = function(flot_obj) {
|
||||
var rf_this=this; // use obj inside other functions
|
||||
|
||||
// Legend
|
||||
var oSelect=document.getElementById(this.legend_sel_id);
|
||||
var legend_id=oSelect.options[oSelect.selectedIndex].value;
|
||||
|
||||
var graph_jq_id="#"+this.graph_id;
|
||||
var scale_jq_id="#"+this.scale_id;
|
||||
|
||||
var graph_options = {
|
||||
legend: {show:false, position:"nw",noColumns:3},
|
||||
lines: {show:true},
|
||||
xaxis: { mode: "time" },
|
||||
yaxis: { autoscaleMargin: 0.20},
|
||||
selection: { mode: "x" },
|
||||
};
|
||||
|
||||
|
||||
if (legend_id=="None") {
|
||||
// do nothing
|
||||
} else {
|
||||
graph_options.legend.show=true;
|
||||
graph_options.legend.position=legend_id;
|
||||
}
|
||||
|
||||
if (this.selection_range.isSet()) {
|
||||
var selection_range=this.selection_range.getFlotRanges();
|
||||
graph_options.xaxis.min=selection_range.xaxis.from;
|
||||
graph_options.xaxis.max=selection_range.xaxis.to;
|
||||
} else {
|
||||
graph_options.xaxis.min=flot_obj.min;
|
||||
graph_options.xaxis.max=flot_obj.max;
|
||||
}
|
||||
|
||||
if (this.graph_options!=null) {
|
||||
if (this.graph_options.legend!=null) {
|
||||
if (this.graph_options.legend.position!=null) {
|
||||
graph_options.legend.position=this.graph_options.legend.position;
|
||||
}
|
||||
if (this.graph_options.legend.noColumns!=null) {
|
||||
graph_options.legend.noColumns=this.graph_options.legend.noColumns;
|
||||
}
|
||||
}
|
||||
if (this.graph_options.yaxis!=null) {
|
||||
if (this.graph_options.yaxis.autoscaleMargin!=null) {
|
||||
graph_options.yaxis.autoscaleMargin=this.graph_options.yaxis.autoscaleMargin;
|
||||
}
|
||||
}
|
||||
if (this.graph_options.lines!=null) {
|
||||
graph_options.lines=this.graph_options.lines;
|
||||
}
|
||||
}
|
||||
|
||||
var scale_options = {
|
||||
legend: {show:false},
|
||||
lines: {show:true},
|
||||
xaxis: { mode: "time", min:flot_obj.min, max:flot_obj.max },
|
||||
selection: { mode: "x" },
|
||||
};
|
||||
|
||||
var flot_data=flot_obj.data;
|
||||
|
||||
var graph_data=this.selection_range.trim_flot_data(flot_data);
|
||||
var scale_data=flot_data;
|
||||
|
||||
this.graph = $.plot($(graph_jq_id), graph_data, graph_options);
|
||||
this.scale = $.plot($(scale_jq_id), scale_data, scale_options);
|
||||
|
||||
if (this.selection_range.isSet()) {
|
||||
this.scale.setSelection(this.selection_range.getFlotRanges(),true); //don't fire event, no need
|
||||
}
|
||||
|
||||
// now connect the two
|
||||
$(graph_jq_id).bind("plotselected", function (event, ranges) {
|
||||
// do the zooming
|
||||
rf_this.selection_range.setFromFlotRanges(ranges);
|
||||
graph_options.xaxis.min=ranges.xaxis.from;
|
||||
graph_options.xaxis.max=ranges.xaxis.to;
|
||||
rf_this.graph = $.plot($(graph_jq_id), rf_this.selection_range.trim_flot_data(flot_data), graph_options);
|
||||
|
||||
// don't fire event on the scale to prevent eternal loop
|
||||
rf_this.scale.setSelection(ranges, true);
|
||||
});
|
||||
|
||||
$(scale_jq_id).bind("plotselected", function (event, ranges) {
|
||||
rf_this.graph.setSelection(ranges);
|
||||
});
|
||||
|
||||
// only the scale has a selection
|
||||
// so when that is cleared, redraw also the graph
|
||||
$(scale_jq_id).bind("plotunselected", function() {
|
||||
rf_this.selection_range.reset();
|
||||
graph_options.xaxis.min=flot_obj.min;
|
||||
graph_options.xaxis.max=flot_obj.max;
|
||||
rf_this.graph = $.plot($(graph_jq_id), rf_this.selection_range.trim_flot_data(flot_data), graph_options);
|
||||
});
|
||||
};
|
||||
|
||||
// callback functions that are called when one of the selections changes
|
||||
rrdFlotMatrix.prototype.callback_res_changed = function() {
|
||||
this.drawFlotGraph();
|
||||
};
|
||||
|
||||
rrdFlotMatrix.prototype.callback_ds_changed = function() {
|
||||
this.drawFlotGraph();
|
||||
};
|
||||
|
||||
rrdFlotMatrix.prototype.callback_rrd_cb_changed = function() {
|
||||
this.drawFlotGraph();
|
||||
};
|
||||
|
||||
rrdFlotMatrix.prototype.callback_scale_reset = function() {
|
||||
this.scale.clearSelection();
|
||||
};
|
||||
|
||||
rrdFlotMatrix.prototype.callback_legend_changed = function() {
|
||||
this.drawFlotGraph();
|
||||
};
|
||||
|
||||
@ -0,0 +1,398 @@
|
||||
/*
|
||||
* Support library aimed at providing commonly used functions and classes
|
||||
* that may be used while plotting RRD files with Flot
|
||||
*
|
||||
* Part of the javascriptRRD package
|
||||
* Copyright (c) 2009 Frank Wuerthwein, fkw@ucsd.edu
|
||||
*
|
||||
* Original repository: http://javascriptrrd.sourceforge.net/
|
||||
*
|
||||
* MIT License [http://www.opensource.org/licenses/mit-license.php]
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
*
|
||||
* Flot is a javascript plotting library developed and maintained by
|
||||
* Ole Laursen [http://code.google.com/p/flot/]
|
||||
*
|
||||
*/
|
||||
|
||||
// Return a Flot-like data structure
|
||||
// Since Flot does not properly handle empty elements, min and max are returned, too
|
||||
function rrdDS2FlotSeries(rrd_file,ds_id,rra_idx,want_rounding) {
|
||||
var ds=rrd_file.getDS(ds_id);
|
||||
var ds_name=ds.getName();
|
||||
var ds_idx=ds.getIdx();
|
||||
var rra=rrd_file.getRRA(rra_idx);
|
||||
var rra_rows=rra.getNrRows();
|
||||
var last_update=rrd_file.getLastUpdate();
|
||||
var step=rra.getStep();
|
||||
|
||||
if (want_rounding!=false) {
|
||||
// round last_update to step
|
||||
// so that all elements are sync
|
||||
last_update-=(last_update%step);
|
||||
}
|
||||
|
||||
var first_el=last_update-(rra_rows-1)*step;
|
||||
var timestamp=first_el;
|
||||
var flot_series=[];
|
||||
for (var i=0;i<rra_rows;i++) {
|
||||
var el=rra.getEl(i,ds_idx);
|
||||
if (el!=undefined) {
|
||||
flot_series.push([timestamp*1000.0,el]);
|
||||
}
|
||||
timestamp+=step;
|
||||
} // end for
|
||||
|
||||
return {label: ds_name, data: flot_series, min: first_el*1000.0, max:last_update*1000.0};
|
||||
}
|
||||
|
||||
// return an object with an array containing Flot elements, one per DS
|
||||
// min and max are also returned
|
||||
function rrdRRA2FlotObj(rrd_file,rra_idx,ds_list,want_ds_labels,want_rounding) {
|
||||
var rra=rrd_file.getRRA(rra_idx);
|
||||
var rra_rows=rra.getNrRows();
|
||||
var last_update=rrd_file.getLastUpdate();
|
||||
var step=rra.getStep();
|
||||
if (want_rounding!=false) {
|
||||
// round last_update to step
|
||||
// so that all elements are sync
|
||||
last_update-=(last_update%step);
|
||||
}
|
||||
|
||||
var first_el=last_update-(rra_rows-1)*step;
|
||||
|
||||
var out_el={data:[], min:first_el*1000.0, max:last_update*1000.0};
|
||||
|
||||
for (ds_list_idx in ds_list) {
|
||||
var ds_id=ds_list[ds_list_idx];
|
||||
var ds=rrd_file.getDS(ds_id);
|
||||
var ds_name=ds.getName();
|
||||
var ds_idx=ds.getIdx();
|
||||
|
||||
var timestamp=first_el;
|
||||
var flot_series=[];
|
||||
for (var i=0;i<rra_rows;i++) {
|
||||
var el=rra.getEl(i,ds_idx);
|
||||
if (el!=undefined) {
|
||||
flot_series.push([timestamp*1000.0,el]);
|
||||
}
|
||||
timestamp+=step;
|
||||
} // end for
|
||||
|
||||
var flot_el={data:flot_series};
|
||||
if (want_ds_labels!=false) {
|
||||
var ds_name=ds.getName();
|
||||
flot_el.label= ds_name;
|
||||
}
|
||||
out_el.data.push(flot_el);
|
||||
} //end for ds_list_idx
|
||||
return out_el;
|
||||
}
|
||||
|
||||
// return an object with an array containing Flot elements
|
||||
// have a positive and a negative stack of DSes, plus DSes with no stacking
|
||||
// min and max are also returned
|
||||
// If one_undefined_enough==true, a whole stack is invalidated if a single element
|
||||
// of the stack is invalid
|
||||
function rrdRRAStackFlotObj(rrd_file,rra_idx,
|
||||
ds_positive_stack_list,ds_negative_stack_list,ds_single_list,
|
||||
want_ds_labels,want_rounding,one_undefined_enough) {
|
||||
var rra=rrd_file.getRRA(rra_idx);
|
||||
var rra_rows=rra.getNrRows();
|
||||
var last_update=rrd_file.getLastUpdate();
|
||||
var step=rra.getStep();
|
||||
if (want_rounding!=false) {
|
||||
// round last_update to step
|
||||
// so that all elements are sync
|
||||
last_update-=(last_update%step);
|
||||
}
|
||||
if (one_undefined_enough!=true) { // make sure it is a boolean
|
||||
one_undefined_enough=false;
|
||||
}
|
||||
|
||||
var first_el=last_update-(rra_rows-1)*step;
|
||||
|
||||
var out_el={data:[], min:first_el*1000.0, max:last_update*1000.0};
|
||||
|
||||
// first the stacks stack
|
||||
var stack_els=[ds_positive_stack_list,ds_negative_stack_list];
|
||||
for (stack_list_id in stack_els) {
|
||||
var stack_list=stack_els[stack_list_id];
|
||||
var tmp_flot_els=[];
|
||||
var tmp_ds_ids=[];
|
||||
var tmp_nr_ids=stack_list.length;
|
||||
for (ds_list_idx in stack_list) {
|
||||
var ds_id=stack_list[ds_list_idx];
|
||||
var ds=rrd_file.getDS(ds_id);
|
||||
var ds_name=ds.getName();
|
||||
var ds_idx=ds.getIdx();
|
||||
tmp_ds_ids.push(ds_idx); // getting this is expensive, call only once
|
||||
|
||||
// initialize
|
||||
var flot_el={data:[]}
|
||||
if (want_ds_labels!=false) {
|
||||
var ds_name=ds.getName();
|
||||
flot_el.label= ds_name;
|
||||
}
|
||||
tmp_flot_els.push(flot_el);
|
||||
}
|
||||
|
||||
var timestamp=first_el;
|
||||
for (var row=0;row<rra_rows;row++) {
|
||||
var ds_vals=[];
|
||||
var all_undef=true;
|
||||
var all_def=true;
|
||||
for (var id=0; id<tmp_nr_ids; id++) {
|
||||
var ds_idx=tmp_ds_ids[id];
|
||||
var el=rra.getEl(row,ds_idx);
|
||||
if (el!=undefined) {
|
||||
all_undef=false;
|
||||
ds_vals.push(el);
|
||||
} else {
|
||||
all_def=false;
|
||||
ds_vals.push(0);
|
||||
}
|
||||
} // end for id
|
||||
if (!all_undef) { // if all undefined, skip
|
||||
if (all_def || (!one_undefined_enough)) {
|
||||
// this is a valid column, do the math
|
||||
for (var id=1; id<tmp_nr_ids; id++) {
|
||||
ds_vals[id]+=ds_vals[id-1]; // both positive and negative stack use a +, negative stack assumes negative values
|
||||
}
|
||||
// fill the flot data
|
||||
for (var id=0; id<tmp_nr_ids; id++) {
|
||||
tmp_flot_els[id].data.push([timestamp*1000.0,ds_vals[id]]);
|
||||
}
|
||||
}
|
||||
} // end if
|
||||
|
||||
timestamp+=step;
|
||||
} // end for row
|
||||
|
||||
// put flot data in output object
|
||||
// reverse order so higher numbers are behind
|
||||
for (var id=0; id<tmp_nr_ids; id++) {
|
||||
out_el.data.push(tmp_flot_els[tmp_nr_ids-id-1]);
|
||||
}
|
||||
} //end for stack_list_id
|
||||
|
||||
for (ds_list_idx in ds_single_list) {
|
||||
var ds_id=ds_single_list[ds_list_idx];
|
||||
var ds=rrd_file.getDS(ds_id);
|
||||
var ds_name=ds.getName();
|
||||
var ds_idx=ds.getIdx();
|
||||
|
||||
var timestamp=first_el;
|
||||
var flot_series=[];
|
||||
for (var i=0;i<rra_rows;i++) {
|
||||
var el=rra.getEl(i,ds_idx);
|
||||
if (el!=undefined) {
|
||||
flot_series.push([timestamp*1000.0,el]);
|
||||
}
|
||||
timestamp+=step;
|
||||
} // end for
|
||||
|
||||
var flot_el={data:flot_series};
|
||||
if (want_ds_labels!=false) {
|
||||
var ds_name=ds.getName();
|
||||
flot_el.label= ds_name;
|
||||
}
|
||||
out_el.data.push(flot_el);
|
||||
} //end for ds_list_idx
|
||||
|
||||
return out_el;
|
||||
}
|
||||
|
||||
// return an object with an array containing Flot elements, one per RRD
|
||||
// min and max are also returned
|
||||
function rrdRRAMultiStackFlotObj(rrd_files, // a list of [rrd_id,rrd_file] pairs, all rrds must have the same step
|
||||
rra_idx,ds_id,
|
||||
want_rrd_labels,want_rounding,
|
||||
one_undefined_enough) { // If true, a whole stack is invalidated if a single element of the stack is invalid
|
||||
|
||||
var reference_rra=rrd_files[0][1].getRRA(rra_idx); // get the first one, all should be the same
|
||||
var rows=reference_rra.getNrRows();
|
||||
var step=reference_rra.getStep();
|
||||
var ds_idx=rrd_files[0][1].getDS(ds_id).getIdx(); // this can be expensive, do once (all the same)
|
||||
|
||||
// rrds can be slightly shifted, calculate range
|
||||
var max_ts=null;
|
||||
var min_ts=null;
|
||||
|
||||
// initialize list of rrd data elements
|
||||
var tmp_flot_els=[];
|
||||
var tmp_rras=[];
|
||||
var tmp_last_updates=[];
|
||||
var tmp_nr_ids=rrd_files.length;
|
||||
for (var id=0; id<tmp_nr_ids; id++) {
|
||||
var rrd_file=rrd_files[id][1];
|
||||
var rrd_rra=rrd_file.getRRA(rra_idx);
|
||||
|
||||
var rrd_last_update=rrd_file.getLastUpdate();
|
||||
if (want_rounding!=false) {
|
||||
// round last_update to step
|
||||
// so that all elements are sync
|
||||
rrd_last_update-=(rrd_last_update%step);
|
||||
}
|
||||
tmp_last_updates.push(rrd_last_update);
|
||||
|
||||
var rrd_min_ts=rrd_last_update-(rows-1)*step;
|
||||
if ((max_ts==null) || (rrd_last_update>max_ts)) {
|
||||
max_ts=rrd_last_update;
|
||||
}
|
||||
if ((min_ts==null) || (rrd_min_ts<min_ts)) {
|
||||
min_ts=rrd_min_ts;
|
||||
}
|
||||
|
||||
tmp_rras.push(rrd_rra);
|
||||
|
||||
// initialize
|
||||
var flot_el={data:[]}
|
||||
if (want_rrd_labels!=false) {
|
||||
var rrd_name=rrd_files[id][0];
|
||||
flot_el.label= rrd_name;
|
||||
}
|
||||
tmp_flot_els.push(flot_el);
|
||||
}
|
||||
|
||||
var out_el={data:[], min:min_ts*1000.0, max:max_ts*1000.0};
|
||||
|
||||
for (var ts=min_ts;ts<=max_ts;ts+=step) {
|
||||
var rrd_vals=[];
|
||||
var all_undef=true;
|
||||
var all_def=true;
|
||||
for (var id=0; id<tmp_nr_ids; id++) {
|
||||
var rrd_rra=tmp_rras[id];
|
||||
var rrd_last_update=tmp_last_updates[id];
|
||||
var row_delta=Math.round((rrd_last_update-ts)/step);
|
||||
var el=undefined; // if out of range
|
||||
if ((row_delta>=0) && (row_delta<rows)) {
|
||||
el=rrd_rra.getEl(rows-row_delta-1,ds_idx);
|
||||
}
|
||||
if (el!=undefined) {
|
||||
all_undef=false;
|
||||
rrd_vals.push(el);
|
||||
} else {
|
||||
all_def=false;
|
||||
rrd_vals.push(0);
|
||||
}
|
||||
} // end for id
|
||||
if (!all_undef) { // if all undefined, skip
|
||||
if (all_def || (!one_undefined_enough)) {
|
||||
// this is a valid column, do the math
|
||||
for (var id=1; id<tmp_nr_ids; id++) {
|
||||
rrd_vals[id]+=rrd_vals[id-1];
|
||||
}
|
||||
// fill the flot data
|
||||
for (var id=0; id<tmp_nr_ids; id++) {
|
||||
tmp_flot_els[id].data.push([ts*1000.0,rrd_vals[id]]);
|
||||
}
|
||||
}
|
||||
} // end if
|
||||
} // end for ts
|
||||
|
||||
// put flot data in output object
|
||||
// reverse order so higher numbers are behind
|
||||
for (var id=0; id<tmp_nr_ids; id++) {
|
||||
out_el.data.push(tmp_flot_els[tmp_nr_ids-id-1]);
|
||||
}
|
||||
|
||||
return out_el;
|
||||
}
|
||||
|
||||
// ======================================
|
||||
// Helper class for handling selections
|
||||
// =======================================================
|
||||
function rrdFlotSelection() {
|
||||
this.selection_min=null;
|
||||
this.selection_max=null;
|
||||
};
|
||||
|
||||
// reset to a state where ther is no selection
|
||||
rrdFlotSelection.prototype.reset = function() {
|
||||
this.selection_min=null;
|
||||
this.selection_max=null;
|
||||
};
|
||||
|
||||
// given the selection ranges, set internal variable accordingly
|
||||
rrdFlotSelection.prototype.setFromFlotRanges = function(ranges) {
|
||||
this.selection_min=ranges.xaxis.from;
|
||||
this.selection_max=ranges.xaxis.to;
|
||||
};
|
||||
|
||||
// Return a Flot ranges structure that can be promptly used in setSelection
|
||||
rrdFlotSelection.prototype.getFlotRanges = function() {
|
||||
return { xaxis: {from: this.selection_min, to: this.selection_max}};
|
||||
};
|
||||
|
||||
// return true is a selection is in use
|
||||
rrdFlotSelection.prototype.isSet = function() {
|
||||
return this.selection_min!=null;
|
||||
};
|
||||
|
||||
// Given an array of flot lines, limit to the selection
|
||||
rrdFlotSelection.prototype.trim_flot_data = function(flot_data) {
|
||||
var out_data=[];
|
||||
for (var i=0; i<flot_data.length; i++) {
|
||||
var data_el=flot_data[i];
|
||||
out_data.push({label : data_el.label, data:this.trim_data(data_el.data), color:data_el.color, lines:data_el.lines, yaxis:data_el.yaxis});
|
||||
}
|
||||
return out_data;
|
||||
};
|
||||
|
||||
// Limit to selection the flot series data element
|
||||
rrdFlotSelection.prototype.trim_data = function(data_list) {
|
||||
if (this.selection_min==null) return data_list; // no selection => no filtering
|
||||
|
||||
var out_data=[];
|
||||
for (var i=0; i<data_list.length; i++) {
|
||||
if (data_list[i]==null) continue; // protect
|
||||
var nr=data_list[i][0];
|
||||
if ((nr>=this.selection_min) && (nr<=this.selection_max)) {
|
||||
out_data.push(data_list[i]);
|
||||
}
|
||||
}
|
||||
return out_data;
|
||||
};
|
||||
|
||||
// ======================================
|
||||
// Miscelabeous helper functions
|
||||
// ======================================
|
||||
|
||||
function rfs_format_time(s) {
|
||||
if (s<120) {
|
||||
return s+"s";
|
||||
} else {
|
||||
var s60=s%60;
|
||||
var m=(s-s60)/60;
|
||||
if ((m<10) && (s60>9)) {
|
||||
return m+":"+s60+"min";
|
||||
} if (m<120) {
|
||||
return m+"min";
|
||||
} else {
|
||||
var m60=m%60;
|
||||
var h=(m-m60)/60;
|
||||
if ((h<12) && (m60>9)) {
|
||||
return h+":"+m60+"h";
|
||||
} if (h<48) {
|
||||
return h+"h";
|
||||
} else {
|
||||
var h24=h%24;
|
||||
var d=(h-h24)/24;
|
||||
if ((d<7) && (h24>0)) {
|
||||
return d+" days "+h24+"h";
|
||||
} if (d<60) {
|
||||
return d+" days";
|
||||
} else {
|
||||
var d30=d%30;
|
||||
var mt=(d-d30)/30;
|
||||
return mt+" months";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,173 @@
|
||||
/*
|
||||
* Combine multiple rrdFiles into one object
|
||||
* It implements the same interface, but changing the content
|
||||
*
|
||||
* Part of the javascriptRRD package
|
||||
* Copyright (c) 2010 Igor Sfiligoi, isfiligoi@ucsd.edu
|
||||
*
|
||||
* Original repository: http://javascriptrrd.sourceforge.net/
|
||||
*
|
||||
* MIT License [http://www.opensource.org/licenses/mit-license.php]
|
||||
*
|
||||
*/
|
||||
|
||||
// ============================================================
|
||||
// RRD RRA handling class
|
||||
function RRDRRASum(rra_list,offset_list,treat_undefined_as_zero) {
|
||||
this.rra_list=rra_list;
|
||||
this.offset_list=offset_list;
|
||||
this.treat_undefined_as_zero=treat_undefined_as_zero;
|
||||
this.row_cnt= this.rra_list[0].getNrRows();
|
||||
}
|
||||
|
||||
RRDRRASum.prototype.getIdx = function() {
|
||||
return this.rra_list[0].getIdx();
|
||||
}
|
||||
|
||||
// Get number of rows/columns
|
||||
RRDRRASum.prototype.getNrRows = function() {
|
||||
return this.row_cnt;
|
||||
}
|
||||
RRDRRASum.prototype.getNrDSs = function() {
|
||||
return this.rra_list[0].getNrDSs();
|
||||
}
|
||||
|
||||
// Get RRA step (expressed in seconds)
|
||||
RRDRRASum.prototype.getStep = function() {
|
||||
return this.rra_list[0].getStep();
|
||||
}
|
||||
|
||||
// Get consolidation function name
|
||||
RRDRRASum.prototype.getCFName = function() {
|
||||
return this.rra_list[0].getCFName();
|
||||
}
|
||||
|
||||
RRDRRASum.prototype.getEl = function(row_idx,ds_idx) {
|
||||
var outSum=0.0;
|
||||
for (var i in this.rra_list) {
|
||||
var offset=this.offset_list[i];
|
||||
if ((row_idx+offset)<this.row_cnt) {
|
||||
var rra=this.rra_list[i];
|
||||
val=rra.getEl(row_idx+offset,ds_idx);
|
||||
} else {
|
||||
/* out of row range -> undefined*/
|
||||
val=undefined;
|
||||
}
|
||||
/* treat all undefines as 0 for now */
|
||||
if (val==undefined) {
|
||||
if (this.treat_undefined_as_zero) {
|
||||
val=0;
|
||||
} else {
|
||||
/* if even one element is undefined, the whole sum is undefined */
|
||||
outSum=undefined;
|
||||
break;
|
||||
}
|
||||
}
|
||||
outSum+=val;
|
||||
}
|
||||
return outSum;
|
||||
}
|
||||
|
||||
// Low precision version of getEl
|
||||
// Uses getFastDoubleAt
|
||||
RRDRRASum.prototype.getElFast = function(row_idx,ds_idx) {
|
||||
var outSum=0.0;
|
||||
for (var i in this.rra_list) {
|
||||
var offset=this.offset_list[i];
|
||||
if ((row_id+offset)<this.row_cnt) {
|
||||
var rra=this.rra_list[i];
|
||||
val=rra.getElFast(row_idx+offset,ds_idx);
|
||||
} else {
|
||||
/* out of row range -> undefined*/
|
||||
val=undefined;
|
||||
}
|
||||
/* treat all undefines as 0 for now */
|
||||
if (val==undefined) {
|
||||
if (this.treat_undefined_as_zero) {
|
||||
val=0;
|
||||
} else {
|
||||
/* if even one element is undefined, the whole sum is undefined */
|
||||
outSum=undefined;
|
||||
break;
|
||||
}
|
||||
}
|
||||
outSum+=val;
|
||||
}
|
||||
return outSum;
|
||||
}
|
||||
|
||||
/*** INTERNAL ** sort by lastupdate, descending ***/
|
||||
|
||||
function rrdFileSort(f1, f2) {
|
||||
return f2.getLastUpdate()-f1.getLastUpdate();
|
||||
}
|
||||
|
||||
/*
|
||||
* Sum several RRDfiles together
|
||||
* They must all have the same DSes and the same RRAs
|
||||
*/
|
||||
|
||||
function RRDFileSum(file_list,treat_undefined_as_zero) {
|
||||
if (treat_undefined_as_zero==undefined) {
|
||||
this.treat_undefined_as_zero=true;
|
||||
} else {
|
||||
this.treat_undefined_as_zero=treat_undefined_as_zero;
|
||||
}
|
||||
this.file_list=file_list;
|
||||
this.file_list.sort();
|
||||
|
||||
// ===================================
|
||||
// Start of user functions
|
||||
|
||||
this.getMinStep = function() {
|
||||
return this.file_list[0].getMinStep();
|
||||
}
|
||||
this.getLastUpdate = function() {
|
||||
return this.file_list[0].getLastUpdate();
|
||||
}
|
||||
|
||||
this.getNrDSs = function() {
|
||||
return this.file_list[0].getNrDSs();
|
||||
}
|
||||
|
||||
this.getDSNames = function() {
|
||||
return this.file_list[0].getDSNames();
|
||||
}
|
||||
|
||||
this.getDS = function(id) {
|
||||
return this.file_list[0].getDS(id);
|
||||
}
|
||||
|
||||
this.getNrRRAs = function() {
|
||||
return this.file_list[0].getNrRRAs();
|
||||
}
|
||||
|
||||
this.getRRAInfo = function(idx) {
|
||||
return this.file_list[0].getRRAInfo(idx);
|
||||
}
|
||||
|
||||
this.getRRA = function(idx) {
|
||||
var rra_info=this.getRRAInfo(idx);
|
||||
var rra_step=rra_info.getStep();
|
||||
var realLastUpdate=undefined;
|
||||
|
||||
var rra_list=new Array();
|
||||
var offset_list=new Array();
|
||||
for (var i in this.file_list) {
|
||||
file=file_list[i];
|
||||
fileLastUpdate=file.getLastUpdate();
|
||||
if (realLastUpdate!=undefined) {
|
||||
fileSkrew=Math.floor((realLastUpdate-fileLastUpdate)/rra_step);
|
||||
} else {
|
||||
fileSkrew=0;
|
||||
firstLastUpdate=fileLastUpdate;
|
||||
}
|
||||
offset_list.push(fileSkrew);
|
||||
fileRRA=file.getRRA(idx);
|
||||
rra_list.push(fileRRA);
|
||||
}
|
||||
|
||||
return new RRDRRASum(rra_list,offset_list,this.treat_undefined_as_zero);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
<script type="text/javascript" src="/js/jsrrd/jsrrd/binaryXHR.js"></script>
|
||||
<script type="text/javascript" src="/js/jsrrd/jsrrd/rrdFile.js"></script>
|
||||
<script type="text/javascript" src="/js/jsrrd/jsrrd/rrdFlotSupport.js"></script>
|
||||
<script type="text/javascript" src="/js/jsrrd/jsrrd/rrdFlot.js"></script>
|
||||
<script type="text/javascript" src="/js/jsrrd/flot/jquery.js"></script>
|
||||
<script type="text/javascript" src="/js/jsrrd/flot/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="/js/jsrrd/flot/jquery.flot.selection.js"></script>
|
||||
|
||||
<h3 id="title">Dashboard</h1>
|
||||
|
||||
<table>
|
||||
<tr><th>Memory</th><th>Load</th></tr>
|
||||
<tr><td><div id="plot_memory"></div></td><td><div id="plot_load"></div></td></tr>
|
||||
</table>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function update_fname(rrd_data, args) {
|
||||
var graph_opts={};
|
||||
var ds_graph_opts={};
|
||||
var f=new rrdFlot(args['plot_id'],rrd_data,graph_opts,ds_graph_opts, args['si_suffix']);
|
||||
}
|
||||
|
||||
function update_fname_handler(bf, args) {
|
||||
var rrd_data=undefined;
|
||||
try {
|
||||
var rrd_data=new RRDFile(bf);
|
||||
} catch(err) {
|
||||
alert("File "+fname+" is not a valid RRD archive!");
|
||||
}
|
||||
if (rrd_data!=undefined) {
|
||||
update_fname(rrd_data, args);
|
||||
}
|
||||
}
|
||||
|
||||
function fname_update(fname, plot_id, si_suffix) {
|
||||
try {
|
||||
FetchBinaryURLAsync(fname, update_fname_handler, {plot_id: plot_id, si_suffix: si_suffix});
|
||||
} catch (err) {
|
||||
alert("Failed loading "+fname+"\n"+err);
|
||||
}
|
||||
}
|
||||
|
||||
fname_update("/rrd/memory-used.rrd", "plot_memory", true);
|
||||
fname_update("/rrd/load.rrd", "plot_load", false);
|
||||
|
||||
</script>
|
||||
Loading…
Reference in new issue