[PATCH widget-toolkit] fix #7721: fix zoom interaction on charts with no initial store

[PATCH widget-toolkit] fix #7721: fix zoom interaction on charts with no initial store

[Dominik Csapak]

In our current ExtJs version (7.0), having animations disabled on charts
breaks the zoom interaction. One can zoom in and out once, but never
again.

We generally keep animations enabled on our proxmoxRRDChart, but only
after the store's first load, to avoid animating from the empty store to
the initial data. This happens in initComponent on the store that was
given during instantiation.

In some cases, however (e.g. the PBS datastore summary panel), the chart
has no initial store and instead gets one via 'setStore'. Here, the
event of the old (non-existent) store was never fired, so animations
were never activated and the zoom interaction was buggy.

Fix this by overriding `setStore` to install an event handler for the
new store that enables the animations. If this runs more than once, it
would just set the animation value to the same again, which is fine.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/panel/RRDChart.js | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/panel/RRDChart.js b/src/panel/RRDChart.js
index 82615ce..b352202 100644
--- a/src/panel/RRDChart.js
+++ b/src/panel/RRDChart.js
@@ -160,6 +160,29 @@ Ext.define('Proxmox.widget.RRDChart', {
         },
     },
 
+    // enable animation after the store is loaded
+    delayAnimationStart() {
+        let me = this;
+        me.store.onAfter(
+            'load',
+            function () {
+                me.setAnimation({
+                    duration: 200,
+                    easing: 'easeIn',
+                });
+            },
+            this,
+            { single: true },
+        );
+    },
+
+    setStore: function (store) {
+        let me = this;
+        let res = Ext.chart.CartesianChart.prototype.setStore.call(me, store);
+        me.delayAnimationStart();
+        return res;
+    },
+
     width: 770,
     height: 300,
     animation: false,
@@ -340,18 +363,7 @@ Ext.define('Proxmox.widget.RRDChart', {
             );
         });
 
-        // enable animation after the store is loaded
-        me.store.onAfter(
-            'load',
-            function () {
-                me.setAnimation({
-                    duration: 200,
-                    easing: 'easeIn',
-                });
-            },
-            this,
-            { single: true },
-        );
+        me.delayAnimationStart();
 
         me.checkThemeColors();
 
-- 
2.47.3