feat: add targetLine (#398)

toorshia · Jul 16, 2024 · e6e488c · e6e488c
1 parent dd02e7f
commit e6e488c
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -146,6 +146,9 @@ setInterval(() => {
 | pointer              | `false`                             | Show value pointer                                                                                              |
 | pointerOptions       | `{}`                                | Pointer options. Expects an [object](#Pointer-options)                                                          |
 | displayRemaining     | `false`                             | Replace display number with the value remaining to reach max value                                              |
+| targetLine           | `null`                              | Value Target line will display                               |
+| targetLineColor      | `"#000000"`                         | Color of Target Line                                        |
+| targetLineWidth      | `1.5`                               | Width of Target Line                                         |
 
 ### Custom Sectors
 
@@ -183,6 +186,28 @@ pointerOptions: {
 }
 ```
 
+### TargetLine
+
+Example:
+
+```js
+var gauge = new JustGage({
+            id: "gauge-targetLine", 
+            value: 50,
+            min: 0,
+            max: 100,
+            decimals: 2,
+            gaugeWidthScale: 0.6,
+    		targetLine: 50,
+    		targetLineColour: "#000",
+    		targetLineWidth: 4
+        });
+```
+
+<p align="center"><img src="docs/img/TargetLine_Example.png"/></p>
+
+
+
 ## Methods
 
 ### Refresh

diff --git a/docs/examples/targetLine.html b/docs/examples/targetLine.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Counter</title>
+    <meta name="viewport" content="width=device-width">
+    <style>
+        .container {
+            width: 450px;
+            margin: 0 auto;
+            text-align: center;
+        }
+
+        .gauge {
+            width: 450px;
+            height: 450px;
+        }
+
+        a:link.button,
+        a:active.button,
+        a:visited.button,
+        a:hover.button {
+            margin: 30px 5px 0 2px;
+            padding: 7px 13px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Gauge with Target Line</h1>
+        <div id="g1" class="gauge"></div>
+        <a href="#" id="g1_refresh">Random Refresh</a>
+    </div>
+    <script src="../raphael.min.js"></script>
+    <script src="../../justgage.js"></script>
+    <script>
+        var g1;
+        /** Random integer  */
+        function getRandomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+
+        document.addEventListener("DOMContentLoaded", function (event) {
+            g1 = new JustGage({
+                id: "g1",
+                value: 72,
+                min: 0,
+                minTxt: 0,
+                max: 100,
+                maxTxt: 100,
+                targetLine:25,
+                targetLineWidth: 4,
+                targetLineColor: "#000",
+            });
+
+            document.getElementById('g1_refresh').addEventListener('click', function () {
+                g1.refresh(getRandomInt(0, 100));
+            });
+        });
+    </script>
+</body>
+
+</html>
diff --git a/docs/img/TargetLine_Example.png b/docs/img/TargetLine_Example.png
diff --git a/justgage.js b/justgage.js
@@ -207,6 +207,17 @@
         dataset,
         ">"
       ),
+      // targetLine : float
+      // value for the target line (optional)
+      targetLine: kvLookup("targetLine", config, dataset, null, "float"),
+
+      // targetLineColor : string
+      // color of the target line
+      targetLineColor: kvLookup("targetLineColor", config, dataset, "#000000"),
+
+      // targetLineWidth : float
+      // width of the target line
+      targetLineWidth: kvLookup("targetLineWidth", config, dataset, 1.5),
 
       // donutStartAngle : int
       // angle to start from when in donut mode
@@ -765,6 +776,9 @@
       ],
     });
 
+    // Draw the Target Line
+    obj.drawTargetLine();
+
     if (obj.config.donut) {
       obj.level.transform(
         "r" +
@@ -1376,6 +1390,62 @@
     }
   };
 
+  JustGage.prototype.drawTargetLine = function() {
+      const obj = this;
+
+      if (obj.config.targetLine === null) {
+        return;
+      }
+
+      let path;
+      const w = obj.params.widgetW;
+      const h = obj.params.widgetH;
+      const dx = obj.params.dx;
+      const dy = obj.params.dy;
+      const gws = obj.config.gaugeWidthScale;
+      const donut = obj.config.donut;
+
+      let alpha = (1 - (obj.config.targetLine - obj.config.min) / (obj.config.max - obj.config.min)) * Math.PI;
+      let Ro = w / 2 - w / 10;
+      let Ri = Ro - w / 6.666666666666667 * gws;
+
+      let Cx, Cy, Xo, Yo, Xi, Yi;
+
+      if (donut) {
+        Ro = w / 2 - w / 30;
+        Ri = Ro - w / 6.666666666666667 * gws;
+
+        Cx = w / 2 + dx;
+        Cy = h / 2 + dy;
+
+        Xo = Cx + Ro * Math.cos(alpha);
+        Yo = Cy - Ro * Math.sin(alpha);
+        Xi = Cx + Ri * Math.cos(alpha);
+        Yi = Cy - Ri * Math.sin(alpha);
+
+        path = "M" + Xi + "," + Yi + " L" + Xo + "," + Yo;
+      } else {
+        Cx = w / 2 + dx;
+        Cy = h / 1.25 + dy;
+
+        Xo = Cx + Ro * Math.cos(alpha);
+        Yo = Cy - Ro * Math.sin(alpha);
+        Xi = Cx + Ri * Math.cos(alpha);
+        Yi = Cy - Ri * Math.sin(alpha);
+
+        path = "M" + Xi + "," + Yi + " L" + Xo + "," + Yo;
+      }
+
+      obj.targetLine = obj.canvas.path(path).attr({
+        "stroke": obj.config.targetLineColor,
+        "stroke-width": obj.config.targetLineWidth
+      });
+
+      if (donut) {
+        obj.targetLine.transform("r" + obj.config.donutStartAngle + "," + (w / 2 + dx) + "," + (h / 2 + dy));
+      }
+    };
+
   //
   // tiny helper function to lookup value of a key from two hash tables
   // if none found, return defaultvalue