[pve-devel] [PATCH manager v3] add undo Zoom Button

Dominik Csapak d.csapak at proxmox.com
Tue May 3 09:12:11 CEST 2016


this adds a decent undo zoom button, which is only enabled
when the chart is zoomed

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
changes since v2:
 * fixed lint errors
 www/manager6/panel/RRDChart.js | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/www/manager6/panel/RRDChart.js b/www/manager6/panel/RRDChart.js
index 2b3db50..69998b0 100644
--- a/www/manager6/panel/RRDChart.js
+++ b/www/manager6/panel/RRDChart.js
@@ -5,7 +5,9 @@ Ext.define('PVE.widget.RRDChart', {
 
     width: 800,
     height: 300,
-    interactions: 'crosszoom',
+    interactions: [{
+	type: 'crosszoom'
+    }],
     axes: [{
 	type: 'numeric',
 	position: 'left',
@@ -24,7 +26,8 @@ Ext.define('PVE.widget.RRDChart', {
 	width: 140
     },
     listeners: {
-	afterrender: 'onAfterRender'
+	afterrender: 'onAfterRender',
+	animationend: 'onAfterAnimation'
     },
 
     bytesArr : [
@@ -108,6 +111,18 @@ Ext.define('PVE.widget.RRDChart', {
 	}
 	me.axes[0].setTitle(axisTitle);
 
+
+	me.addTool({
+	    type: 'minus',
+	    disabled: true,
+	    tooltip: gettext('Undo Zoom'),
+	    handler: function(){
+		var undoButton = me.interactions[0].getUndoButton();
+		if (undoButton.handler) {
+		    undoButton.handler();
+		}
+	    }
+	});
 	// add a series for each field we get
 	me.fields.forEach(function(item, index){
 	    var title = item;
@@ -144,6 +159,14 @@ Ext.define('PVE.widget.RRDChart', {
 	});
     },
 
+    onAfterAnimation: function(chart, eopts) {
+	// if the undobuton is disabled,
+	// disable our tool
+	var ourUndoZoomButton = chart.tools[0];
+	var undoButton = chart.interactions[0].getUndoButton();
+	ourUndoZoomButton.setDisabled(undoButton.isDisabled());
+    },
+
     initComponent: function() {
 	var me = this;
 
-- 
2.1.4





More information about the pve-devel mailing list