| 'use strict'; |
| |
| /** |
| * Expose `Progress`. |
| */ |
| |
| module.exports = Progress; |
| |
| /** |
| * Initialize a new `Progress` indicator. |
| */ |
| function Progress() { |
| this.percent = 0; |
| this.size(0); |
| this.fontSize(11); |
| this.font('helvetica, arial, sans-serif'); |
| } |
| |
| /** |
| * Set progress size to `size`. |
| * |
| * @public |
| * @param {number} size |
| * @return {Progress} Progress instance. |
| */ |
| Progress.prototype.size = function(size) { |
| this._size = size; |
| return this; |
| }; |
| |
| /** |
| * Set text to `text`. |
| * |
| * @public |
| * @param {string} text |
| * @return {Progress} Progress instance. |
| */ |
| Progress.prototype.text = function(text) { |
| this._text = text; |
| return this; |
| }; |
| |
| /** |
| * Set font size to `size`. |
| * |
| * @public |
| * @param {number} size |
| * @return {Progress} Progress instance. |
| */ |
| Progress.prototype.fontSize = function(size) { |
| this._fontSize = size; |
| return this; |
| }; |
| |
| /** |
| * Set font to `family`. |
| * |
| * @param {string} family |
| * @return {Progress} Progress instance. |
| */ |
| Progress.prototype.font = function(family) { |
| this._font = family; |
| return this; |
| }; |
| |
| /** |
| * Update percentage to `n`. |
| * |
| * @param {number} n |
| * @return {Progress} Progress instance. |
| */ |
| Progress.prototype.update = function(n) { |
| this.percent = n; |
| return this; |
| }; |
| |
| /** |
| * Draw on `ctx`. |
| * |
| * @param {CanvasRenderingContext2d} ctx |
| * @return {Progress} Progress instance. |
| */ |
| Progress.prototype.draw = function(ctx) { |
| try { |
| var percent = Math.min(this.percent, 100); |
| var size = this._size; |
| var half = size / 2; |
| var x = half; |
| var y = half; |
| var rad = half - 1; |
| var fontSize = this._fontSize; |
| |
| ctx.font = fontSize + 'px ' + this._font; |
| |
| var angle = Math.PI * 2 * (percent / 100); |
| ctx.clearRect(0, 0, size, size); |
| |
| // outer circle |
| ctx.strokeStyle = '#9f9f9f'; |
| ctx.beginPath(); |
| ctx.arc(x, y, rad, 0, angle, false); |
| ctx.stroke(); |
| |
| // inner circle |
| ctx.strokeStyle = '#eee'; |
| ctx.beginPath(); |
| ctx.arc(x, y, rad - 1, 0, angle, true); |
| ctx.stroke(); |
| |
| // text |
| var text = this._text || (percent | 0) + '%'; |
| var w = ctx.measureText(text).width; |
| |
| ctx.fillText(text, x - w / 2 + 1, y + fontSize / 2 - 1); |
| } catch (ignore) { |
| // don't fail if we can't render progress |
| } |
| return this; |
| }; |