[pve-devel] applied: [PATCH] rrd charts: add legend to header for better space usage

Thomas Lamprecht t.lamprecht at proxmox.com
Fri May 29 19:31:54 CEST 2020


Docking the legend to the bottom took space away from the chart, and
was the just used as the simplest solution when it was implemented.

The panel header has enough spaces for any reasonable number of
different series in a chart, so move it there.

Drop then the legend toggle tool from the header as it isn't required
anymore..

Signed-off-by: Thomas Lamprecht <t.lamprecht at proxmox.com>
---
 panel/RRDChart.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/panel/RRDChart.js b/panel/RRDChart.js
index ad991ec..f09d565 100644
--- a/panel/RRDChart.js
+++ b/panel/RRDChart.js
@@ -70,7 +70,7 @@ Ext.define('Proxmox.widget.RRDChart', {
 	},
     ],
     legend: {
-	docked: 'bottom'
+	padding: 0,
     },
     axes: [
 	{
@@ -121,8 +121,12 @@ Ext.define('Proxmox.widget.RRDChart', {
 
 	me.axes[0].setTitle(axisTitle);
 
+	me.updateHeader();
+	me.header.padding = '4 9 4';
+	me.header.add(me.legend);
+
 	if (!me.noTool) {
-	    me.addTool([{
+	    me.addTool({
 		type: 'minus',
 		disabled: true,
 		tooltip: gettext('Undo Zoom'),
@@ -132,15 +136,7 @@ Ext.define('Proxmox.widget.RRDChart', {
 			undoButton.handler();
 		    }
 		}
-	    },{
-		type: 'restore',
-		tooltip: gettext('Toggle Legend'),
-		handler: function(){
-		    if (me.legend) {
-			me.legend.setVisible(!me.legend.isVisible());
-		    }
-		}
-	    }]);
+	    });
 	}
 
 	// add a series for each field we get
-- 
2.20.1





More information about the pve-devel mailing list