Skip to content

Commit

Permalink
adding bar start position option to enable anti-clockwise progress ba…
Browse files Browse the repository at this point in the history
…rs and middle start point progress bars
  • Loading branch information
Stathis Oikonomou committed Apr 16, 2019
1 parent 8f1a093 commit 41c4408
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 13 deletions.
108 changes: 108 additions & 0 deletions examples/radial-bar-with-different-bar-positions.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!doctype html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<style>
body {
padding: 0;
margin: 0;
background: #fff
}
</style>
</head>

<body>

<button onclick="animateGauges()">Animate</button>
<button onclick="stopGaugesAnimation()">Stop animation</button>

<hr>

<table>
<tbody>
<tr>
<td>
<canvas data-type="radial-gauge" data-value="40" data-width="400" data-height="400" data-bar-width="10"
data-bar-shadow="5" data-color-bar-progress="rgba(50,200,50,.75)" data-bar-start-position="left"></canvas>
</td>
<td>
<canvas data-type="radial-gauge" data-value="40" data-width="400" data-height="400" data-bar-width="2"
data-bar-shadow="0" data-border-inner-width="0" data-border-outer-width="0" data-border-middle-width="0"
data-color-bar-progress="rgba(50,50,200,.75)" data-color-bar="#aae" data-color-needle="rgba(50,50,200,.75)"
data-color-needle-end="#aae" data-highlights="false" data-value-box-border-radius="0"
data-value-box-stroke="1" data-color-value-box-shadow="0" data-needle-type="line" data-needle-width="1"
data-needle-circle-size="5" data-needle-circle-inner="false" data-needle-start="0"
data-color-needle-circle-outer="rgba(50,50,200,.75)" data-color-needle-circle-outer-end="#aae"
data-stroke-ticks="0" data-major-ticks="100,80,60,40,20,0" data-bar-start-position="right"></canvas>
</td>
<td>
<canvas data-type="radial-gauge" data-value="40" data-width="400" data-height="400" data-bar-width="20"
data-bar-shadow="1" data-color-bar-progress="rgba(200,50,50,.75)" data-color-bar="#eaa"
data-border-shadow-width="0" data-border-inner-width="0" data-border-outer-width="0"
data-border-middle-width="0" data-highlights="false" data-value-box-stroke="0"
data-color-value-box-shadow="0" data-value-box-border-radius="0" data-value-text-shadow="0"
data-color-value-box-background="transparent" data-needle="false" data-bar-start-position="middle"></canvas>
</td>
</tr>
<tr style="text-align: center; font-size: 24px;">
<td>
<strong>Clockwise progress bar</strong>
</td>
<td>
<strong>Anti-clockwise progress bar</strong>
</td>
<td>
<strong>Middle start point progress bar</strong>
</td>
</tr>
</tbody>
</table>


<script async src="../gauge.min.js"></script>

<script>
if (!Array.prototype.forEach) {
Array.prototype.forEach = function (cb) {
var i = 0, s = this.length;
for (; i < s; i++) {
cb && cb(this[i], i, this);
}
}
}

document.fonts && document.fonts.forEach(function (font) {
font.loaded.then(function () {
if (font.family.match(/Led/)) {
document.gauges.forEach(function (gauge) {
gauge.update();
});
}
});
});

var timers = [];

function animateGauges() {
document.gauges.forEach(function (gauge) {
timers.push(setInterval(function () {
var min = gauge.options.minValue - 20;
var max = gauge.options.maxValue + 20;

gauge.value = min + Math.random() * (max - min);
}, gauge.animation.duration + 50));
});
}

function stopGaugesAnimation() {
timers.forEach(function (timer) {
clearInterval(timer);
});
}
</script>

</body>

</html>
4 changes: 2 additions & 2 deletions gauge.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion gauge.min.js.map

Large diffs are not rendered by default.

46 changes: 36 additions & 10 deletions lib/RadialGauge.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ const defaultRadialGaugeOptions = Object.assign({}, GenericOptions, {
animationTarget: 'needle', // 'needle' or 'plate'
useMinPath: false,

barWidth: 0
barWidth: 0,
barStartPosition: 'left'
});

/* istanbul ignore next: private, not testable */
Expand Down Expand Up @@ -477,6 +478,12 @@ function drawRadialNeedle(context, options) {

let value = options.ticksAngle < 360 ?
drawings.normalizedValue(options).indented : options.value;
let startAngle = isFixed ? options.startAngle :
(options.startAngle + (value - options.minValue) / (options.maxValue - options.minValue) * options.ticksAngle);
if (options.barStartPosition === 'right') {
startAngle = options.startAngle + options.ticksAngle -
(value - options.minValue) / (options.maxValue - options.minValue) * options.ticksAngle;
}
let max = maxRadialRadius(context, options);
//noinspection JSUnresolvedFunction
let r1 = abs(max / 100 * options.needleCircleSize);
Expand All @@ -497,10 +504,7 @@ function drawRadialNeedle(context, options) {

drawings.drawNeedleShadow(context, options);

context.rotate(drawings.radians(isFixed ? options.startAngle :
(options.startAngle + (value -
options.minValue) / (options.maxValue - options.minValue) *
options.ticksAngle)));
context.rotate(drawings.radians(startAngle));

context.fillStyle = drawings.linearGradient(
context,
Expand Down Expand Up @@ -657,13 +661,35 @@ function drawRadialProgressBar(context, options) {

// draw bar progress
if (options.barProgress) {
let startAngle = sa;
let endAngle = sa +
(drawings.normalizedValue(options).normal -
options.minValue) / (options.maxValue - options.minValue) *
options.ticksAngle;
if (options.barStartPosition === 'middle') {
let midValue = (options.minValue + options.maxValue) * 0.5;
if (options.value < midValue) {
startAngle = 180 - ((
(midValue - drawings.normalizedValue(options).normal) / (options.maxValue - options.minValue) * options.ticksAngle));
endAngle = 180;
} else {
startAngle = 180;
endAngle = 180 + ((
(drawings.normalizedValue(options).normal - midValue) / (options.maxValue - options.minValue) *
options.ticksAngle));
}
} else if (options.barStartPosition === 'right') {
startAngle = ea -
(drawings.normalizedValue(options).normal -
options.minValue) / (options.maxValue - options.minValue) *
options.ticksAngle;
endAngle = ea;
}

context.beginPath();
context.arc(0, 0, r,
drawings.radians(sa),
drawings.radians(sa +
(drawings.normalizedValue(options).normal -
options.minValue) / (options.maxValue - options.minValue) *
options.ticksAngle),
drawings.radians(startAngle),
drawings.radians(endAngle),
false);
context.strokeStyle = options.colorBarProgress;
context.lineWidth = w;
Expand Down

0 comments on commit 41c4408

Please sign in to comment.