gaugejs-rails 0.0.1 → 0.0.2

data/vendor/assets/javascripts/gauge.js

@@ -1,13 +1,9 @@
+// Generated by CoffeeScript 1.6.3
 (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]; }
-    function ctor() { this.constructor = child; }
-    ctor.prototype = parent.prototype;
-    child.prototype = new ctor;
-    child.__super__ = parent.prototype;
-    return child;
-  };
+  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'];
@@ -53,19 +49,21 @@
       };
     }
   })();
+
   String.prototype.hashCode = function() {
-    var char, hash, i, _ref;
+    var char, hash, i, _i, _ref;
     hash = 0;
     if (this.length === 0) {
       return hash;
     }
-    for (i = 0, _ref = this.length; 0 <= _ref ? i < _ref : i > _ref; 0 <= _ref ? i++ : i--) {
+    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);
@@ -82,19 +80,37 @@
     hr = hr ? hr + ':' : '';
     return hr + min + ':' + sec;
   };
+
   formatNumber = function(num) {
     return addCommas(num.toFixed(0));
   };
+
   updateObjectValues = function(obj1, obj2) {
-    var key, val, _results;
-    _results = [];
+    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];
-      _results.push(obj1[key] = val);
+      out[key] = val;
     }
-    return _results;
+    return out;
   };
+
   addCommas = function(nStr) {
     var rgx, x, x1, x2;
     nStr += '';
@@ -110,15 +126,34 @@
     }
     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() {
-      AnimationUpdater.add(this);
+
+    function ValueUpdater(addToAnimationQueue, clear) {
+      if (addToAnimationQueue == null) {
+        addToAnimationQueue = true;
+      }
+      this.clear = clear != null ? clear : true;
+      if (addToAnimationQueue) {
+        AnimationUpdater.add(this);
+      }
     }
-    ValueUpdater.prototype.update = function() {
+
+    ValueUpdater.prototype.update = function(force) {
       var diff;
-      if (this.displayedValue !== this.value) {
-        if (this.ctx) {
+      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;
@@ -132,15 +167,109 @@
       }
       return false;
     };
+
     return ValueUpdater;
+
   })();
-  AnimatedText = (function() {
-    __extends(AnimatedText, 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;
@@ -149,6 +278,7 @@
         this.value = 0;
       }
     }
+
     AnimatedText.prototype.render = function() {
       var textVal;
       if (this.text) {
@@ -158,8 +288,11 @@
       }
       return this.elem.innerHTML = textVal;
     };
+
     return AnimatedText;
-  })();
+
+  })(ValueUpdater);
+
   AnimatedTextFactory = {
     create: function(objList) {
       var elem, out, _i, _len;
@@ -171,28 +304,44 @@
       return out;
     }
   };
-  GaugePointer = (function() {
-    GaugePointer.prototype.strokeWidth = 3;
-    GaugePointer.prototype.length = 76;
+
+  GaugePointer = (function(_super) {
+    __extends(GaugePointer, _super);
+
+    GaugePointer.prototype.displayedValue = 0;
+
+    GaugePointer.prototype.value = 0;
+
     GaugePointer.prototype.options = {
       strokeWidth: 0.035,
-      length: 0.1
+      length: 0.1,
+      color: "#000000"
     };
-    function GaugePointer(ctx, canvas) {
-      this.ctx = ctx;
-      this.canvas = canvas;
+
+    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;
-      return this.strokeWidth = this.canvas.height * this.options.strokeWidth;
+      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(angle) {
-      var centerX, centerY, endX, endY, startX, startY, x, y;
+
+    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));
@@ -201,7 +350,7 @@
       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.fillStyle = this.options.color;
       this.ctx.beginPath();
       this.ctx.arc(centerX, centerY, this.strokeWidth, 0, Math.PI * 2, true);
       this.ctx.fill();
@@ -211,18 +360,23 @@
       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) {
@@ -240,20 +394,36 @@
         "width": avgPercent + "%"
       });
     };
+
     return Bar;
+
   })();
