diff options
author | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-01 22:55:24 +0000 |
---|---|---|
committer | Igor Sfiligoi <isfiligoi@ucsd.edu> | 2013-11-01 22:55:24 +0000 |
commit | 63d6a62c61036aa0f062aa40b77e93811b8e3be1 (patch) | |
tree | 01e3c92e565f655ebed6bdb3af2f0f3950eacad1 /src/lib/rrdFlotMatrix.js | |
parent | efd809ebc45ef23c06a02f53217241567f02d544 (diff) |
Port most features from rrdFlot's rrdflot_defaults - still missing the timezone
Diffstat (limited to 'src/lib/rrdFlotMatrix.js')
-rw-r--r-- | src/lib/rrdFlotMatrix.js | 245 |
1 files changed, 190 insertions, 55 deletions
diff --git a/src/lib/rrdFlotMatrix.js b/src/lib/rrdFlotMatrix.js index 0d5be93..f5bdc09 100644 --- a/src/lib/rrdFlotMatrix.js +++ b/src/lib/rrdFlotMatrix.js @@ -58,15 +58,50 @@ * color: rrd_index // see Flot docs for details
* lines: { show:true, fill: true, fillColor:color } // see Flot docs for details
* }
+ *
+ * //overwrites other defaults; mostly used for linking via the URL
+ * rrdflot_defaults defaults (see Flot docs for details)
+ * {
+ * graph_only: false // If true, limit the display to the graph only
+ * legend: "Top" //Starting location of legend. Options are:
+ * // "Top","Bottom","TopRight","BottomRight","None".
+ * num_cb_rows: 12 //How many rows of DS checkboxes per column.
+ * use_element_buttons: false //To be used in conjunction with num_cb_rows: This option
+ * // creates a button above every column, which selects
+ * // every element in the column.
+ * multi_rra: false //"true" appends the name of the RRA consolidation function (CF)
+ * // (AVERAGE, MIN, MAX or LAST) to the name of the RRA. Useful
+ * // for RRAs over the same interval with different CFs.
+ * use_checked_RRDs: false //Use the list checked_RRDs below.
+ * checked_RRDs: [] //List of elements to be checked by default when graph is loaded.
+ * // Overwrites graph options.
+ * use_rra: false //Whether to use the rra index specified below.
+ * rra: 0 //RRA (rra index in rrd) to be selected when graph is loaded.
+ * use_windows: false //Whether to use the window zoom specifications below.
+ * window_min: 0 //Sets minimum for window zoom. X-axis usually in unix time.
+ * window_max: 0 //Sets maximum for window zoom.
+ * graph_height: "300px" //Height of main graph.
+ * graph_width: "500px" //Width of main graph.
+ * scale_height: "110px" //Height of small scaler graph.
+ * scale_width: "250px" //Width of small scaler graph.
+ * }
*/
+var local_checked_RRDs = [];
+var selected_rra = 0;
+var window_min=0;
+var window_max=0;
+var elem_group=null;
+
+
function rrdFlotMatrix(html_id, rrd_files, ds_list, graph_options, rrd_graph_options,rrdflot_defaults) {
this.html_id=html_id;
this.rrd_files=rrd_files;
if (rrdflot_defaults==null) {
- this.rrdflot_defaults=new Object();
+ this.rrdflot_defaults=new Object(); // empty object, just not to be null
+ } else {
+ this.rrdflot_defaults=rrdflot_defaults;
}
- else {this.rrdflot_defaults=rrdflot_defaults;}
if (ds_list==null) {
this.ds_list=[];
var rrd_file=this.rrd_files[0][1]; // get the first one... they are all the same
@@ -92,6 +127,10 @@ function rrdFlotMatrix(html_id, rrd_files, ds_list, graph_options, rrd_graph_opt this.populateRes();
this.populateRRDcb();
this.drawFlotGraph()
+
+ if (this.rrdflot_defaults.graph_only==true) {
+ this.cleanHTMLCruft();
+ }
}
@@ -114,6 +153,7 @@ rrdFlotMatrix.prototype.createHTML = function() { // Now create the layout
var external_table=document.createElement("Table");
+ this.external_table=external_table;
// DS rows: select DS
var rowDS=external_table.insertRow(-1);
@@ -143,8 +183,12 @@ rrdFlotMatrix.prototype.createHTML = function() { var cellGraph=rowGraph.insertCell(-1);
cellGraph.colSpan=3;
var elGraph=document.createElement("Div");
- elGraph.style.width="500px";
- elGraph.style.height="300px";
+ if(this.rrdflot_defaults.graph_width!=null) {
+ elGraph.style.width=this.rrdflot_defaults.graph_width;
+ } else {elGraph.style.width="500px";}
+ if(this.rrdflot_defaults.graph_height!=null) {
+ elGraph.style.height=this.rrdflot_defaults.graph_height;
+ } else {elGraph.style.height="300px";}
elGraph.id=this.graph_id;
cellGraph.appendChild(elGraph);
@@ -175,8 +219,12 @@ rrdFlotMatrix.prototype.createHTML = function() { var cellScale=rowScale.insertCell(-1);
cellScale.align="right";
var elScale=document.createElement("Div");
- elScale.style.width="250px";
- elScale.style.height="110px";
+ if(this.rrdflot_defaults.scale_width!=null) {
+ elScale.style.width=this.rrdflot_defaults.scale_width;
+ } else {elScale.style.width="250px";}
+ if(this.rrdflot_defaults.scale_height!=null) {
+ elScale.style.height=this.rrdflot_defaults.scale_height;
+ } else {elScale.style.height="110px";}
elScale.id=this.scale_id;
cellScale.appendChild(elScale);
@@ -194,6 +242,20 @@ rrdFlotMatrix.prototype.createHTML = function() { base_el.appendChild(external_table);
};
+// ===============================================
+// Remove all HTMl elements but the graph
+rrdFlotMatrix.prototype.cleanHTMLCruft = function() {
+ var rf_this=this; // use obj inside other functions
+
+ // delete 2 top and 1 bottom rows... graph is in the middle
+ this.external_table.deleteRow(-1);
+ this.external_table.deleteRow(0);
+ this.external_table.deleteRow(0);
+
+ var rrd_el=document.getElementById(this.rrd_cb_id);
+ rrd_el.removeChild(rrd_el.lastChild);
+}
+
// ======================================
// Populate DSs, RRA and RRD info
rrdFlotMatrix.prototype.populateDS = function() {
@@ -223,48 +285,88 @@ rrdFlotMatrix.prototype.populateRes = function() { var rows=rra.getNrRows();
var period=step*rows;
var rra_label=rfs_format_time(step)+" ("+rfs_format_time(period)+" total)";
+ if (this.rrdflot_defaults.multi_rra) rra_label+=" "+rra.getCFName();
form_el.appendChild(new Option(rra_label,i));
}
+ if(this.rrdflot_defaults.use_rra) {form_el.selectedIndex = this.rrdflot_defaults.rra;}
};
rrdFlotMatrix.prototype.populateRRDcb = function() {
+ var rf_this=this; // use obj inside other functions
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);
-
+
+ //Create a table within a table to arrange
+ // checkbuttons into two or more columns
var table_el=document.createElement("Table");
var row_el=table_el.insertRow(-1);
row_el.vAlign="top";
var cell_el=null; // will define later
+ if (this.rrdflot_defaults.num_cb_rows==null) {
+ this.rrdflot_defaults.num_cb_rows=12;
+ }
// now populate with RRD info
var nrRRDs=this.rrd_files.length;
+ var elem_group_number = 0;
+
for (var i=0; i<nrRRDs; i++) {
- if ((i%15)==0) { // one column every 15 elements
- cell_el=row_el.insertCell(-1);
+
+ if ((i%this.rrdflot_defaults.num_cb_rows)==0) { // one column every x RRDs
+ if(this.rrdflot_defaults.use_element_buttons) {
+ cell_el=row_el.insertCell(-1); //make next element column
+ if(nrRRDs>this.rrdflot_defaults.num_cb_rows) { //if only one column, no need for a button
+ elem_group_number = (i/this.rrdflot_defaults.num_cb_rows)+1;
+ var elGroupSelect = document.createElement("input");
+ elGroupSelect.type = "button";
+ elGroupSelect.value = "Group "+elem_group_number;
+ elGroupSelect.onclick = (function(e) { //lambda function!!
+ return function() {rf_this.callback_elem_group_changed(e);};})(elem_group_number);
+
+ cell_el.appendChild(elGroupSelect);
+ cell_el.appendChild(document.createElement('br')); //add space between the two
+ }
+ } else {
+ //just make next element column
+ 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.rrdflot_defaults.use_checked_RRDs) {
+ if(this.rrdflot_defaults.checked_RRDs.length==0) {
+ var checked=(i==0); // only first checked by default
+ } else{checked=false;}
+ } else {var checked=(i==0);}
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
+ // use label as a second choiceit
title=rgo['label'];
- } // else leave the ds name
- if (rgo['checked']!=null) {
- // if the user provided the title, use it
- checked=rgo['checked'];
+ } // else leave the rrd name
+ if(this.rrdflot_defaults.use_checked_RRDs) {
+ if(this.rrdflot_defaults.checked_RRDs.length==0) {
+ // if the user provided the title, use it
+ checked=rgo['checked'];
+ }
+ } else {
+ if (rgo['checked']!=null) {
+ checked=rgo['checked'];
+ }
}
}
-
+ if(this.rrdflot_defaults.use_checked_RRDs) {
+ if(this.rrdflot_defaults.checked_RRDs==null) {continue;}
+ for(var j=0;j<this.rrdflot_defaults.checked_RRDs.length;j++){
+ if (name==this.rrdflot_defaults.checked_RRDs[j]) {checked=true;}
+ }
+ }
var cb_el = document.createElement("input");
cb_el.type = "checkbox";
cb_el.name = "rrd";
@@ -288,6 +390,12 @@ rrdFlotMatrix.prototype.drawFlotGraph = function() { oSelect=document.getElementById(this.res_id);
var rra_idx=Number(oSelect.options[oSelect.selectedIndex].value);
+ selected_rra=rra_idx;
+ if(this.rrdflot_defaults.use_rra) {
+ oSelect.options[oSelect.selectedIndex].value = this.rrdflot_defaults.rra;
+ rra_idx = this.rrdflot_defaults.rra;
+ }
+
// Extract ds info ... to be finished
var ds_positive_stack=null;
@@ -389,23 +497,6 @@ rrdFlotMatrix.prototype.bindFlotGraph = function(flot_obj) { grid: { hoverable: true },
};
- if (this.graph_options!=null) {
- if (typeof(this.graph_options.tooltip)=='boolean'&&this.graph_options.tooltip==true) {
- //nothing
- }
- else if(typeof(this.graph_options.tooltip)=='boolean'&&this.graph_options.tooltip==false) {
- graph_options.grid.hoverable=false;
- graph_options.tooltip=false;
- }
- else if(typeof(this.graph_options.tooltip)=='undefined') {
- //defaults to true
- }
- else {
- graph_options.grid.hoverable=false;
- graph_options.tooltip=false;
- }
- }
-
if (legend_id=="None") {
// do nothing
} else {
@@ -413,34 +504,33 @@ rrdFlotMatrix.prototype.bindFlotGraph = function(flot_obj) { graph_options.legend.position=legend_id;
}
+ if (this.graph_options!=null) {
+ graph_options=populateGraphOptions(graph_options,this.graph_options);
+ }
+
+ if (graph_options.tooltip==false) {
+ // avoid the need for the caller specify both
+ graph_options.grid.hoverable=false;
+ }
+
+
if (this.selection_range.isSet()) {
var selection_range=this.selection_range.getFlotRanges();
+ if(this.rrdflot_defaults.use_windows) {
+ graph_options.xaxis.min = this.rrdflot_defaults.window_min;
+ graph_options.xaxis.max = this.rrdflot_defaults.window_max;
+ } else {
graph_options.xaxis.min=selection_range.xaxis.from;
graph_options.xaxis.max=selection_range.xaxis.to;
+ }
+ } else if(this.rrdflot_defaults.use_windows) {
+ graph_options.xaxis.min = this.rrdflot_defaults.window_min;
+ graph_options.xaxis.max = this.rrdflot_defaults.window_max;
} 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},
@@ -456,6 +546,16 @@ rrdFlotMatrix.prototype.bindFlotGraph = function(flot_obj) { this.graph = $.plot($(graph_jq_id), graph_data, graph_options);
this.scale = $.plot($(scale_jq_id), scale_data, scale_options);
+ if(this.rrdflot_defaults.use_windows) {
+ ranges = {};
+ ranges.xaxis = [];
+ ranges.xaxis.from = this.rrdflot_defaults.window_min;
+ ranges.xaxis.to = this.rrdflot_defaults.window_max;
+ rf_this.scale.setSelection(ranges,true);
+ window_min = ranges.xaxis.from;
+ window_max = ranges.xaxis.to;
+ }
+
if (this.selection_range.isSet()) {
this.scale.setSelection(this.selection_range.getFlotRanges(),true); //don't fire event, no need
}
@@ -466,6 +566,8 @@ rrdFlotMatrix.prototype.bindFlotGraph = function(flot_obj) { rf_this.selection_range.setFromFlotRanges(ranges);
graph_options.xaxis.min=ranges.xaxis.from;
graph_options.xaxis.max=ranges.xaxis.to;
+ window_min = ranges.xaxis.from;
+ window_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
@@ -507,3 +609,36 @@ rrdFlotMatrix.prototype.callback_legend_changed = function() { this.drawFlotGraph();
};
+rrdFlotMatrix.prototype.callback_elem_group_changed = function(num) {
+
+ 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(Math.floor(i/this.rrdflot_defaults.num_cb_rows)==num-1) {oCB.rrd[i].checked=true; }
+ else {oCB.rrd[i].checked=false;}
+ }
+ }
+ this.drawFlotGraph()
+};
+
+function populateGraphOptions(me, other) {
+ for (e in other) {
+ if (me[e]!=undefined) {
+ if (Object.prototype.toString.call(other[e])=="[object Object]") {
+ me[e]=populateGraphOptions(me[e],other[e]);
+ } else {
+ me[e]=other[e];
+ }
+ } else {
+ /// create a new one
+ if (Object.prototype.toString.call(other[e])=="[object Object]") {
+ // This will do a deep copy
+ me[e]=populateGraphOptions({},other[e]);
+ } else {
+ me[e]=other[e];
+ }
+ }
+ }
+ return me;
+};
|