Skip to content

Commit db7837c

Browse files
naikusnaikus
committed
Fix for issue #2 and some minor fixes
1 parent 391d9ed commit db7837c

File tree

7 files changed

+140
-128
lines changed

7 files changed

+140
-128
lines changed

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,11 @@ var Gauge = window.Gauge;
4646

4747
// Create a new Gauge
4848
var cpuGauge = Gauge(document.getElementById("cpuSpeed"), {
49-
min: 0
5049
max: 100,
50+
// custom label renderer
51+
label: function(value) {
52+
return Math.round(value) + "/" + this.max;
53+
},
5154
value: 50,
5255
});
5356

@@ -67,6 +70,7 @@ cpuGauge.setValueAnimated(90, 1);
6770
| ```dialEndAngle``` | The angle in degrees to end the dial. This MUST be less than dialStartAngle (```45```) |
6871
| ```radius``` | The radius of the gauge (```400```) |
6972
| ```max``` | The maximum value for the gauge (```100```) |
73+
| ```label``` | Optional function that returns a string label that will be rendered in the center. This function will be passed the current value |
7074
| ```showValue``` | Whether to show the value at the center of the gauge (```true```) |
7175

7276

‎dist/gauge.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
currentIteration = 1,
4040
iterations = 60 * duration,
4141
start = options.start || 0,
42-
end = options.end || 100,
42+
end = options.end,
4343
change = end - start,
4444
step = options.step,
4545
easing = options.easing || function easeInOutCubic(pos) {
@@ -168,9 +168,9 @@
168168
value = normalize(opts.value || 0, limit),
169169
radius = opts.radius || 400,
170170
displayValue = opts.showValue === false ? false : true,
171-
valueLabelRender = typeof opts.label === "function" ? opts.label : defaultLabelRenderer,
172-
startAngle = typeof(opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
173-
endAngle = typeof(opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
171+
valueLabelRender = typeof (opts.label) === "function" ? opts.label : defaultLabelRenderer,
172+
startAngle = typeof (opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
173+
endAngle = typeof (opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
174174
gaugeTextElem,
175175
gaugeValuePath,
176176
instance;
@@ -241,12 +241,15 @@
241241
limit = max;
242242
},
243243
setValue: function(val) {
244-
value = normalize(val);
244+
value = normalize(val, limit);
245245
updateGauge(value);
246246
},
247247
setValueAnimated: function(val, duration) {
248248
var oldVal = value;
249-
value = normalize(val);
249+
value = normalize(val, limit);
250+
if(oldVal === value) {
251+
return;
252+
}
250253
Animation({
251254
start: oldVal || 0,
252255
end: value,

‎dist/gauge.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
display: block;
1313
float: left;
1414
padding: 10px;
15+
overflow: hidden;
1516
}
1617
.gauge-container > .gauge > .dial {
1718
stroke: #334455;

‎example/index.html‎

Lines changed: 114 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
text-align: center;
3232
overflow: auto;
3333
padding: 20px 0;
34+
overflow: hidden;
3435
}
3536
.example > .display {
36-
padding-left: 20%;
3737
}
3838

3939
pre {
@@ -45,12 +45,12 @@
4545
font-size: 6em;
4646
}
4747

48-
@media only screen and (min-device-width: 600px) {
48+
@media only screen and (min-device-width: 768px) {
4949
.example > .code {
50-
width: 70%;
50+
width: 65%;
5151
}
5252
.example > .display {
53-
width: 30%;
53+
width: 35%;
5454
}
5555
.example > .code {
5656
float: left;
@@ -77,20 +77,21 @@ <h4>Minimalistic, zero dependency animated gauge widget</h4>
7777
<div class="example">
7878
<div class="code">
7979
<pre>
80-
<code class="html">&lt;div id="gauge1" class="gauge-container"&gt;&lt;/div&gt;</code>
81-
<code class="javascript">
82-
var gauge1 = Gauge(
83-
document.getElementById("gauge1"),
84-
{
85-
max: 100,
86-
dialStartAngle: -90,
87-
dialEndAngle: -90.001,
88-
value: 100,
89-
label: function(value) {
90-
return Math.round(value) + "/" + this.max;
91-
}
92-
}
93-
);</code>
80+
<code class="html">&lt;div id="gauge1" class="gauge-container"&gt;&lt;/div&gt;</code>
81+
<code class="javascript">
82+
var gauge1 = Gauge(
83+
document.getElementById("gauge1"),
84+
{
85+
max: 100,
86+
dialStartAngle: -90,
87+
dialEndAngle: -90.001,
88+
value: 100,
89+
label: function(value) {
90+
return Math.round(value) + "/" + this.max;
91+
}
92+
}
93+
);
94+
</code>
9495
</pre>
9596
</div>
9697
<div class="display">
@@ -103,20 +104,20 @@ <h4>Minimalistic, zero dependency animated gauge widget</h4>
103104
<div class="example">
104105
<div class="code">
105106
<pre>
106-
<code class="html">
107-
&lt;div id="gauge2" class="gauge-container two"&gt;&lt;/div&gt;
108-
</code>
109-
<code class="javascript">
110-
var gauge2 = Gauge(
111-
document.getElementById("gauge2"),
112-
{
113-
max: 100,
114-
dialStartAngle: 180,
115-
dialEndAngle: 0,
116-
value: 50
117-
}
118-
);
119-
</code>
107+
<code class="html">
108+
&lt;div id="gauge2" class="gauge-container two"&gt;&lt;/div&gt;
109+
</code>
110+
<code class="javascript">
111+
var gauge2 = Gauge(
112+
document.getElementById("gauge2"),
113+
{
114+
max: 100,
115+
dialStartAngle: 180,
116+
dialEndAngle: 0,
117+
value: 50
118+
}
119+
);
120+
</code>
120121
</pre>
121122
</div>
122123
<div class="display">
@@ -130,71 +131,71 @@ <h4>Minimalistic, zero dependency animated gauge widget</h4>
130131
<div class="example">
131132
<div class="code">
132133
<pre>
133-
<code class="html">
134-
&lt;div id="gauge3" class="gauge-container three"&gt;&lt;/div&gt;
135-
</code>
136-
<code class="javascript">
137-
var gauge3 = Gauge(
138-
document.getElementById("gauge3"),
139-
{
140-
max: 100,
141-
value: 50
142-
}
143-
);
144-
</code>
145-
</pre>
146-
</div>
147-
<div class="display">
148-
<div id="gauge3" class="gauge-container three"></div>
149-
</div>
150-
</div>
151-
152-
153-
154-
<div class="example">
155-
<div class="code">
156-
<pre>
157-
<code class="html">
158-
&lt;div id="gauge4" class="gauge-container four"&gt;&lt;/div&gt;
159-
</code>
160-
<code class="javascript">
161-
var gauge4 = Gauge(
162-
document.getElementById("gauge4"),
163-
{
164-
max: 100,
165-
dialStartAngle: 180,
166-
dialEndAngle: -90,
167-
value: 50
168-
}
169-
);
170-
</code>
171-
</pre>
172-
</div>
173-
<div class="display">
174-
<div id="gauge4" class="gauge-container four"></div>
175-
</div>
176-
</div>
177-
178-
179-
180-
181-
<div class="example">
182-
<div class="code">
183-
<pre>
184-
<code class="html">
185-
&lt;div id="gauge5" class="gauge-container five"&gt;&lt;/div&gt;
186-
</code>
187-
<code class="javascript">
188-
var gauge5 = Gauge(
189-
document.getElementById("gauge5"),
190-
{
191-
max: 200,
192-
dialStartAngle: 0,
193-
dialEndAngle: -180,
194-
value: 50
195-
}
196-
);
197-
</code>
134+
<code class="html">
135+
&lt;div id="gauge3" class="gauge-container three"&gt;&lt;/div&gt;
136+
</code>
137+
<code class="javascript">
138+
var gauge3 = Gauge(
139+
document.getElementById("gauge3"),
140+
{
141+
max: 100,
142+
value: 50
143+
}
144+
);
145+
</code>
146+
</pre>
147+
</div>
148+
<div class="display">
149+
<div id="gauge3" class="gauge-container three"></div>
150+
</div>
151+
</div>
152+
153+
154+
155+
<div class="example">
156+
<div class="code">
157+
<pre>
158+
<code class="html">
159+
&lt;div id="gauge4" class="gauge-container four"&gt;&lt;/div&gt;
160+
</code>
161+
<code class="javascript">
162+
var gauge4 = Gauge(
163+
document.getElementById("gauge4"),
164+
{
165+
max: 100,
166+
dialStartAngle: 180,
167+
dialEndAngle: -90,
168+
value: 50
169+
}
170+
);
171+
</code>
172+
</pre>
173+
</div>
174+
<div class="display">
175+
<div id="gauge4" class="gauge-container four"></div>
176+
</div>
177+
</div>
178+
179+
180+
181+
182+
<div class="example">
183+
<div class="code">
184+
<pre>
185+
<code class="html">
186+
&lt;div id="gauge5" class="gauge-container five"&gt;&lt;/div&gt;
187+
</code>
188+
<code class="javascript">
189+
var gauge5 = Gauge(
190+
document.getElementById("gauge5"),
191+
{
192+
max: 200,
193+
dialStartAngle: 0,
194+
dialEndAngle: -180,
195+
value: 50
196+
}
197+
);
198+
</code>
198199
</pre>
199200
</div>
200201
<div class="display">
@@ -208,22 +209,22 @@ <h4>Minimalistic, zero dependency animated gauge widget</h4>
208209
<div class="example">
209210
<div class="code">
210211
<pre>
211-
<code class="html">
212-
&lt;div id="gauge6" class="gauge-container six"&gt;&lt;/div&gt;
213-
</code>
214-
<code class="javascript">
215-
var gauge6 = Gauge(
216-
document.getElementById("gauge6"),
217-
{
218-
max: 100,
219-
dialStartAngle: 90.01,
220-
dialEndAngle: 89.99,
221-
radius: 150,
222-
displayValue: false,
223-
value: 50,
224-
}
225-
);
226-
</code>
212+
<code class="html">
213+
&lt;div id="gauge6" class="gauge-container six"&gt;&lt;/div&gt;
214+
</code>
215+
<code class="javascript">
216+
var gauge6 = Gauge(
217+
document.getElementById("gauge6"),
218+
{
219+
max: 100,
220+
dialStartAngle: 90.01,
221+
dialEndAngle: 89.99,
222+
radius: 150,
223+
displayValue: false,
224+
value: 50,
225+
}
226+
);
227+
</code>
227228
</pre>
228229
</div>
229230
<div class="display">

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "svg-gauge",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "Minimal SVG animated gauge with zero dependencies",
55
"main": "index.js",
66
"directories": {

‎src/gauge.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
currentIteration = 1,
4040
iterations = 60 * duration,
4141
start = options.start || 0,
42-
end = options.end || 100,
42+
end = options.end,
4343
change = end - start,
4444
step = options.step,
4545
easing = options.easing || function easeInOutCubic(pos) {
@@ -168,9 +168,9 @@
168168
value = normalize(opts.value || 0, limit),
169169
radius = opts.radius || 400,
170170
displayValue = opts.showValue === false ? false : true,
171-
valueLabelRender = typeof opts.label === "function" ? opts.label : defaultLabelRenderer,
172-
startAngle = typeof(opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
173-
endAngle = typeof(opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
171+
valueLabelRender = typeof (opts.label) === "function" ? opts.label : defaultLabelRenderer,
172+
startAngle = typeof (opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
173+
endAngle = typeof (opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
174174
gaugeTextElem,
175175
gaugeValuePath,
176176
instance;
@@ -241,12 +241,15 @@
241241
limit = max;
242242
},
243243
setValue: function(val) {
244-
value = normalize(val);
244+
value = normalize(val, limit);
245245
updateGauge(value);
246246
},
247247
setValueAnimated: function(val, duration) {
248248
var oldVal = value;
249-
value = normalize(val);
249+
value = normalize(val, limit);
250+
if(oldVal === value) {
251+
return;
252+
}
250253
Animation({
251254
start: oldVal || 0,
252255
end: value,

0 commit comments

Comments
 (0)