VueUiSparkgauge improvements

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.33",
+  "version": "2.0.34",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -2727,7 +2727,7 @@ const nestedDonutsDataset = ref([
 ])
 
 const sparkGaugeDataset = ref({
-  value: 10,
+  value: 0,
   min: -10,
   max: 10,
   title: "Some KPI with a long name"

src/App.vue

@@ -36,8 +36,6 @@ const svg = computed(() => {
     }
 })
 
-console.log(svg.value)
-
 const bounds = computed(() => {
     const min = props.dataset.min ?? 0;
     const max = props.dataset.max ?? 0;
@@ -51,6 +49,16 @@ const bounds = computed(() => {
 
 const currentScore = ref(sparkgaugeConfig.value.style.animation.show ? bounds.value.min : props.dataset.value);
 
+const controlScore = computed(() => {
+    if (currentScore.value > bounds.value.max) {
+        return bounds.value.max;
+    } else if (currentScore.value < bounds.value.min) {
+        return bounds.value.min;
+    } else {
+        return currentScore.value;
+    }
+})
+
 const animationTick = computed(() => {
     return bounds.value.diff / sparkgaugeConfig.value.style.animation.speedMs;
 })
@@ -75,10 +83,11 @@ const nameLabel = computed(() => {
 })
 
 const valueRatio = computed(() => {
+
     if(currentScore.value >= 0) {
-        return (currentScore.value - bounds.value.min) / bounds.value.diff
+        return (controlScore.value - bounds.value.min) / bounds.value.diff
     } else {
-        return (Math.abs(bounds.value.min) - Math.abs(currentScore.value)) / bounds.value.diff
+        return (Math.abs(bounds.value.min) - Math.abs(controlScore.value)) / bounds.value.diff
     }
 })