gaugejs-rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/gaugejs-rails.gemspec +29 -0
- data/lib/gaugejs-rails.rb +6 -0
- data/lib/gaugejs-rails/engine.rb +6 -0
- data/lib/gaugejs-rails/version.rb +5 -0
- data/vendor/assets/javascripts/gauge.coffee +356 -0
- data/vendor/assets/javascripts/gauge.js +435 -0
- data/vendor/assets/javascripts/gauge.min.js +37 -0
- metadata +82 -0
@@ -0,0 +1,29 @@
|
|
1
|
+
# largely copying the example from the
|
2
|
+
# less-rails-fontawesome gem
|
3
|
+
|
4
|
+
$:.push File.expand_path("../lib", __FILE__)
|
5
|
+
|
6
|
+
require 'gaugejs-rails/version'
|
7
|
+
|
8
|
+
Gem::Specification.new do |s|
|
9
|
+
s.name = 'gaugejs-rails'
|
10
|
+
s.version = GaugeJS::Rails::VERSION
|
11
|
+
s.authors = ['Chris Miller']
|
12
|
+
s.email = ['lordsauronthegreat@gmail.com']
|
13
|
+
s.homepage = 'https://github.com/NSError/gaugejs-rails'
|
14
|
+
s.summary = %q{Gauge.JS packaged for your Rails 3.1+ Asset Pipeline}
|
15
|
+
s.description = %q{Gauge.JS packaged for the Rails 3.1+ Asset Pipeline, both the Coffee, JS, and min.JS versions.}
|
16
|
+
|
17
|
+
s.files = %w{
|
18
|
+
gaugejs-rails.gemspec
|
19
|
+
vendor/assets/javascripts/gauge.coffee
|
20
|
+
vendor/assets/javascripts/gauge.js
|
21
|
+
vendor/assets/javascripts/gauge.min.js
|
22
|
+
lib/gaugejs-rails.rb
|
23
|
+
lib/gaugejs-rails/engine.rb
|
24
|
+
lib/gaugejs-rails/version.rb
|
25
|
+
}
|
26
|
+
s.require_paths = ['lib']
|
27
|
+
|
28
|
+
s.add_runtime_dependency 'railties', '>= 3.1.1'
|
29
|
+
end
|
@@ -0,0 +1,356 @@
|
|
1
|
+
# Request Animation Frame Polyfill
|
2
|
+
# CoffeeScript version of http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
3
|
+
do () ->
|
4
|
+
vendors = ['ms', 'moz', 'webkit', 'o']
|
5
|
+
for vendor in vendors
|
6
|
+
if window.requestAnimationFrame
|
7
|
+
break
|
8
|
+
window.requestAnimationFrame = window[vendor + 'RequestAnimationFrame']
|
9
|
+
window.cancelAnimationFrame = window[vendor + 'CancelAnimationFrame'] or window[vendor + 'CancelRequestAnimationFrame']
|
10
|
+
|
11
|
+
browserRequestAnimationFrame = null
|
12
|
+
lastId = 0
|
13
|
+
isCancelled = {}
|
14
|
+
|
15
|
+
if not requestAnimationFrame
|
16
|
+
window.requestAnimationFrame = (callback, element) ->
|
17
|
+
currTime = new Date().getTime()
|
18
|
+
timeToCall = Math.max(0, 16 - (currTime - lastTime))
|
19
|
+
id = window.setTimeout(() ->
|
20
|
+
callback(currTime + timeToCall)
|
21
|
+
, timeToCall)
|
22
|
+
lastTime = currTime + timeToCall
|
23
|
+
return id
|
24
|
+
# This implementation should only be used with the setTimeout()
|
25
|
+
# version of window.requestAnimationFrame().
|
26
|
+
window.cancelAnimationFrame = (id) ->
|
27
|
+
clearTimeout(id)
|
28
|
+
else if not window.cancelAnimationFrame
|
29
|
+
browserRequestAnimationFrame = window.requestAnimationFrame
|
30
|
+
window.requestAnimationFrame = (callback, element) ->
|
31
|
+
myId = ++lastId
|
32
|
+
browserRequestAnimationFrame(() ->
|
33
|
+
if not isCancelled[myId]
|
34
|
+
callback()
|
35
|
+
, element)
|
36
|
+
return myId
|
37
|
+
window.cancelAnimationFrame = (id) ->
|
38
|
+
isCancelled[id] = true
|
39
|
+
|
40
|
+
String.prototype.hashCode = () ->
|
41
|
+
hash = 0
|
42
|
+
if this.length == 0
|
43
|
+
return hash
|
44
|
+
for i in [0...this.length]
|
45
|
+
char = this.charCodeAt(i)
|
46
|
+
hash = ((hash << 5) - hash) + char
|
47
|
+
hash = hash & hash # Convert to 32bit integer
|
48
|
+
return hash
|
49
|
+
|
50
|
+
secondsToString = (sec) ->
|
51
|
+
hr = Math.floor(sec / 3600)
|
52
|
+
min = Math.floor((sec - (hr * 3600))/60)
|
53
|
+
sec -= ((hr * 3600) + (min * 60))
|
54
|
+
sec += ''
|
55
|
+
min += ''
|
56
|
+
while min.length < 2
|
57
|
+
min = '0' + min
|
58
|
+
while sec.length < 2
|
59
|
+
sec = '0' + sec
|
60
|
+
hr = if hr then hr + ':' else ''
|
61
|
+
return hr + min + ':' + sec
|
62
|
+
|
63
|
+
formatNumber = (num) ->
|
64
|
+
return addCommas(num.toFixed(0))
|
65
|
+
|
66
|
+
updateObjectValues = (obj1, obj2) ->
|
67
|
+
for own key, val of obj2
|
68
|
+
obj1[key] = val
|
69
|
+
|
70
|
+
addCommas =(nStr) ->
|
71
|
+
nStr += ''
|
72
|
+
x = nStr.split('.')
|
73
|
+
x1 = x[0]
|
74
|
+
x2 = ''
|
75
|
+
if x.length > 1
|
76
|
+
x2 = '.' + x[1]
|
77
|
+
rgx = /(\d+)(\d{3})/
|
78
|
+
while rgx.test(x1)
|
79
|
+
x1 = x1.replace(rgx, '$1' + ',' + '$2')
|
80
|
+
return x1 + x2
|
81
|
+
|
82
|
+
class ValueUpdater
|
83
|
+
animationSpeed: 32
|
84
|
+
constructor: () ->
|
85
|
+
AnimationUpdater.add(@)
|
86
|
+
|
87
|
+
update: ->
|
88
|
+
if @displayedValue != @value
|
89
|
+
if @ctx
|
90
|
+
@ctx.clearRect(0, 0, @canvas.width, @canvas.height)
|
91
|
+
diff = @value - @displayedValue
|
92
|
+
if Math.abs(diff / @animationSpeed) <= 0.001
|
93
|
+
@displayedValue = @value
|
94
|
+
else
|
95
|
+
@displayedValue = @displayedValue + diff / @animationSpeed
|
96
|
+
@render()
|
97
|
+
return true
|
98
|
+
return false
|
99
|
+
|
100
|
+
class AnimatedText extends ValueUpdater
|
101
|
+
displayedValue: 0
|
102
|
+
value: 0
|
103
|
+
|
104
|
+
setVal: (value) ->
|
105
|
+
@value = 1 * value
|
106
|
+
|
107
|
+
constructor: (@elem, @text=false) ->
|
108
|
+
@value = 1 * @elem.innerHTML
|
109
|
+
if @text
|
110
|
+
@value = 0
|
111
|
+
render: () ->
|
112
|
+
if @text
|
113
|
+
textVal = secondsToString(@displayedValue.toFixed(0))
|
114
|
+
else
|
115
|
+
textVal = addCommas(formatNumber(@displayedValue))
|
116
|
+
@elem.innerHTML = textVal
|
117
|
+
|
118
|
+
AnimatedTextFactory =
|
119
|
+
create: (objList) ->
|
120
|
+
out = []
|
121
|
+
for elem in objList
|
122
|
+
out.push(new AnimatedText(elem))
|
123
|
+
return out
|
124
|
+
|
125
|
+
class GaugePointer
|
126
|
+
strokeWidth: 3
|
127
|
+
length: 76
|
128
|
+
options:
|
129
|
+
strokeWidth: 0.035
|
130
|
+
length: 0.1
|
131
|
+
constructor: (@ctx, @canvas) ->
|
132
|
+
# @length = @canvas.height * @options.length
|
133
|
+
# @strokeWidth = @canvas.height * @options.strokeWidth
|
134
|
+
@setOptions()
|
135
|
+
|
136
|
+
setOptions: (options=null) ->
|
137
|
+
updateObjectValues(@options, options)
|
138
|
+
@length = @canvas.height * @options.length
|
139
|
+
@strokeWidth = @canvas.height * @options.strokeWidth
|
140
|
+
|
141
|
+
render: (angle) ->
|
142
|
+
centerX = @canvas.width / 2
|
143
|
+
centerY = @canvas.height * 0.9
|
144
|
+
|
145
|
+
# angle = Math.PI * 1.45
|
146
|
+
x = Math.round(centerX + @length * Math.cos(angle))
|
147
|
+
y = Math.round(centerY + @length * Math.sin(angle))
|
148
|
+
|
149
|
+
startX = Math.round(centerX + @strokeWidth * Math.cos(angle - Math.PI/2))
|
150
|
+
startY = Math.round(centerY + @strokeWidth * Math.sin(angle - Math.PI/2))
|
151
|
+
|
152
|
+
endX = Math.round(centerX + @strokeWidth * Math.cos(angle + Math.PI/2))
|
153
|
+
endY = Math.round(centerY + @strokeWidth * Math.sin(angle + Math.PI/2))
|
154
|
+
|
155
|
+
@ctx.fillStyle = "black"
|
156
|
+
@ctx.beginPath()
|
157
|
+
|
158
|
+
@ctx.arc(centerX, centerY, @strokeWidth, 0, Math.PI*2, true)
|
159
|
+
@ctx.fill()
|
160
|
+
|
161
|
+
@ctx.beginPath()
|
162
|
+
@ctx.moveTo(startX, startY)
|
163
|
+
@ctx.lineTo(x, y)
|
164
|
+
@ctx.lineTo(endX, endY)
|
165
|
+
@ctx.fill()
|
166
|
+
|
167
|
+
|
168
|
+
class Bar
|
169
|
+
constructor: (@elem) ->
|
170
|
+
updateValues: (arrValues) ->
|
171
|
+
@value = arrValues[0]
|
172
|
+
@maxValue = arrValues[1]
|
173
|
+
@avgValue = arrValues[2]
|
174
|
+
@render()
|
175
|
+
|
176
|
+
render: () ->
|
177
|
+
if @textField
|
178
|
+
@textField.text(formatNumber(@value))
|
179
|
+
|
180
|
+
if @maxValue == 0
|
181
|
+
@maxValue = @avgValue * 2
|
182
|
+
|
183
|
+
valPercent = (@value / @maxValue) * 100
|
184
|
+
avgPercent = (@avgValue / @maxValue) * 100
|
185
|
+
# alert(valPercent)
|
186
|
+
$(".bar-value", @elem).css({"width": valPercent + "%"})
|
187
|
+
$(".typical-value", @elem).css({"width": avgPercent + "%"})
|
188
|
+
|
189
|
+
class Gauge extends ValueUpdater
|
190
|
+
elem: null
|
191
|
+
value: 20
|
192
|
+
maxValue: 80
|
193
|
+
# angle: 1.45 * Math.PI
|
194
|
+
displayedAngle: 0
|
195
|
+
displayedValue: 0
|
196
|
+
lineWidth: 40
|
197
|
+
paddingBottom: 0.1
|
198
|
+
options:
|
199
|
+
colorStart: "#6fadcf"
|
200
|
+
colorStop: "#8fc0da"
|
201
|
+
strokeColor: "#e0e0e0"
|
202
|
+
pointer:
|
203
|
+
length: 0.8
|
204
|
+
strokeWidth: 0.035
|
205
|
+
angle: 0.15
|
206
|
+
lineWidth: 0.44
|
207
|
+
fontSize: 40
|
208
|
+
constructor: (@canvas) ->
|
209
|
+
super()
|
210
|
+
@ctx = @canvas.getContext('2d')
|
211
|
+
@gp = new GaugePointer(@ctx, @canvas)
|
212
|
+
@setOptions()
|
213
|
+
@render()
|
214
|
+
|
215
|
+
setOptions: (options=null) ->
|
216
|
+
updateObjectValues(@options, options)
|
217
|
+
@lineWidth = @canvas.height * (1 - @paddingBottom) * @options.lineWidth # .2 - .7
|
218
|
+
@radius = @canvas.height * (1 - @paddingBottom) - @lineWidth
|
219
|
+
@gp.setOptions(@options.pointer)
|
220
|
+
if @textField
|
221
|
+
@textField.style.fontSize = options.fontSize + 'px'
|
222
|
+
return @
|
223
|
+
|
224
|
+
set: (value) ->
|
225
|
+
@value = value
|
226
|
+
if @value > @maxValue
|
227
|
+
@maxValue = @value * 1.1
|
228
|
+
AnimationUpdater.run()
|
229
|
+
|
230
|
+
getAngle: (value) ->
|
231
|
+
return (1 + @options.angle) * Math.PI + (value / @maxValue) * (1 - @options.angle * 2) * Math.PI
|
232
|
+
|
233
|
+
setTextField: (@textField) ->
|
234
|
+
|
235
|
+
render: () ->
|
236
|
+
# Draw using canvas
|
237
|
+
w = @canvas.width / 2
|
238
|
+
h = @canvas.height * (1 - @paddingBottom)
|
239
|
+
displayedAngle = @getAngle(@displayedValue)
|
240
|
+
if @textField
|
241
|
+
@textField.innerHTML = formatNumber(@displayedValue)
|
242
|
+
|
243
|
+
grd = @ctx.createRadialGradient(w, h, 9, w, h, 70)
|
244
|
+
@ctx.lineCap = "butt"
|
245
|
+
|
246
|
+
grd.addColorStop(0, @options.colorStart)
|
247
|
+
grd.addColorStop(1, @options.colorStop)
|
248
|
+
@ctx.strokeStyle = grd
|
249
|
+
@ctx.beginPath()
|
250
|
+
@ctx.arc(w, h, @radius, (1 + @options.angle) * Math.PI, displayedAngle, false)
|
251
|
+
@ctx.lineWidth = @lineWidth
|
252
|
+
@ctx.stroke()
|
253
|
+
|
254
|
+
@ctx.strokeStyle = @options.strokeColor
|
255
|
+
@ctx.beginPath()
|
256
|
+
@ctx.arc(w, h, @radius, displayedAngle, (2 - @options.angle) * Math.PI, false)
|
257
|
+
@ctx.stroke()
|
258
|
+
@gp.render(displayedAngle)
|
259
|
+
|
260
|
+
class Donut extends ValueUpdater
|
261
|
+
lineWidth: 15
|
262
|
+
displayedValue: 0
|
263
|
+
value: 33
|
264
|
+
maxValue: 80
|
265
|
+
|
266
|
+
options:
|
267
|
+
lineWidth: 0.10
|
268
|
+
colorStart: "#6f6ea0"
|
269
|
+
colorStop: "#c0c0db"
|
270
|
+
strokeColor: "#eeeeee"
|
271
|
+
angle: 0.35
|
272
|
+
|
273
|
+
constructor: (@canvas) -> #, @color=["#6fadcf", "#8fc0da"]) ->
|
274
|
+
super()
|
275
|
+
@ctx = @canvas.getContext('2d')
|
276
|
+
# @canvas = @elem[0]
|
277
|
+
@setOptions()
|
278
|
+
@render()
|
279
|
+
|
280
|
+
getAngle: (value) ->
|
281
|
+
return (1 - @options.angle) * Math.PI + (value / @maxValue) * ((2 + @options.angle) - (1 - @options.angle)) * Math.PI
|
282
|
+
|
283
|
+
setOptions: (options=null) ->
|
284
|
+
updateObjectValues(@options, options)
|
285
|
+
@lineWidth = @canvas.height * @options.lineWidth #0.10
|
286
|
+
@radius = @canvas.height / 2 - @lineWidth/2
|
287
|
+
if @textField
|
288
|
+
@textField.style.fontSize = options.fontSize + 'px'
|
289
|
+
return @
|
290
|
+
|
291
|
+
setTextField: (@textField) ->
|
292
|
+
|
293
|
+
set: (value) ->
|
294
|
+
@value = value
|
295
|
+
if @value > @maxValue
|
296
|
+
@maxValue = @value * 1.1
|
297
|
+
AnimationUpdater.run()
|
298
|
+
|
299
|
+
render: () ->
|
300
|
+
displayedAngle = @getAngle(@displayedValue)
|
301
|
+
w = @canvas.width / 2
|
302
|
+
h = @canvas.height / 2
|
303
|
+
|
304
|
+
if @textField
|
305
|
+
@textField.innerHTML = formatNumber(@displayedValue)
|
306
|
+
|
307
|
+
grdFill = @ctx.createRadialGradient(w, h, 39, w, h, 70)
|
308
|
+
grdFill.addColorStop(0, @options.colorStart)
|
309
|
+
grdFill.addColorStop(1, @options.colorStop)
|
310
|
+
|
311
|
+
start = @radius - @lineWidth / 2;
|
312
|
+
stop = @radius + @lineWidth / 2;
|
313
|
+
|
314
|
+
grd = @ctx.createRadialGradient(w, h, start, w, h, stop)
|
315
|
+
grd.addColorStop(0, "#d5d5d5")
|
316
|
+
grd.addColorStop(0.12, @options.strokeColor)
|
317
|
+
grd.addColorStop(0.88, @options.strokeColor)
|
318
|
+
grd.addColorStop(1, "#d5d5d5")
|
319
|
+
|
320
|
+
@ctx.strokeStyle = grd
|
321
|
+
@ctx.beginPath()
|
322
|
+
@ctx.arc(w, h, @radius, (1 - @options.angle) * Math.PI, (2 + @options.angle) * Math.PI, false)
|
323
|
+
@ctx.lineWidth = @lineWidth
|
324
|
+
@ctx.lineCap = "round"
|
325
|
+
@ctx.stroke()
|
326
|
+
|
327
|
+
@ctx.strokeStyle = grdFill
|
328
|
+
@ctx.beginPath()
|
329
|
+
@ctx.arc(w, h, @radius, (1 - @options.angle) * Math.PI, displayedAngle, false)
|
330
|
+
@ctx.stroke()
|
331
|
+
|
332
|
+
|
333
|
+
window.AnimationUpdater =
|
334
|
+
elements: []
|
335
|
+
animId: null
|
336
|
+
|
337
|
+
addAll: (list) ->
|
338
|
+
for elem in list
|
339
|
+
AnimationUpdater.elements.push(elem)
|
340
|
+
|
341
|
+
add: (object) ->
|
342
|
+
AnimationUpdater.elements.push(object)
|
343
|
+
|
344
|
+
run: () ->
|
345
|
+
animationFinished = true
|
346
|
+
for elem in AnimationUpdater.elements
|
347
|
+
if elem.update()
|
348
|
+
animationFinished = false
|
349
|
+
if not animationFinished
|
350
|
+
AnimationUpdater.animId = requestAnimationFrame(AnimationUpdater.run)
|
351
|
+
else
|
352
|
+
cancelAnimationFrame(AnimationUpdater.animId)
|
353
|
+
|
354
|
+
window.Gauge = Gauge
|
355
|
+
window.Donut = Donut
|
356
|
+
|
@@ -0,0 +1,435 @@
|
|
1
|
+
(function() {
|
2
|
+
var AnimatedText, AnimatedTextFactory, Bar, Donut, Gauge, GaugePointer, ValueUpdater, addCommas, formatNumber, secondsToString, updateObjectValues;
|
3
|
+
var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
|
4
|
+
for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
|
5
|
+
function ctor() { this.constructor = child; }
|
6
|
+
ctor.prototype = parent.prototype;
|
7
|
+
child.prototype = new ctor;
|
8
|
+
child.__super__ = parent.prototype;
|
9
|
+
return child;
|
10
|
+
};
|
11
|
+
(function() {
|
12
|
+
var browserRequestAnimationFrame, isCancelled, lastId, vendor, vendors, _i, _len;
|
13
|
+
vendors = ['ms', 'moz', 'webkit', 'o'];
|
14
|
+
for (_i = 0, _len = vendors.length; _i < _len; _i++) {
|
15
|
+
vendor = vendors[_i];
|
16
|
+
if (window.requestAnimationFrame) {
|
17
|
+
break;
|
18
|
+
}
|
19
|
+
window.requestAnimationFrame = window[vendor + 'RequestAnimationFrame'];
|
20
|
+
window.cancelAnimationFrame = window[vendor + 'CancelAnimationFrame'] || window[vendor + 'CancelRequestAnimationFrame'];
|
21
|
+
}
|
22
|
+
browserRequestAnimationFrame = null;
|
23
|
+
lastId = 0;
|
24
|
+
isCancelled = {};
|
25
|
+
if (!requestAnimationFrame) {
|
26
|
+
window.requestAnimationFrame = function(callback, element) {
|
27
|
+
var currTime, id, lastTime, timeToCall;
|
28
|
+
currTime = new Date().getTime();
|
29
|
+
timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
30
|
+
id = window.setTimeout(function() {
|
31
|
+
return callback(currTime + timeToCall);
|
32
|
+
}, timeToCall);
|
33
|
+
lastTime = currTime + timeToCall;
|
34
|
+
return id;
|
35
|
+
};
|
36
|
+
return window.cancelAnimationFrame = function(id) {
|
37
|
+
return clearTimeout(id);
|
38
|
+
};
|
39
|
+
} else if (!window.cancelAnimationFrame) {
|
40
|
+
browserRequestAnimationFrame = window.requestAnimationFrame;
|
41
|
+
window.requestAnimationFrame = function(callback, element) {
|
42
|
+
var myId;
|
43
|
+
myId = ++lastId;
|
44
|
+
browserRequestAnimationFrame(function() {
|
45
|
+
if (!isCancelled[myId]) {
|
46
|
+
return callback();
|
47
|
+
}
|
48
|
+
}, element);
|
49
|
+
return myId;
|
50
|
+
};
|
51
|
+
return window.cancelAnimationFrame = function(id) {
|
52
|
+
return isCancelled[id] = true;
|
53
|
+
};
|
54
|
+
}
|
55
|
+
})();
|
56
|
+
String.prototype.hashCode = function() {
|
57
|
+
var char, hash, i, _ref;
|
58
|
+
hash = 0;
|
59
|
+
if (this.length === 0) {
|
60
|
+
return hash;
|
61
|
+
}
|
62
|
+
for (i = 0, _ref = this.length; 0 <= _ref ? i < _ref : i > _ref; 0 <= _ref ? i++ : i--) {
|
63
|
+
char = this.charCodeAt(i);
|
64
|
+
hash = ((hash << 5) - hash) + char;
|
65
|
+
hash = hash & hash;
|
66
|
+
}
|
67
|
+
return hash;
|
68
|
+
};
|
69
|
+
secondsToString = function(sec) {
|
70
|
+
var hr, min;
|
71
|
+
hr = Math.floor(sec / 3600);
|
72
|
+
min = Math.floor((sec - (hr * 3600)) / 60);
|
73
|
+
sec -= (hr * 3600) + (min * 60);
|
74
|
+
sec += '';
|
75
|
+
min += '';
|
76
|
+
while (min.length < 2) {
|
77
|
+
min = '0' + min;
|
78
|
+
}
|
79
|
+
while (sec.length < 2) {
|
80
|
+
sec = '0' + sec;
|
81
|
+
}
|
82
|
+
hr = hr ? hr + ':' : '';
|
83
|
+
return hr + min + ':' + sec;
|
84
|
+
};
|
85
|
+
formatNumber = function(num) {
|
86
|
+
return addCommas(num.toFixed(0));
|
87
|
+
};
|
88
|
+
updateObjectValues = function(obj1, obj2) {
|
89
|
+
var key, val, _results;
|
90
|
+
_results = [];
|
91
|
+
for (key in obj2) {
|
92
|
+
if (!__hasProp.call(obj2, key)) continue;
|
93
|
+
val = obj2[key];
|
94
|
+
_results.push(obj1[key] = val);
|
95
|
+
}
|
96
|
+
return _results;
|
97
|
+
};
|
98
|
+
addCommas = function(nStr) {
|
99
|
+
var rgx, x, x1, x2;
|
100
|
+
nStr += '';
|
101
|
+
x = nStr.split('.');
|
102
|
+
x1 = x[0];
|
103
|
+
x2 = '';
|
104
|
+
if (x.length > 1) {
|
105
|
+
x2 = '.' + x[1];
|
106
|
+
}
|
107
|
+
rgx = /(\d+)(\d{3})/;
|
108
|
+
while (rgx.test(x1)) {
|
109
|
+
x1 = x1.replace(rgx, '$1' + ',' + '$2');
|
110
|
+
}
|
111
|
+
return x1 + x2;
|
112
|
+
};
|
113
|
+
ValueUpdater = (function() {
|
114
|
+
ValueUpdater.prototype.animationSpeed = 32;
|
115
|
+
function ValueUpdater() {
|
116
|
+
AnimationUpdater.add(this);
|
117
|
+
}
|
118
|
+
ValueUpdater.prototype.update = function() {
|
119
|
+
var diff;
|
120
|
+
if (this.displayedValue !== this.value) {
|
121
|
+
if (this.ctx) {
|
122
|
+
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
123
|
+
}
|
124
|
+
diff = this.value - this.displayedValue;
|
125
|
+
if (Math.abs(diff / this.animationSpeed) <= 0.001) {
|
126
|
+
this.displayedValue = this.value;
|
127
|
+
} else {
|
128
|
+
this.displayedValue = this.displayedValue + diff / this.animationSpeed;
|
129
|
+
}
|
130
|
+
this.render();
|
131
|
+
return true;
|
132
|
+
}
|
133
|
+
return false;
|
134
|
+
};
|
135
|
+
return ValueUpdater;
|
136
|
+
})();
|
137
|
+
AnimatedText = (function() {
|
138
|
+
__extends(AnimatedText, ValueUpdater);
|
139
|
+
AnimatedText.prototype.displayedValue = 0;
|
140
|
+
AnimatedText.prototype.value = 0;
|
141
|
+
AnimatedText.prototype.setVal = function(value) {
|
142
|
+
return this.value = 1 * value;
|
143
|
+
};
|
144
|
+
function AnimatedText(elem, text) {
|
145
|
+
this.elem = elem;
|
146
|
+
this.text = text != null ? text : false;
|
147
|
+
this.value = 1 * this.elem.innerHTML;
|
148
|
+
if (this.text) {
|
149
|
+
this.value = 0;
|
150
|
+
}
|
151
|
+
}
|
152
|
+
AnimatedText.prototype.render = function() {
|
153
|
+
var textVal;
|
154
|
+
if (this.text) {
|
155
|
+
textVal = secondsToString(this.displayedValue.toFixed(0));
|
156
|
+
} else {
|
157
|
+
textVal = addCommas(formatNumber(this.displayedValue));
|
158
|
+
}
|
159
|
+
return this.elem.innerHTML = textVal;
|
160
|
+
};
|
161
|
+
return AnimatedText;
|
162
|
+
})();
|
163
|
+
AnimatedTextFactory = {
|
164
|
+
create: function(objList) {
|
165
|
+
var elem, out, _i, _len;
|
166
|
+
out = [];
|
167
|
+
for (_i = 0, _len = objList.length; _i < _len; _i++) {
|
168
|
+
elem = objList[_i];
|
169
|
+
out.push(new AnimatedText(elem));
|
170
|
+
}
|
171
|
+
return out;
|
172
|
+
}
|
173
|
+
};
|
174
|
+
GaugePointer = (function() {
|
175
|
+
GaugePointer.prototype.strokeWidth = 3;
|
176
|
+
GaugePointer.prototype.length = 76;
|
177
|
+
GaugePointer.prototype.options = {
|
178
|
+
strokeWidth: 0.035,
|
179
|
+
length: 0.1
|
180
|
+
};
|
181
|
+
function GaugePointer(ctx, canvas) {
|
182
|
+
this.ctx = ctx;
|
183
|
+
this.canvas = canvas;
|
184
|
+
this.setOptions();
|
185
|
+
}
|
186
|
+
GaugePointer.prototype.setOptions = function(options) {
|
187
|
+
if (options == null) {
|
188
|
+
options = null;
|
189
|
+
}
|
190
|
+
updateObjectValues(this.options, options);
|
191
|
+
this.length = this.canvas.height * this.options.length;
|
192
|
+
return this.strokeWidth = this.canvas.height * this.options.strokeWidth;
|
193
|
+
};
|
194
|
+
GaugePointer.prototype.render = function(angle) {
|
195
|
+
var centerX, centerY, endX, endY, startX, startY, x, y;
|
196
|
+
centerX = this.canvas.width / 2;
|
197
|
+
centerY = this.canvas.height * 0.9;
|
198
|
+
x = Math.round(centerX + this.length * Math.cos(angle));
|
199
|
+
y = Math.round(centerY + this.length * Math.sin(angle));
|
200
|
+
startX = Math.round(centerX + this.strokeWidth * Math.cos(angle - Math.PI / 2));
|
201
|
+
startY = Math.round(centerY + this.strokeWidth * Math.sin(angle - Math.PI / 2));
|
202
|
+
endX = Math.round(centerX + this.strokeWidth * Math.cos(angle + Math.PI / 2));
|
203
|
+
endY = Math.round(centerY + this.strokeWidth * Math.sin(angle + Math.PI / 2));
|
204
|
+
this.ctx.fillStyle = "black";
|
205
|
+
this.ctx.beginPath();
|
206
|
+
this.ctx.arc(centerX, centerY, this.strokeWidth, 0, Math.PI * 2, true);
|
207
|
+
this.ctx.fill();
|
208
|
+
this.ctx.beginPath();
|
209
|
+
this.ctx.moveTo(startX, startY);
|
210
|
+
this.ctx.lineTo(x, y);
|
211
|
+
this.ctx.lineTo(endX, endY);
|
212
|
+
return this.ctx.fill();
|
213
|
+
};
|
214
|
+
return GaugePointer;
|
215
|
+
})();
|
216
|
+
Bar = (function() {
|
217
|
+
function Bar(elem) {
|
218
|
+
this.elem = elem;
|
219
|
+
}
|
220
|
+
Bar.prototype.updateValues = function(arrValues) {
|
221
|
+
this.value = arrValues[0];
|
222
|
+
this.maxValue = arrValues[1];
|
223
|
+
this.avgValue = arrValues[2];
|
224
|
+
return this.render();
|
225
|
+
};
|
226
|
+
Bar.prototype.render = function() {
|
227
|
+
var avgPercent, valPercent;
|
228
|
+
if (this.textField) {
|
229
|
+
this.textField.text(formatNumber(this.value));
|
230
|
+
}
|
231
|
+
if (this.maxValue === 0) {
|
232
|
+
this.maxValue = this.avgValue * 2;
|
233
|
+
}
|
234
|
+
valPercent = (this.value / this.maxValue) * 100;
|
235
|
+
avgPercent = (this.avgValue / this.maxValue) * 100;
|
236
|
+
$(".bar-value", this.elem).css({
|
237
|
+
"width": valPercent + "%"
|
238
|
+
});
|
239
|
+
return $(".typical-value", this.elem).css({
|
240
|
+
"width": avgPercent + "%"
|
241
|
+
});
|
242
|
+
};
|
243
|
+
return Bar;
|
244
|
+
})();
|
245
|
+
Gauge = (function() {
|
246
|
+
__extends(Gauge, ValueUpdater);
|
247
|
+
Gauge.prototype.elem = null;
|
248
|
+
Gauge.prototype.value = 20;
|
249
|
+
Gauge.prototype.maxValue = 80;
|
250
|
+
Gauge.prototype.displayedAngle = 0;
|
251
|
+
Gauge.prototype.displayedValue = 0;
|
252
|
+
Gauge.prototype.lineWidth = 40;
|
253
|
+
Gauge.prototype.paddingBottom = 0.1;
|
254
|
+
Gauge.prototype.options = {
|
255
|
+
colorStart: "#6fadcf",
|
256
|
+
colorStop: "#8fc0da",
|
257
|
+
strokeColor: "#e0e0e0",
|
258
|
+
pointer: {
|
259
|
+
length: 0.8,
|
260
|
+
strokeWidth: 0.035
|
261
|
+
},
|
262
|
+
angle: 0.15,
|
263
|
+
lineWidth: 0.44,
|
264
|
+
fontSize: 40
|
265
|
+
};
|
266
|
+
function Gauge(canvas) {
|
267
|
+
this.canvas = canvas;
|
268
|
+
Gauge.__super__.constructor.call(this);
|
269
|
+
this.ctx = this.canvas.getContext('2d');
|
270
|
+
this.gp = new GaugePointer(this.ctx, this.canvas);
|
271
|
+
this.setOptions();
|
272
|
+
this.render();
|
273
|
+
}
|
274
|
+
Gauge.prototype.setOptions = function(options) {
|
275
|
+
if (options == null) {
|
276
|
+
options = null;
|
277
|
+
}
|
278
|
+
updateObjectValues(this.options, options);
|
279
|
+
this.lineWidth = this.canvas.height * (1 - this.paddingBottom) * this.options.lineWidth;
|
280
|
+
this.radius = this.canvas.height * (1 - this.paddingBottom) - this.lineWidth;
|
281
|
+
this.gp.setOptions(this.options.pointer);
|
282
|
+
if (this.textField) {
|
283
|
+
this.textField.style.fontSize = options.fontSize + 'px';
|
284
|
+
}
|
285
|
+
return this;
|
286
|
+
};
|
287
|
+
Gauge.prototype.set = function(value) {
|
288
|
+
this.value = value;
|
289
|
+
if (this.value > this.maxValue) {
|
290
|
+
this.maxValue = this.value * 1.1;
|
291
|
+
}
|
292
|
+
return AnimationUpdater.run();
|
293
|
+
};
|
294
|
+
Gauge.prototype.getAngle = function(value) {
|
295
|
+
return (1 + this.options.angle) * Math.PI + (value / this.maxValue) * (1 - this.options.angle * 2) * Math.PI;
|
296
|
+
};
|
297
|
+
Gauge.prototype.setTextField = function(textField) {
|
298
|
+
this.textField = textField;
|
299
|
+
};
|
300
|
+
Gauge.prototype.render = function() {
|
301
|
+
var displayedAngle, grd, h, w;
|
302
|
+
w = this.canvas.width / 2;
|
303
|
+
h = this.canvas.height * (1 - this.paddingBottom);
|
304
|
+
displayedAngle = this.getAngle(this.displayedValue);
|
305
|
+
if (this.textField) {
|
306
|
+
this.textField.innerHTML = formatNumber(this.displayedValue);
|
307
|
+
}
|
308
|
+
grd = this.ctx.createRadialGradient(w, h, 9, w, h, 70);
|
309
|
+
this.ctx.lineCap = "butt";
|
310
|
+
grd.addColorStop(0, this.options.colorStart);
|
311
|
+
grd.addColorStop(1, this.options.colorStop);
|
312
|
+
this.ctx.strokeStyle = grd;
|
313
|
+
this.ctx.beginPath();
|
314
|
+
this.ctx.arc(w, h, this.radius, (1 + this.options.angle) * Math.PI, displayedAngle, false);
|
315
|
+
this.ctx.lineWidth = this.lineWidth;
|
316
|
+
this.ctx.stroke();
|
317
|
+
this.ctx.strokeStyle = this.options.strokeColor;
|
318
|
+
this.ctx.beginPath();
|
319
|
+
this.ctx.arc(w, h, this.radius, displayedAngle, (2 - this.options.angle) * Math.PI, false);
|
320
|
+
this.ctx.stroke();
|
321
|
+
return this.gp.render(displayedAngle);
|
322
|
+
};
|
323
|
+
return Gauge;
|
324
|
+
})();
|
325
|
+
Donut = (function() {
|
326
|
+
__extends(Donut, ValueUpdater);
|
327
|
+
Donut.prototype.lineWidth = 15;
|
328
|
+
Donut.prototype.displayedValue = 0;
|
329
|
+
Donut.prototype.value = 33;
|
330
|
+
Donut.prototype.maxValue = 80;
|
331
|
+
Donut.prototype.options = {
|
332
|
+
lineWidth: 0.10,
|
333
|
+
colorStart: "#6f6ea0",
|
334
|
+
colorStop: "#c0c0db",
|
335
|
+
strokeColor: "#eeeeee",
|
336
|
+
angle: 0.35
|
337
|
+
};
|
338
|
+
function Donut(canvas) {
|
339
|
+
this.canvas = canvas;
|
340
|
+
Donut.__super__.constructor.call(this);
|
341
|
+
this.ctx = this.canvas.getContext('2d');
|
342
|
+
this.setOptions();
|
343
|
+
this.render();
|
344
|
+
}
|
345
|
+
Donut.prototype.getAngle = function(value) {
|
346
|
+
return (1 - this.options.angle) * Math.PI + (value / this.maxValue) * ((2 + this.options.angle) - (1 - this.options.angle)) * Math.PI;
|
347
|
+
};
|
348
|
+
Donut.prototype.setOptions = function(options) {
|
349
|
+
if (options == null) {
|
350
|
+
options = null;
|
351
|
+
}
|
352
|
+
updateObjectValues(this.options, options);
|
353
|
+
this.lineWidth = this.canvas.height * this.options.lineWidth;
|
354
|
+
this.radius = this.canvas.height / 2 - this.lineWidth / 2;
|
355
|
+
if (this.textField) {
|
356
|
+
this.textField.style.fontSize = options.fontSize + 'px';
|
357
|
+
}
|
358
|
+
return this;
|
359
|
+
};
|
360
|
+
Donut.prototype.setTextField = function(textField) {
|
361
|
+
this.textField = textField;
|
362
|
+
};
|
363
|
+
Donut.prototype.set = function(value) {
|
364
|
+
this.value = value;
|
365
|
+
if (this.value > this.maxValue) {
|
366
|
+
this.maxValue = this.value * 1.1;
|
367
|
+
}
|
368
|
+
return AnimationUpdater.run();
|
369
|
+
};
|
370
|
+
Donut.prototype.render = function() {
|
371
|
+
var displayedAngle, grd, grdFill, h, start, stop, w;
|
372
|
+
displayedAngle = this.getAngle(this.displayedValue);
|
373
|
+
w = this.canvas.width / 2;
|
374
|
+
h = this.canvas.height / 2;
|
375
|
+
if (this.textField) {
|
376
|
+
this.textField.innerHTML = formatNumber(this.displayedValue);
|
377
|
+
}
|
378
|
+
grdFill = this.ctx.createRadialGradient(w, h, 39, w, h, 70);
|
379
|
+
grdFill.addColorStop(0, this.options.colorStart);
|
380
|
+
grdFill.addColorStop(1, this.options.colorStop);
|
381
|
+
start = this.radius - this.lineWidth / 2;
|
382
|
+
stop = this.radius + this.lineWidth / 2;
|
383
|
+
grd = this.ctx.createRadialGradient(w, h, start, w, h, stop);
|
384
|
+
grd.addColorStop(0, "#d5d5d5");
|
385
|
+
grd.addColorStop(0.12, this.options.strokeColor);
|
386
|
+
grd.addColorStop(0.88, this.options.strokeColor);
|
387
|
+
grd.addColorStop(1, "#d5d5d5");
|
388
|
+
this.ctx.strokeStyle = grd;
|
389
|
+
this.ctx.beginPath();
|
390
|
+
this.ctx.arc(w, h, this.radius, (1 - this.options.angle) * Math.PI, (2 + this.options.angle) * Math.PI, false);
|
391
|
+
this.ctx.lineWidth = this.lineWidth;
|
392
|
+
this.ctx.lineCap = "round";
|
393
|
+
this.ctx.stroke();
|
394
|
+
this.ctx.strokeStyle = grdFill;
|
395
|
+
this.ctx.beginPath();
|
396
|
+
this.ctx.arc(w, h, this.radius, (1 - this.options.angle) * Math.PI, displayedAngle, false);
|
397
|
+
return this.ctx.stroke();
|
398
|
+
};
|
399
|
+
return Donut;
|
400
|
+
})();
|
401
|
+
window.AnimationUpdater = {
|
402
|
+
elements: [],
|
403
|
+
animId: null,
|
404
|
+
addAll: function(list) {
|
405
|
+
var elem, _i, _len, _results;
|
406
|
+
_results = [];
|
407
|
+
for (_i = 0, _len = list.length; _i < _len; _i++) {
|
408
|
+
elem = list[_i];
|
409
|
+
_results.push(AnimationUpdater.elements.push(elem));
|
410
|
+
}
|
411
|
+
return _results;
|
412
|
+
},
|
413
|
+
add: function(object) {
|
414
|
+
return AnimationUpdater.elements.push(object);
|
415
|
+
},
|
416
|
+
run: function() {
|
417
|
+
var animationFinished, elem, _i, _len, _ref;
|
418
|
+
animationFinished = true;
|
419
|
+
_ref = AnimationUpdater.elements;
|
420
|
+
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
|
421
|
+
elem = _ref[_i];
|
422
|
+
if (elem.update()) {
|
423
|
+
animationFinished = false;
|
424
|
+
}
|
425
|
+
}
|
426
|
+
if (!animationFinished) {
|
427
|
+
return AnimationUpdater.animId = requestAnimationFrame(AnimationUpdater.run);
|
428
|
+
} else {
|
429
|
+
return cancelAnimationFrame(AnimationUpdater.animId);
|
430
|
+
}
|
431
|
+
}
|
432
|
+
};
|
433
|
+
window.Gauge = Gauge;
|
434
|
+
window.Donut = Donut;
|
435
|
+
}).call(this);
|
@@ -0,0 +1,37 @@
|
|
1
|
+
|
2
|
+
(function(){var AnimatedText,AnimatedTextFactory,Bar,Donut,Gauge,GaugePointer,ValueUpdater,addCommas,formatNumber,secondsToString,updateObjectValues;var __hasProp=Object.prototype.hasOwnProperty,__extends=function(child,parent){for(var key in parent){if(__hasProp.call(parent,key))child[key]=parent[key];}
|
3
|
+
function ctor(){this.constructor=child;}
|
4
|
+
ctor.prototype=parent.prototype;child.prototype=new ctor;child.__super__=parent.prototype;return child;};(function(){var browserRequestAnimationFrame,isCancelled,lastId,vendor,vendors,_i,_len;vendors=['ms','moz','webkit','o'];for(_i=0,_len=vendors.length;_i<_len;_i++){vendor=vendors[_i];if(window.requestAnimationFrame){break;}
|
5
|
+
window.requestAnimationFrame=window[vendor+'RequestAnimationFrame'];window.cancelAnimationFrame=window[vendor+'CancelAnimationFrame']||window[vendor+'CancelRequestAnimationFrame'];}
|
6
|
+
browserRequestAnimationFrame=null;lastId=0;isCancelled={};if(!requestAnimationFrame){window.requestAnimationFrame=function(callback,element){var currTime,id,lastTime,timeToCall;currTime=new Date().getTime();timeToCall=Math.max(0,16-(currTime-lastTime));id=window.setTimeout(function(){return callback(currTime+timeToCall);},timeToCall);lastTime=currTime+timeToCall;return id;};return window.cancelAnimationFrame=function(id){return clearTimeout(id);};}else if(!window.cancelAnimationFrame){browserRequestAnimationFrame=window.requestAnimationFrame;window.requestAnimationFrame=function(callback,element){var myId;myId=++lastId;browserRequestAnimationFrame(function(){if(!isCancelled[myId]){return callback();}},element);return myId;};return window.cancelAnimationFrame=function(id){return isCancelled[id]=true;};}})();String.prototype.hashCode=function(){var char,hash,i,_ref;hash=0;if(this.length===0){return hash;}
|
7
|
+
for(i=0,_ref=this.length;0<=_ref?i<_ref:i>_ref;0<=_ref?i++:i--){char=this.charCodeAt(i);hash=((hash<<5)-hash)+char;hash=hash&hash;}
|
8
|
+
return hash;};secondsToString=function(sec){var hr,min;hr=Math.floor(sec/3600);min=Math.floor((sec-(hr*3600))/60);sec-=(hr*3600)+(min*60);sec+='';min+='';while(min.length<2){min='0'+min;}
|
9
|
+
while(sec.length<2){sec='0'+sec;}
|
10
|
+
hr=hr?hr+':':'';return hr+min+':'+sec;};formatNumber=function(num){return addCommas(num.toFixed(0));};updateObjectValues=function(obj1,obj2){var key,val,_results;_results=[];for(key in obj2){if(!__hasProp.call(obj2,key))continue;val=obj2[key];_results.push(obj1[key]=val);}
|
11
|
+
return _results;};addCommas=function(nStr){var rgx,x,x1,x2;nStr+='';x=nStr.split('.');x1=x[0];x2='';if(x.length>1){x2='.'+x[1];}
|
12
|
+
rgx=/(\d+)(\d{3})/;while(rgx.test(x1)){x1=x1.replace(rgx,'$1'+','+'$2');}
|
13
|
+
return x1+x2;};ValueUpdater=(function(){ValueUpdater.prototype.animationSpeed=32;function ValueUpdater(){AnimationUpdater.add(this);}
|
14
|
+
ValueUpdater.prototype.update=function(){var diff;if(this.displayedValue!==this.value){if(this.ctx){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);}
|
15
|
+
diff=this.value-this.displayedValue;if(Math.abs(diff/this.animationSpeed)<=0.001){this.displayedValue=this.value;}else{this.displayedValue=this.displayedValue+diff/this.animationSpeed;}
|
16
|
+
this.render();return true;}
|
17
|
+
return false;};return ValueUpdater;})();AnimatedText=(function(){__extends(AnimatedText,ValueUpdater);AnimatedText.prototype.displayedValue=0;AnimatedText.prototype.value=0;AnimatedText.prototype.setVal=function(value){return this.value=1*value;};function AnimatedText(elem,text){this.elem=elem;this.text=text!=null?text:false;this.value=1*this.elem.innerHTML;if(this.text){this.value=0;}}
|
18
|
+
AnimatedText.prototype.render=function(){var textVal;if(this.text){textVal=secondsToString(this.displayedValue.toFixed(0));}else{textVal=addCommas(formatNumber(this.displayedValue));}
|
19
|
+
return this.elem.innerHTML=textVal;};return AnimatedText;})();AnimatedTextFactory={create:function(objList){var elem,out,_i,_len;out=[];for(_i=0,_len=objList.length;_i<_len;_i++){elem=objList[_i];out.push(new AnimatedText(elem));}
|
20
|
+
return out;}};GaugePointer=(function(){GaugePointer.prototype.strokeWidth=3;GaugePointer.prototype.length=76;GaugePointer.prototype.options={strokeWidth:0.035,length:0.1};function GaugePointer(ctx,canvas){this.ctx=ctx;this.canvas=canvas;this.setOptions();}
|
21
|
+
GaugePointer.prototype.setOptions=function(options){if(options==null){options=null;}
|
22
|
+
updateObjectValues(this.options,options);this.length=this.canvas.height*this.options.length;return this.strokeWidth=this.canvas.height*this.options.strokeWidth;};GaugePointer.prototype.render=function(angle){var centerX,centerY,endX,endY,startX,startY,x,y;centerX=this.canvas.width/2;centerY=this.canvas.height*0.9;x=Math.round(centerX+this.length*Math.cos(angle));y=Math.round(centerY+this.length*Math.sin(angle));startX=Math.round(centerX+this.strokeWidth*Math.cos(angle-Math.PI/2));startY=Math.round(centerY+this.strokeWidth*Math.sin(angle-Math.PI/2));endX=Math.round(centerX+this.strokeWidth*Math.cos(angle+Math.PI/2));endY=Math.round(centerY+this.strokeWidth*Math.sin(angle+Math.PI/2));this.ctx.fillStyle="black";this.ctx.beginPath();this.ctx.arc(centerX,centerY,this.strokeWidth,0,Math.PI*2,true);this.ctx.fill();this.ctx.beginPath();this.ctx.moveTo(startX,startY);this.ctx.lineTo(x,y);this.ctx.lineTo(endX,endY);return this.ctx.fill();};return GaugePointer;})();Bar=(function(){function Bar(elem){this.elem=elem;}
|
23
|
+
Bar.prototype.updateValues=function(arrValues){this.value=arrValues[0];this.maxValue=arrValues[1];this.avgValue=arrValues[2];return this.render();};Bar.prototype.render=function(){var avgPercent,valPercent;if(this.textField){this.textField.text(formatNumber(this.value));}
|
24
|
+
if(this.maxValue===0){this.maxValue=this.avgValue*2;}
|
25
|
+
valPercent=(this.value/this.maxValue)*100;avgPercent=(this.avgValue/this.maxValue)*100;$(".bar-value",this.elem).css({"width":valPercent+"%"});return $(".typical-value",this.elem).css({"width":avgPercent+"%"});};return Bar;})();Gauge=(function(){__extends(Gauge,ValueUpdater);Gauge.prototype.elem=null;Gauge.prototype.value=20;Gauge.prototype.maxValue=80;Gauge.prototype.displayedAngle=0;Gauge.prototype.displayedValue=0;Gauge.prototype.lineWidth=40;Gauge.prototype.paddingBottom=0.1;Gauge.prototype.options={colorStart:"#6fadcf",colorStop:"#8fc0da",strokeColor:"#e0e0e0",pointer:{length:0.8,strokeWidth:0.035},angle:0.15,lineWidth:0.44,fontSize:40};function Gauge(canvas){this.canvas=canvas;Gauge.__super__.constructor.call(this);this.ctx=this.canvas.getContext('2d');this.gp=new GaugePointer(this.ctx,this.canvas);this.setOptions();this.render();}
|
26
|
+
Gauge.prototype.setOptions=function(options){if(options==null){options=null;}
|
27
|
+
updateObjectValues(this.options,options);this.lineWidth=this.canvas.height*(1-this.paddingBottom)*this.options.lineWidth;this.radius=this.canvas.height*(1-this.paddingBottom)-this.lineWidth;this.gp.setOptions(this.options.pointer);if(this.textField){this.textField.style.fontSize=options.fontSize+'px';}
|
28
|
+
return this;};Gauge.prototype.set=function(value){this.value=value;if(this.value>this.maxValue){this.maxValue=this.value*1.1;}
|
29
|
+
return AnimationUpdater.run();};Gauge.prototype.getAngle=function(value){return(1+this.options.angle)*Math.PI+(value/this.maxValue)*(1-this.options.angle*2)*Math.PI;};Gauge.prototype.setTextField=function(textField){this.textField=textField;};Gauge.prototype.render=function(){var displayedAngle,grd,h,w;w=this.canvas.width/2;h=this.canvas.height*(1-this.paddingBottom);displayedAngle=this.getAngle(this.displayedValue);if(this.textField){this.textField.innerHTML=formatNumber(this.displayedValue);}
|
30
|
+
grd=this.ctx.createRadialGradient(w,h,9,w,h,70);this.ctx.lineCap="butt";grd.addColorStop(0,this.options.colorStart);grd.addColorStop(1,this.options.colorStop);this.ctx.strokeStyle=grd;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1+this.options.angle)*Math.PI,displayedAngle,false);this.ctx.lineWidth=this.lineWidth;this.ctx.stroke();this.ctx.strokeStyle=this.options.strokeColor;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,displayedAngle,(2-this.options.angle)*Math.PI,false);this.ctx.stroke();return this.gp.render(displayedAngle);};return Gauge;})();Donut=(function(){__extends(Donut,ValueUpdater);Donut.prototype.lineWidth=15;Donut.prototype.displayedValue=0;Donut.prototype.value=33;Donut.prototype.maxValue=80;Donut.prototype.options={lineWidth:0.10,colorStart:"#6f6ea0",colorStop:"#c0c0db",strokeColor:"#eeeeee",angle:0.35};function Donut(canvas){this.canvas=canvas;Donut.__super__.constructor.call(this);this.ctx=this.canvas.getContext('2d');this.setOptions();this.render();}
|
31
|
+
Donut.prototype.getAngle=function(value){return(1-this.options.angle)*Math.PI+(value/this.maxValue)*((2+this.options.angle)-(1-this.options.angle))*Math.PI;};Donut.prototype.setOptions=function(options){if(options==null){options=null;}
|
32
|
+
updateObjectValues(this.options,options);this.lineWidth=this.canvas.height*this.options.lineWidth;this.radius=this.canvas.height/2-this.lineWidth/2;if(this.textField){this.textField.style.fontSize=options.fontSize+'px';}
|
33
|
+
return this;};Donut.prototype.setTextField=function(textField){this.textField=textField;};Donut.prototype.set=function(value){this.value=value;if(this.value>this.maxValue){this.maxValue=this.value*1.1;}
|
34
|
+
return AnimationUpdater.run();};Donut.prototype.render=function(){var displayedAngle,grd,grdFill,h,start,stop,w;displayedAngle=this.getAngle(this.displayedValue);w=this.canvas.width/2;h=this.canvas.height/2;if(this.textField){this.textField.innerHTML=formatNumber(this.displayedValue);}
|
35
|
+
grdFill=this.ctx.createRadialGradient(w,h,39,w,h,70);grdFill.addColorStop(0,this.options.colorStart);grdFill.addColorStop(1,this.options.colorStop);start=this.radius-this.lineWidth/2;stop=this.radius+this.lineWidth/2;grd=this.ctx.createRadialGradient(w,h,start,w,h,stop);grd.addColorStop(0,"#d5d5d5");grd.addColorStop(0.12,this.options.strokeColor);grd.addColorStop(0.88,this.options.strokeColor);grd.addColorStop(1,"#d5d5d5");this.ctx.strokeStyle=grd;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1-this.options.angle)*Math.PI,(2+this.options.angle)*Math.PI,false);this.ctx.lineWidth=this.lineWidth;this.ctx.lineCap="round";this.ctx.stroke();this.ctx.strokeStyle=grdFill;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1-this.options.angle)*Math.PI,displayedAngle,false);return this.ctx.stroke();};return Donut;})();window.AnimationUpdater={elements:[],animId:null,addAll:function(list){var elem,_i,_len,_results;_results=[];for(_i=0,_len=list.length;_i<_len;_i++){elem=list[_i];_results.push(AnimationUpdater.elements.push(elem));}
|
36
|
+
return _results;},add:function(object){return AnimationUpdater.elements.push(object);},run:function(){var animationFinished,elem,_i,_len,_ref;animationFinished=true;_ref=AnimationUpdater.elements;for(_i=0,_len=_ref.length;_i<_len;_i++){elem=_ref[_i];if(elem.update()){animationFinished=false;}}
|
37
|
+
if(!animationFinished){return AnimationUpdater.animId=requestAnimationFrame(AnimationUpdater.run);}else{return cancelAnimationFrame(AnimationUpdater.animId);}}};window.Gauge=Gauge;window.Donut=Donut;}).call(this);
|
metadata
ADDED
@@ -0,0 +1,82 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: gaugejs-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
prerelease: false
|
5
|
+
segments:
|
6
|
+
- 0
|
7
|
+
- 0
|
8
|
+
- 1
|
9
|
+
version: 0.0.1
|
10
|
+
platform: ruby
|
11
|
+
authors:
|
12
|
+
- Chris Miller
|
13
|
+
autorequire:
|
14
|
+
bindir: bin
|
15
|
+
cert_chain: []
|
16
|
+
|
17
|
+
date: 2012-08-07 00:00:00 -06:00
|
18
|
+
default_executable:
|
19
|
+
dependencies:
|
20
|
+
- !ruby/object:Gem::Dependency
|
21
|
+
name: railties
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
24
|
+
requirements:
|
25
|
+
- - ">="
|
26
|
+
- !ruby/object:Gem::Version
|
27
|
+
segments:
|
28
|
+
- 3
|
29
|
+
- 1
|
30
|
+
- 1
|
31
|
+
version: 3.1.1
|
32
|
+
type: :runtime
|
33
|
+
version_requirements: *id001
|
34
|
+
description: Gauge.JS packaged for the Rails 3.1+ Asset Pipeline, both the Coffee, JS, and min.JS versions.
|
35
|
+
email:
|
36
|
+
- lordsauronthegreat@gmail.com
|
37
|
+
executables: []
|
38
|
+
|
39
|
+
extensions: []
|
40
|
+
|
41
|
+
extra_rdoc_files: []
|
42
|
+
|
43
|
+
files:
|
44
|
+
- gaugejs-rails.gemspec
|
45
|
+
- vendor/assets/javascripts/gauge.coffee
|
46
|
+
- vendor/assets/javascripts/gauge.js
|
47
|
+
- vendor/assets/javascripts/gauge.min.js
|
48
|
+
- lib/gaugejs-rails.rb
|
49
|
+
- lib/gaugejs-rails/engine.rb
|
50
|
+
- lib/gaugejs-rails/version.rb
|
51
|
+
has_rdoc: true
|
52
|
+
homepage: https://github.com/NSError/gaugejs-rails
|
53
|
+
licenses: []
|
54
|
+
|
55
|
+
post_install_message:
|
56
|
+
rdoc_options: []
|
57
|
+
|
58
|
+
require_paths:
|
59
|
+
- lib
|
60
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
61
|
+
requirements:
|
62
|
+
- - ">="
|
63
|
+
- !ruby/object:Gem::Version
|
64
|
+
segments:
|
65
|
+
- 0
|
66
|
+
version: "0"
|
67
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
68
|
+
requirements:
|
69
|
+
- - ">="
|
70
|
+
- !ruby/object:Gem::Version
|
71
|
+
segments:
|
72
|
+
- 0
|
73
|
+
version: "0"
|
74
|
+
requirements: []
|
75
|
+
|
76
|
+
rubyforge_project:
|
77
|
+
rubygems_version: 1.3.6
|
78
|
+
signing_key:
|
79
|
+
specification_version: 3
|
80
|
+
summary: Gauge.JS packaged for your Rails 3.1+ Asset Pipeline
|
81
|
+
test_files: []
|
82
|
+
|