Skip to content

add option.border to add tail and lead border #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nicolai8 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

add option.border to add tail and lead border #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b08edd6
add ability to add lead and tail border
Nicolai8 Jan 5, 2017
da5b4fd
disable border by default,
Nicolai8 Jan 5, 2017
f20aa7c
build
Nicolai8 Jan 5, 2017
0df9da2
update options.md
Nicolai8 Jan 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,11 @@ You can pass these options to the initialize function to set a custom look and f
<td>0</td>
<td>Rotation of the complete chart in degrees.</td>
</tr>
<tr>
<td><strong>border</strong></td>
<td>object</td>
<td>Object with width in pixels, color and boolean for a lead and tail border (<code>{ width: 1, color: '#ffffff', enabled: true }</code>), or false to deactivate border.</td>
</tr>
<tr>
<td><strong>animate</strong></td>
<td>object</td>
Expand Down
84 changes: 48 additions & 36 deletions dist/angular.easypiechart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
// like Node.
module.exports = factory(require("angular"));
} else {
factory(angular);
factory(root["angular"]);
}
}(this, function (angular) {

Expand Down Expand Up @@ -77,13 +77,13 @@
* @param {DOMElement} el DOM element to host the canvas (root of the plugin)
* @param {object} options options object of the plugin
*/
var CanvasRenderer = function(el, options) {
var CanvasRenderer = function (el, options) {
var cachedBackground;
var canvas = document.createElement('canvas');

el.appendChild(canvas);

if (typeof(G_vmlCanvasManager) === 'object') {
if (typeof (G_vmlCanvasManager) === 'object') {
G_vmlCanvasManager.initElement(canvas);
}

Expand Down Expand Up @@ -112,7 +112,7 @@ var CanvasRenderer = function(el, options) {
}

// IE polyfill for Date
Date.now = Date.now || function() {
Date.now = Date.now || function () {
return +(new Date());
};

Expand All @@ -122,7 +122,7 @@ var CanvasRenderer = function(el, options) {
* @param {number} lineWidth Width of the line in px
* @param {number} percent Percentage to draw (float between -1 and 1)
*/
var drawCircle = function(color, lineWidth, percent) {
var drawCircle = function (color, lineWidth, percent) {
percent = Math.min(Math.max(-1, percent || 0), 1);
var isNegative = percent <= 0 ? true : false;

Expand All @@ -138,7 +138,7 @@ var CanvasRenderer = function(el, options) {
/**
* Draw the scale of the chart
*/
var drawScale = function() {
var drawScale = function () {
var offset;
var length;

Expand All @@ -154,7 +154,7 @@ var CanvasRenderer = function(el, options) {
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
ctx.fillRect(-options.size / 2 + offset, 0, length, 1);
ctx.rotate(Math.PI / 12);
}
ctx.restore();
Expand All @@ -164,49 +164,49 @@ var CanvasRenderer = function(el, options) {
* Request animation frame wrapper with polyfill
* @return {function} Request animation frame method or timeout fallback
*/
var reqAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}());
var reqAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
} ());

/**
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
var drawBackground = function () {
if (options.scaleColor) drawScale();
if (options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
};

/**
* Canvas accessor
*/
this.getCanvas = function() {
return canvas;
};
/**
* Canvas accessor
*/
this.getCanvas = function () {
return canvas;
};

/**
* Canvas 2D context 'ctx' accessor
*/
this.getCtx = function() {
return ctx;
};
/**
* Canvas 2D context 'ctx' accessor
*/
this.getCtx = function () {
return ctx;
};

/**
* Clear the complete canvas
*/
this.clear = function() {
this.clear = function () {
ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
};

/**
* Draw the complete chart
* @param {number} percent Percent shown by the chart between -100 and 100
*/
this.draw = function(percent) {
this.draw = function (percent) {
// do we need to render a background
if (!!options.scaleColor || !!options.trackColor) {
// getImageData and putImageData are supported
Expand All @@ -229,12 +229,19 @@ var CanvasRenderer = function(el, options) {

// if barcolor is a function execute it and pass the percent as a value
var color;
if (typeof(options.barColor) === 'function') {
if (typeof (options.barColor) === 'function') {
color = options.barColor(percent);
} else {
color = options.barColor;
}

//draw lead and tail border if needed
if (options.border.enabled) {
var borderWidthInPercent = options.border.width / (2 * Math.PI * radius);
drawCircle(options.border.color, options.lineWidth, percent / 100 - borderWidthInPercent);
drawCircle(options.border.color, options.lineWidth, borderWidthInPercent);
}

// draw bar
drawCircle(color, options.lineWidth, percent / 100);
}.bind(this);
Expand All @@ -244,10 +251,10 @@ var CanvasRenderer = function(el, options) {
* @param {number} from Starting percentage
* @param {number} to Final percentage
*/
this.animate = function(from, to) {
this.animate = function (from, to) {
var startTime = Date.now();
options.onStart(from, to);
var animation = function() {
var animation = function () {
var process = Math.min(Date.now() - startTime, options.animate.duration);
var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
this.draw(currentValue);
Expand All @@ -271,9 +278,14 @@ var EasyPieChart = function(el, opts) {
scaleLength: 5,
lineCap: 'round',
lineWidth: 3,
trackWidth: undefined,
trackWidth: undefined,
size: 110,
rotate: 0,
border: {
width: 1,
color: '#ffffff',
enabled: false
},
animate: {
duration: 1000,
enabled: true
Expand Down
2 changes: 1 addition & 1 deletion dist/angular.easypiechart.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

82 changes: 47 additions & 35 deletions dist/easypiechart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@
* @param {DOMElement} el DOM element to host the canvas (root of the plugin)
* @param {object} options options object of the plugin
*/
var CanvasRenderer = function(el, options) {
var CanvasRenderer = function (el, options) {
var cachedBackground;
var canvas = document.createElement('canvas');

el.appendChild(canvas);

if (typeof(G_vmlCanvasManager) === 'object') {
if (typeof (G_vmlCanvasManager) === 'object') {
G_vmlCanvasManager.initElement(canvas);
}

Expand Down Expand Up @@ -63,7 +63,7 @@ var CanvasRenderer = function(el, options) {
}

// IE polyfill for Date
Date.now = Date.now || function() {
Date.now = Date.now || function () {
return +(new Date());
};

Expand All @@ -73,7 +73,7 @@ var CanvasRenderer = function(el, options) {
* @param {number} lineWidth Width of the line in px
* @param {number} percent Percentage to draw (float between -1 and 1)
*/
var drawCircle = function(color, lineWidth, percent) {
var drawCircle = function (color, lineWidth, percent) {
percent = Math.min(Math.max(-1, percent || 0), 1);
var isNegative = percent <= 0 ? true : false;

Expand All @@ -89,7 +89,7 @@ var CanvasRenderer = function(el, options) {
/**
* Draw the scale of the chart
*/
var drawScale = function() {
var drawScale = function () {
var offset;
var length;

Expand All @@ -105,7 +105,7 @@ var CanvasRenderer = function(el, options) {
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
ctx.fillRect(-options.size / 2 + offset, 0, length, 1);
ctx.rotate(Math.PI / 12);
}
ctx.restore();
Expand All @@ -115,49 +115,49 @@ var CanvasRenderer = function(el, options) {
* Request animation frame wrapper with polyfill
* @return {function} Request animation frame method or timeout fallback
*/
var reqAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}());
var reqAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
} ());

/**
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
var drawBackground = function () {
if (options.scaleColor) drawScale();
if (options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
};

/**
* Canvas accessor
*/
this.getCanvas = function() {
return canvas;
};
/**
* Canvas accessor
*/
this.getCanvas = function () {
return canvas;
};

/**
* Canvas 2D context 'ctx' accessor
*/
this.getCtx = function() {
return ctx;
};
/**
* Canvas 2D context 'ctx' accessor
*/
this.getCtx = function () {
return ctx;
};

/**
* Clear the complete canvas
*/
this.clear = function() {
this.clear = function () {
ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
};

/**
* Draw the complete chart
* @param {number} percent Percent shown by the chart between -100 and 100
*/
this.draw = function(percent) {
this.draw = function (percent) {
// do we need to render a background
if (!!options.scaleColor || !!options.trackColor) {
// getImageData and putImageData are supported
Expand All @@ -180,12 +180,19 @@ var CanvasRenderer = function(el, options) {

// if barcolor is a function execute it and pass the percent as a value
var color;
if (typeof(options.barColor) === 'function') {
if (typeof (options.barColor) === 'function') {
color = options.barColor(percent);
} else {
color = options.barColor;
}

//draw lead and tail border if needed
if (options.border.enabled) {
var borderWidthInPercent = options.border.width / (2 * Math.PI * radius);
drawCircle(options.border.color, options.lineWidth, percent / 100 - borderWidthInPercent);
drawCircle(options.border.color, options.lineWidth, borderWidthInPercent);
}

// draw bar
drawCircle(color, options.lineWidth, percent / 100);
}.bind(this);
Expand All @@ -195,10 +202,10 @@ var CanvasRenderer = function(el, options) {
* @param {number} from Starting percentage
* @param {number} to Final percentage
*/
this.animate = function(from, to) {
this.animate = function (from, to) {
var startTime = Date.now();
options.onStart(from, to);
var animation = function() {
var animation = function () {
var process = Math.min(Date.now() - startTime, options.animate.duration);
var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
this.draw(currentValue);
Expand All @@ -222,9 +229,14 @@ var EasyPieChart = function(el, opts) {
scaleLength: 5,
lineCap: 'round',
lineWidth: 3,
trackWidth: undefined,
trackWidth: undefined,
size: 110,
rotate: 0,
border: {
width: 1,
color: '#ffffff',
enabled: false
},
animate: {
duration: 1000,
enabled: true
Expand Down
Loading