Improvement - VueUiXy - Add config option to control x offset of scale values in individualScale mode

Author: graphieros

TestingArena/ArenaVueUiXy.vue

@@ -336,7 +336,8 @@ const model = ref([
     { 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: 0, type: 'number', min: -100, max: 100},
+    { key: 'chart.grid.labels.yAxis.scaleLabelOffsetX', def: 36, type: 'number', min: -100, max: 100},
+    { key: 'chart.grid.labels.yAxis.scaleValueOffsetX', def: -20, 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

@@ -455,7 +455,6 @@
                                 :transform="`translate(${el.x - FINAL_CONFIG.chart.grid.labels.yAxis.labelWidth + 5 + xPadding + FINAL_CONFIG.chart.grid.labels.yAxis.scaleLabelOffsetX}, ${mutableConfig.isStacked ? drawingArea.bottom - el.yOffset - (el.individualHeight / 2) : drawingArea.top + drawingArea.height / 2}) rotate(-90)`"
                             >
                                 {{ el.name }} {{ el.scaleLabel && el.unique && el.scaleLabel !== el.id ? `- ${el.scaleLabel}` : '' }}
-
                             </text>
                             <line
                                 v-for="(yLabel, j) in el.yLabels"
@@ -469,7 +468,7 @@
                             />
                             <text 
                                 v-for="(yLabel, j) in el.yLabels"
-                                :x="el.x - 5 + xPadding" 
+                                :x="el.x - 5 + xPadding + FINAL_CONFIG.chart.grid.labels.yAxis.scaleValueOffsetX" 
                                 :y="forceValidValue(yLabel.y) + fontSizes.dataLabels / 3" 
                                 :font-size="fontSizes.dataLabels" 
                                 text-anchor="end"

src/useConfig.js

@@ -460,6 +460,7 @@ export function useConfig() {
                         scaleMax: null, // idem
                         groupColor: null, // force yAxis labels color
                         scaleLabelOffsetX: 0,
+                        scaleValueOffsetX: 0
                     },
                     xAxisLabels: {
                         color: COLOR_BLACK,

types/vue-data-ui.d.ts

@@ -2627,6 +2627,7 @@ declare module "vue-data-ui" {
                         scaleMax?: number | null;
                         groupColor?: string | null;
                         scaleLabelOffsetX?: number;
+                        scaleValueOffsetX?: number;
                     };
                     xAxis?: {
                         showBaseline?: boolean;