From 3b081cb23ebb9ad1e974a35b195a7a6fbd9e1416 Mon Sep 17 00:00:00 2001 From: Adam Lloyd Date: Tue, 16 Jul 2024 18:51:02 +1000 Subject: [PATCH 1/2] Added targetLine Added functionality to include a target line; a line to indicate average, mean or a target value within the gauge. targetLine: [value], targetLineColor: "#000", targetLineWidth: 2 --- justgage.js | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) 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 From 68de7c0dd667c0103511e29db75f60eace2bb162 Mon Sep 17 00:00:00 2001 From: Adam Lloyd Date: Tue, 16 Jul 2024 22:12:27 +1000 Subject: [PATCH 2/2] Added Documentation & Example --- README.md | 25 ++++++++++++ docs/examples/targetLine.html | 65 ++++++++++++++++++++++++++++++++ docs/img/TargetLine_Example.png | Bin 0 -> 10262 bytes 3 files changed, 90 insertions(+) create mode 100644 docs/examples/targetLine.html create mode 100644 docs/img/TargetLine_Example.png 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 + + + + + +
+

Gauge with Target Line

+
+ Random Refresh +
+ + + + + + \ 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 0000000000000000000000000000000000000000..8424202093b8a97f064212c04bd2f13778f69e6c GIT binary patch literal 10262 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 literal 0 HcmV?d00001