Additional fix for issue Mikhus#99 (linear gauge fix)

sonthanhdan · Jan 10, 2017 · aac8d58 · aac8d58
1 parent df0be3e
commit aac8d58
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 13 deletions.
diff --git a/examples/issue-99.html b/examples/issue-99.html
@@ -12,11 +12,12 @@
 </head>
 <body>
 
-<canvas id="gauge"></canvas>
+<canvas id="radial-gauge"></canvas>
+<canvas id="linear-gauge"></canvas>
 
 <script>
 var gauge = new RadialGauge({
-    "renderTo": 'gauge',
+    "renderTo": 'radial-gauge',
     "width": 201,
     "height": 200,
     "minValue": -7,
@@ -150,6 +151,142 @@
     "animationTarget": "needle",
     "useMinPath": false,
 }).draw();
+
+var gauge = new LinearGauge({
+    "renderTo": 'linear-gauge',
+    "width": 400,
+    "height": 120,
+    "minValue": -7,
+    "maxValue": 107,
+    "value": 0,
+    "units": false,
+    "exactTicks": true,
+    "majorTicks": [
+        -7,
+        0,
+        20,
+        80,
+        100,
+        107
+    ],
+    "minorTicks": 0,
+    "strokeTicks": true,
+    "animatedValue": false,
+    "animateOnInit": false,
+    "title": false,
+    "borders": true,
+    "numbersMargin": 1,
+    "valueInt": 3,
+    "valueDec": 2,
+    "majorTicksInt": 1,
+    "majorTicksDec": 0,
+    "animation": true,
+    "animationDuration": 500,
+    "animationRule": "cycle",
+    "colorPlate": "#fff",
+    "colorPlateEnd": "",
+    "colorMajorTicks": "#444",
+    "colorMinorTicks": "#666",
+    "colorTitle": "#888",
+    "colorUnits": "#888",
+    "colorNumbers": "#444",
+    "colorNeedle": "rgba(240,128,128,1)",
+    "colorNeedleEnd": "rgba(255,160,122,.9)",
+    "colorValueText": "#444",
+    "colorValueTextShadow": "rgba(0,0,0,0.3)",
+    "colorBorderShadow": "rgba(0,0,0,0.5)",
+    "colorBorderOuter": "#ddd",
+    "colorBorderOuterEnd": "#aaa",
+    "colorBorderMiddle": "#eee",
+    "colorBorderMiddleEnd": "#f0f0f0",
+    "colorBorderInner": "#fafafa",
+    "colorBorderInnerEnd": "#ccc",
+    "colorValueBoxRect": "#888",
+    "colorValueBoxRectEnd": "#666",
+    "colorValueBoxBackground": "#babab2",
+    "colorValueBoxShadow": "rgba(0,0,0,1)",
+    "colorNeedleShadowUp": "rgba(2,255,255,0.2)",
+    "colorNeedleShadowDown": "rgba(188,143,143,0.45)",
+    "colorBarStroke": "#222",
+    "colorBar": "#ccc",
+    "colorBarProgress": "#888",
+    "colorBarShadow": "#000",
+    "fontNumbers": "Arial",
+    "fontTitle": "Arial",
+    "fontUnits": "Arial",
+    "fontValue": "Arial",
+    "fontNumbersSize": 20,
+    "fontTitleSize": 24,
+    "fontUnitsSize": 22,
+    "fontValueSize": 26,
+    "fontNumbersStyle": "normal",
+    "fontTitleStyle": "normal",
+    "fontUnitsStyle": "normal",
+    "fontValueStyle": "normal",
+    "fontNumbersWeight": "normal",
+    "fontTitleWeight": "normal",
+    "fontUnitsWeight": "normal",
+    "fontValueWeight": "normal",
+    "needle": true,
+    "needleShadow": true,
+    "needleType": "arrow",
+    "needleStart": 5,
+    "needleEnd": 85,
+    "needleWidth": 4,
+    "borderOuterWidth": 3,
+    "borderMiddleWidth": 3,
+    "borderInnerWidth": 3,
+    "borderShadowWidth": 3,
+    "valueBox": true,
+    "valueBoxStroke": 5,
+    "valueBoxWidth": 0,
+    "valueText": "",
+    "valueTextShadow": true,
+    "valueBoxBorderRadius": 2.5,
+    "highlights": [
+        {
+            "from": -7,
+            "to": 0,
+            "color": "#FF0000"
+        },
+        {
+            "from": 0,
+            "to": 20,
+            "color": "#FFF000"
+        },
+        {
+            "from": 20,
+            "to": 80,
+            "color": "#00FF00"
+        },
+        {
+            "from": 80,
+            "to": 100,
+            "color": "#FFF000"
+        },
+        {
+            "from": 100,
+            "to": 107,
+            "color": "#FF0000"
+        }
+    ],
+    "highlightsWidth": 15,
+    "barWidth": 0,
+    "barStrokeWidth": 0,
+    "barProgress": true,
+    "barShadow": 0,
+    "ticksAngle": 270,
+    "startAngle": 45,
+    "colorNeedleCircleOuter": "#f0f0f0",
+    "colorNeedleCircleOuterEnd": "#ccc",
+    "colorNeedleCircleInner": "#e8e8e8",
+    "colorNeedleCircleInnerEnd": "#f5f5f5",
+    "needleCircleSize": 10,
+    "needleCircleInner": true,
+    "needleCircleOuter": true,
+    "animationTarget": "needle",
+    "useMinPath": false,
+}).draw();
 </script>
 
 

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/LinearGauge.js b/lib/LinearGauge.js
@@ -762,20 +762,23 @@ function drawLinearMinorTicks(context, options) {
     let ticks = [];
     let i = options.minValue;
     let minTicks = Math.abs(options.minorTicks) || 0;
-    let valuePerNonExactTick = minTicks ? (options.maxValue - options.minValue) /
+    let valuePerNonExactTick = minTicks ?
+        (options.maxValue - options.minValue) /
         (minTicks * (options.majorTicks.length - 1)) : 0;
 
-    if (options.exactTicks) {
-        let delta = (options.majorTicks[0] % minTicks) || 0;
+    if (minTicks) {
+        if (options.exactTicks) {
+            let delta = (options.majorTicks[0] % minTicks) || 0;
 
-        for (; i < options.maxValue; i += minTicks) {
-            ticks.push(delta + i);
+            for (; i < options.maxValue; i += minTicks) {
+                ticks.push(delta + i);
+            }
         }
-    }
 
-    else {
-        for (; i < options.maxValue; i += valuePerNonExactTick) {
-            ticks.push(i);
+        else {
+            for (; i < options.maxValue; i += valuePerNonExactTick) {
+                ticks.push(i);
+            }
         }
     }