Port most features from rrdFlot's rrdflot_defaults - still missing the timezone

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;

+};