Fix - VueUiXy - In individualScale mode fix yAxis scale width inconsistent when segregating series

Author: graphieros

TestingArena/ArenaVueUiXy.vue

@@ -331,12 +331,12 @@ const model = ref([
     { key: 'chart.grid.labels.yAxis.useIndividualScale', def: true, type: "checkbox" },
     { key: 'chart.grid.labels.yAxis.stacked', def: false, type: 'checkbox' },
     { key: 'chart.grid.labels.yAxis.gap', def: 12, min: 0, max: 200, type: 'number' },
-    { key: 'chart.grid.labels.yAxis.labelWidth', def: 20, min: 0, max: 100, type: 'number' },
+    { key: 'chart.grid.labels.yAxis.labelWidth', def: 48, min: 0, max: 100, type: 'number' },
     { key: 'chart.grid.labels.yAxis.showBaseline', def: true,  type: 'checkbox'},
     { key: 'chart.grid.labels.yAxis.scaleMin', def: -90, type: 'number', min: -1000, max: 1000 },
     { key: 'chart.grid.labels.yAxis.scaleMax', def: 90, type: 'number', min: -1000, max: 1000 },
     { key: 'chart.grid.labels.yAxis.groupColor', def: '#1A1A1A', type: 'color'},
-    { key: 'chart.grid.labels.yAxis.scaleLabelOffsetX', def: -16, type: 'number', min: -100, max: 100},
+    { key: 'chart.grid.labels.yAxis.scaleLabelOffsetX', def: 0, type: 'number', min: -100, max: 100},
 
     { key: 'chart.grid.labels.xAxis.showBaseline', def: true,  type: 'checkbox'},
     { key: 'chart.grid.labels.zeroLine.show', def: true, type: 'checkbox'},

package.json

@@ -107,4 +107,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.13"
   }
-}
+}

src/components/vue-ui-xy.vue

@@ -2158,7 +2158,18 @@ export default {
             })
         },
         drawingArea() {
-            const individualScalesPadding = this.mutableConfig.useIndividualScale && this.FINAL_CONFIG.chart.grid.labels.show ? this.absoluteDataset.filter(s => !this.segregatedSeries.includes(s.id)).length * (this.mutableConfig.isStacked ? 0 : this.FINAL_CONFIG.chart.grid.labels.yAxis.labelWidth) : 0;
+            function getUniqueScaleLabelsCount(dataset) {
+            const uniqueLabels = new Set();
+                dataset.forEach(item => {
+                    const label = item.scaleLabel || '__noScaleLabel__';
+                    uniqueLabels.add(label);
+                });
+                return uniqueLabels.size;
+                }
+
+            const len = getUniqueScaleLabelsCount(this.absoluteDataset.filter(s => !this.segregatedSeries.includes(s.id)));
+
+            const individualScalesPadding = this.mutableConfig.useIndividualScale && this.FINAL_CONFIG.chart.grid.labels.show ? len * (this.mutableConfig.isStacked ? 0 : this.FINAL_CONFIG.chart.grid.labels.yAxis.labelWidth) : 0;
             return {
                 top: this.FINAL_CONFIG.chart.padding.top,
                 right: this.width - this.FINAL_CONFIG.chart.padding.right,