summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLennart Weller <lhw@ring0.de>2017-05-03 10:59:18 +0000
committerLennart Weller <lhw@ring0.de>2017-05-03 10:59:18 +0000
commit92455db150eb1f854cb4e3d849310a689bc074f2 (patch)
treef05b0e5dd4c7388f9926f21d521f6cf19736bf39
parentUpdate patch 0002 (diff)
downloadnetdata-92455db150eb1f854cb4e3d849310a689bc074f2.tar.xz
netdata-92455db150eb1f854cb4e3d849310a689bc074f2.zip
gauge updated to dist file
-rw-r--r--debian/copyright4
-rw-r--r--debian/missing-sources/gauge-1.3.2.coffee (renamed from debian/missing-sources/gauge-d5260c3.coffee)204
2 files changed, 141 insertions, 67 deletions
diff --git a/debian/copyright b/debian/copyright
index 625a019e1..34a9ed5fb 100644
--- a/debian/copyright
+++ b/debian/copyright
@@ -92,8 +92,8 @@ Copyright: 2014 Dan Vanderkam <danvdk@gmail.com>
License: Expat
Files:
- web/lib/gauge-d5260c3.min.js
- debian/missing-sources/gauge-d5260c3.coffee
+ web/lib/gauge-1.3.2.min.js
+ debian/missing-sources/gauge-1.3.2.coffee
Copyright: 2016 Bernard Kobos <bkobos@extensa.pl>
License: Expat
diff --git a/debian/missing-sources/gauge-d5260c3.coffee b/debian/missing-sources/gauge-1.3.2.coffee
index d7366f44e..0121446c9 100644
--- a/debian/missing-sources/gauge-d5260c3.coffee
+++ b/debian/missing-sources/gauge-1.3.2.coffee
@@ -60,13 +60,10 @@ secondsToString = (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
+formatNumber = (num...) ->
+ value = num[0]
+ digits = 0 || num[1]
+ return addCommas(value.toFixed(digits))
mergeObjects = (obj1, obj2) ->
out = {}
@@ -115,8 +112,8 @@ class ValueUpdater
class BaseGauge extends ValueUpdater
displayScale: 1
- setTextField: (textField) ->
- @textField = if textField instanceof TextRenderer then textField else new TextRenderer(textField)
+ setTextField: (textField, fractionDigits) ->
+ @textField = if textField instanceof TextRenderer then textField else new TextRenderer(textField, fractionDigits)
setMinValue: (@minValue, updateStartValue=true) ->
if updateStartValue
@@ -130,7 +127,7 @@ class BaseGauge extends ValueUpdater
@textField.el.style.fontSize = options.fontSize + 'px'
if @options.angle > .5
- @gauge.options.angle = .5
+ @options.angle = .5
@configDisplayScale()
return @
@@ -162,11 +159,11 @@ class BaseGauge extends ValueUpdater
return @
class TextRenderer
- constructor: (@el) ->
+ constructor: (@el, @fractionDigits) ->
# Default behaviour, override to customize rendering
render: (gauge) ->
- @el.innerHTML = formatNumber(gauge.displayedValue)
+ @el.innerHTML = formatNumber(gauge.displayedValue, @fractionDigits)
class AnimatedText extends ValueUpdater
displayedValue: 0
@@ -208,8 +205,8 @@ class GaugePointer extends ValueUpdater
@setOptions()
setOptions: (options=null) ->
- updateObjectValues(@options, options)
- @length = @canvas.height * @options.length
+ @options = mergeObjects(@options, options)
+ @length = 2*@gauge.radius * @gauge.options.radiusScale * @options.length
@strokeWidth = @canvas.height * @options.strokeWidth
@maxValue = @gauge.maxValue
@minValue = @gauge.minValue
@@ -218,22 +215,20 @@ class GaugePointer extends ValueUpdater
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))
+ x = Math.round(@length * Math.cos(angle))
+ y = Math.round(@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))
+ startX = Math.round(@strokeWidth * Math.cos(angle - Math.PI/2))
+ startY = Math.round(@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))
+ endX = Math.round(@strokeWidth * Math.cos(angle + Math.PI/2))
+ endY = Math.round(@strokeWidth * Math.sin(angle + Math.PI/2))
@ctx.fillStyle = @options.color
@ctx.beginPath()
- @ctx.arc(centerX, centerY, @strokeWidth, 0, Math.PI*2, true)
+ @ctx.arc(0, 0, @strokeWidth, 0, Math.PI*2, true)
@ctx.fill()
@ctx.beginPath()
@@ -271,6 +266,7 @@ class Gauge extends BaseGauge
displayedAngle: 0
displayedValue: 0
lineWidth: 40
+ paddingTop: 0.1
paddingBottom: 0.1
percentColors: null,
options:
@@ -283,15 +279,23 @@ class Gauge extends BaseGauge
strokeWidth: 0.035
angle: 0.15
lineWidth: 0.44
+ radiusScale: 1.0
fontSize: 40
limitMax: false
+ limitMin: false
constructor: (@canvas) ->
super()
@percentColors = null
+ @forceUpdate = true
if typeof G_vmlCanvasManager != 'undefined'
@canvas = window.G_vmlCanvasManager.initElement(@canvas)
@ctx = @canvas.getContext('2d')
+ # Set canvas size to parent size
+ h = @canvas.clientHeight;
+ w = @canvas.clientWidth;
+ @canvas.height = h;
+ @canvas.width = w;
@gp = [new GaugePointer(@)]
@setOptions()
@render()
@@ -299,10 +303,15 @@ class Gauge extends BaseGauge
setOptions: (options=null) ->
super(options)
@configPercentColors()
- @lineWidth = @canvas.height * (1 - @paddingBottom) * @options.lineWidth # .2 - .7
- @radius = @canvas.height * (1 - @paddingBottom) - @lineWidth
+ @extraPadding = 0
+ if @options.angle < 0
+ phi = Math.PI*(1 + @options.angle)
+ @extraPadding = Math.sin(phi)
+ @availableHeight = @canvas.height * (1 - @paddingTop - @paddingBottom)
+ @lineWidth = @availableHeight * @options.lineWidth # .2 - .7
+ @radius = (@availableHeight - @lineWidth/2) / (1.0 + @extraPadding)
@ctx.clearRect(0, 0, @canvas.width, @canvas.height)
- @render()
+ # @render()
for gauge in @gp
gauge.setOptions(@options.pointer)
gauge.render()
@@ -319,32 +328,43 @@ class Gauge extends BaseGauge
@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(@))
+ gp = new GaugePointer(@)
+ gp.setOptions(@options.pointer)
+ @gp.push(gp)
+ else if value.length < @gp.length
+ # Delete redundant GaugePointers
+ @gp = @gp.slice(@gp.length-value.length)
# get max value and update pointer(s)
i = 0
- max_hit = false
for val in value
+ # Limit pointer within min and max?
if val > @maxValue
- @maxValue = @value * 1.1
- max_hit = true
+ if @options.limitMax
+ val = @maxValue
+ else
+ @maxValue = val + 1
+
+ else if val < @minValue
+ if @options.limitMin
+ val = @minValue
+ else
+ @minValue = val - 1
+
@gp[i].value = val
- @gp[i++].setOptions({maxValue: @maxValue, angle: @options.angle})
- @value = value[value.length - 1] # TODO: Span maybe??
+ @gp[i++].setOptions({minValue: @minValue, maxValue: @maxValue, angle: @options.angle})
+ @value = Math.max(Math.min(value[value.length - 1], @maxValue), @minValue) # TODO: Span maybe??
- if max_hit
- unless @options.limitMax
- AnimationUpdater.run()
- else
- AnimationUpdater.run()
+ # Force first .set()
+ AnimationUpdater.run(@forceUpdate)
+ @forceUpdate = false
getAngle: (value) ->
return (1 + @options.angle) * Math.PI + ((value - @minValue) / (@maxValue - @minValue)) * (1 - @options.angle * 2) * Math.PI
@@ -358,7 +378,7 @@ class Gauge extends BaseGauge
if (pct <= @percentColors[i].pct)
if grad == true
# Gradually change between colors
- startColor = @percentColors[i - 1]
+ startColor = @percentColors[i - 1] || @percentColors[0]
endColor = @percentColors[i]
rangePct = (pct - startColor.pct) / (endColor.pct - startColor.pct) # How far between both colors
color = {
@@ -375,41 +395,94 @@ class Gauge extends BaseGauge
pct = (val - @minValue) / (@maxValue - @minValue)
return @getColorForPercentage(pct, grad);
+ renderStaticLabels: (staticLabels, w, h, radius) ->
+ @ctx.save()
+ @ctx.translate(w, h)
+
+ # Scale font size the hard way - assuming size comes first.
+ font = staticLabels.font or "10px Times"
+ re = /\d+\.?\d?/
+ match = font.match(re)[0]
+ rest = font.slice(match.length);
+ fontsize = parseFloat(match) * this.displayScale;
+ @ctx.font = fontsize + rest;
+ @ctx.fillStyle = staticLabels.color || "#000000";
+
+ @ctx.textBaseline = "bottom"
+ @ctx.textAlign = "center"
+ for value in staticLabels.labels
+ # Draw labels depending on limitMin/Max
+ if (not @options.limitMin or value >= @minValue) and (not @options.limitMax or value <= @maxValue)
+ rotationAngle = @getAngle(value) - 3*Math.PI/2
+ @ctx.rotate(rotationAngle)
+ @ctx.fillText(formatNumber(value, staticLabels.fractionDigits), 0, -radius - @lineWidth/2)
+ @ctx.rotate(-rotationAngle)
+ @ctx.restore()
+
render: () ->
# Draw using canvas
w = @canvas.width / 2
- h = @canvas.height * (1 - @paddingBottom)
+ h = @canvas.height*@paddingTop + @availableHeight - (@radius + @lineWidth/2)*@extraPadding
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()
+ radius = @radius * @options.radiusScale
+ if (@options.staticLabels)
+ @renderStaticLabels(@options.staticLabels, w, h, radius)
+
+ if (@options.staticZones)
+ @ctx.save()
+ @ctx.translate(w, h)
+ @ctx.lineWidth = @lineWidth
+ for zone in @options.staticZones
+ # Draw zones depending on limitMin/Max
+ min = zone.min
+ if @options.limitMin and min < @minValue
+ min = @minValue
+ max = zone.max
+ if @options.limitMax and max > @maxValue
+ max = @maxValue
+ @ctx.strokeStyle = zone.strokeStyle
+ @ctx.beginPath()
+ @ctx.arc(0, 0, radius, @getAngle(min), @getAngle(max), false)
+ @ctx.stroke()
+ @ctx.restore()
- @ctx.strokeStyle = @options.strokeColor
- @ctx.beginPath()
- @ctx.arc(w, h, @radius, displayedAngle, (2 - @options.angle) * Math.PI, false)
- @ctx.stroke()
+ else
+ 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()
+
+
+ # Draw pointers from (w, h)
+ @ctx.translate(w, h)
for gauge in @gp
gauge.update(true)
+ @ctx.translate(-w, -h)
class BaseDonut extends BaseGauge
@@ -426,6 +499,7 @@ class BaseDonut extends BaseGauge
strokeColor: "#eeeeee"
shadowColor: "#d5d5d5"
angle: 0.35
+ radiusScale: 1.0
constructor: (@canvas) ->
super()
@@ -441,7 +515,7 @@ class BaseDonut extends BaseGauge
setOptions: (options=null) ->
super(options)
@lineWidth = @canvas.height * @options.lineWidth
- @radius = @canvas.height / 2 - @lineWidth/2
+ @radius = @options.radiusScale * (@canvas.height / 2 - @lineWidth/2)
return @
set: (value) ->
@@ -508,10 +582,10 @@ window.AnimationUpdater =
add: (object) ->
AnimationUpdater.elements.push(object)
- run: () ->
+ run: (force=false) ->
animationFinished = true
for elem in AnimationUpdater.elements
- if elem.update()
+ if elem.update(force is true)
animationFinished = false
if not animationFinished
AnimationUpdater.animId = requestAnimationFrame(AnimationUpdater.run)