Improvement - VueUiBullet - Negative values support

Author: graphieros

TestingArena/ArenaVueUiBullet.vue

@@ -9,24 +9,24 @@ import { useArena } from "../src/useArena";
 const { local, build, vduiLocal, vduiBuild } = useArena()
 
 const dataset = ref({
-    value: 85,
-    target: 80,
+    value: -20,
+    target: -10,
     segments: [
         {
             name: 'Low',
-            from: 0,
-            to: 50,
+            from: -100,
+            to: -30,
             // color: '#4A4A4A'
         },
         {
             name: 'Medium',
-            from: 50,
-            to: 70,
+            from: -30,
+            to: 0,
             // color: '#6A6A6A'
         },
         {
             name: 'High',
-            from: 70,
+            from: 0,
             to: 100,
             // color: '#8A8A8A'
         }

src/components/vue-ui-bullet.vue

@@ -226,17 +226,19 @@ const segments = computed(() => {
         return [];
     };
     const scale = calculateNiceScale(minMax.value.min, minMax.value.max, FINAL_CONFIG.value.style.chart.segments.ticks.divisions);
+    const absMin = scale.min >= 0 ? 0 : Math.abs(scale.min);
+
     const target = {
-        x: svg.value.left + (props.dataset.target / scale.max * svg.value.chartWidth) - FINAL_CONFIG.value.style.chart.target.width / 2
+        x: svg.value.left + (((props.dataset.target + absMin) / (scale.max + absMin)) * svg.value.chartWidth) - FINAL_CONFIG.value.style.chart.target.width / 2
     }
     const value = {
-        width: activeValue.value / scale.max * svg.value.chartWidth
+        width: ((activeValue.value + absMin) / (scale.max + absMin)) * svg.value.chartWidth
     }
     const ticks = scale.ticks.map(t => {
         return {
             value: t,
             y: svg.value.bottom + FINAL_CONFIG.value.style.chart.segments.dataLabels.fontSize + 3 + FINAL_CONFIG.value.style.chart.segments.dataLabels.offsetY,
-            x: svg.value.left + (t / scale.max * svg.value.chartWidth)
+            x: svg.value.left + (((t + absMin) / (scale.max + absMin)) * svg.value.chartWidth)
         }
     })
     return {
@@ -248,10 +250,10 @@ const segments = computed(() => {
             return {
                 ...segment,
                 color: segment.color ? convertColorToHex(segment.color) : segmentColors.value[i],
-                x: svg.value.left + (svg.value.chartWidth * (segment.from / scale.max)),
-                y: svg.value.top, // no padding
+                x: svg.value.left + (svg.value.chartWidth * ((segment.from + absMin) / (scale.max + absMin))),
+                y: svg.value.top,
                 height: svg.value.chartHeight,
-                width: svg.value.chartWidth * ((segment.to - segment.from) / scale.max),
+                width: svg.value.chartWidth * (Math.abs(segment.to - segment.from) / (scale.max + absMin)),
             }
         })
     }