mirror of
https://gitlab.com/JKANetwork/CheckServer.git
synced 2026-02-22 21:13:46 +01:00
Start again
This commit is contained in:
524
vendors/gauge.js/dist/gauge.coffee
vendored
Normal file
524
vendors/gauge.js/dist/gauge.coffee
vendored
Normal file
@@ -0,0 +1,524 @@
|
||||
# Request Animation Frame Polyfill
|
||||
# CoffeeScript version of http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||||
do () ->
|
||||
vendors = ['ms', 'moz', 'webkit', 'o']
|
||||
for vendor in vendors
|
||||
if window.requestAnimationFrame
|
||||
break
|
||||
window.requestAnimationFrame = window[vendor + 'RequestAnimationFrame']
|
||||
window.cancelAnimationFrame = window[vendor + 'CancelAnimationFrame'] or window[vendor + 'CancelRequestAnimationFrame']
|
||||
|
||||
browserRequestAnimationFrame = null
|
||||
lastId = 0
|
||||
isCancelled = {}
|
||||
|
||||
if not requestAnimationFrame
|
||||
window.requestAnimationFrame = (callback, element) ->
|
||||
currTime = new Date().getTime()
|
||||
timeToCall = Math.max(0, 16 - (currTime - lastTime))
|
||||
id = window.setTimeout(() ->
|
||||
callback(currTime + timeToCall)
|
||||
, timeToCall)
|
||||
lastTime = currTime + timeToCall
|
||||
return id
|
||||
# This implementation should only be used with the setTimeout()
|
||||
# version of window.requestAnimationFrame().
|
||||
window.cancelAnimationFrame = (id) ->
|
||||
clearTimeout(id)
|
||||
else if not window.cancelAnimationFrame
|
||||
browserRequestAnimationFrame = window.requestAnimationFrame
|
||||
window.requestAnimationFrame = (callback, element) ->
|
||||
myId = ++lastId
|
||||
browserRequestAnimationFrame(() ->
|
||||
if not isCancelled[myId]
|
||||
callback()
|
||||
, element)
|
||||
return myId
|
||||
window.cancelAnimationFrame = (id) ->
|
||||
isCancelled[id] = true
|
||||
|
||||
String.prototype.hashCode = () ->
|
||||
hash = 0
|
||||
if this.length == 0
|
||||
return hash
|
||||
for i in [0...this.length]
|
||||
char = this.charCodeAt(i)
|
||||
hash = ((hash << 5) - hash) + char
|
||||
hash = hash & hash # Convert to 32bit integer
|
||||
return hash
|
||||
|
||||
secondsToString = (sec) ->
|
||||
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
|
||||
while sec.length < 2
|
||||
sec = '0' + sec
|
||||
hr = if hr then hr + ':' else ''
|
||||
return hr + min + ':' + sec
|
||||
|
||||
formatNumber = (num) ->
|
||||
return addCommas(num.toFixed(0))
|
||||
|
||||
updateObjectValues = (obj1, obj2) ->
|
||||
for own key, val of obj2
|
||||
obj1[key] = val
|
||||
return obj1
|
||||
|
||||
mergeObjects = (obj1, obj2) ->
|
||||
out = {}
|
||||
for own key, val of obj1
|
||||
out[key] = val
|
||||
for own key, val of obj2
|
||||
out[key] = val
|
||||
return out
|
||||
|
||||
addCommas = (nStr) ->
|
||||
nStr += ''
|
||||
x = nStr.split('.')
|
||||
x1 = x[0]
|
||||
x2 = ''
|
||||
if x.length > 1
|
||||
x2 = '.' + x[1]
|
||||
rgx = /(\d+)(\d{3})/
|
||||
while rgx.test(x1)
|
||||
x1 = x1.replace(rgx, '$1' + ',' + '$2')
|
||||
return x1 + x2
|
||||
|
||||
cutHex = (nStr) ->
|
||||
if nStr.charAt(0) == "#"
|
||||
return nStr.substring(1,7)
|
||||
return nStr
|
||||
|
||||
class ValueUpdater
|
||||
animationSpeed: 32
|
||||
constructor: (addToAnimationQueue=true, @clear=true) ->
|
||||
if addToAnimationQueue
|
||||
AnimationUpdater.add(@)
|
||||
|
||||
update: (force=false) ->
|
||||
if force or @displayedValue != @value
|
||||
if @ctx and @clear
|
||||
@ctx.clearRect(0, 0, @canvas.width, @canvas.height)
|
||||
diff = @value - @displayedValue
|
||||
if Math.abs(diff / @animationSpeed) <= 0.001
|
||||
@displayedValue = @value
|
||||
else
|
||||
@displayedValue = @displayedValue + diff / @animationSpeed
|
||||
@render()
|
||||
return true
|
||||
return false
|
||||
|
||||
class BaseGauge extends ValueUpdater
|
||||
displayScale: 1
|
||||
|
||||
setTextField: (textField) ->
|
||||
@textField = if textField instanceof TextRenderer then textField else new TextRenderer(textField)
|
||||
|
||||
setMinValue: (@minValue, updateStartValue=true) ->
|
||||
if updateStartValue
|
||||
@displayedValue = @minValue
|
||||
for gauge in @gp or []
|
||||
gauge.displayedValue = @minValue
|
||||
|
||||
setOptions: (options=null) ->
|
||||
@options = mergeObjects(@options, options)
|
||||
if @textField
|
||||
@textField.el.style.fontSize = options.fontSize + 'px'
|
||||
|
||||
if @options.angle > .5
|
||||
@gauge.options.angle = .5
|
||||
@configDisplayScale()
|
||||
return @
|
||||
|
||||
configDisplayScale: () ->
|
||||
prevDisplayScale = @displayScale
|
||||
|
||||
if @options.highDpiSupport == false
|
||||
delete @displayScale
|
||||
else
|
||||
devicePixelRatio = window.devicePixelRatio or 1
|
||||
backingStorePixelRatio =
|
||||
@ctx.webkitBackingStorePixelRatio or
|
||||
@ctx.mozBackingStorePixelRatio or
|
||||
@ctx.msBackingStorePixelRatio or
|
||||
@ctx.oBackingStorePixelRatio or
|
||||
@ctx.backingStorePixelRatio or 1
|
||||
@displayScale = devicePixelRatio / backingStorePixelRatio
|
||||
|
||||
if @displayScale != prevDisplayScale
|
||||
width = @canvas.G__width or @canvas.width
|
||||
height = @canvas.G__height or @canvas.height
|
||||
@canvas.width = width * @displayScale
|
||||
@canvas.height = height * @displayScale
|
||||
@canvas.style.width = "#{width}px"
|
||||
@canvas.style.height = "#{height}px"
|
||||
@canvas.G__width = width
|
||||
@canvas.G__height = height
|
||||
|
||||
return @
|
||||
|
||||
class TextRenderer
|
||||
constructor: (@el) ->
|
||||
|
||||
# Default behaviour, override to customize rendering
|
||||
render: (gauge) ->
|
||||
@el.innerHTML = formatNumber(gauge.displayedValue)
|
||||
|
||||
class AnimatedText extends ValueUpdater
|
||||
displayedValue: 0
|
||||
value: 0
|
||||
|
||||
setVal: (value) ->
|
||||
@value = 1 * value
|
||||
|
||||
constructor: (@elem, @text=false) ->
|
||||
@value = 1 * @elem.innerHTML
|
||||
if @text
|
||||
@value = 0
|
||||
render: () ->
|
||||
if @text
|
||||
textVal = secondsToString(@displayedValue.toFixed(0))
|
||||
else
|
||||
textVal = addCommas(formatNumber(@displayedValue))
|
||||
@elem.innerHTML = textVal
|
||||
|
||||
AnimatedTextFactory =
|
||||
create: (objList) ->
|
||||
out = []
|
||||
for elem in objList
|
||||
out.push(new AnimatedText(elem))
|
||||
return out
|
||||
|
||||
class GaugePointer extends ValueUpdater
|
||||
displayedValue: 0
|
||||
value: 0
|
||||
options:
|
||||
strokeWidth: 0.035
|
||||
length: 0.1
|
||||
color: "#000000"
|
||||
|
||||
constructor: (@gauge) ->
|
||||
@ctx = @gauge.ctx
|
||||
@canvas = @gauge.canvas
|
||||
super(false, false)
|
||||
@setOptions()
|
||||
|
||||
setOptions: (options=null) ->
|
||||
updateObjectValues(@options, options)
|
||||
@length = @canvas.height * @options.length
|
||||
@strokeWidth = @canvas.height * @options.strokeWidth
|
||||
@maxValue = @gauge.maxValue
|
||||
@minValue = @gauge.minValue
|
||||
@animationSpeed = @gauge.animationSpeed
|
||||
@options.angle = @gauge.options.angle
|
||||
|
||||
render: () ->
|
||||
angle = @gauge.getAngle.call(@, @displayedValue)
|
||||
centerX = @canvas.width / 2
|
||||
centerY = @canvas.height * 0.9
|
||||
|
||||
x = Math.round(centerX + @length * Math.cos(angle))
|
||||
y = Math.round(centerY + @length * Math.sin(angle))
|
||||
|
||||
startX = Math.round(centerX + @strokeWidth * Math.cos(angle - Math.PI/2))
|
||||
startY = Math.round(centerY + @strokeWidth * Math.sin(angle - Math.PI/2))
|
||||
|
||||
endX = Math.round(centerX + @strokeWidth * Math.cos(angle + Math.PI/2))
|
||||
endY = Math.round(centerY + @strokeWidth * Math.sin(angle + Math.PI/2))
|
||||
|
||||
@ctx.fillStyle = @options.color
|
||||
@ctx.beginPath()
|
||||
|
||||
@ctx.arc(centerX, centerY, @strokeWidth, 0, Math.PI*2, true)
|
||||
@ctx.fill()
|
||||
|
||||
@ctx.beginPath()
|
||||
@ctx.moveTo(startX, startY)
|
||||
@ctx.lineTo(x, y)
|
||||
@ctx.lineTo(endX, endY)
|
||||
@ctx.fill()
|
||||
|
||||
class Bar
|
||||
constructor: (@elem) ->
|
||||
updateValues: (arrValues) ->
|
||||
@value = arrValues[0]
|
||||
@maxValue = arrValues[1]
|
||||
@avgValue = arrValues[2]
|
||||
@render()
|
||||
|
||||
render: () ->
|
||||
if @textField
|
||||
@textField.text(formatNumber(@value))
|
||||
|
||||
if @maxValue == 0
|
||||
@maxValue = @avgValue * 2
|
||||
|
||||
valPercent = (@value / @maxValue) * 100
|
||||
avgPercent = (@avgValue / @maxValue) * 100
|
||||
|
||||
$(".bar-value", @elem).css({"width": valPercent + "%"})
|
||||
$(".typical-value", @elem).css({"width": avgPercent + "%"})
|
||||
|
||||
class Gauge extends BaseGauge
|
||||
elem: null
|
||||
value: [20] # we support multiple pointers
|
||||
maxValue: 80
|
||||
minValue: 0
|
||||
displayedAngle: 0
|
||||
displayedValue: 0
|
||||
lineWidth: 40
|
||||
paddingBottom: 0.1
|
||||
percentColors: null,
|
||||
options:
|
||||
colorStart: "#6fadcf"
|
||||
colorStop: undefined
|
||||
gradientType: 0 # 0 : radial, 1 : linear
|
||||
strokeColor: "#e0e0e0"
|
||||
pointer:
|
||||
length: 0.8
|
||||
strokeWidth: 0.035
|
||||
angle: 0.15
|
||||
lineWidth: 0.44
|
||||
fontSize: 40
|
||||
limitMax: false
|
||||
|
||||
constructor: (@canvas) ->
|
||||
super()
|
||||
@percentColors = null
|
||||
if typeof G_vmlCanvasManager != 'undefined'
|
||||
@canvas = window.G_vmlCanvasManager.initElement(@canvas)
|
||||
@ctx = @canvas.getContext('2d')
|
||||
@gp = [new GaugePointer(@)]
|
||||
@setOptions()
|
||||
@render()
|
||||
|
||||
setOptions: (options=null) ->
|
||||
super(options)
|
||||
@configPercentColors()
|
||||
@lineWidth = @canvas.height * (1 - @paddingBottom) * @options.lineWidth # .2 - .7
|
||||
@radius = @canvas.height * (1 - @paddingBottom) - @lineWidth
|
||||
@ctx.clearRect(0, 0, @canvas.width, @canvas.height)
|
||||
@render()
|
||||
for gauge in @gp
|
||||
gauge.setOptions(@options.pointer)
|
||||
gauge.render()
|
||||
return @
|
||||
|
||||
configPercentColors: () ->
|
||||
@percentColors = null;
|
||||
if (@options.percentColors != undefined)
|
||||
@percentColors = new Array()
|
||||
for i in [0..(@options.percentColors.length-1)]
|
||||
rval = parseInt((cutHex(@options.percentColors[i][1])).substring(0,2),16)
|
||||
gval = parseInt((cutHex(@options.percentColors[i][1])).substring(2,4),16)
|
||||
bval = parseInt((cutHex(@options.percentColors[i][1])).substring(4,6),16)
|
||||
@percentColors[i] = { pct: @options.percentColors[i][0], color: { r: rval, g: gval, b: bval } }
|
||||
|
||||
set: (value) ->
|
||||
|
||||
if not (value instanceof Array)
|
||||
value = [value]
|
||||
# check if we have enough GaugePointers initialized
|
||||
# lazy initialization
|
||||
if value.length > @gp.length
|
||||
for i in [0...(value.length - @gp.length)]
|
||||
@gp.push(new GaugePointer(@))
|
||||
|
||||
# get max value and update pointer(s)
|
||||
i = 0
|
||||
max_hit = false
|
||||
|
||||
for val in value
|
||||
if val > @maxValue
|
||||
@maxValue = @value * 1.1
|
||||
max_hit = true
|
||||
@gp[i].value = val
|
||||
@gp[i++].setOptions({maxValue: @maxValue, angle: @options.angle})
|
||||
@value = value[value.length - 1] # TODO: Span maybe??
|
||||
|
||||
if max_hit
|
||||
unless @options.limitMax
|
||||
AnimationUpdater.run()
|
||||
else
|
||||
AnimationUpdater.run()
|
||||
|
||||
getAngle: (value) ->
|
||||
return (1 + @options.angle) * Math.PI + ((value - @minValue) / (@maxValue - @minValue)) * (1 - @options.angle * 2) * Math.PI
|
||||
|
||||
getColorForPercentage: (pct, grad) ->
|
||||
if pct == 0
|
||||
color = @percentColors[0].color;
|
||||
else
|
||||
color = @percentColors[@percentColors.length - 1].color;
|
||||
for i in [0..(@percentColors.length - 1)]
|
||||
if (pct <= @percentColors[i].pct)
|
||||
if grad == true
|
||||
# Gradually change between colors
|
||||
startColor = @percentColors[i - 1]
|
||||
endColor = @percentColors[i]
|
||||
rangePct = (pct - startColor.pct) / (endColor.pct - startColor.pct) # How far between both colors
|
||||
color = {
|
||||
r: Math.floor(startColor.color.r * (1 - rangePct) + endColor.color.r * rangePct),
|
||||
g: Math.floor(startColor.color.g * (1 - rangePct) + endColor.color.g * rangePct),
|
||||
b: Math.floor(startColor.color.b * (1 - rangePct) + endColor.color.b * rangePct)
|
||||
}
|
||||
else
|
||||
color = @percentColors[i].color
|
||||
break
|
||||
return 'rgb(' + [color.r, color.g, color.b].join(',') + ')'
|
||||
|
||||
getColorForValue: (val, grad) ->
|
||||
pct = (val - @minValue) / (@maxValue - @minValue)
|
||||
return @getColorForPercentage(pct, grad);
|
||||
|
||||
render: () ->
|
||||
# Draw using canvas
|
||||
w = @canvas.width / 2
|
||||
h = @canvas.height * (1 - @paddingBottom)
|
||||
displayedAngle = @getAngle(@displayedValue)
|
||||
if @textField
|
||||
@textField.render(@)
|
||||
|
||||
@ctx.lineCap = "butt"
|
||||
if @options.customFillStyle != undefined
|
||||
fillStyle = @options.customFillStyle(@)
|
||||
else if @percentColors != null
|
||||
fillStyle = @getColorForValue(@displayedValue, true)
|
||||
else if @options.colorStop != undefined
|
||||
if @options.gradientType == 0
|
||||
fillStyle = this.ctx.createRadialGradient(w, h, 9, w, h, 70);
|
||||
else
|
||||
fillStyle = this.ctx.createLinearGradient(0, 0, w, 0);
|
||||
fillStyle.addColorStop(0, @options.colorStart)
|
||||
fillStyle.addColorStop(1, @options.colorStop)
|
||||
else
|
||||
fillStyle = @options.colorStart
|
||||
@ctx.strokeStyle = fillStyle
|
||||
|
||||
@ctx.beginPath()
|
||||
@ctx.arc(w, h, @radius, (1 + @options.angle) * Math.PI, displayedAngle, false)
|
||||
@ctx.lineWidth = @lineWidth
|
||||
@ctx.stroke()
|
||||
|
||||
@ctx.strokeStyle = @options.strokeColor
|
||||
@ctx.beginPath()
|
||||
@ctx.arc(w, h, @radius, displayedAngle, (2 - @options.angle) * Math.PI, false)
|
||||
@ctx.stroke()
|
||||
for gauge in @gp
|
||||
gauge.update(true)
|
||||
|
||||
|
||||
class BaseDonut extends BaseGauge
|
||||
lineWidth: 15
|
||||
displayedValue: 0
|
||||
value: 33
|
||||
maxValue: 80
|
||||
minValue: 0
|
||||
|
||||
options:
|
||||
lineWidth: 0.10
|
||||
colorStart: "#6f6ea0"
|
||||
colorStop: "#c0c0db"
|
||||
strokeColor: "#eeeeee"
|
||||
shadowColor: "#d5d5d5"
|
||||
angle: 0.35
|
||||
|
||||
constructor: (@canvas) ->
|
||||
super()
|
||||
if typeof G_vmlCanvasManager != 'undefined'
|
||||
@canvas = window.G_vmlCanvasManager.initElement(@canvas)
|
||||
@ctx = @canvas.getContext('2d')
|
||||
@setOptions()
|
||||
@render()
|
||||
|
||||
getAngle: (value) ->
|
||||
return (1 - @options.angle) * Math.PI + ((value - @minValue) / (@maxValue - @minValue)) * ((2 + @options.angle) - (1 - @options.angle)) * Math.PI
|
||||
|
||||
setOptions: (options=null) ->
|
||||
super(options)
|
||||
@lineWidth = @canvas.height * @options.lineWidth
|
||||
@radius = @canvas.height / 2 - @lineWidth/2
|
||||
return @
|
||||
|
||||
set: (value) ->
|
||||
@value = value
|
||||
if @value > @maxValue
|
||||
@maxValue = @value * 1.1
|
||||
AnimationUpdater.run()
|
||||
|
||||
render: () ->
|
||||
displayedAngle = @getAngle(@displayedValue)
|
||||
w = @canvas.width / 2
|
||||
h = @canvas.height / 2
|
||||
|
||||
if @textField
|
||||
@textField.render(@)
|
||||
|
||||
grdFill = @ctx.createRadialGradient(w, h, 39, w, h, 70)
|
||||
grdFill.addColorStop(0, @options.colorStart)
|
||||
grdFill.addColorStop(1, @options.colorStop)
|
||||
|
||||
start = @radius - @lineWidth / 2
|
||||
stop = @radius + @lineWidth / 2
|
||||
|
||||
@ctx.strokeStyle = @options.strokeColor
|
||||
@ctx.beginPath()
|
||||
@ctx.arc(w, h, @radius, (1 - @options.angle) * Math.PI, (2 + @options.angle) * Math.PI, false)
|
||||
@ctx.lineWidth = @lineWidth
|
||||
@ctx.lineCap = "round"
|
||||
@ctx.stroke()
|
||||
|
||||
@ctx.strokeStyle = grdFill
|
||||
@ctx.beginPath()
|
||||
@ctx.arc(w, h, @radius, (1 - @options.angle) * Math.PI, displayedAngle, false)
|
||||
@ctx.stroke()
|
||||
|
||||
|
||||
class Donut extends BaseDonut
|
||||
strokeGradient: (w, h, start, stop) ->
|
||||
grd = @ctx.createRadialGradient(w, h, start, w, h, stop)
|
||||
grd.addColorStop(0, @options.shadowColor)
|
||||
grd.addColorStop(0.12, @options._orgStrokeColor)
|
||||
grd.addColorStop(0.88, @options._orgStrokeColor)
|
||||
grd.addColorStop(1, @options.shadowColor)
|
||||
return grd
|
||||
|
||||
setOptions: (options=null) ->
|
||||
super(options)
|
||||
w = @canvas.width / 2
|
||||
h = @canvas.height / 2
|
||||
start = @radius - @lineWidth / 2
|
||||
stop = @radius + @lineWidth / 2
|
||||
@options._orgStrokeColor = @options.strokeColor
|
||||
@options.strokeColor = @strokeGradient(w, h, start, stop)
|
||||
return @
|
||||
|
||||
window.AnimationUpdater =
|
||||
elements: []
|
||||
animId: null
|
||||
|
||||
addAll: (list) ->
|
||||
for elem in list
|
||||
AnimationUpdater.elements.push(elem)
|
||||
|
||||
add: (object) ->
|
||||
AnimationUpdater.elements.push(object)
|
||||
|
||||
run: () ->
|
||||
animationFinished = true
|
||||
for elem in AnimationUpdater.elements
|
||||
if elem.update()
|
||||
animationFinished = false
|
||||
if not animationFinished
|
||||
AnimationUpdater.animId = requestAnimationFrame(AnimationUpdater.run)
|
||||
else
|
||||
cancelAnimationFrame(AnimationUpdater.animId)
|
||||
|
||||
window.Gauge = Gauge
|
||||
window.Donut = Donut
|
||||
window.BaseDonut = BaseDonut
|
||||
window.TextRenderer = TextRenderer
|
||||
773
vendors/gauge.js/dist/gauge.js
vendored
Normal file
773
vendors/gauge.js/dist/gauge.js
vendored
Normal file
@@ -0,0 +1,773 @@
|
||||
// Generated by CoffeeScript 1.6.3
|
||||
(function() {
|
||||
var AnimatedText, AnimatedTextFactory, Bar, BaseDonut, BaseGauge, Donut, Gauge, GaugePointer, TextRenderer, ValueUpdater, addCommas, cutHex, formatNumber, mergeObjects, secondsToString, updateObjectValues, _ref, _ref1,
|
||||
__hasProp = {}.hasOwnProperty,
|
||||
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } 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;
|
||||
}
|
||||
window.requestAnimationFrame = window[vendor + 'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendor + 'CancelAnimationFrame'] || window[vendor + 'CancelRequestAnimationFrame'];
|
||||
}
|
||||
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, _i, _ref;
|
||||
hash = 0;
|
||||
if (this.length === 0) {
|
||||
return hash;
|
||||
}
|
||||
for (i = _i = 0, _ref = this.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
|
||||
char = this.charCodeAt(i);
|
||||
hash = ((hash << 5) - hash) + char;
|
||||
hash = hash & hash;
|
||||
}
|
||||
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;
|
||||
}
|
||||
while (sec.length < 2) {
|
||||
sec = '0' + sec;
|
||||
}
|
||||
hr = hr ? hr + ':' : '';
|
||||
return hr + min + ':' + sec;
|
||||
};
|
||||
|
||||
formatNumber = function(num) {
|
||||
return addCommas(num.toFixed(0));
|
||||
};
|
||||
|
||||
updateObjectValues = function(obj1, obj2) {
|
||||
var key, val;
|
||||
for (key in obj2) {
|
||||
if (!__hasProp.call(obj2, key)) continue;
|
||||
val = obj2[key];
|
||||
obj1[key] = val;
|
||||
}
|
||||
return obj1;
|
||||
};
|
||||
|
||||
mergeObjects = function(obj1, obj2) {
|
||||
var key, out, val;
|
||||
out = {};
|
||||
for (key in obj1) {
|
||||
if (!__hasProp.call(obj1, key)) continue;
|
||||
val = obj1[key];
|
||||
out[key] = val;
|
||||
}
|
||||
for (key in obj2) {
|
||||
if (!__hasProp.call(obj2, key)) continue;
|
||||
val = obj2[key];
|
||||
out[key] = val;
|
||||
}
|
||||
return out;
|
||||
};
|
||||
|
||||
addCommas = function(nStr) {
|
||||
var rgx, x, x1, x2;
|
||||
nStr += '';
|
||||
x = nStr.split('.');
|
||||
x1 = x[0];
|
||||
x2 = '';
|
||||
if (x.length > 1) {
|
||||
x2 = '.' + x[1];
|
||||
}
|
||||
rgx = /(\d+)(\d{3})/;
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + ',' + '$2');
|
||||
}
|
||||
return x1 + x2;
|
||||
};
|
||||
|
||||
cutHex = function(nStr) {
|
||||
if (nStr.charAt(0) === "#") {
|
||||
return nStr.substring(1, 7);
|
||||
}
|
||||
return nStr;
|
||||
};
|
||||
|
||||
ValueUpdater = (function() {
|
||||
ValueUpdater.prototype.animationSpeed = 32;
|
||||
|
||||
function ValueUpdater(addToAnimationQueue, clear) {
|
||||
if (addToAnimationQueue == null) {
|
||||
addToAnimationQueue = true;
|
||||
}
|
||||
this.clear = clear != null ? clear : true;
|
||||
if (addToAnimationQueue) {
|
||||
AnimationUpdater.add(this);
|
||||
}
|
||||
}
|
||||
|
||||
ValueUpdater.prototype.update = function(force) {
|
||||
var diff;
|
||||
if (force == null) {
|
||||
force = false;
|
||||
}
|
||||
if (force || this.displayedValue !== this.value) {
|
||||
if (this.ctx && this.clear) {
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
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;
|
||||
}
|
||||
this.render();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
return ValueUpdater;
|
||||
|
||||
})();
|
||||
|
||||
BaseGauge = (function(_super) {
|
||||
__extends(BaseGauge, _super);
|
||||
|
||||
function BaseGauge() {
|
||||
_ref = BaseGauge.__super__.constructor.apply(this, arguments);
|
||||
return _ref;
|
||||
}
|
||||
|
||||
BaseGauge.prototype.displayScale = 1;
|
||||
|
||||
BaseGauge.prototype.setTextField = function(textField) {
|
||||
return this.textField = textField instanceof TextRenderer ? textField : new TextRenderer(textField);
|
||||
};
|
||||
|
||||
BaseGauge.prototype.setMinValue = function(minValue, updateStartValue) {
|
||||
var gauge, _i, _len, _ref1, _results;
|
||||
this.minValue = minValue;
|
||||
if (updateStartValue == null) {
|
||||
updateStartValue = true;
|
||||
}
|
||||
if (updateStartValue) {
|
||||
this.displayedValue = this.minValue;
|
||||
_ref1 = this.gp || [];
|
||||
_results = [];
|
||||
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
|
||||
gauge = _ref1[_i];
|
||||
_results.push(gauge.displayedValue = this.minValue);
|
||||
}
|
||||
return _results;
|
||||
}
|
||||
};
|
||||
|
||||
BaseGauge.prototype.setOptions = function(options) {
|
||||
if (options == null) {
|
||||
options = null;
|
||||
}
|
||||
this.options = mergeObjects(this.options, options);
|
||||
if (this.textField) {
|
||||
this.textField.el.style.fontSize = options.fontSize + 'px';
|
||||
}
|
||||
if (this.options.angle > .5) {
|
||||
this.gauge.options.angle = .5;
|
||||
}
|
||||
this.configDisplayScale();
|
||||
return this;
|
||||
};
|
||||
|
||||
BaseGauge.prototype.configDisplayScale = function() {
|
||||
var backingStorePixelRatio, devicePixelRatio, height, prevDisplayScale, width;
|
||||
prevDisplayScale = this.displayScale;
|
||||
if (this.options.highDpiSupport === false) {
|
||||
delete this.displayScale;
|
||||
} else {
|
||||
devicePixelRatio = window.devicePixelRatio || 1;
|
||||
backingStorePixelRatio = this.ctx.webkitBackingStorePixelRatio || this.ctx.mozBackingStorePixelRatio || this.ctx.msBackingStorePixelRatio || this.ctx.oBackingStorePixelRatio || this.ctx.backingStorePixelRatio || 1;
|
||||
this.displayScale = devicePixelRatio / backingStorePixelRatio;
|
||||
}
|
||||
if (this.displayScale !== prevDisplayScale) {
|
||||
width = this.canvas.G__width || this.canvas.width;
|
||||
height = this.canvas.G__height || this.canvas.height;
|
||||
this.canvas.width = width * this.displayScale;
|
||||
this.canvas.height = height * this.displayScale;
|
||||
this.canvas.style.width = "" + width + "px";
|
||||
this.canvas.style.height = "" + height + "px";
|
||||
this.canvas.G__width = width;
|
||||
this.canvas.G__height = height;
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
return BaseGauge;
|
||||
|
||||
})(ValueUpdater);
|
||||
|
||||
TextRenderer = (function() {
|
||||
function TextRenderer(el) {
|
||||
this.el = el;
|
||||
}
|
||||
|
||||
TextRenderer.prototype.render = function(gauge) {
|
||||
return this.el.innerHTML = formatNumber(gauge.displayedValue);
|
||||
};
|
||||
|
||||
return TextRenderer;
|
||||
|
||||
})();
|
||||
|
||||
AnimatedText = (function(_super) {
|
||||
__extends(AnimatedText, _super);
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
AnimatedText.prototype.render = function() {
|
||||
var textVal;
|
||||
if (this.text) {
|
||||
textVal = secondsToString(this.displayedValue.toFixed(0));
|
||||
} else {
|
||||
textVal = addCommas(formatNumber(this.displayedValue));
|
||||
}
|
||||
return this.elem.innerHTML = textVal;
|
||||
};
|
||||
|
||||
return AnimatedText;
|
||||
|
||||
})(ValueUpdater);
|
||||
|
||||
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));
|
||||
}
|
||||
return out;
|
||||
}
|
||||
};
|
||||
|
||||
GaugePointer = (function(_super) {
|
||||
__extends(GaugePointer, _super);
|
||||
|
||||
GaugePointer.prototype.displayedValue = 0;
|
||||
|
||||
GaugePointer.prototype.value = 0;
|
||||
|
||||
GaugePointer.prototype.options = {
|
||||
strokeWidth: 0.035,
|
||||
length: 0.1,
|
||||
color: "#000000"
|
||||
};
|
||||
|
||||
function GaugePointer(gauge) {
|
||||
this.gauge = gauge;
|
||||
this.ctx = this.gauge.ctx;
|
||||
this.canvas = this.gauge.canvas;
|
||||
GaugePointer.__super__.constructor.call(this, false, false);
|
||||
this.setOptions();
|
||||
}
|
||||
|
||||
GaugePointer.prototype.setOptions = function(options) {
|
||||
if (options == null) {
|
||||
options = null;
|
||||
}
|
||||
updateObjectValues(this.options, options);
|
||||
this.length = this.canvas.height * this.options.length;
|
||||
this.strokeWidth = this.canvas.height * this.options.strokeWidth;
|
||||
this.maxValue = this.gauge.maxValue;
|
||||
this.minValue = this.gauge.minValue;
|
||||
this.animationSpeed = this.gauge.animationSpeed;
|
||||
return this.options.angle = this.gauge.options.angle;
|
||||
};
|
||||
|
||||
GaugePointer.prototype.render = function() {
|
||||
var angle, centerX, centerY, endX, endY, startX, startY, x, y;
|
||||
angle = this.gauge.getAngle.call(this, this.displayedValue);
|
||||
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 = this.options.color;
|
||||
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;
|
||||
|
||||
})(ValueUpdater);
|
||||
|
||||
Bar = (function() {
|
||||
function Bar(elem) {
|
||||
this.elem = elem;
|
||||
}
|
||||
|
||||
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));
|
||||
}
|
||||
if (this.maxValue === 0) {
|
||||
this.maxValue = this.avgValue * 2;
|
||||
}
|
||||
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(_super) {
|
||||
__extends(Gauge, _super);
|
||||
|
||||
Gauge.prototype.elem = null;
|
||||
|
||||
Gauge.prototype.value = [20];
|
||||
|
||||
Gauge.prototype.maxValue = 80;
|
||||
|
||||
Gauge.prototype.minValue = 0;
|
||||
|
||||
Gauge.prototype.displayedAngle = 0;
|
||||
|
||||
Gauge.prototype.displayedValue = 0;
|
||||
|
||||
Gauge.prototype.lineWidth = 40;
|
||||
|
||||
Gauge.prototype.paddingBottom = 0.1;
|
||||
|
||||
Gauge.prototype.percentColors = null;
|
||||
|
||||
Gauge.prototype.options = {
|
||||
colorStart: "#6fadcf",
|
||||
colorStop: void 0,
|
||||
gradientType: 0,
|
||||
strokeColor: "#e0e0e0",
|
||||
pointer: {
|
||||
length: 0.8,
|
||||
strokeWidth: 0.035
|
||||
},
|
||||
angle: 0.15,
|
||||
lineWidth: 0.44,
|
||||
fontSize: 40,
|
||||
limitMax: false
|
||||
};
|
||||
|
||||
function Gauge(canvas) {
|
||||
this.canvas = canvas;
|
||||
Gauge.__super__.constructor.call(this);
|
||||
this.percentColors = null;
|
||||
if (typeof G_vmlCanvasManager !== 'undefined') {
|
||||
this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
|
||||
}
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.gp = [new GaugePointer(this)];
|
||||
this.setOptions();
|
||||
this.render();
|
||||
}
|
||||
|
||||
Gauge.prototype.setOptions = function(options) {
|
||||
var gauge, _i, _len, _ref1;
|
||||
if (options == null) {
|
||||
options = null;
|
||||
}
|
||||
Gauge.__super__.setOptions.call(this, options);
|
||||
this.configPercentColors();
|
||||
this.lineWidth = this.canvas.height * (1 - this.paddingBottom) * this.options.lineWidth;
|
||||
this.radius = this.canvas.height * (1 - this.paddingBottom) - this.lineWidth;
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
this.render();
|
||||
_ref1 = this.gp;
|
||||
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
|
||||
gauge = _ref1[_i];
|
||||
gauge.setOptions(this.options.pointer);
|
||||
gauge.render();
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
Gauge.prototype.configPercentColors = function() {
|
||||
var bval, gval, i, rval, _i, _ref1, _results;
|
||||
this.percentColors = null;
|
||||
if (this.options.percentColors !== void 0) {
|
||||
this.percentColors = new Array();
|
||||
_results = [];
|
||||
for (i = _i = 0, _ref1 = this.options.percentColors.length - 1; 0 <= _ref1 ? _i <= _ref1 : _i >= _ref1; i = 0 <= _ref1 ? ++_i : --_i) {
|
||||
rval = parseInt((cutHex(this.options.percentColors[i][1])).substring(0, 2), 16);
|
||||
gval = parseInt((cutHex(this.options.percentColors[i][1])).substring(2, 4), 16);
|
||||
bval = parseInt((cutHex(this.options.percentColors[i][1])).substring(4, 6), 16);
|
||||
_results.push(this.percentColors[i] = {
|
||||
pct: this.options.percentColors[i][0],
|
||||
color: {
|
||||
r: rval,
|
||||
g: gval,
|
||||
b: bval
|
||||
}
|
||||
});
|
||||
}
|
||||
return _results;
|
||||
}
|
||||
};
|
||||
|
||||
Gauge.prototype.set = function(value) {
|
||||
var i, max_hit, val, _i, _j, _len, _ref1;
|
||||
if (!(value instanceof Array)) {
|
||||
value = [value];
|
||||
}
|
||||
if (value.length > this.gp.length) {
|
||||
for (i = _i = 0, _ref1 = value.length - this.gp.length; 0 <= _ref1 ? _i < _ref1 : _i > _ref1; i = 0 <= _ref1 ? ++_i : --_i) {
|
||||
this.gp.push(new GaugePointer(this));
|
||||
}
|
||||
}
|
||||
i = 0;
|
||||
max_hit = false;
|
||||
for (_j = 0, _len = value.length; _j < _len; _j++) {
|
||||
val = value[_j];
|
||||
if (val > this.maxValue) {
|
||||
this.maxValue = this.value * 1.1;
|
||||
max_hit = true;
|
||||
}
|
||||
this.gp[i].value = val;
|
||||
this.gp[i++].setOptions({
|
||||
maxValue: this.maxValue,
|
||||
angle: this.options.angle
|
||||
});
|
||||
}
|
||||
this.value = value[value.length - 1];
|
||||
if (max_hit) {
|
||||
if (!this.options.limitMax) {
|
||||
return AnimationUpdater.run();
|
||||
}
|
||||
} else {
|
||||
return AnimationUpdater.run();
|
||||
}
|
||||
};
|
||||
|
||||
Gauge.prototype.getAngle = function(value) {
|
||||
return (1 + this.options.angle) * Math.PI + ((value - this.minValue) / (this.maxValue - this.minValue)) * (1 - this.options.angle * 2) * Math.PI;
|
||||
};
|
||||
|
||||
Gauge.prototype.getColorForPercentage = function(pct, grad) {
|
||||
var color, endColor, i, rangePct, startColor, _i, _ref1;
|
||||
if (pct === 0) {
|
||||
color = this.percentColors[0].color;
|
||||
} else {
|
||||
color = this.percentColors[this.percentColors.length - 1].color;
|
||||
for (i = _i = 0, _ref1 = this.percentColors.length - 1; 0 <= _ref1 ? _i <= _ref1 : _i >= _ref1; i = 0 <= _ref1 ? ++_i : --_i) {
|
||||
if (pct <= this.percentColors[i].pct) {
|
||||
if (grad === true) {
|
||||
startColor = this.percentColors[i - 1];
|
||||
endColor = this.percentColors[i];
|
||||
rangePct = (pct - startColor.pct) / (endColor.pct - startColor.pct);
|
||||
color = {
|
||||
r: Math.floor(startColor.color.r * (1 - rangePct) + endColor.color.r * rangePct),
|
||||
g: Math.floor(startColor.color.g * (1 - rangePct) + endColor.color.g * rangePct),
|
||||
b: Math.floor(startColor.color.b * (1 - rangePct) + endColor.color.b * rangePct)
|
||||
};
|
||||
} else {
|
||||
color = this.percentColors[i].color;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
|
||||
};
|
||||
|
||||
Gauge.prototype.getColorForValue = function(val, grad) {
|
||||
var pct;
|
||||
pct = (val - this.minValue) / (this.maxValue - this.minValue);
|
||||
return this.getColorForPercentage(pct, grad);
|
||||
};
|
||||
|
||||
Gauge.prototype.render = function() {
|
||||
var displayedAngle, fillStyle, gauge, h, w, _i, _len, _ref1, _results;
|
||||
w = this.canvas.width / 2;
|
||||
h = this.canvas.height * (1 - this.paddingBottom);
|
||||
displayedAngle = this.getAngle(this.displayedValue);
|
||||
if (this.textField) {
|
||||
this.textField.render(this);
|
||||
}
|
||||
this.ctx.lineCap = "butt";
|
||||
if (this.options.customFillStyle !== void 0) {
|
||||
fillStyle = this.options.customFillStyle(this);
|
||||
} else if (this.percentColors !== null) {
|
||||
fillStyle = this.getColorForValue(this.displayedValue, true);
|
||||
} else if (this.options.colorStop !== void 0) {
|
||||
if (this.options.gradientType === 0) {
|
||||
fillStyle = this.ctx.createRadialGradient(w, h, 9, w, h, 70);
|
||||
} else {
|
||||
fillStyle = this.ctx.createLinearGradient(0, 0, w, 0);
|
||||
}
|
||||
fillStyle.addColorStop(0, this.options.colorStart);
|
||||
fillStyle.addColorStop(1, this.options.colorStop);
|
||||
} else {
|
||||
fillStyle = this.options.colorStart;
|
||||
}
|
||||
this.ctx.strokeStyle = fillStyle;
|
||||
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();
|
||||
_ref1 = this.gp;
|
||||
_results = [];
|
||||
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
|
||||
gauge = _ref1[_i];
|
||||
_results.push(gauge.update(true));
|
||||
}
|
||||
return _results;
|
||||
};
|
||||
|
||||
return Gauge;
|
||||
|
||||
})(BaseGauge);
|
||||
|
||||
BaseDonut = (function(_super) {
|
||||
__extends(BaseDonut, _super);
|
||||
|
||||
BaseDonut.prototype.lineWidth = 15;
|
||||
|
||||
BaseDonut.prototype.displayedValue = 0;
|
||||
|
||||
BaseDonut.prototype.value = 33;
|
||||
|
||||
BaseDonut.prototype.maxValue = 80;
|
||||
|
||||
BaseDonut.prototype.minValue = 0;
|
||||
|
||||
BaseDonut.prototype.options = {
|
||||
lineWidth: 0.10,
|
||||
colorStart: "#6f6ea0",
|
||||
colorStop: "#c0c0db",
|
||||
strokeColor: "#eeeeee",
|
||||
shadowColor: "#d5d5d5",
|
||||
angle: 0.35
|
||||
};
|
||||
|
||||
function BaseDonut(canvas) {
|
||||
this.canvas = canvas;
|
||||
BaseDonut.__super__.constructor.call(this);
|
||||
if (typeof G_vmlCanvasManager !== 'undefined') {
|
||||
this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
|
||||
}
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.setOptions();
|
||||
this.render();
|
||||
}
|
||||
|
||||
BaseDonut.prototype.getAngle = function(value) {
|
||||
return (1 - this.options.angle) * Math.PI + ((value - this.minValue) / (this.maxValue - this.minValue)) * ((2 + this.options.angle) - (1 - this.options.angle)) * Math.PI;
|
||||
};
|
||||
|
||||
BaseDonut.prototype.setOptions = function(options) {
|
||||
if (options == null) {
|
||||
options = null;
|
||||
}
|
||||
BaseDonut.__super__.setOptions.call(this, options);
|
||||
this.lineWidth = this.canvas.height * this.options.lineWidth;
|
||||
this.radius = this.canvas.height / 2 - this.lineWidth / 2;
|
||||
return this;
|
||||
};
|
||||
|
||||
BaseDonut.prototype.set = function(value) {
|
||||
this.value = value;
|
||||
if (this.value > this.maxValue) {
|
||||
this.maxValue = this.value * 1.1;
|
||||
}
|
||||
return AnimationUpdater.run();
|
||||
};
|
||||
|
||||
BaseDonut.prototype.render = function() {
|
||||
var displayedAngle, 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.render(this);
|
||||
}
|
||||
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;
|
||||
this.ctx.strokeStyle = this.options.strokeColor;
|
||||
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 BaseDonut;
|
||||
|
||||
})(BaseGauge);
|
||||
|
||||
Donut = (function(_super) {
|
||||
__extends(Donut, _super);
|
||||
|
||||
function Donut() {
|
||||
_ref1 = Donut.__super__.constructor.apply(this, arguments);
|
||||
return _ref1;
|
||||
}
|
||||
|
||||
Donut.prototype.strokeGradient = function(w, h, start, stop) {
|
||||
var grd;
|
||||
grd = this.ctx.createRadialGradient(w, h, start, w, h, stop);
|
||||
grd.addColorStop(0, this.options.shadowColor);
|
||||
grd.addColorStop(0.12, this.options._orgStrokeColor);
|
||||
grd.addColorStop(0.88, this.options._orgStrokeColor);
|
||||
grd.addColorStop(1, this.options.shadowColor);
|
||||
return grd;
|
||||
};
|
||||
|
||||
Donut.prototype.setOptions = function(options) {
|
||||
var h, start, stop, w;
|
||||
if (options == null) {
|
||||
options = null;
|
||||
}
|
||||
Donut.__super__.setOptions.call(this, options);
|
||||
w = this.canvas.width / 2;
|
||||
h = this.canvas.height / 2;
|
||||
start = this.radius - this.lineWidth / 2;
|
||||
stop = this.radius + this.lineWidth / 2;
|
||||
this.options._orgStrokeColor = this.options.strokeColor;
|
||||
this.options.strokeColor = this.strokeGradient(w, h, start, stop);
|
||||
return this;
|
||||
};
|
||||
|
||||
return Donut;
|
||||
|
||||
})(BaseDonut);
|
||||
|
||||
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));
|
||||
}
|
||||
return _results;
|
||||
},
|
||||
add: function(object) {
|
||||
return AnimationUpdater.elements.push(object);
|
||||
},
|
||||
run: function() {
|
||||
var animationFinished, elem, _i, _len, _ref2;
|
||||
animationFinished = true;
|
||||
_ref2 = AnimationUpdater.elements;
|
||||
for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
|
||||
elem = _ref2[_i];
|
||||
if (elem.update()) {
|
||||
animationFinished = false;
|
||||
}
|
||||
}
|
||||
if (!animationFinished) {
|
||||
return AnimationUpdater.animId = requestAnimationFrame(AnimationUpdater.run);
|
||||
} else {
|
||||
return cancelAnimationFrame(AnimationUpdater.animId);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.Gauge = Gauge;
|
||||
|
||||
window.Donut = Donut;
|
||||
|
||||
window.BaseDonut = BaseDonut;
|
||||
|
||||
window.TextRenderer = TextRenderer;
|
||||
|
||||
}).call(this);
|
||||
61
vendors/gauge.js/dist/gauge.min.js
vendored
Normal file
61
vendors/gauge.js/dist/gauge.min.js
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
|
||||
(function(){var AnimatedText,AnimatedTextFactory,Bar,BaseDonut,BaseGauge,Donut,Gauge,GaugePointer,TextRenderer,ValueUpdater,addCommas,cutHex,formatNumber,mergeObjects,secondsToString,updateObjectValues,_ref,_ref1,__hasProp={}.hasOwnProperty,__extends=function(child,parent){for(var key in parent){if(__hasProp.call(parent,key))child[key]=parent[key];}function ctor(){this.constructor=child;}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;}
|
||||
window.requestAnimationFrame=window[vendor+'RequestAnimationFrame'];window.cancelAnimationFrame=window[vendor+'CancelAnimationFrame']||window[vendor+'CancelRequestAnimationFrame'];}
|
||||
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,_i,_ref;hash=0;if(this.length===0){return hash;}
|
||||
for(i=_i=0,_ref=this.length;0<=_ref?_i<_ref:_i>_ref;i=0<=_ref?++_i:--_i){char=this.charCodeAt(i);hash=((hash<<5)-hash)+char;hash=hash&hash;}
|
||||
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;}
|
||||
while(sec.length<2){sec='0'+sec;}
|
||||
hr=hr?hr+':':'';return hr+min+':'+sec;};formatNumber=function(num){return addCommas(num.toFixed(0));};updateObjectValues=function(obj1,obj2){var key,val;for(key in obj2){if(!__hasProp.call(obj2,key))continue;val=obj2[key];obj1[key]=val;}
|
||||
return obj1;};mergeObjects=function(obj1,obj2){var key,out,val;out={};for(key in obj1){if(!__hasProp.call(obj1,key))continue;val=obj1[key];out[key]=val;}
|
||||
for(key in obj2){if(!__hasProp.call(obj2,key))continue;val=obj2[key];out[key]=val;}
|
||||
return out;};addCommas=function(nStr){var rgx,x,x1,x2;nStr+='';x=nStr.split('.');x1=x[0];x2='';if(x.length>1){x2='.'+x[1];}
|
||||
rgx=/(\d+)(\d{3})/;while(rgx.test(x1)){x1=x1.replace(rgx,'$1'+','+'$2');}
|
||||
return x1+x2;};cutHex=function(nStr){if(nStr.charAt(0)==="#"){return nStr.substring(1,7);}
|
||||
return nStr;};ValueUpdater=(function(){ValueUpdater.prototype.animationSpeed=32;function ValueUpdater(addToAnimationQueue,clear){if(addToAnimationQueue==null){addToAnimationQueue=true;}
|
||||
this.clear=clear!=null?clear:true;if(addToAnimationQueue){AnimationUpdater.add(this);}}
|
||||
ValueUpdater.prototype.update=function(force){var diff;if(force==null){force=false;}
|
||||
if(force||this.displayedValue!==this.value){if(this.ctx&&this.clear){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);}
|
||||
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;}
|
||||
this.render();return true;}
|
||||
return false;};return ValueUpdater;})();BaseGauge=(function(_super){__extends(BaseGauge,_super);function BaseGauge(){_ref=BaseGauge.__super__.constructor.apply(this,arguments);return _ref;}
|
||||
BaseGauge.prototype.displayScale=1;BaseGauge.prototype.setTextField=function(textField){return this.textField=textField instanceof TextRenderer?textField:new TextRenderer(textField);};BaseGauge.prototype.setMinValue=function(minValue,updateStartValue){var gauge,_i,_len,_ref1,_results;this.minValue=minValue;if(updateStartValue==null){updateStartValue=true;}
|
||||
if(updateStartValue){this.displayedValue=this.minValue;_ref1=this.gp||[];_results=[];for(_i=0,_len=_ref1.length;_i<_len;_i++){gauge=_ref1[_i];_results.push(gauge.displayedValue=this.minValue);}
|
||||
return _results;}};BaseGauge.prototype.setOptions=function(options){if(options==null){options=null;}
|
||||
this.options=mergeObjects(this.options,options);if(this.textField){this.textField.el.style.fontSize=options.fontSize+'px';}
|
||||
if(this.options.angle>.5){this.gauge.options.angle=.5;}
|
||||
this.configDisplayScale();return this;};BaseGauge.prototype.configDisplayScale=function(){var backingStorePixelRatio,devicePixelRatio,height,prevDisplayScale,width;prevDisplayScale=this.displayScale;if(this.options.highDpiSupport===false){delete this.displayScale;}else{devicePixelRatio=window.devicePixelRatio||1;backingStorePixelRatio=this.ctx.webkitBackingStorePixelRatio||this.ctx.mozBackingStorePixelRatio||this.ctx.msBackingStorePixelRatio||this.ctx.oBackingStorePixelRatio||this.ctx.backingStorePixelRatio||1;this.displayScale=devicePixelRatio/backingStorePixelRatio;}
|
||||
if(this.displayScale!==prevDisplayScale){width=this.canvas.G__width||this.canvas.width;height=this.canvas.G__height||this.canvas.height;this.canvas.width=width*this.displayScale;this.canvas.height=height*this.displayScale;this.canvas.style.width=""+width+"px";this.canvas.style.height=""+height+"px";this.canvas.G__width=width;this.canvas.G__height=height;}
|
||||
return this;};return BaseGauge;})(ValueUpdater);TextRenderer=(function(){function TextRenderer(el){this.el=el;}
|
||||
TextRenderer.prototype.render=function(gauge){return this.el.innerHTML=formatNumber(gauge.displayedValue);};return TextRenderer;})();AnimatedText=(function(_super){__extends(AnimatedText,_super);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;}}
|
||||
AnimatedText.prototype.render=function(){var textVal;if(this.text){textVal=secondsToString(this.displayedValue.toFixed(0));}else{textVal=addCommas(formatNumber(this.displayedValue));}
|
||||
return this.elem.innerHTML=textVal;};return AnimatedText;})(ValueUpdater);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));}
|
||||
return out;}};GaugePointer=(function(_super){__extends(GaugePointer,_super);GaugePointer.prototype.displayedValue=0;GaugePointer.prototype.value=0;GaugePointer.prototype.options={strokeWidth:0.035,length:0.1,color:"#000000"};function GaugePointer(gauge){this.gauge=gauge;this.ctx=this.gauge.ctx;this.canvas=this.gauge.canvas;GaugePointer.__super__.constructor.call(this,false,false);this.setOptions();}
|
||||
GaugePointer.prototype.setOptions=function(options){if(options==null){options=null;}
|
||||
updateObjectValues(this.options,options);this.length=this.canvas.height*this.options.length;this.strokeWidth=this.canvas.height*this.options.strokeWidth;this.maxValue=this.gauge.maxValue;this.minValue=this.gauge.minValue;this.animationSpeed=this.gauge.animationSpeed;return this.options.angle=this.gauge.options.angle;};GaugePointer.prototype.render=function(){var angle,centerX,centerY,endX,endY,startX,startY,x,y;angle=this.gauge.getAngle.call(this,this.displayedValue);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=this.options.color;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;})(ValueUpdater);Bar=(function(){function Bar(elem){this.elem=elem;}
|
||||
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));}
|
||||
if(this.maxValue===0){this.maxValue=this.avgValue*2;}
|
||||
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(_super){__extends(Gauge,_super);Gauge.prototype.elem=null;Gauge.prototype.value=[20];Gauge.prototype.maxValue=80;Gauge.prototype.minValue=0;Gauge.prototype.displayedAngle=0;Gauge.prototype.displayedValue=0;Gauge.prototype.lineWidth=40;Gauge.prototype.paddingBottom=0.1;Gauge.prototype.percentColors=null;Gauge.prototype.options={colorStart:"#6fadcf",colorStop:void 0,gradientType:0,strokeColor:"#e0e0e0",pointer:{length:0.8,strokeWidth:0.035},angle:0.15,lineWidth:0.44,fontSize:40,limitMax:false};function Gauge(canvas){this.canvas=canvas;Gauge.__super__.constructor.call(this);this.percentColors=null;if(typeof G_vmlCanvasManager!=='undefined'){this.canvas=window.G_vmlCanvasManager.initElement(this.canvas);}
|
||||
this.ctx=this.canvas.getContext('2d');this.gp=[new GaugePointer(this)];this.setOptions();this.render();}
|
||||
Gauge.prototype.setOptions=function(options){var gauge,_i,_len,_ref1;if(options==null){options=null;}
|
||||
Gauge.__super__.setOptions.call(this,options);this.configPercentColors();this.lineWidth=this.canvas.height*(1-this.paddingBottom)*this.options.lineWidth;this.radius=this.canvas.height*(1-this.paddingBottom)-this.lineWidth;this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);this.render();_ref1=this.gp;for(_i=0,_len=_ref1.length;_i<_len;_i++){gauge=_ref1[_i];gauge.setOptions(this.options.pointer);gauge.render();}
|
||||
return this;};Gauge.prototype.configPercentColors=function(){var bval,gval,i,rval,_i,_ref1,_results;this.percentColors=null;if(this.options.percentColors!==void 0){this.percentColors=new Array();_results=[];for(i=_i=0,_ref1=this.options.percentColors.length-1;0<=_ref1?_i<=_ref1:_i>=_ref1;i=0<=_ref1?++_i:--_i){rval=parseInt((cutHex(this.options.percentColors[i][1])).substring(0,2),16);gval=parseInt((cutHex(this.options.percentColors[i][1])).substring(2,4),16);bval=parseInt((cutHex(this.options.percentColors[i][1])).substring(4,6),16);_results.push(this.percentColors[i]={pct:this.options.percentColors[i][0],color:{r:rval,g:gval,b:bval}});}
|
||||
return _results;}};Gauge.prototype.set=function(value){var i,max_hit,val,_i,_j,_len,_ref1;if(!(value instanceof Array)){value=[value];}
|
||||
if(value.length>this.gp.length){for(i=_i=0,_ref1=value.length-this.gp.length;0<=_ref1?_i<_ref1:_i>_ref1;i=0<=_ref1?++_i:--_i){this.gp.push(new GaugePointer(this));}}
|
||||
i=0;max_hit=false;for(_j=0,_len=value.length;_j<_len;_j++){val=value[_j];if(val>this.maxValue){this.maxValue=this.value*1.1;max_hit=true;}
|
||||
this.gp[i].value=val;this.gp[i++].setOptions({maxValue:this.maxValue,angle:this.options.angle});}
|
||||
this.value=value[value.length-1];if(max_hit){if(!this.options.limitMax){return AnimationUpdater.run();}}else{return AnimationUpdater.run();}};Gauge.prototype.getAngle=function(value){return(1+this.options.angle)*Math.PI+((value-this.minValue)/(this.maxValue-this.minValue))*(1-this.options.angle*2)*Math.PI;};Gauge.prototype.getColorForPercentage=function(pct,grad){var color,endColor,i,rangePct,startColor,_i,_ref1;if(pct===0){color=this.percentColors[0].color;}else{color=this.percentColors[this.percentColors.length-1].color;for(i=_i=0,_ref1=this.percentColors.length-1;0<=_ref1?_i<=_ref1:_i>=_ref1;i=0<=_ref1?++_i:--_i){if(pct<=this.percentColors[i].pct){if(grad===true){startColor=this.percentColors[i-1];endColor=this.percentColors[i];rangePct=(pct-startColor.pct)/(endColor.pct-startColor.pct);color={r:Math.floor(startColor.color.r*(1-rangePct)+endColor.color.r*rangePct),g:Math.floor(startColor.color.g*(1-rangePct)+endColor.color.g*rangePct),b:Math.floor(startColor.color.b*(1-rangePct)+endColor.color.b*rangePct)};}else{color=this.percentColors[i].color;}
|
||||
break;}}}
|
||||
return'rgb('+[color.r,color.g,color.b].join(',')+')';};Gauge.prototype.getColorForValue=function(val,grad){var pct;pct=(val-this.minValue)/(this.maxValue-this.minValue);return this.getColorForPercentage(pct,grad);};Gauge.prototype.render=function(){var displayedAngle,fillStyle,gauge,h,w,_i,_len,_ref1,_results;w=this.canvas.width/2;h=this.canvas.height*(1-this.paddingBottom);displayedAngle=this.getAngle(this.displayedValue);if(this.textField){this.textField.render(this);}
|
||||
this.ctx.lineCap="butt";if(this.options.customFillStyle!==void 0){fillStyle=this.options.customFillStyle(this);}else if(this.percentColors!==null){fillStyle=this.getColorForValue(this.displayedValue,true);}else if(this.options.colorStop!==void 0){if(this.options.gradientType===0){fillStyle=this.ctx.createRadialGradient(w,h,9,w,h,70);}else{fillStyle=this.ctx.createLinearGradient(0,0,w,0);}
|
||||
fillStyle.addColorStop(0,this.options.colorStart);fillStyle.addColorStop(1,this.options.colorStop);}else{fillStyle=this.options.colorStart;}
|
||||
this.ctx.strokeStyle=fillStyle;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();_ref1=this.gp;_results=[];for(_i=0,_len=_ref1.length;_i<_len;_i++){gauge=_ref1[_i];_results.push(gauge.update(true));}
|
||||
return _results;};return Gauge;})(BaseGauge);BaseDonut=(function(_super){__extends(BaseDonut,_super);BaseDonut.prototype.lineWidth=15;BaseDonut.prototype.displayedValue=0;BaseDonut.prototype.value=33;BaseDonut.prototype.maxValue=80;BaseDonut.prototype.minValue=0;BaseDonut.prototype.options={lineWidth:0.10,colorStart:"#6f6ea0",colorStop:"#c0c0db",strokeColor:"#eeeeee",shadowColor:"#d5d5d5",angle:0.35};function BaseDonut(canvas){this.canvas=canvas;BaseDonut.__super__.constructor.call(this);if(typeof G_vmlCanvasManager!=='undefined'){this.canvas=window.G_vmlCanvasManager.initElement(this.canvas);}
|
||||
this.ctx=this.canvas.getContext('2d');this.setOptions();this.render();}
|
||||
BaseDonut.prototype.getAngle=function(value){return(1-this.options.angle)*Math.PI+((value-this.minValue)/(this.maxValue-this.minValue))*((2+this.options.angle)-(1-this.options.angle))*Math.PI;};BaseDonut.prototype.setOptions=function(options){if(options==null){options=null;}
|
||||
BaseDonut.__super__.setOptions.call(this,options);this.lineWidth=this.canvas.height*this.options.lineWidth;this.radius=this.canvas.height/2-this.lineWidth/2;return this;};BaseDonut.prototype.set=function(value){this.value=value;if(this.value>this.maxValue){this.maxValue=this.value*1.1;}
|
||||
return AnimationUpdater.run();};BaseDonut.prototype.render=function(){var displayedAngle,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.render(this);}
|
||||
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;this.ctx.strokeStyle=this.options.strokeColor;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 BaseDonut;})(BaseGauge);Donut=(function(_super){__extends(Donut,_super);function Donut(){_ref1=Donut.__super__.constructor.apply(this,arguments);return _ref1;}
|
||||
Donut.prototype.strokeGradient=function(w,h,start,stop){var grd;grd=this.ctx.createRadialGradient(w,h,start,w,h,stop);grd.addColorStop(0,this.options.shadowColor);grd.addColorStop(0.12,this.options._orgStrokeColor);grd.addColorStop(0.88,this.options._orgStrokeColor);grd.addColorStop(1,this.options.shadowColor);return grd;};Donut.prototype.setOptions=function(options){var h,start,stop,w;if(options==null){options=null;}
|
||||
Donut.__super__.setOptions.call(this,options);w=this.canvas.width/2;h=this.canvas.height/2;start=this.radius-this.lineWidth/2;stop=this.radius+this.lineWidth/2;this.options._orgStrokeColor=this.options.strokeColor;this.options.strokeColor=this.strokeGradient(w,h,start,stop);return this;};return Donut;})(BaseDonut);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));}
|
||||
return _results;},add:function(object){return AnimationUpdater.elements.push(object);},run:function(){var animationFinished,elem,_i,_len,_ref2;animationFinished=true;_ref2=AnimationUpdater.elements;for(_i=0,_len=_ref2.length;_i<_len;_i++){elem=_ref2[_i];if(elem.update()){animationFinished=false;}}
|
||||
if(!animationFinished){return AnimationUpdater.animId=requestAnimationFrame(AnimationUpdater.run);}else{return cancelAnimationFrame(AnimationUpdater.animId);}}};window.Gauge=Gauge;window.Donut=Donut;window.BaseDonut=BaseDonut;window.TextRenderer=TextRenderer;}).call(this);
|
||||
Reference in New Issue
Block a user