Improper value set after animation bug fixed

atraylen · Dec 2, 2016 · 7f8745d · 7f8745d
1 parent 991e4dd
commit 7f8745d
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 15 deletions.
diff --git a/docs-coverage.svg b/docs-coverage.svg
diff --git a/examples/issue-63.html b/examples/issue-63.html
@@ -5,7 +5,7 @@
     <title>Gauge Test</title>
     <script src="../gauge.min.js"></script>
     <style>body {
-        padding: 0;
+        padding: 20px;
         margin: 0;
         background: #fff
     }</style>
@@ -15,6 +15,9 @@
 <a href="#" onclick="gaugePS.value=570">570</a>
 <a href="#" onclick="gaugePS.value=583">583</a>
 <a href="#" onclick="gaugePS.value=830">830</a>
+
+<hr>
+
 <canvas id="gauge-ps"></canvas>
 
 <script>

diff --git a/gauge.min.js b/gauge.min.js
diff --git a/gauge.min.js.map b/gauge.min.js.map
diff --git a/lib/BaseGauge.js b/lib/BaseGauge.js
@@ -209,15 +209,11 @@ export default class BaseGauge extends EventEmitter {
      * @param {number} value
      */
     set value(value) {
-        value = parseFloat(value);
-
-        if (isNaN(value) || !isFinite(value)) {
-            value = this.options.minValue;
-        }
+        value = BaseGauge.ensureValue(value, this.options.minValue);
 
         let fromValue = this.options.value;
 
-        if (value === this.options.value) return;
+        if (value === fromValue) return;
 
         if (this.options.animation) {
             /**
@@ -237,8 +233,11 @@ export default class BaseGauge extends EventEmitter {
 
                 this.emit('animate', percent, this.options.value);
             }, () => {
-                this.options.value = this._value;
-                delete this._value;
+                if (this._value !== undefined) {
+                    this.options.value = this._value;
+                    delete this._value;
+                }
+
                 this.draw();
                 this.emit('animationEnd');
             });
@@ -368,6 +367,23 @@ export default class BaseGauge extends EventEmitter {
 
         new DomObserver({}, element.tagName, type).process(element);
     }
+
+    /**
+     * Ensures value is proper number
+     *
+     * @param {*} value
+     * @param {number} min
+     * @return {number}
+     */
+    static ensureValue(value, min = 0) {
+        value = parseFloat(value);
+
+        if (isNaN(value) || !isFinite(value)) {
+            value = parseFloat(min) || 0;
+        }
+
+        return value;
+    }
 }
 
 

diff --git a/lib/RadialGauge.js b/lib/RadialGauge.js
@@ -800,6 +800,8 @@ export default class RadialGauge extends BaseGauge {
      * @param {number} value
      */
     set value(value) {
+        value = BaseGauge.ensureValue(value, this.options.minValue);
+
         if (this.options.animation &&
             this.options.ticksAngle === 360 &&
             this.options.useMinPath
@@ -821,7 +823,6 @@ export default class RadialGauge extends BaseGauge {
         return super.value;
     }
 
-    /*  */
     /**
      * Triggering gauge render on a canvas.
      *

diff --git a/test-coverage.svg b/test-coverage.svg