Fix for issue #2 and some minor fixes

naikus · Oct 28, 2016 · db7837c · db7837c
1 parent 391d9ed
commit db7837c
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 128 deletions.
diff --git a/README.md b/README.md
@@ -46,8 +46,11 @@ var Gauge = window.Gauge;
 
 // Create a new Gauge
 var cpuGauge = Gauge(document.getElementById("cpuSpeed"), {
-    min: 0
     max: 100,
+    // custom label renderer
+    label: function(value) {
+      return Math.round(value) + "/" + this.max;
+    },
     value: 50,
 });
 
@@ -67,6 +70,7 @@ cpuGauge.setValueAnimated(90, 1);
 | ```dialEndAngle```   | The angle in degrees to end the dial. This MUST be less than dialStartAngle (```45```)  |
 | ```radius```         | The radius of the gauge (```400```) |
 | ```max```            | The maximum value for the gauge (```100```)  |
+| ```label```          | Optional function that returns a string label that will be rendered in the center. This function will be passed the current value |
 | ```showValue```      | Whether to show the value at the center of the gauge (```true```) |
 
 

diff --git a/dist/gauge.js b/dist/gauge.js
@@ -39,7 +39,7 @@
         currentIteration = 1,
         iterations = 60 * duration,
         start = options.start || 0,
