fix: make differential work with all intervals

toorshia · Dec 2, 2022 · ab0e50e · ab0e50e
1 parent 0b5e9e9
commit ab0e50e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -137,7 +137,7 @@ setInterval(() => {
 | humanFriendly        | `false`                             | convert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M)                             |
 | noGradient           | `false`                             | Whether to use gradual color change for value, or sector-based                                                  |
 | donut                | `false`                             | Show donut gauge                  
-| differential         | `false`                             | min must = -max and pointer will be at top when = 0
+| differential         | `false`                             | Gauge will fill starting from the center, rather than from the min value                                       |
 | relativeGaugeSize    | `false`                             | Whether gauge size should follow changes in container element size                                              |
 | counter              | `false`                             | Animate text value number change                                                                                |
 | decimals             | `0`                                 | Number of digits after floating point                                                                           |

diff --git a/docs/examples/differential.html b/docs/examples/differential.html
@@ -23,16 +23,29 @@
 <body>
   <div class="container">
     <div id="gauge"></div>
+    <button style="margin-bottom: 20px" onclick="g1.refresh(getRandomInt(-10, 50))">Refresh</button>
+
+    <div id="gauge2"></div>
+    <button onclick="g2.refresh(getRandomInt(-10, 50))">Refresh</button>
+
   </div>
   <script src="../raphael.min.js"></script>
-  <script src="../justgage.js"></script>
+  <script src="../../justgage.js"></script>
+
   <script>
+    var g1, g2
+
+    /** Random integer  */
+    function getRandomInt(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
     document.addEventListener("DOMContentLoaded", function (event) {
 
-      var gauge = new JustGage({
+      g1 = new JustGage({
         id: "gauge", // the id of the html element
         value: 20,
-        min: -50,
+        min: -10,
         max: 50,
         label: "Amps",
         decimals: 2,
@@ -50,10 +63,26 @@
         }
       });
 
-      // update the value randomly
-      setInterval(() => {
-        gauge.refresh(Math.random() * 100 - 50);
-      }, 5000)
+      g2 = new JustGage({
+        id: "gauge2", // the id of the html element
+        value: -20,
+        min: -50,
+        max: 50,
+        label: "Amps",
+        decimals: 2,
+        gaugeWidthScale: 0.6,
+        differential: true,
+        pointer: true,
+        pointerOptions: {
+          toplength: -30,
+          bottomlength: 10,
+          bottomwidth: 10,
+          color: '#8e8e93',
+          stroke: '#ffffff',
+          stroke_width: 2,
+          stroke_linecap: 'round'
+        }
+      });
 
     });
   </script>

diff --git a/justgage.js b/justgage.js
@@ -253,7 +253,7 @@
       donut: kvLookup("donut", config, dataset, false),
 
       // differential : bool
-      // show gauge with 0 at 12 o'clock
+      // Gauge will fill starting from the center, rather than from the min value
       differential: kvLookup("differential", config, dataset, false),
 
       // relativeGaugeSize : bool
@@ -513,7 +513,18 @@
       const gws = obj.config.gaugeWidthScale;
       const donut = obj.config.donut;
 
-      let alpha, Ro, Ri, Cx, Cy, So, Si, Xo, Yo, Xi, Yi, path;
+      let alpha; // angle in radians
+      let Ro; // outer radius, from center to outer edge of gauge
+      let Ri; // inner radius, from center to inner edge of gauge
+      let Cx; // center x
+      let Cy; // center y
+      let So; // sweep flag for outer arc
+      let Si; // sweep flag for inner arc
+      let Xo; // outer x, from center to outer edge of arc
+      let Yo; // outer y, from center to outer edge of arc
+      let Xi; // inner x, from center to inner edge of arc
+      let Yi; // inner y, from center to inner edge of arc
+      let path; // SVG path string
 
       if (min < 0 && !isDiff) {
         max -= min;
@@ -551,9 +562,6 @@
           path,
         };
       } else if (isDiff) {
-        // At the moment only works with min = -max
-        // otherwise would need to work out the zero point
-        // Which of course is possible, but haven't done it yet
         alpha = (1 - (value - min) / (max - min)) * Math.PI;
         Ro = w / 2 - w / 10;
         Ri = Ro - (w / 6.666666666666667) * gws;
@@ -566,16 +574,20 @@
         Xi = Cx + Ri * Math.cos(alpha);
         Yi = Cy - Ri * Math.sin(alpha);
 
-        So = value < 0 ? 1 : 0;
-        Si = value < 0 ? 0 : 1;
+        const middle = min + (max - min) / 2;
 
-        path = "M" + Cx + "," + (Cy - Ri) + " ";
-        path += "L" + Cx + "," + (Cy - Ro) + " ";
-        path += "A" + Ro + "," + Ro + " 0 0 " + Si + " " + Xo + "," + Yo + " ";
-        path += "L" + Xi + "," + Yi + " ";
+        // sweep flag determines if the arc should begin moving at positive angles
+        // or negative ones
+        So = value < middle ? 1 : 0; // sweep flag for outer arc
+        Si = value < middle ? 0 : 1; // sweep flag for inner arc
+
+        path = "M" + Cx + "," + (Cy - Ri) + " "; // start at bottom center
+        path += "L" + Cx + "," + (Cy - Ro) + " "; // line to top center (Cx, Cy - Ro)
+        path += "A" + Ro + "," + Ro + " 0 0 " + Si + " " + Xo + "," + Yo + " "; // arc to outer edge
+        path += "L" + Xi + "," + Yi + " "; // line to inner edge (Xi, Yi)
         path +=
-          "A" + Ri + "," + Ri + " 0 0 " + So + " " + Cx + "," + (Cy - Ri) + " ";
-        path += "Z ";
+          "A" + Ri + "," + Ri + " 0 0 " + So + " " + Cx + "," + (Cy - Ri) + " "; // arc to bottom center
+        path += "Z "; // close path
 
         return {
           path,