From de74912f7257c33c599af2a74eaac3b48dce0b12 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sun, 10 Mar 2024 07:39:19 +0100
Subject: [PATCH] VueUiXy edge case fix

---
 package-lock.json            | 13 ++++++---
 package.json                 |  2 +-
 src/components/vue-ui-xy.vue | 51 ++++++++++++++++++------------------
 3 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0d73352b..a9debc2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.0.15",
+      "version": "2.0.16",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
@@ -17,7 +17,8 @@
         "sass": "^1.57.1",
         "vite": "^4.4.5",
         "vitest": "^0.34.1",
-        "vue": "^3.3.4"
+        "vue": "^3.3.4",
+        "vue-data-ui": "file:../vue-data-ui"
       }
     },
     "node_modules/@babel/parser": {
@@ -3652,6 +3653,12 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/vue-data-ui": {
+      "version": "2.0.16",
+      "resolved": "file:",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index d1323292..fd78b6fd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.15",
+  "version": "2.0.16",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
index cf46cd86..e4461680 100644
--- a/src/components/vue-ui-xy.vue
+++ b/src/components/vue-ui-xy.vue
@@ -1245,36 +1245,37 @@ export default {
             if(sliderOne && sliderTwo) {
                 sliderOne.addEventListener("input", slideOne);
                 sliderTwo.addEventListener("input", slideTwo);
-            }
-    
-            function slideOne(){
-                if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
-                    sliderOne.value = parseInt(sliderTwo.value) - minGap;
-                }
-                fillColor();
-                if (vm.chartConfig.useCanvas) {
-                    vm.drawCanvas();
+                
+                function slideOne(){
+                    if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
+                        sliderOne.value = parseInt(sliderTwo.value) - minGap;
+                    }
+                    fillColor();
+                    if (vm.chartConfig.useCanvas) {
+                        vm.drawCanvas();
+                    }
                 }
-            }
-            function slideTwo(){
-                if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
-                    sliderTwo.value = parseInt(sliderOne.value) + minGap;
+                function slideTwo(){
+                    if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
+                        sliderTwo.value = parseInt(sliderOne.value) + minGap;
+                    }
+                    fillColor();
+                    fillColor();
+                    if (vm.chartConfig.useCanvas) {
+                        vm.drawCanvas();
+                    }
                 }
-                fillColor();
-                fillColor();
-                if (vm.chartConfig.useCanvas) {
-                    vm.drawCanvas();
+                const dataset = this.dataset;
+                function fillColor(){
+                    let percent1 = (sliderOne.value / Math.max(...dataset.map(datapoint => datapoint.series.length))) * 100;
+                    let percent2 = (sliderTwo.value / Math.max(...dataset.map(datapoint => datapoint.series.length))) * 100;
+                    sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #858585 ${percent1}% , #858585 ${percent2}%, #dadae5 ${percent2}%)`;
                 }
-            }
-            const dataset = this.dataset;
-            function fillColor(){
-                let percent1 = (sliderOne.value / Math.max(...dataset.map(datapoint => datapoint.series.length))) * 100;
-                let percent2 = (sliderTwo.value / Math.max(...dataset.map(datapoint => datapoint.series.length))) * 100;
-                sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #858585 ${percent1}% , #858585 ${percent2}%, #dadae5 ${percent2}%)`;
+        
+                slideOne();
+                slideTwo();
             }
     
-            slideOne();
-            slideTwo();
         }
 
         if (this.chartConfig.useCanvas) {