From 63d6a62c61036aa0f062aa40b77e93811b8e3be1 Mon Sep 17 00:00:00 2001 From: Igor Sfiligoi Date: Fri, 1 Nov 2013 22:55:24 +0000 Subject: Port most features from rrdFlot's rrdflot_defaults - still missing the timezone --- src/lib/rrdFlotMatrix.js | 245 ++++++++++++++++++++++++++++++++++++----------- 1 file 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; ithis.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;j0) { + for (var i=0; i