diff --git a/README.md b/README.md
index e034ffa..60b6563 100644
--- 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
+ });
+```
+
+
+
+
+
## Methods
### Refresh
diff --git a/docs/examples/targetLine.html b/docs/examples/targetLine.html
new file mode 100644
index 0000000..a1a011f
--- /dev/null
+++ b/docs/examples/targetLine.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+ Counter
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/img/TargetLine_Example.png b/docs/img/TargetLine_Example.png
new file mode 100644
index 0000000..8424202
Binary files /dev/null and b/docs/img/TargetLine_Example.png differ
diff --git a/justgage.js b/justgage.js
index b818cc6..12b59b1 100644
--- 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