panel/RRDChart: fix legend/undoZoom

the legend is by default of type 'sprite', rever to 'dom'
but we now have to unset the '.legend', else on destruction
extjs tries to destroy it twice

also change the onAfterAnimation listener to 'redraw', since
the original event does not exist anymore, add a buffer to it
so that it is not that heavy

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

src/css/ext6-pmx.css

@@ -122,3 +122,8 @@ div.right-aligned {
 .x-treelist-pve-nav {
     background-color: #f5f5f5;
 }
+
+/* fix padding for legend in header */
+.x-legend-inner {
+    padding: 0;
+}

src/panel/RRDChart.js

@@ -121,6 +121,9 @@ Ext.define('Proxmox.widget.RRDChart', {
 	},
 
 	onAfterAnimation: function(chart, eopts) {
+	    if (!chart.header || !chart.header.tools) {
+		return;
+	    }
 	    // if the undo button is disabled, disable our tool
 	    let ourUndoZoomButton = chart.header.tools[0];
 	    let undoButton = chart.interactions[0].getUndoButton();
@@ -137,10 +140,16 @@ Ext.define('Proxmox.widget.RRDChart', {
 	},
     ],
     legend: {
+	type: 'dom',
 	padding: 0,
     },
     listeners: {
-	animationend: 'onAfterAnimation',
+	redraw: {
+	    fn: 'onAfterAnimation',
+	    options: {
+		buffer: 500,
+	    },
+	},
     },
 
     constructor: function(config) {
@@ -200,6 +209,7 @@ Ext.define('Proxmox.widget.RRDChart', {
 	if (me.header && me.legend) {
 	    me.header.padding = '4 9 4';
 	    me.header.add(me.legend);
+	    me.legend = undefined;
 	}
 
 	if (!me.noTool) {