From ee3b82fe0d8105082f4fc484b4ccd0fe1a81d071 Mon Sep 17 00:00:00 2001
From: Frank Wuerthwein <fkw@ucsd.edu>
Date: Sat, 28 Feb 2009 03:56:32 +0000
Subject: Add reset selection button

---
 src/lib/rrdFlot.js | 37 ++++++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/lib/rrdFlot.js b/src/lib/rrdFlot.js
index 3883e5c..96b71ef 100644
--- a/src/lib/rrdFlot.js
+++ b/src/lib/rrdFlot.js
@@ -67,6 +67,7 @@ rrdFlot.prototype.createHTML = function() {
   // Header rwo: resulution select and DS selection title
   var rowHeader=external_table.insertRow(-1);
   var cellRes=rowHeader.insertCell(-1);
+  cellRes.colSpan=2
   cellRes.appendChild(document.createTextNode("Resolution:"));
   var forRes=document.createElement("Select");
   forRes.id=this.res_id;
@@ -80,6 +81,7 @@ rrdFlot.prototype.createHTML = function() {
   // Graph row: main graph and DS selection block
   var rowGraph=external_table.insertRow(-1);
   var cellGraph=rowGraph.insertCell(-1);
+  cellGraph.colSpan=2;
   var elGraph=document.createElement("Div");
   elGraph.style.width="500px";
   elGraph.style.height="300px";
@@ -96,12 +98,22 @@ rrdFlot.prototype.createHTML = function() {
   // Scale row: scaled down selection graph
   var rowScale=external_table.insertRow(-1);
   var cellScale=rowScale.insertCell(-1);
+  cellScale.align="right";
   var elScale=document.createElement("Div");
-  elScale.style.width="400px";
+  elScale.style.width="250px";
   elScale.style.height="75px";
   elScale.id=this.scale_id;
   cellScale.appendChild(elScale);
   
+  var cellScaleReset=rowScale.insertCell(-1);
+  //cellScaleReset.vAlign="top";
+  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);
 };
 
@@ -274,11 +286,11 @@ rrdFlot.prototype.bindFlotGraph = function(flot_obj) {
   var graph_data=this.selection_range.trim_flot_data(flot_data);
   var scale_data=flot_data;
 
-  var graph = $.plot($(graph_jq_id), graph_data, graph_options);
-  var scale = $.plot($(scale_jq_id), scale_data, scale_options);
+  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()) {
-    scale.setSelection(this.selection_range.getFlotRanges(),true); //don't fire event, no need
+    this.scale.setSelection(this.selection_range.getFlotRanges(),true); //don't fire event, no need
   }
 
   // now connect the two    
@@ -287,14 +299,21 @@ rrdFlot.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;
-      graph = $.plot($(graph_jq_id), rf_this.selection_range.trim_flot_data(flot_data), graph_options);
+      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
-      scale.setSelection(ranges, true);
+      rf_this.scale.setSelection(ranges, true);
   });
     
   $(scale_jq_id).bind("plotselected", function (event, ranges) {
-      graph.setSelection(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();
+      rf_this.graph = $.plot($(graph_jq_id), rf_this.selection_range.trim_flot_data(flot_data), graph_options);
   });
 };
 
@@ -307,3 +326,7 @@ rrdFlot.prototype.callback_ds_cb_changed = function() {
   this.drawFlotGraph();
 };
 
+rrdFlot.prototype.callback_scale_reset = function() {
+  this.scale.clearSelection();
+};
+
-- 
cgit v1.2.3