-        end = options.end || 100,
+        end = options.end,
         change = end - start,
         step = options.step,
         easing = options.easing || function easeInOutCubic(pos) {
@@ -168,9 +168,9 @@
           value = normalize(opts.value || 0, limit),
           radius = opts.radius || 400,
           displayValue = opts.showValue === false ? false : true,
-          valueLabelRender = typeof opts.label === "function" ? opts.label : defaultLabelRenderer,
-          startAngle = typeof(opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
-          endAngle = typeof(opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
+          valueLabelRender = typeof (opts.label) === "function" ? opts.label : defaultLabelRenderer,
+          startAngle = typeof (opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
+          endAngle = typeof (opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
           gaugeTextElem,
           gaugeValuePath,
           instance;
@@ -241,12 +241,15 @@
           limit = max;
         },
         setValue: function(val) {
-          value = normalize(val);
+          value = normalize(val, limit);
           updateGauge(value);
         },
         setValueAnimated: function(val, duration) {
         	var oldVal = value;
-          value = normalize(val);
+          value = normalize(val, limit);
+          if(oldVal === value) {
+            return;
+          }
           Animation({
             start: oldVal || 0,
             end: value,

diff --git a/dist/gauge.min.js b/dist/gauge.min.js
diff --git a/example/index.css b/example/index.css
@@ -12,6 +12,7 @@
     display: block;
     float: left;
     padding: 10px;
+    overflow: hidden;
   }
   .gauge-container > .gauge > .dial {
     stroke: #334455;

diff --git a/example/index.html b/example/index.html
@@ -31,9 +31,9 @@
         text-align: center;
         overflow: auto;
         padding: 20px 0;
+        overflow: hidden;
       }
       .example > .display {
-        padding-left: 20%;
       }
 
       pre {
@@ -45,12 +45,12 @@
         font-size: 6em;
       }
 
-      @media only screen and (min-device-width: 600px) {
+      @media only screen and (min-device-width: 768px) {
         .example > .code {
-          width: 70%;
+          width: 65%;
         }
         .example > .display {
-          width: 30%;
+          width: 35%;
         }
         .example > .code {
           float: left;
@@ -77,20 +77,21 @@ <h4>Minimalistic, zero dependency animated gauge widget</h4>
     <div class="example">
       <div class="code">
         <pre>
-          <code class="html">&lt;div id="gauge1" class="gauge-container"&gt;&lt;/div&gt;</code>
-          <code class="javascript">
-            var gauge1 = Gauge(
-              document.getElementById("gauge1"), 
-              {
-                max: 100,
-                dialStartAngle: -90,
-                dialEndAngle: -90.001, 
-                value: 100,
-                label: function(value) {
-                  return Math.round(value) + "/" + this.max;
-                }
-              }
-            );</code>
+<code class="html">&lt;div id="gauge1" class="gauge-container"&gt;&lt;/div&gt;</code>
+<code class="javascript">
+  var gauge1 = Gauge(
+    document.getElementById("gauge1"), 
+    {
+      max: 100,
+      dialStartAngle: -90,
+      dialEndAngle: -90.001, 
+      value: 100,
+      label: function(value) {
+        return Math.round(value) + "/" + this.max;
+      }
+    }
+  );
+</code>
         </pre>
       </div>
       <div class="display">
@@ -103,20 +104,20 @@ <h4>Minimalistic, zero dependency animated gauge widget</h4>
     <div class="example">
       <div class="code">
         <pre>
-          <code class="html">
-            &lt;div id="gauge2" class="gauge-container two"&gt;&lt;/div&gt;      
-          </code>
-          <code class="javascript">
-            var gauge2 = Gauge(
-              document.getElementById("gauge2"), 
-              {
-                max: 100,
-                dialStartAngle: 180,
-                dialEndAngle: 0, 
-                value: 50
-              }
-            );
-          </code>
+<code class="html">
+  &lt;div id="gauge2" class="gauge-container two"&gt;&lt;/div&gt;      
+</code>
+<code class="javascript">
+  var gauge2 = Gauge(
+    document.getElementById("gauge2"), 
+    {
+      max: 100,
+      dialStartAngle: 180,
+      dialEndAngle: 0, 
+      value: 50
+    }
+  );
+</code>
         </pre>
       </div>
       <div class="display">
@@ -130,71 +131,71 @@ <h4>Minimalistic, zero dependency animated gauge widget</h4>
     <div class="example">
       <div class="code">
         <pre>
-          <code class="html">
-            &lt;div id="gauge3" class="gauge-container three"&gt;&lt;/div&gt;      
-          </code>
-          <code class="javascript">
-            var gauge3 = Gauge(
-              document.getElementById("gauge3"), 
-              {
-                max: 100, 
-                value: 50
-              }
-            );
-          </code>
-        </pre>
-      </div>
-      <div class="display">
-        <div id="gauge3" class="gauge-container three"></div>
-      </div>
-    </div>
-
-
-
-    <div class="example">
-      <div class="code">
-        <pre>
-          <code class="html">
-            &lt;div id="gauge4" class="gauge-container four"&gt;&lt;/div&gt;      
-          </code>
-          <code class="javascript">
-            var gauge4 = Gauge(
-              document.getElementById("gauge4"), 
-              {
-                max: 100,
-                dialStartAngle: 180,
-                dialEndAngle: -90, 
-                value: 50
-              }
-            );
-          </code>
-        </pre>
-      </div>
-      <div class="display">
-        <div id="gauge4" class="gauge-container four"></div>
-      </div>
-    </div>
-
-
-
-
-    <div class="example">
-      <div class="code">
-        <pre>
-          <code class="html">
-            &lt;div id="gauge5" class="gauge-container five"&gt;&lt;/div&gt;      
-          </code>
-          <code class="javascript">
-            var gauge5 = Gauge(
-              document.getElementById("gauge5"), 
-              {
-                max: 200,
-                dialStartAngle: 0,
-                dialEndAngle: -180, 
-                value: 50
-              }
-            );
-          </code>
+<code class="html">
+  &lt;div id="gauge3" class="gauge-container three"&gt;&lt;/div&gt;      
+</code>
+<code class="javascript">
+  var gauge3 = Gauge(
+    document.getElementById("gauge3"), 
+    {
+      max: 100, 
+      value: 50
+    }
+  );
+</code>
+</pre>
+</div>
+<div class="display">
+<div id="gauge3" class="gauge-container three"></div>
+</div>
+</div>
+
+
+
+<div class="example">
+<div class="code">
+<pre>
+<code class="html">
+  &lt;div id="gauge4" class="gauge-container four"&gt;&lt;/div&gt;      
+</code>
+<code class="javascript">
+  var gauge4 = Gauge(
+    document.getElementById("gauge4"), 
+    {
+      max: 100,
+      dialStartAngle: 180,
+      dialEndAngle: -90, 
+      value: 50
+    }
+  );
+</code>
+</pre>
+</div>
+<div class="display">
+<div id="gauge4" class="gauge-container four"></div>
+</div>
+</div>
+
+
+
+
+<div class="example">
+<div class="code">
+<pre>
+<code class="html">
+  &lt;div id="gauge5" class="gauge-container five"&gt;&lt;/div&gt;      
+</code>
+<code class="javascript">
+  var gauge5 = Gauge(
+    document.getElementById("gauge5"), 
+    {
+      max: 200,
+      dialStartAngle: 0,
+      dialEndAngle: -180, 
+      value: 50
+    }
+  );
+</code>
         </pre>
       </div>
       <div class="display">
@@ -208,22 +209,22 @@ <h4>Minimalistic, zero dependency animated gauge widget</h4>
     <div class="example">
       <div class="code">
         <pre>
-          <code class="html">
-            &lt;div id="gauge6" class="gauge-container six"&gt;&lt;/div&gt;      
-          </code>
-          <code class="javascript">
-            var gauge6 = Gauge(
-              document.getElementById("gauge6"), 
-              {
-                max: 100,
-                dialStartAngle: 90.01,
-                dialEndAngle: 89.99,
-                radius: 150,
-                displayValue: false, 
-                value: 50,
-              }
-            );
-          </code>
+<code class="html">
+  &lt;div id="gauge6" class="gauge-container six"&gt;&lt;/div&gt;      
+</code>
+<code class="javascript">
+  var gauge6 = Gauge(
+    document.getElementById("gauge6"), 
+    {
+      max: 100,
+      dialStartAngle: 90.01,
+      dialEndAngle: 89.99,
+      radius: 150,
+      displayValue: false, 
+      value: 50,
+    }
+  );
+</code>
         </pre>
       </div>
       <div class="display">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svg-gauge",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Minimal SVG animated gauge with zero dependencies",
   "main": "index.js",
   "directories": {

diff --git a/src/gauge.js b/src/gauge.js
@@ -39,7 +39,7 @@
         currentIteration = 1,
         iterations = 60 * duration,
         start = options.start || 0,
-        end = options.end || 100,
+        end = options.end,
         change = end - start,
         step = options.step,
         easing = options.easing || function easeInOutCubic(pos) {
@@ -168,9 +168,9 @@
           value = normalize(opts.value || 0, limit),
           radius = opts.radius || 400,
           displayValue = opts.showValue === false ? false : true,
-          valueLabelRender = typeof opts.label === "function" ? opts.label : defaultLabelRenderer,
-          startAngle = typeof(opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
-          endAngle = typeof(opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
+          valueLabelRender = typeof (opts.label) === "function" ? opts.label : defaultLabelRenderer,
+          startAngle = typeof (opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
+          endAngle = typeof (opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
           gaugeTextElem,
           gaugeValuePath,
           instance;
@@ -241,12 +241,15 @@
           limit = max;
         },
         setValue: function(val) {
-          value = normalize(val);
+          value = normalize(val, limit);
           updateGauge(value);
         },
         setValueAnimated: function(val, duration) {
         	var oldVal = value;
-          value = normalize(val);
+          value = normalize(val, limit);
+          if(oldVal === value) {
+            return;
+          }
           Animation({
             start: oldVal || 0,
             end: value,