Merge pull request Mikhus#184 from eusoikonomou/multiple-bar-start-po…

…sitions adding barStartPosition option
sonthanhdan · Apr 9, 2020 · 42bae08 · 42bae08
2 parents f821c5c + 7dd3756
commit 42bae08
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 13 deletions.
diff --git a/examples/radial-bar-with-different-bar-positions.html b/examples/radial-bar-with-different-bar-positions.html
@@ -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>
diff --git a/gauge.min.js b/gauge.min.js
diff --git a/gauge.min.js.map b/gauge.min.js.map
diff --git a/lib/RadialGauge.js b/lib/RadialGauge.js
@@ -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 */
@@ -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);
@@ -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,
@@ -588,6 +592,43 @@ function drawRadialValueBox(context, options, value) {
         context.max - context.max * 0.33, context.max);
 }
 
+/* istanbul ignore next: private, not testable */
+/**
+ * Computes start and end angle depending on barStartPositionOption
+ *
+ * @param {RadialGaugeOptions} options
+ */
+function computeAngles(options) {
+    let sa = options.startAngle;
+    let ea = options.startAngle + options.ticksAngle;
+    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 - endAngle + sa;
+        endAngle = ea;
+    }
+    return {startAngle, endAngle};
+}
+
 /* istanbul ignore next: private, not testable */
 /**
  * Draws gauge progress bar
@@ -657,13 +698,14 @@ function drawRadialProgressBar(context, options) {
 
         // draw bar progress
         if (options.barProgress) {
+            let angles = computeAngles(options);
+            let startAngle = angles.startAngle;
+            let endAngle = angles.endAngle;
+
             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;