Clamped value between min and max and handled NaN console error

FlowFuse · Sep 3, 2024 · b655d3e · b655d3e
1 parent ed382a5
commit b655d3e
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/ui/src/widgets/ui-gauge/types/UIGaugeDial.vue b/ui/src/widgets/ui-gauge/types/UIGaugeDial.vue
@@ -220,7 +220,7 @@ export default {
 
             arc.select('path')
                 .datum({
-                    endAngle: this.valueToAngle(value) + (-this.sizes.angle / 2)
+                    endAngle: this.valueToAngle(value || 0) + (-this.sizes.angle / 2)
                 })
                 // .attr('filter', 'url(#innershadow)')
                 .transition().duration(duration)
@@ -329,7 +329,9 @@ export default {
         // in radians
         valueToAngle (value) {
             const angle = this.sizes.angle
-            return angle * (value - this.min) / (this.max - this.min)
+            // ensure this does not go over the max or under the min
+            const clampedValue = Math.min(Math.max(value, this.min), this.max)
+            return angle * (clampedValue - this.min) / (this.max - this.min)
         },
         // in radians
         valueToNeedleAngle (value) {