From 8071720d03a140d1bd668b0085f003312c247ece Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 18 Dec 2024 19:33:37 +0100
Subject: [PATCH] Improvement - Add support for Slicer configurable startIndex
 & endIndex

---
 src/components/vue-ui-age-pyramid.vue         |  1 +
 src/components/vue-ui-candlestick.vue         | 77 +++++++++++++++++--
 src/components/vue-ui-donut-evolution.vue     | 75 ++++++++++++++++--
 src/components/vue-ui-donut.vue               |  1 +
 src/components/vue-ui-galaxy.vue              |  1 +
 src/components/vue-ui-heatmap.vue             |  1 +
 src/components/vue-ui-history-plot.vue        |  1 +
 src/components/vue-ui-molecule.vue            |  1 +
 src/components/vue-ui-nested-donuts.vue       |  1 +
 src/components/vue-ui-onion.vue               |  1 +
 .../vue-ui-parallel-coordinate-plot.vue       |  1 +
 src/components/vue-ui-quadrant.vue            |  1 +
 src/components/vue-ui-quick-chart.vue         | 76 ++++++++++++++++--
 src/components/vue-ui-radar.vue               |  1 +
 src/components/vue-ui-rings.vue               |  1 +
 src/components/vue-ui-scatter.vue             |  1 +
 src/components/vue-ui-stackbar.vue            | 62 +++++++++++++--
 src/components/vue-ui-strip-plot.vue          |  1 +
 src/components/vue-ui-treemap.vue             |  1 +
 src/components/vue-ui-vertical-bar.vue        |  1 +
 src/components/vue-ui-waffle.vue              |  1 +
 src/components/vue-ui-xy-canvas.vue           | 63 +++++++++++++--
 src/components/vue-ui-xy.vue                  | 54 ++++++++++++-
 23 files changed, 385 insertions(+), 39 deletions(-)

diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
index 4c23a6de..91165817 100644
--- a/src/components/vue-ui-age-pyramid.vue
+++ b/src/components/vue-ui-age-pyramid.vue
@@ -774,6 +774,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.tooltip.offsetY"
             :parent="agePyramid"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="FINAL_CONFIG.style.tooltip.customFormat && typeof FINAL_CONFIG.style.tooltip.customFormat === 'function'"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue
index bc8197f2..de69ef14 100644
--- a/src/components/vue-ui-candlestick.vue
+++ b/src/components/vue-ui-candlestick.vue
@@ -9,6 +9,7 @@ import {
     downloadCsv,
     error,
     functionReturnsString,
+    hasDeepProperty,
     isFunction,
     objectIsEmpty,
     setOpacity,
@@ -83,16 +84,37 @@ function prepareConfig() {
         userConfig: props.config,
         defaultConfig: DEFAULT_CONFIG
     });
