Fix - VueUiXy - Fix issues related to zoom when startIndex & endIndex are set

Author: graphieros

TestingArena/ArenaVueUiXy.vue

@@ -647,7 +647,7 @@ const model = ref([
     { key: 'chart.zoom.minimap.indicatorColor', def: '#1A1A1A', type: 'color' },
     { key: 'chart.zoom.minimap.verticalHandles', def: false, type: 'checkbox' },
 
-    { key: 'chart.zoom.startIndex', def: null, type: 'number', min: 0, max: 100 },
+    { key: 'chart.zoom.startIndex', def: 50, type: 'number', min: 0, max: 100 },
     { key: 'chart.zoom.endIndex', def: null, type: 'number', min: 0, max: 100 },
     { key: 'chart.zoom.preview.enable', def: true, type: 'checkbox'},
     { key: 'chart.zoom.preview.stroke', def: '#1f77b4', type: 'color'},
@@ -1148,6 +1148,7 @@ const config = computed(() => {
                 zoom: {
                     ...c.chart.zoom,
                     useDefaultFormat: true,
+                    timeFormat: 'yyyy-MM-dd HH:mm:ss',
                     // customFormat: ({ absoluteIndex }) => {
                     //     return String(absoluteIndex) + 'TEST'
                     // }

src/components/vue-ui-xy.vue

@@ -1006,14 +1006,22 @@ async function setupSlicer() {
 
     const max = Math.max(...FINAL_DATASET.value.map(dp => lttb(dp.series).length));
 
+    slicer.value = { start: 0, end: max };
+
     if ((startIndex != null || endIndex != null) && comp) {
         if (startIndex != null) {
             slicer.value.start = startIndex;
             comp.setStartValue(startIndex);
+        } else {
+            slicer.value.start = 0;
+            comp.setStartValue(0);
         }
         if (endIndex != null) {
             slicer.value.end = endIndex + 1
             comp.setEndValue(validSlicerEnd(endIndex + 1));
+        } else {
+            slicer.value.end = max;
+            comp.setEndValue(max);
         }
     } else {
         slicer.value = { start: 0, end: max };
@@ -2103,6 +2111,7 @@ const preciseAllTimeLabels = computed(() => {
 
 // Simple Slicer labels
 const useSlicerCustomFormat = ref(false);
+
 const slicerLabels = computed(() => {
     let left = '', right = '';
     if (FINAL_CONFIG.value.chart.zoom.preview.enable) {
@@ -2134,13 +2143,13 @@ const slicerLabels = computed(() => {
     }
 
     if (!useSlicerCustomFormat.value) {
-        left = FINAL_CONFIG.value.chart.grid.labels.xAxisLabels.datetimeFormatter.enable
+        left = FINAL_CONFIG.value.chart.grid.labels.xAxisLabels.datetimeFormatter.enable && !FINAL_CONFIG.value.chart.zoom.useDefaultFormat
         ? (preciseAllTimeLabels.value[slicer.value.start]?.text || '')
         : (timeLabels.value[0]?.text || '');
 
         const endAbs = Math.max(slicer.value.start, slicer.value.end - 1)
 
-        right = FINAL_CONFIG.value.chart.grid.labels.xAxisLabels.datetimeFormatter.enable
+        right = FINAL_CONFIG.value.chart.grid.labels.xAxisLabels.datetimeFormatter.enable && !FINAL_CONFIG.value.chart.zoom.useDefaultFormat
         ? (preciseAllTimeLabels.value[endAbs]?.text || '')
         : (timeLabels.value.at(-1)?.text || '')        
     }