-  Gauge = (function() {
-    __extends(Gauge, ValueUpdater);
+
+  Gauge = (function(_super) {
+    __extends(Gauge, _super);
+
     Gauge.prototype.elem = null;
-    Gauge.prototype.value = 20;
+
+    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: "#8fc0da",
+      colorStop: void 0,
+      gradientType: 0,
       strokeColor: "#e0e0e0",
       pointer: {
         length: 0.8,
@@ -261,55 +431,163 @@
       },
       angle: 0.15,
       lineWidth: 0.44,
-      fontSize: 40
+      fontSize: 40,
+      limitMax: false,
+      percentColors: [[0.0, "#a9d70b"], [0.50, "#f9c802"], [1.0, "#ff0000"]]
     };
+
     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.ctx, this.canvas);
+      this.gp = [new GaugePointer(this)];
       this.setOptions();
       this.render();
     }
+
     Gauge.prototype.setOptions = function(options) {
+      var gauge, _i, _len, _ref1;
       if (options == null) {
         options = null;
       }
-      updateObjectValues(this.options, options);
+      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.gp.setOptions(this.options.pointer);
-      if (this.textField) {
-        this.textField.style.fontSize = options.fontSize + 'px';
+      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) {
-      this.value = value;
-      if (this.value > this.maxValue) {
-        this.maxValue = this.value * 1.1;
+      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();
       }
-      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;
+      return (1 + this.options.angle) * Math.PI + ((value - this.minValue) / (this.maxValue - this.minValue)) * (1 - this.options.angle * 2) * Math.PI;
     };
-    Gauge.prototype.setTextField = function(textField) {
-      this.textField = textField;
+
+    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, grd, h, w;
+      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.innerHTML = formatNumber(this.displayedValue);
+        this.textField.render(this);
       }
-      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;
+      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;
@@ -318,74 +596,88 @@
       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);
+      _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;
-  })();
-  Donut = (function() {
-    __extends(Donut, ValueUpdater);
-    Donut.prototype.lineWidth = 15;
-    Donut.prototype.displayedValue = 0;
-    Donut.prototype.value = 33;
-    Donut.prototype.maxValue = 80;
-    Donut.prototype.options = {
+
+  })(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 Donut(canvas) {
+
+    function BaseDonut(canvas) {
       this.canvas = canvas;
-      Donut.__super__.constructor.call(this);
+      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();
     }
-    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;
+
+    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;
     };
-    Donut.prototype.setOptions = function(options) {
+
+    BaseDonut.prototype.setOptions = function(options) {
       if (options == null) {
         options = null;
       }
-      updateObjectValues(this.options, options);
+      BaseDonut.__super__.setOptions.call(this, 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';
-      }
       return this;
     };
-    Donut.prototype.setTextField = function(textField) {
-      this.textField = textField;
-    };
-    Donut.prototype.set = function(value) {
+
+    BaseDonut.prototype.set = function(value) {
       this.value = value;
       if (this.value > this.maxValue) {
         this.maxValue = this.value * 1.1;
       }
       return AnimationUpdater.run();
     };
-    Donut.prototype.render = function() {
-      var displayedAngle, grd, grdFill, h, start, stop, w;
+
+    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.innerHTML = formatNumber(this.displayedValue);
+        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;
-      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.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;
@@ -396,8 +688,48 @@
       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,
@@ -414,11 +746,11 @@
       return AnimationUpdater.elements.push(object);
     },
     run: function() {
-      var animationFinished, elem, _i, _len, _ref;
+      var animationFinished, elem, _i, _len, _ref2;
       animationFinished = true;
-      _ref = AnimationUpdater.elements;
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        elem = _ref[_i];
+      _ref2 = AnimationUpdater.elements;
+      for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
+        elem = _ref2[_i];
         if (elem.update()) {
           animationFinished = false;
         }
@@ -430,6 +762,13 @@
       }
     }
   };
+
   window.Gauge = Gauge;
+
   window.Donut = Donut;
-}).call(this);
+
+  window.BaseDonut = BaseDonut;
+
+  window.TextRenderer = TextRenderer;
+
+}).call(this);