Gauge re-configuration logic fixed, tests updated

examples/outrange.html

@@ -20,7 +20,7 @@
         data-value="-20"
         data-width="400"
         data-height="400"
-        data-bar-width="20"
+        data-bar-width="10"
         data-bar-shadow="5"
         data-color-bar-progress="rgba(50,200,50,.75)"
 ></canvas>

lib/BaseGauge.js

@@ -101,46 +101,36 @@ export default class BaseGauge {
          */
         this.initialized = false;
 
-        options.minValue = parseFloat(options.minValue);
-        options.maxValue = parseFloat(options.maxValue);
-        options.value = parseFloat(options.value) || 0;
+        /**
+         * Gauge options
+         *
+         * @type {GenericOptions} options
+         */
+        this.options = this.options || {};
 
-        if (!options.borders) {
-            options.borderInnerWidth = options.borderMiddleWidth =
-                options.borderOuterWidth = 0;
-        }
+        this.configure(options);
 
         if (!options.renderTo) {
             throw TypeError('Canvas element was not specified when creating ' +
                 'the Gauge object!');
         }
 
-        let canvas = options.renderTo.tagName ?
-            options.renderTo :
+        let canvas = this.options.renderTo.tagName ?
+            this.options.renderTo :
             /* istanbul ignore next: to be tested with e2e tests */
-            document.getElementById(options.renderTo);
+            document.getElementById(this.options.renderTo);
 
         if (!(canvas instanceof HTMLCanvasElement)) {
             throw TypeError('Given gauge canvas element is invalid!');
         }
 
-        options.width = parseFloat(options.width) || 0;
-        options.height = parseFloat(options.height) || 0;
-
-        if (!options.width || !options.height) {
-            if (!options.width) options.width = canvas.parentNode ?
+        if (!(options.width && options.height)) {
+            if (!options.width) this.options.width = canvas.parentNode ?
                 canvas.parentNode.offsetWidth : canvas.offsetWidth;
-            if (!options.height) options.height = canvas.parentNode ?
+            if (!options.height) this.options.height = canvas.parentNode ?
                 canvas.parentNode.offsetHeight : canvas.offsetHeight;
         }
 
-        /**
-         * Gauge options
-         *
-         * @type {GenericOptions} options
-         */
-        this.options = options || {};
-
         if (this.options.animateOnInit) {
             this._value = this.options.value;
             this.options.value = this.options.minValue;
@@ -149,15 +139,17 @@ export default class BaseGauge {
         /**
          * @type {SmartCanvas} canvas
          */
-        this.canvas = new SmartCanvas(canvas, options.width, options.height);
+        this.canvas = new SmartCanvas(canvas,
+            this.options.width,
+            this.options.height);
         this.canvas.onRedraw = this.draw.bind(this);
 
         /**
          * @type {Animation} animation
          */
         this.animation = new Animation(
-            options.animationRule,
-            options.animationDuration);
+            this.options.animationRule,
+            this.options.animationDuration);
     }
 
     /**
@@ -212,16 +204,39 @@ export default class BaseGauge {
             this.options.value : this._value;
     }
 
+    /**
+     * Checks and upsets configuration options to the gauge
+     *
+     * @param {*} options
+     * @return {BaseGauge}
+     * @access protected
+     */
+    configure(options = {}) {
+        options.minValue = parseFloat(options.minValue);
+        options.maxValue = parseFloat(options.maxValue);
+        options.value = parseFloat(options.value) || 0;
+
+        if (!options.borders) {
+            options.borderInnerWidth = options.borderMiddleWidth =
+                options.borderOuterWidth = 0;
+        }
+
+        options.width = parseFloat(options.width) || 0;
+        options.height = parseFloat(options.height) || 0;
+
+        Object.assign(this.options, options);
+
+        return this;
+    }
+
     /**
      * Updates gauge configuration options at runtime and redraws the gauge
      *
      * @param {RadialGaugeOptions} options
      * @returns {BaseGauge}
      */
     update(options) {
-        Object.assign(this.options, options || {});
-
-        this.canvas.width = this.options.width;
+        this.configure(options).canvas.width = this.options.width;
         this.canvas.height = this.options.height;
 
         this.animation.rule = this.options.animationRule;

lib/LinearGauge.js

@@ -1076,7 +1076,16 @@ export default class LinearGauge extends BaseGauge {
      */
     constructor(options) {
         options = Object.assign({}, defaultLinearGaugeOptions, options || {});
+        super(options);
+    }
 
+    /**
+     * Checks and sets gauge options
+     *
+     * @param {LinearGaugeOptions} options
+     * @return {LinearGauge}
+     */
+    configure(options = {}) {
         /* istanbul ignore else */
         if (options.barStrokeWidth >= options.barWidth) {
             //noinspection JSUnresolvedFunction
@@ -1088,7 +1097,9 @@ export default class LinearGauge extends BaseGauge {
         //noinspection JSUndefinedPropertyAssignment
         options.hasRight = hasTicksBar('left', options);
 
-        super(options);
+        if (options.barWidth > 50) options.barWidth = 50;
+
+        return super.configure(options);
     }
 
     /* istanbul ignore next */

lib/RadialGauge.js

@@ -564,9 +564,6 @@ function drawRadialProgressBar(context, options) {
     let rMax = maxRadialRadius(context, options) - 5 * unit;
     let sw = (parseFloat(options.barStrokeWidth) || 0);
     let w = (parseFloat(options.barWidth) || 0) * unit;
-
-    if (w > context.max) w = 50 * unit;
-
     let rMin = rMax - sw * 2 - w;
     let half = (rMax- rMin) / 2;
     let r = rMin + half;
@@ -692,7 +689,16 @@ export default class RadialGauge extends BaseGauge {
      */
     constructor(options) {
         options = Object.assign({}, defaultRadialGaugeOptions, options || {});
+        super(options);
+    }
 
+    /**
+     * Checks and sets gauge options
+     *
+     * @param {RadialGaugeOptions} options
+     * @return {RadialGauge}
+     */
+    configure(options = {}) {
         /* istanbul ignore if */
         if (isNaN(options.startAngle)) options.startAngle = 45;
         /* istanbul ignore if */
@@ -708,10 +714,17 @@ export default class RadialGauge extends BaseGauge {
         /* istanbul ignore if */
         if (options.startAngle > 360) options.startAngle = 360;
 
-        super(options);
+        /* istanbul ignore else */
+        if (options.barStrokeWidth >= options.barWidth) {
+            //noinspection JSUnresolvedFunction
+            options.barStrokeWidth = round(options.barWidth / 2);
+        }
+
+        if (options.barWidth > 50) options.barWidth = 50;
+
+        return super.configure(options);
     }
 
-    /*  */
     /**
      * Triggering gauge render on a canvas.
      *

test/globals.js

@@ -1 +1,3 @@
 window.ns = window;
+round = Math.round;
+abs = Math.abs;

test/spec/BaseGauge.js

@@ -16,7 +16,7 @@ class TestGauge extends BaseGauge {
 
 sinon.spy(TestGauge.prototype, 'draw');
 
-describe('BadseGauge', () => {
+describe('BaseGauge', () => {
     beforeEach(() => {
         TestGauge.prototype.draw.reset();
     });