+
+    let finalConfig = {};
+
     if (mergedConfig.theme) {
-        return {
+        finalConfig = {
             ...useNestedProp({
                 userConfig: themes.vue_ui_candlestick[mergedConfig.theme] || props.config,
                 defaultConfig: mergedConfig
             }),
         }
     } else {
-        return mergedConfig;
+        finalConfig = mergedConfig;
+    }
+
+    // ------------------------------ OVERRIDES -----------------------------------
+
+    if (props.config && hasDeepProperty(props.config, 'style.zoom.startIndex')) {
+        finalConfig.style.zoom.startIndex = props.config.style.zoom.startIndex;
+    } else {
+        finalConfig.style.zoom.startIndex = null;
     }
+
+    if (props.config && hasDeepProperty(props.config, 'style.zoom.endIndex')) {
+        finalConfig.style.zoom.endIndex = props.config.style.zoom.endIndex;
+    } else {
+        finalConfig.style.zoom.endIndex = null;
+    }
+
+    // ----------------------------------------------------------------------------
+
+    return finalConfig;
 }
 
 watch(() => props.config, (_newCfg) => {
@@ -161,6 +183,7 @@ function prepareChart() {
         resizeObserver.value = new ResizeObserver(handleResize);
         resizeObserver.value.observe(candlestickChart.value.parentNode);
     }
+    setupSlicer();
 }
 
 onBeforeUnmount(() => {
@@ -384,11 +407,45 @@ function useTooltip(index, datapoint) {
 }
 
 function refreshSlicer() {
-    slicer.value = {
-        start: 0,
-        end: len.value
-    };
-    slicerStep.value += 1;
+    setupSlicer();
+}
+
+const slicerComponent = ref(null);
+
+async function setupSlicer() {
+    if ((FINAL_CONFIG.value.style.zoom.startIndex !== null || FINAL_CONFIG.value.style.zoom.endIndex !== null) && slicerComponent.value) {
+        if (FINAL_CONFIG.value.style.zoom.startIndex !== null) {
+            await nextTick();
+            await nextTick();
+            slicerComponent.value && slicerComponent.value.setStartValue(FINAL_CONFIG.value.style.zoom.startIndex);
+        }
+        if (FINAL_CONFIG.value.style.zoom.endIndex !== null) {
+            await nextTick();
+            await nextTick();
+            slicerComponent.value && slicerComponent.value.setEndValue(validSlicerEnd(FINAL_CONFIG.value.style.zoom.endIndex + 1));
+        }
+    } else {
+        slicer.value = {
+            start: 0,
+            end: len.value
+        };
+        slicerStep.value += 1;
+    }
+}
+
+function validSlicerEnd(v) {
+    const max = len.value;
+    if (v > max) {
+        return max;
+    }
+    if (v < 0 || (FINAL_CONFIG.value.style.zoom.startIndex !== null && v < FINAL_CONFIG.value.style.zoom.startIndex)) {
+        if (FINAL_CONFIG.value.style.zoom.startIndex !== null) {
+            return FINAL_CONFIG.value.style.zoom.startIndex + 1;
+        } else {
+            return 1;
+        }
+    }
+    return v;
 }
 
 function generateCsv() {
@@ -776,7 +833,8 @@ defineExpose({
         />
 
         <div ref="chartSlicer" v-if="FINAL_CONFIG.style.zoom.show && isDataset">
-            <Slicer 
+            <Slicer
+                ref="slicerComponent"
                 :key="`slicer_${slicerStep}`"
                 :background="FINAL_CONFIG.style.zoom.color"
                 :borderColor="FINAL_CONFIG.style.backgroundColor"
@@ -793,6 +851,8 @@ defineExpose({
                 :valueEnd="slicer.end"
                 v-model:start="slicer.start"
                 v-model:end="slicer.end"
+                :refreshStartPoint="FINAL_CONFIG.style.zoom.startIndex !== null ? FINAL_CONFIG.style.zoom.startIndex : 0"
+                :refreshEndPoint="FINAL_CONFIG.style.zoom.endIndex !== null ? FINAL_CONFIG.style.zoom.endIndex + 1 : len"
                 @reset="refreshSlicer"
             >
                 <template #reset-action="{ reset }">
@@ -823,6 +883,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.tooltip.offsetY"
             :parent="candlestickChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="FINAL_CONFIG.style.tooltip.customFormat && typeof FINAL_CONFIG.style.tooltip.customFormat === 'function'"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue
index 5b188955..40f32c0e 100644
--- a/src/components/vue-ui-donut-evolution.vue
+++ b/src/components/vue-ui-donut-evolution.vue
@@ -15,6 +15,7 @@ import {
     downloadCsv,
     error,
     getMissingDatasetAttributes,
+    hasDeepProperty,
     makeDonut,
     objectIsEmpty, 
     palette,
@@ -65,13 +66,48 @@ const slicer = ref({
 })
 
 function refreshSlicer() {
-    slicer.value = {
-        start: 0,
-        end: maxLength.value
-    };
-    slicerStep.value += 1;
+    setupSlicer();
 }
 
+const slicerComponent = ref(null);
+
+async function setupSlicer() {
+    if ((FINAL_CONFIG.value.style.chart.zoom.startIndex !== null || FINAL_CONFIG.value.style.chart.zoom.endIndex !== null) && slicerComponent.value) {
+        if (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null) {
+            await nextTick();
+            await nextTick();
+            slicerComponent.value && slicerComponent.value.setStartValue(FINAL_CONFIG.value.style.chart.zoom.startIndex);
+        }
+        if (FINAL_CONFIG.value.style.chart.zoom.endIndex !== null) {
+            await nextTick();
+            await nextTick();
+            slicerComponent.value && slicerComponent.value.setEndValue(validSlicerEnd(FINAL_CONFIG.value.style.chart.zoom.endIndex + 1));
+        }
+    } else {
+        slicer.value = {
+            start: 0,
+            end: maxLength.value
+        };
+        slicerStep.value += 1;
+    }
+}
+
+function validSlicerEnd(v) {
+    const max = maxLength.value;
+    if (v > max) {
+        return max;
+    }
+    if (v < 0 || (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null && v < FINAL_CONFIG.value.style.chart.zoom.startIndex)) {
+        if (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null) {
+            return FINAL_CONFIG.value.style.chart.zoom.startIndex + 1;
+        } else {
+            return 1;
+        }
+    }
+    return v;
+}
+
+
 onMounted(() => {
     prepareChart();
 })
@@ -99,6 +135,7 @@ function prepareChart() {
             })
         }
     }
+    setupSlicer();
 }
 
 const uid = ref(createUid());
@@ -131,8 +168,11 @@ function prepareConfig() {
         userConfig: props.config,
         defaultConfig: DEFAULT_CONFIG
     });
+
+    let finalConfig = {};
+
     if (mergedConfig.theme) {
-        return {
+        finalConfig = {
             ...useNestedProp({
                 userConfig: themes.vue_ui_donut_evolution[mergedConfig.theme] || props.config,
                 defaultConfig: mergedConfig
@@ -140,8 +180,26 @@ function prepareConfig() {
             customPalette: themePalettes[mergedConfig.theme] || palette
         }
     } else {
-        return mergedConfig;
+        finalConfig = mergedConfig;
+    }
+
+    // ------------------------------ OVERRIDES -----------------------------------
+
+    if (props.config && hasDeepProperty(props.config, 'style.chart.zoom.startIndex')) {
+        finalConfig.style.chart.zoom.startIndex = props.config.style.chart.zoom.startIndex;
+    } else {
+        finalConfig.style.chart.zoom.startIndex = null;
+    }
+
+    if (props.config && hasDeepProperty(props.config, 'style.chart.zoom.endIndex')) {
+        finalConfig.style.chart.zoom.endIndex = props.config.style.chart.zoom.endIndex;
+    } else {
+        finalConfig.style.chart.zoom.endIndex = null;
     }
+
+    // ----------------------------------------------------------------------------
+
+    return finalConfig;
 }
 
 watch(() => props.config, (_newCfg) => {
@@ -962,6 +1020,7 @@ defineExpose({
         />
 
         <Slicer
+            ref="slicerComponent"
             v-if="maxLength > 1 && FINAL_CONFIG.style.chart.zoom.show"
             :key="`slicer_${slicerStep}`"
             :background="FINAL_CONFIG.style.chart.zoom.color"
@@ -979,6 +1038,8 @@ defineExpose({
             :valueEnd="slicer.end"
             v-model:start="slicer.start"
             v-model:end="slicer.end"
+            :refreshStartPoint="FINAL_CONFIG.style.chart.zoom.startIndex !== null ? FINAL_CONFIG.style.chart.zoom.startIndex : 0"
+            :refreshEndPoint="FINAL_CONFIG.style.chart.zoom.endIndex !== null ? FINAL_CONFIG.style.chart.zoom.endIndex + 1 : maxLength"
             @reset="refreshSlicer"
         >
             <template #reset-action="{ reset }">
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
index b5a97fcf..af3d8ccc 100644
--- a/src/components/vue-ui-donut.vue
+++ b/src/components/vue-ui-donut.vue
@@ -1248,6 +1248,7 @@ defineExpose({
             :parent="donutChart"
             :content="tooltipContent"
             :isCustom="useCustomFormat"
+            :isFullscreen="isFullscreen"
         >
             <template #tooltip-before>
                 <slot name="tooltip-before" v-bind="{...dataTooltipSlot}"></slot>
diff --git a/src/components/vue-ui-galaxy.vue b/src/components/vue-ui-galaxy.vue
index 58965544..52ba93e2 100644
--- a/src/components/vue-ui-galaxy.vue
+++ b/src/components/vue-ui-galaxy.vue
@@ -658,6 +658,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="galaxyChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
index 38a5565c..6f905e62 100644
--- a/src/components/vue-ui-heatmap.vue
+++ b/src/components/vue-ui-heatmap.vue
@@ -730,6 +730,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.tooltip.offsetY"
             :parent="heatmapChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="FINAL_CONFIG.style.tooltip.customFormat && typeof FINAL_CONFIG.style.tooltip.customFormat === 'function'"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-history-plot.vue b/src/components/vue-ui-history-plot.vue
index 3506fc6f..49e5d9b6 100644
--- a/src/components/vue-ui-history-plot.vue
+++ b/src/components/vue-ui-history-plot.vue
@@ -1070,6 +1070,7 @@ defineExpose({
             :parent="historyPlotChart"
             :content="tooltipContent"
             :isCustom="useCustomFormat"
+            :isFullscreen="isFullscreen"
         >
             <template #tooltip-before>
                 <slot name="tooltip-before" v-bind="{...dataTooltipSlot}"></slot>
diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
index f176e056..15865170 100644
--- a/src/components/vue-ui-molecule.vue
+++ b/src/components/vue-ui-molecule.vue
@@ -703,6 +703,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="moleculeChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="FINAL_CONFIG.style.chart.tooltip.customFormat && typeof FINAL_CONFIG.style.chart.tooltip.customFormat === 'function'"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-nested-donuts.vue b/src/components/vue-ui-nested-donuts.vue
index 9b6c4d5e..e553e8ce 100644
--- a/src/components/vue-ui-nested-donuts.vue
+++ b/src/components/vue-ui-nested-donuts.vue
@@ -1015,6 +1015,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="nestedDonutsChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue
index a6507ae5..d637b0ad 100644
--- a/src/components/vue-ui-onion.vue
+++ b/src/components/vue-ui-onion.vue
@@ -768,6 +768,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="onionChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-parallel-coordinate-plot.vue b/src/components/vue-ui-parallel-coordinate-plot.vue
index d0db6076..17c042b3 100644
--- a/src/components/vue-ui-parallel-coordinate-plot.vue
+++ b/src/components/vue-ui-parallel-coordinate-plot.vue
@@ -867,6 +867,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="pcpChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
index 86153737..0e4cd171 100644
--- a/src/components/vue-ui-quadrant.vue
+++ b/src/components/vue-ui-quadrant.vue
@@ -1518,6 +1518,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="quadrantChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="FINAL_CONFIG.style.chart.tooltip.customFormat && typeof FINAL_CONFIG.style.chart.tooltip.customFormat === 'function'"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-quick-chart.vue b/src/components/vue-ui-quick-chart.vue
index 6f3a7cff..b305cb1a 100644
--- a/src/components/vue-ui-quick-chart.vue
+++ b/src/components/vue-ui-quick-chart.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
 import themes from "../themes.json";
 import * as detector from "../chartDetector";
 import {
@@ -16,6 +16,7 @@ import {
     dataLabel,
     error,
     functionReturnsString,
+    hasDeepProperty,
     isFunction,
     makeDonut, 
     palette,
@@ -84,8 +85,10 @@ function prepareConfig() {
         userConfig: props.config,
         defaultConfig: DEFAULT_CONFIG
     });
+    let finalConfig = {};
+
     if (mergedConfig.theme) {
-        return {
+        finalConfig =  {
             ...useNestedProp({
                 userConfig: themes.vue_ui_quick_chart[mergedConfig.theme] || props.config,
                 defaultConfig: mergedConfig
@@ -93,8 +96,25 @@ function prepareConfig() {
             customPalette: themePalettes[mergedConfig.theme] || palette
         }
     } else {
-        return mergedConfig;
+        finalConfig = mergedConfig;
+    }
+
+    // ------------------------------ OVERRIDES -----------------------------------
+
+    if (props.config && hasDeepProperty(props.config, 'zoomStartIndex')) {
+        finalConfig.zoomStartIndex = props.config.zoomStartIndex;
+    } else {
+        finalConfig.zoomStartIndex = null;
+    }
+
+    if (props.config && hasDeepProperty(props.config, 'zoomEndIndex')) {
+        finalConfig.zoomEndIndex = props.config.zoomEndIndex;
+    } else {
+        finalConfig.zoomEndIndex = null;
     }
+
+    // ----------------------------------------------------------------------------
+    return finalConfig;
 }
 
 watch(() => props.config, (_newCfg) => {
@@ -193,6 +213,7 @@ function prepareChart() {
         resizeObserver.value = new ResizeObserver(handleResize);
         resizeObserver.value.observe(quickChart.value.parentNode);
     }
+    setupSlicer();
 }
 
 onBeforeUnmount(() => {
@@ -478,13 +499,48 @@ const slicer = ref({
 });
 
 function refreshSlicer() {
-    slicer.value = {
-        start: 0,
-        end: formattedDataset.value.maxSeriesLength
-    };
-    slicerStep.value += 1;
+    setupSlicer();
 }
 
+const slicerComponent = ref(null);
+
+async function setupSlicer() {
+    if ((FINAL_CONFIG.value.zoomStartIndex !== null || FINAL_CONFIG.value.zoomEndIndex !== null) && slicerComponent.value) {
+        if (FINAL_CONFIG.value.zoomStartIndex !== null) {
+            await nextTick();
+            await nextTick();
+            slicerComponent.value && slicerComponent.value.setStartValue(FINAL_CONFIG.value.zoomStartIndex);
+        }
+        if (FINAL_CONFIG.value.zoomEndIndex !== null) {
+            await nextTick();
+            await nextTick();
+            slicerComponent.value && slicerComponent.value.setEndValue(validSlicerEnd(FINAL_CONFIG.value.zoomEndIndex + 1));
+        }
+    } else {
+        slicer.value = {
+            start: 0,
+            end: formattedDataset.value.maxSeriesLength
+        };
+        slicerStep.value += 1;
+    }
+}
+
+function validSlicerEnd(v) {
+    const max = formattedDataset.value.maxSeriesLength;
+    if (v > max) {
+        return max;
+    }
+    if (v < 0 || (FINAL_CONFIG.value.zoomStartIndex !== null && v < FINAL_CONFIG.value.zoomStartIndex)) {
+        if (FINAL_CONFIG.value.zoomStartIndex !== null) {
+            return FINAL_CONFIG.value.zoomStartIndex + 1
+        } else {
+            return 1
+        }
+    }
+    return v
+}
+
+
 const minimap = computed(() => {
     if(!FINAL_CONFIG.value.zoomMinimap.show || chartType.value === detector.chartType.DONUT) return [];
 
@@ -1560,6 +1616,7 @@ defineExpose({
         <div v-if="[detector.chartType.BAR, detector.chartType.LINE].includes(chartType) && FINAL_CONFIG.zoomXy && formattedDataset.maxSeriesLength > 1"
             :key="`slicer_${slicerStep}`" ref="quickChartSlicer">        
             <Slicer
+                ref="slicerComponent"
                 :key="`slicer_${slicerStep}`"
                 :background="FINAL_CONFIG.zoomColor"
                 :borderColor="FINAL_CONFIG.backgroundColor"
@@ -1584,6 +1641,8 @@ defineExpose({
                 :minimapSelectedIndex="commonSelectedIndex"
                 v-model:start="slicer.start"
                 v-model:end="slicer.end"
+                :refreshStartPoint="FINAL_CONFIG.zoomStartIndex !== null ? FINAL_CONFIG.zoomStartIndex : 0"
+                :refreshEndPoint="FINAL_CONFIG.zoomEndIndex !== null ? FINAL_CONFIG.zoomEndIndex + 1 : formattedDataset.maxSeriesLength"
                 @reset="refreshSlicer"
                 @trapMouse="setCommonSelectedIndex"
             >
@@ -1702,6 +1761,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.tooltipOffsetY"
             :parent="quickChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="isFunction(FINAL_CONFIG.tooltipCustomFormat)"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
index f8ed097c..28e6054b 100644
--- a/src/components/vue-ui-radar.vue
+++ b/src/components/vue-ui-radar.vue
@@ -834,6 +834,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="radarChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="FINAL_CONFIG.style.chart.tooltip.customFormat && typeof FINAL_CONFIG.style.chart.tooltip.customFormat === 'function'"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue
index a2199f0a..75514854 100644
--- a/src/components/vue-ui-rings.vue
+++ b/src/components/vue-ui-rings.vue
@@ -750,6 +750,7 @@ defineExpose({
       :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
       :parent="ringsChart"
       :content="tooltipContent"
+      :isFullscreen="isFullscreen"
       :isCustom="FINAL_CONFIG.style.chart.tooltip.customFormat && typeof FINAL_CONFIG.style.chart.tooltip.customFormat === 'function'"
     >
         <template #tooltip-before>
diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
index 70e8a42c..ede0f926 100644
--- a/src/components/vue-ui-scatter.vue
+++ b/src/components/vue-ui-scatter.vue
@@ -1170,6 +1170,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.tooltip.offsetY"
             :parent="scatterChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="FINAL_CONFIG.style.tooltip.customFormat && typeof FINAL_CONFIG.style.tooltip.customFormat === 'function'"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-stackbar.vue b/src/components/vue-ui-stackbar.vue
index 617899c2..4eda3d41 100755
--- a/src/components/vue-ui-stackbar.vue
+++ b/src/components/vue-ui-stackbar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, watch } from "vue";
+import { ref, computed, onMounted, watch, nextTick } from "vue";
 import { useConfig } from "../useConfig";
 import { 
     adaptColorToBackground,
@@ -86,6 +86,7 @@ const isLoaded = ref(false);
 const titleStep = ref(0);
 const tableStep = ref(0);
 const legendStep = ref(0);
+const slicerComponent = ref(null);
 
 onMounted(() => {
     prepareChart();
@@ -132,6 +133,18 @@ function prepareConfig() {
         finalConfig.style.chart.grid.scale.scaleMax = null;
     }
 
+    if (props.config && hasDeepProperty(props.config, 'style.chart.zoom.startIndex')) {
+        finalConfig.style.chart.zoom.startIndex = props.config.style.chart.zoom.startIndex;
+    } else {
+        finalConfig.style.chart.zoom.startIndex = null;
+    }
+
+    if (props.config && hasDeepProperty(props.config, 'style.chart.zoom.endIndex')) {
+        finalConfig.style.chart.zoom.endIndex = props.config.style.chart.zoom.endIndex;
+    } else {
+        finalConfig.style.chart.zoom.endIndex = null;
+    }
+
     // ----------------------------------------------------------------------------
 
     return finalConfig;
@@ -230,6 +243,7 @@ function prepareChart() {
         resizeObserver.value = new ResizeObserver(handleResize);
         resizeObserver.value.observe(stackbarChart.value.parentNode);
     }
+    setupSlicer();
 }
 
 const drawingArea = computed(() => {
@@ -284,11 +298,43 @@ const slicer = ref({
 });
 
 function refreshSlicer() {
-    slicer.value = {
-        start: 0,
-        end: Math.max(...props.dataset.map(ds => ds.series.length))
-    };
-    slicerStep.value += 1;
+    setupSlicer()
+}
+
+async function setupSlicer() {
+    if ((FINAL_CONFIG.value.style.chart.zoom.startIndex !== null || FINAL_CONFIG.value.style.chart.zoom.endIndex !== null) && slicerComponent.value) {
+        if (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null) {
+            await nextTick();
+            await nextTick();
+            slicerComponent.value && slicerComponent.value.setStartValue(FINAL_CONFIG.value.style.chart.zoom.startIndex);
+        }
+        if (FINAL_CONFIG.value.style.chart.zoom.endIndex !== null) {
+            await nextTick();
+            await nextTick();
+            slicerComponent.value && slicerComponent.value.setEndValue(validSlicerEnd(FINAL_CONFIG.value.style.chart.zoom.endIndex + 1));
+        }
+    } else {
+        slicer.value = {
+            start: 0,
+            end: Math.max(...props.dataset.map(ds => ds.series.length))
+        };
+        slicerStep.value += 1;
+    }
+}
+
+function validSlicerEnd(v) {
+    const max = Math.max(...props.dataset.map(ds => ds.series.length));
+    if (v > max) {
+        return max;
+    }
+    if (v < 0 || (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null && v < FINAL_CONFIG.value.style.chart.zoom.startIndex)) {
+        if (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null) {
+            return FINAL_CONFIG.value.style.chart.zoom.startIndex + 1
+        } else {
+            return 1
+        }
+    }
+    return v
 }
 
 const barSlot = computed(() => {
@@ -1204,6 +1250,7 @@ defineExpose({
 
         <div ref="chartSlicer" :style="`width:100%;background:${FINAL_CONFIG.style.chart.backgroundColor}`" data-html2canvas-ignore>    
             <Slicer 
+                ref="slicerComponent"
                 v-if="FINAL_CONFIG.style.chart.zoom.show && maxSeries > 1"
                 :key="`slicer_${slicerStep}`"
                 :background="FINAL_CONFIG.style.chart.zoom.color"
@@ -1221,6 +1268,8 @@ defineExpose({
                 :valueEnd="slicer.end"
                 v-model:start="slicer.start"
                 v-model:end="slicer.end"
+                :refreshStartPoint="FINAL_CONFIG.style.chart.zoom.startIndex !== null ? FINAL_CONFIG.style.chart.zoom.startIndex : 0"
+                :refreshEndPoint="FINAL_CONFIG.style.chart.zoom.endIndex !== null ? FINAL_CONFIG.style.chart.zoom.endIndex + 1 : Math.max(...dataset.map(ds => ds.series.length))"
                 @reset="refreshSlicer"
             >
                 <template #reset-action="{ reset }">
@@ -1242,6 +1291,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="stackbarChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-strip-plot.vue b/src/components/vue-ui-strip-plot.vue
index 209e4022..be913b28 100644
--- a/src/components/vue-ui-strip-plot.vue
+++ b/src/components/vue-ui-strip-plot.vue
@@ -809,6 +809,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="stripPlotChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-treemap.vue b/src/components/vue-ui-treemap.vue
index 315cb3eb..d17f5ed6 100644
--- a/src/components/vue-ui-treemap.vue
+++ b/src/components/vue-ui-treemap.vue
@@ -785,6 +785,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="treemapChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-vertical-bar.vue b/src/components/vue-ui-vertical-bar.vue
index 980266e0..50dd5e4c 100644
--- a/src/components/vue-ui-vertical-bar.vue
+++ b/src/components/vue-ui-vertical-bar.vue
@@ -934,6 +934,7 @@ defineExpose({
             :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
             :parent="verticalBarChart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="FINAL_CONFIG.style.chart.tooltip.customFormat && typeof FINAL_CONFIG.style.chart.tooltip.customFormat === 'function'"
         >
             <template #tooltip-before>
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
index 466a7680..cad450bc 100644
--- a/src/components/vue-ui-waffle.vue
+++ b/src/components/vue-ui-waffle.vue
@@ -1010,6 +1010,7 @@ defineExpose({
             :content="tooltipContent"
             :isCustom="FINAL_CONFIG.style.chart.tooltip.customFormat && typeof FINAL_CONFIG.style.chart.tooltip.customFormat === 'function'"
             :fontSize="FINAL_CONFIG.style.chart.tooltip.fontSize"
+            :isFullscreen="isFullscreen"
         >
             <template #tooltip-before>
                 <slot name="tooltip-before" v-bind="{...dataTooltipSlot}"></slot>
diff --git a/src/components/vue-ui-xy-canvas.vue b/src/components/vue-ui-xy-canvas.vue
index 84830bd9..49a4faac 100644
--- a/src/components/vue-ui-xy-canvas.vue
+++ b/src/components/vue-ui-xy-canvas.vue
@@ -4,7 +4,8 @@ import {
     computed,
     onMounted,
     watch,
-    onBeforeUnmount
+    onBeforeUnmount,
+    nextTick
 } from "vue";
 import {
     applyDataLabel,
@@ -146,6 +147,18 @@ function prepareConfig() {
         finalConfig.style.chart.scale.max = null;
     }
 
+    if (props.config && hasDeepProperty(props.config, 'style.chart.zoom.startIndex')) {
+        finalConfig.style.chart.zoom.startIndex = props.config.style.chart.zoom.startIndex;
+    } else {
+        finalConfig.style.chart.zoom.startIndex = null;
+    }
+
+    if (props.config && hasDeepProperty(props.config, 'style.chart.zoom.endIndex')) {
+        finalConfig.style.chart.zoom.endIndex = props.config.style.chart.zoom.endIndex;
+    } else {
+        finalConfig.style.chart.zoom.endIndex = null;
+    }
+
     // ----------------------------------------------------------------------------
 
     return finalConfig;
@@ -408,11 +421,44 @@ const slicer = ref({
 });
 
 function refreshSlicer() {
-    slicer.value = {
-        start: 0,
-        end: maxSeries.value
-    };
-    slicerStep.value += 1;
+    setupSlicer();
+}
+
+const slicerComponent = ref(null);
+async function setupSlicer() {
+    if ((FINAL_CONFIG.value.style.chart.zoom.startIndex !== null || FINAL_CONFIG.value.style.chart.zoom.endIndex !== null) && slicerComponent.value) {
+        if (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null) {
+            await nextTick();
+            await nextTick();
+            slicerComponent.value && slicerComponent.value.setStartValue(FINAL_CONFIG.value.style.chart.zoom.startIndex);
+        }
+        if (FINAL_CONFIG.value.style.chart.zoom.endIndex !== null) {
+            await nextTick();
+            await nextTick();
+            slicerComponent.value && slicerComponent.value.setEndValue(validSlicerEnd(FINAL_CONFIG.value.style.chart.zoom.endIndex + 1));
+        }
+    } else {
+        slicer.value = {
+            start: 0,
+            end: maxSeries.value
+        };
+        slicerStep.value += 1;
+    }
+}
+
+function validSlicerEnd(v) {
+    const max = maxSeries.value;
+    if (v > max) {
+        return max;
+    }
+    if (v < 0 || (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null && v < FINAL_CONFIG.value.style.chart.zoom.startIndex)) {
+        if (FINAL_CONFIG.value.style.chart.zoom.startIndex !== null) {
+            return FINAL_CONFIG.value.style.chart.zoom.startIndex + 1
+        } else {
+            return 1
+        }
+    }
+    return v
 }
 
 const lineAndPlotTypes = computed(() => {
@@ -1221,6 +1267,7 @@ function prepareChart() {
     });
 
     resizeObserver.value.observe(container.value);
+    setupSlicer();
 }
 
 onBeforeUnmount(() => {
@@ -1498,6 +1545,7 @@ defineExpose({
                 :offsetY="FINAL_CONFIG.style.chart.tooltip.offsetY"
                 :parent="canvas" 
                 :content="tooltipContent"
+                :isFullscreen="isFullscreen"
                 :backgroundOpacity="FINAL_CONFIG.style.chart.tooltip.backgroundOpacity"
                 :isCustom="isFunction(FINAL_CONFIG.style.chart.tooltip.customFormat)">
                 <template #tooltip-before>
@@ -1511,6 +1559,7 @@ defineExpose({
     
         <div ref="chartSlicer" :style="`width:100%;background:${FINAL_CONFIG.style.chart.backgroundColor}`" data-html2canvas-ignore>    
             <Slicer 
+                ref="slicerComponent"
                 v-if="FINAL_CONFIG.style.chart.zoom.show && maxSeries > 1"
                 :key="`slicer_${slicerStep}`"
                 :background="FINAL_CONFIG.style.chart.zoom.color"
@@ -1528,6 +1577,8 @@ defineExpose({
                 :valueEnd="slicer.end"
                 v-model:start="slicer.start"
                 v-model:end="slicer.end"
+                :refreshStartPoint="FINAL_CONFIG.style.chart.zoom.startIndex !== null ? FINAL_CONFIG.style.chart.zoom.startIndex : 0"
+                :refreshEndPoint="FINAL_CONFIG.style.chart.zoom.endIndex !== null ? FINAL_CONFIG.style.chart.zoom.endIndex + 1 : maxSeries"
                 @reset="refreshSlicer"
             >
                 <template #reset-action="{ reset }">
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
index 53e6ccbe..365f8ae4 100644
--- a/src/components/vue-ui-xy.vue
+++ b/src/components/vue-ui-xy.vue
@@ -1063,6 +1063,8 @@
             :valueEnd="slicer.end"
             v-model:start="slicer.start"
             v-model:end="slicer.end"
+            :refreshStartPoint="FINAL_CONFIG.chart.zoom.startIndex !== null ? FINAL_CONFIG.chart.zoom.startIndex : 0"
+            :refreshEndPoint="FINAL_CONFIG.chart.zoom.endIndex !== null ? FINAL_CONFIG.chart.zoom.endIndex + 1 : Math.max(...dataset.map(datapoint => largestTriangleThreeBucketsArray({data:datapoint.series, threshold: FINAL_CONFIG.downsample.threshold}).length))"
             @reset="refreshSlicer"
             @trapMouse="selectMinimapIndex"
         >
@@ -1120,6 +1122,7 @@
             :offsetY="FINAL_CONFIG.chart.tooltip.offsetY"
             :parent="$refs.chart"
             :content="tooltipContent"
+            :isFullscreen="isFullscreen"
             :isCustom="FINAL_CONFIG.chart.tooltip.customFormat && typeof FINAL_CONFIG.chart.tooltip.customFormat === 'function'"
             >
                 <template #tooltip-before>
@@ -2241,6 +2244,7 @@ export default {
     mounted() {
         // FIXME: all contents must be placed in a func and also called when ds or cfg are updated
         this.prepareChart();
+        this.setupSlicer();
 
         document.addEventListener("mousemove", (e) => {
             this.clientPosition = {
@@ -2327,6 +2331,18 @@ export default {
                     mergedConfig.chart.grid.labels.yAxis.scaleMax = null;
                 }
 
+                if (this.config && this.hasDeepProperty(this.config, 'chart.zoom.startIndex')) {
+                    mergedConfig.chart.zoom.startIndex = this.config.chart.zoom.startIndex;
+                } else {
+                    mergedConfig.chart.zoom.startIndex = null;
+                }
+
+                if (this.config && this.hasDeepProperty(this.config, 'chart.zoom.endIndex')) {
+                    mergedConfig.chart.zoom.endIndex = this.config.chart.zoom.endIndex;
+                } else {
+                    mergedConfig.chart.zoom.endIndex = null;
+                }
+
                 // ----------------------------------------------------------------------------
 
                 if (mergedConfig.theme) {
@@ -2566,12 +2582,42 @@ export default {
             }
             return res;
         },
+        async setupSlicer() {
+            if ((this.FINAL_CONFIG.chart.zoom.startIndex !== null || this.FINAL_CONFIG.chart.zoom.endIndex !== null) && this.$refs.chartSlicer) {
+                if (this.FINAL_CONFIG.chart.zoom.startIndex !== null) {
+                    await this.$nextTick();
+                    await this.$nextTick();
+                    this.$refs.chartSlicer.setStartValue(this.FINAL_CONFIG.chart.zoom.startIndex);
+                }
+                if (this.FINAL_CONFIG.chart.zoom.endIndex !== null) {
+                    await this.$nextTick();
+                    await this.$nextTick();
+                    this.$refs.chartSlicer.setEndValue(this.validSlicerEnd(this.FINAL_CONFIG.chart.zoom.endIndex + 1));
+                }
+            } else {
+                this.slicer = {
+                    start: 0,
+                    end: Math.max(...this.dataset.map(datapoint => this.largestTriangleThreeBucketsArray({data:datapoint.series, threshold: this.FINAL_CONFIG.downsample.threshold}).length))
+                };
+                this.slicerStep += 1;
+            }
+        },
         refreshSlicer() {
-            this.slicer = {
-                start: 0,
-                end: Math.max(...this.dataset.map(datapoint => this.largestTriangleThreeBucketsArray({data:datapoint.series, threshold: this.FINAL_CONFIG.downsample.threshold}).length))
+            this.setupSlicer();
+        },
+        validSlicerEnd(v) {
+            const max = Math.max(...this.dataset.map(datapoint => this.largestTriangleThreeBucketsArray({data:datapoint.series, threshold: this.FINAL_CONFIG.downsample.threshold}).length));
+            if (v > max) {
+                return max;
+            }
+            if (v < 0 || (this.FINAL_CONFIG.chart.zoom.startIndex !== null && v < this.FINAL_CONFIG.chart.zoom.startIndex)) {
+                if (this.FINAL_CONFIG.chart.zoom.startIndex !== null) {
+                    return this.FINAL_CONFIG.chart.zoom.startIndex + 1
+                } else {
+                    return 1
+                }
             }
-            this.slicerStep += 1;
+            return v
         },
         calcRectHeight(plot) {
             if(plot.value >= 0) {