[pmg-devel] [PATCH widget-toolkit] RRDChart: fix customizing axes in a subclass

[Dominik Csapak <d.csapak@proxmox.com>]

the introduction of the NumericBase2 segmenter in commit
 9531c65 (rrd chart: fix y-axis segmentation when using powerOfTwo)

changed the way the axes are defined and created. The commit message
noted that we can't override the axes config anymore but that we did not
use that. It actually was used in the PMG dashboard with the 'MiniGraph'
subclass. Luckily the configs were similar enough so that it did not
matter much, so nobody seemed to notice.

On recent examination of the charts, the labels of the axes were
overlapping each other in certain conditions, and then it became
apparent that the customization there for the axis did not apply
anymore.

To fix it, move the axes definition back to the class config, and
overwrite the segmenter on each left or right 'numeric' axis if
necessary.

By overwriting it in 'config.axes' (and me.config.axes as fallback)
we're able to use:
* a default config (from the class definition, lands in `me.config`)
* a subclass override (lands also in `me.config`)
* overrides on actual creation (lands in `config`)

I examined if we can override/set this config later e.g. in the
initComponent, since a manual override + class config would be merged
there, but it seems that the chart initializes the axes already before
the initComponent.

Using 'setSegmenter' later on is also not possible really, because for
some reason this only changes the top-most point in the axis labels, but
not the intermediate ones.

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

diff --git a/src/panel/RRDChart.js b/src/panel/RRDChart.js
index 148015c..82615ce 100644
--- a/src/panel/RRDChart.js
+++ b/src/panel/RRDChart.js
@@ -173,6 +173,21 @@ Ext.define('Proxmox.widget.RRDChart', {
         padding: 0,
         style: 'cursor: pointer;',
     },
+    axes: [
+        {
+            type: 'numeric',
+            position: 'left',
+            grid: true,
+            renderer: 'leftAxisRenderer',
+            minimum: 0,
+        },
+        {
+            type: 'time',
+            position: 'bottom',
+            grid: true,
+            fields: ['time'],
+        },
+    ],
     listeners: {
         redraw: {
             fn: 'onAfterAnimation',
@@ -191,22 +206,17 @@ Ext.define('Proxmox.widget.RRDChart', {
         let me = this;
 
         let segmenter = config.powerOfTwo ? 'numericBase2' : 'numeric';
-        config.axes = [
-            {
-                type: 'numeric',
-                position: 'left',
-                grid: true,
-                renderer: 'leftAxisRenderer',
-                minimum: 0,
-                segmenter,
-            },
-            {
-                type: 'time',
-                position: 'bottom',
-                grid: true,
-                fields: ['time'],
-            },
-        ];
+
+        let axes = config.axes ?? me.config.axes ?? [];
+        for (const axis of axes) {
+            if (
+                axis.type === 'numeric' &&
+                (axis.position === 'left' || axis.position === 'right')
+            ) {
+                axis.segmenter = segmenter;
+            }
+        }
+
         me.callParent([config]);
     },
 
-- 
2.47.3



_______________________________________________
pmg-devel mailing list
pmg-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel