Allow outganged values for full-circle radial gauges

nikson-a · Oct 1, 2016 · 7d99c67 · 7d99c67
1 parent ebfa79e
commit 7d99c67
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 4 deletions.
diff --git a/examples/outrange.html b/examples/outrange.html
@@ -15,6 +15,51 @@
 <canvas data-type="radial-gauge" data-value="120" data-width="400" data-height="400"></canvas>
 <canvas data-type="linear-gauge" data-value="-20" data-width="100" data-height="400"></canvas>
 <canvas data-type="linear-gauge" data-value="120" data-width="100" data-height="400"></canvas>
+<canvas data-type="radial-gauge"
+        data-width="500"
+        data-height="500"
+        data-min-value="0"
+        data-max-value="360"
+        data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
+        data-minor-ticks="22"
+        data-ticks-angle="360"
+        data-start-angle="180"
+        data-stroke-ticks="false"
+        data-highlights="false"
+        data-color-plate="#33a"
+        data-color-major-ticks="#f5f5f5"
+        data-color-minor-ticks="#ddd"
+        data-color-numbers="#ccc"
+        data-color-needle="rgba(240, 128, 128, 1)"
+        data-color-needle-end="rgba(255, 160, 122, .9)"
+        data-value-box="false"
+        data-value-text-shadow="false"
+        data-color-circle-inner="#fff"
+        data-color-needle-circle-outer="#ccc"
+        data-needle-circle-size="15"
+        data-needle-circle-outer="false"
+        data-animation-rule="linear"
+        data-needle-type="line"
+        data-needle-start="75"
+        data-needle-end="99"
+        data-needle-width="3"
+        data-borders="true"
+        data-border-inner-width="0"
+        data-border-middle-width="0"
+        data-border-outer-width="10"
+        data-color-border-outer="#ccc"
+        data-color-border-outer-end="#ccc"
+        data-color-needle-shadow-down="#222"
+        data-border-shadow-width="0"
+        data-animation-target="plate"
+        data-units="ᵍ"
+        data-title="DIRECTION"
+        data-font-title-size="19"
+        data-color-title="#f5f5f5"
+        data-animation-duration="1500"
+        data-value="365"
+        data-animate-on-init="true"
+></canvas>
 
 <script async src="../gauge.min.js"></script>
 </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
@@ -430,7 +430,8 @@ function drawRadialUnits(context, options) {
 function drawRadialNeedle(context, options) {
     if (!options.needle) return;
 
-    let value = options.value;
+    let value = options.ticksAngle < 360 ?
+        drawings.normalizedValue(options).indented : options.value;
     let max = maxRadialRadius(context, options);
     //noinspection JSUnresolvedFunction
     let r1 = abs(max / 100 * options.needleCircleSize);
@@ -453,7 +454,7 @@ function drawRadialNeedle(context, options) {
     drawings.drawNeedleShadow(context, options);
 
     context.rotate(drawings.radians(isFixed ? options.startAngle :
-        (options.startAngle + (drawings.normalizedValue(options).indented -
+        (options.startAngle + (value -
             options.minValue) / (options.maxValue - options.minValue) *
             options.ticksAngle)));