Skip to content

Commit 7765087

Browse files
MikhusMikhus
authored
Merge pull request #102 from Mikhus/v2.1.2
Merge release 2.1.2
2 parents 9ac0b9c + aac8d58 commit 7765087

8 files changed

+324
-22
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "canvas-gauges",
3-
"version": "2.1.1",
3+
"version": "2.1.2",
44
"homepage": "https://github.com/Mikhus/canvas-gauges",
55
"authors": [
66
"Mykhailo Stadnyk <mikhus@gmail.com>"

‎examples/issue-99.html

+294
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Gauge Test</title>
6+
<script src="../gauge.min.js"></script>
7+
<style>body {
8+
padding: 20px;
9+
margin: 0;
10+
background: #fff
11+
}</style>
12+
</head>
13+
<body>
14+
15+
<canvas id="radial-gauge"></canvas>
16+
<canvas id="linear-gauge"></canvas>
17+
18+
<script>
19+
var gauge = new RadialGauge({
20+
"renderTo": 'radial-gauge',
21+
"width": 201,
22+
"height": 200,
23+
"minValue": -7,
24+
"maxValue": 107,
25+
"value": 0,
26+
"units": false,
27+
"exactTicks": true,
28+
"majorTicks": [
29+
-7,
30+
0,
31+
20,
32+
80,
33+
100,
34+
107
35+
],
36+
"minorTicks": 0,
37+
"strokeTicks": true,
38+
"animatedValue": false,
39+
"animateOnInit": false,
40+
"title": false,
41+
"borders": true,
42+
"numbersMargin": 1,
43+
"valueInt": 3,
44+
"valueDec": 2,
45+
"majorTicksInt": 1,
46+
"majorTicksDec": 0,
47+
"animation": true,
48+
"animationDuration": 500,
49+
"animationRule": "cycle",
50+
"colorPlate": "#fff",
51+
"colorPlateEnd": "",
52+
"colorMajorTicks": "#444",
53+
"colorMinorTicks": "#666",
54+
"colorTitle": "#888",
55+
"colorUnits": "#888",
56+
"colorNumbers": "#444",
57+
"colorNeedle": "rgba(240,128,128,1)",
58+
"colorNeedleEnd": "rgba(255,160,122,.9)",
59+
"colorValueText": "#444",
60+
"colorValueTextShadow": "rgba(0,0,0,0.3)",
61+
"colorBorderShadow": "rgba(0,0,0,0.5)",
62+
"colorBorderOuter": "#ddd",
63+
"colorBorderOuterEnd": "#aaa",
64+
"colorBorderMiddle": "#eee",
65+
"colorBorderMiddleEnd": "#f0f0f0",
66+
"colorBorderInner": "#fafafa",
67+
"colorBorderInnerEnd": "#ccc",
68+
"colorValueBoxRect": "#888",
69+
"colorValueBoxRectEnd": "#666",
70+
"colorValueBoxBackground": "#babab2",
71+
"colorValueBoxShadow": "rgba(0,0,0,1)",
72+
"colorNeedleShadowUp": "rgba(2,255,255,0.2)",
73+
"colorNeedleShadowDown": "rgba(188,143,143,0.45)",
74+
"colorBarStroke": "#222",
75+
"colorBar": "#ccc",
76+
"colorBarProgress": "#888",
77+
"colorBarShadow": "#000",
78+
"fontNumbers": "Arial",
79+
"fontTitle": "Arial",
80+
"fontUnits": "Arial",
81+
"fontValue": "Arial",
82+
"fontNumbersSize": 20,
83+
"fontTitleSize": 24,
84+
"fontUnitsSize": 22,
85+
"fontValueSize": 26,
86+
"fontNumbersStyle": "normal",
87+
"fontTitleStyle": "normal",
88+
"fontUnitsStyle": "normal",
89+
"fontValueStyle": "normal",
90+
"fontNumbersWeight": "normal",
91+
"fontTitleWeight": "normal",
92+
"fontUnitsWeight": "normal",
93+
"fontValueWeight": "normal",
94+
"needle": true,
95+
"needleShadow": true,
96+
"needleType": "arrow",
97+
"needleStart": 5,
98+
"needleEnd": 85,
99+
"needleWidth": 4,
100+
"borderOuterWidth": 3,
101+
"borderMiddleWidth": 3,
102+
"borderInnerWidth": 3,
103+
"borderShadowWidth": 3,
104+
"valueBox": true,
105+
"valueBoxStroke": 5,
106+
"valueBoxWidth": 0,
107+
"valueText": "",
108+
"valueTextShadow": true,
109+
"valueBoxBorderRadius": 2.5,
110+
"highlights": [
111+
{
112+
"from": -7,
113+
"to": 0,
114+
"color": "#FF0000"
115+
},
116+
{
117+
"from": 0,
118+
"to": 20,
119+
"color": "#FFF000"
120+
},
121+
{
122+
"from": 20,
123+
"to": 80,
124+
"color": "#00FF00"
125+
},
126+
{
127+
"from": 80,
128+
"to": 100,
129+
"color": "#FFF000"
130+
},
131+
{
132+
"from": 100,
133+
"to": 107,
134+
"color": "#FF0000"
135+
}
136+
],
137+
"highlightsWidth": 15,
138+
"barWidth": 0,
139+
"barStrokeWidth": 0,
140+
"barProgress": true,
141+
"barShadow": 0,
142+
"ticksAngle": 270,
143+
"startAngle": 45,
144+
"colorNeedleCircleOuter": "#f0f0f0",
145+
"colorNeedleCircleOuterEnd": "#ccc",
146+
"colorNeedleCircleInner": "#e8e8e8",
147+
"colorNeedleCircleInnerEnd": "#f5f5f5",
148+
"needleCircleSize": 10,
149+
"needleCircleInner": true,
150+
"needleCircleOuter": true,
151+
"animationTarget": "needle",
152+
"useMinPath": false,
153+
}).draw();
154+
155+
var gauge = new LinearGauge({
156+
"renderTo": 'linear-gauge',
157+
"width": 400,
158+
"height": 120,
159+
"minValue": -7,
160+
"maxValue": 107,
161+
"value": 0,
162+
"units": false,
163+
"exactTicks": true,
164+
"majorTicks": [
165+
-7,
166+
0,
167+
20,
168+
80,
169+
100,
170+
107
171+
],
172+
"minorTicks": 0,
173+
"strokeTicks": true,
174+
"animatedValue": false,
175+
"animateOnInit": false,
176+
"title": false,
177+
"borders": true,
178+
"numbersMargin": 1,
179+
"valueInt": 3,
180+
"valueDec": 2,
181+
"majorTicksInt": 1,
182+
"majorTicksDec": 0,
183+
"animation": true,
184+
"animationDuration": 500,
185+
"animationRule": "cycle",
186+
"colorPlate": "#fff",
187+
"colorPlateEnd": "",
188+
"colorMajorTicks": "#444",
189+
"colorMinorTicks": "#666",
190+
"colorTitle": "#888",
191+
"colorUnits": "#888",
192+
"colorNumbers": "#444",
193+
"colorNeedle": "rgba(240,128,128,1)",
194+
"colorNeedleEnd": "rgba(255,160,122,.9)",
195+
"colorValueText": "#444",
196+
"colorValueTextShadow": "rgba(0,0,0,0.3)",
197+
"colorBorderShadow": "rgba(0,0,0,0.5)",
198+
"colorBorderOuter": "#ddd",
199+
"colorBorderOuterEnd": "#aaa",
200+
"colorBorderMiddle": "#eee",
201+
"colorBorderMiddleEnd": "#f0f0f0",
202+
"colorBorderInner": "#fafafa",
203+
"colorBorderInnerEnd": "#ccc",
204+
"colorValueBoxRect": "#888",
205+
"colorValueBoxRectEnd": "#666",
206+
"colorValueBoxBackground": "#babab2",
207+
"colorValueBoxShadow": "rgba(0,0,0,1)",
208+
"colorNeedleShadowUp": "rgba(2,255,255,0.2)",
209+
"colorNeedleShadowDown": "rgba(188,143,143,0.45)",
210+
"colorBarStroke": "#222",
211+
"colorBar": "#ccc",
212+
"colorBarProgress": "#888",
213+
"colorBarShadow": "#000",
214+
"fontNumbers": "Arial",
215+
"fontTitle": "Arial",
216+
"fontUnits": "Arial",
217+
"fontValue": "Arial",
218+
"fontNumbersSize": 20,
219+
"fontTitleSize": 24,
220+
"fontUnitsSize": 22,
221+
"fontValueSize": 26,
222+
"fontNumbersStyle": "normal",
223+
"fontTitleStyle": "normal",
224+
"fontUnitsStyle": "normal",
225+
"fontValueStyle": "normal",
226+
"fontNumbersWeight": "normal",
227+
"fontTitleWeight": "normal",
228+
"fontUnitsWeight": "normal",
229+
"fontValueWeight": "normal",
230+
"needle": true,
231+
"needleShadow": true,
232+
"needleType": "arrow",
233+
"needleStart": 5,
234+
"needleEnd": 85,
235+
"needleWidth": 4,
236+
"borderOuterWidth": 3,
237+
"borderMiddleWidth": 3,
238+
"borderInnerWidth": 3,
239+
"borderShadowWidth": 3,
240+
"valueBox": true,
241+
"valueBoxStroke": 5,
242+
"valueBoxWidth": 0,
243+
"valueText": "",
244+
"valueTextShadow": true,
245+
"valueBoxBorderRadius": 2.5,
246+
"highlights": [
247+
{
248+
"from": -7,
249+
"to": 0,
250+
"color": "#FF0000"
251+
},
252+
{
253+
"from": 0,
254+
"to": 20,
255+
"color": "#FFF000"
256+
},
257+
{
258+
"from": 20,
259+
"to": 80,
260+
"color": "#00FF00"
261+
},
262+
{
263+
"from": 80,
264+
"to": 100,
265+
"color": "#FFF000"
266+
},
267+
{
268+
"from": 100,
269+
"to": 107,
270+
"color": "#FF0000"
271+
}
272+
],
273+
"highlightsWidth": 15,
274+
"barWidth": 0,
275+
"barStrokeWidth": 0,
276+
"barProgress": true,
277+
"barShadow": 0,
278+
"ticksAngle": 270,
279+
"startAngle": 45,
280+
"colorNeedleCircleOuter": "#f0f0f0",
281+
"colorNeedleCircleOuterEnd": "#ccc",
282+
"colorNeedleCircleInner": "#e8e8e8",
283+
"colorNeedleCircleInnerEnd": "#f5f5f5",
284+
"needleCircleSize": 10,
285+
"needleCircleInner": true,
286+
"needleCircleOuter": true,
287+
"animationTarget": "needle",
288+
"useMinPath": false,
289+
}).draw();
290+
</script>
291+
292+
293+
</body>
294+
</html>

‎gauge.min.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gauge.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/LinearGauge.js

+19-12
Original file line numberDiff line numberDiff line change
@@ -605,6 +605,8 @@ function drawLinearTicks(context, color, ticks, minVal, maxVal,
605605
let tickOffset = (width - barWidth) / 2;
606606
let tickX, tickY;
607607
let i = 0;
608+
let s = ticks.length;
609+
let val;
608610
let tickLen = lineLength * width;
609611
let tickLeft = tickOffset - ticksPadding * width;
610612
let tickRight = tickOffset + barWidth + tickLen + ticksPadding * width;
@@ -615,8 +617,9 @@ function drawLinearTicks(context, color, ticks, minVal, maxVal,
615617
context.save();
616618

617619
let ratio = ticksLength / (maxVal - minVal);
618-
for (let val of ticks) {
619-
context.strokeStyle = colors[ticks.indexOf(val)];
620+
for (; i < s; i++) {
621+
val = ticks[i];
622+
context.strokeStyle = colors[i];
620623

621624
if (isVertical) {
622625
tickY = Y + length - barMargin - barOffset
@@ -758,20 +761,24 @@ function drawLinearMinorTicks(context, options) {
758761
let [hasLeft, hasRight] = drawings.prepareTicks(options);
759762
let ticks = [];
760763
let i = options.minValue;
761-
let valuePerNonExactTick = (options.maxValue - options.minValue) /
762-
(options.minorTicks * (options.majorTicks.length - 1));
764+
let minTicks = Math.abs(options.minorTicks) || 0;
765+
let valuePerNonExactTick = minTicks ?
766+
(options.maxValue - options.minValue) /
767+
(minTicks * (options.majorTicks.length - 1)) : 0;
763768

764-
if (options.exactTicks) {
765-
let delta = options.majorTicks[0] % options.minorTicks;
769+
if (minTicks) {
770+
if (options.exactTicks) {
771+
let delta = (options.majorTicks[0] % minTicks) || 0;
766772

767-
for (; i < options.maxValue; i += options.minorTicks) {
768-
ticks.push(delta + i);
773+
for (; i < options.maxValue; i += minTicks) {
774+
ticks.push(delta + i);
775+
}
769776
}
770-
}
771777

772-
else {
773-
for (; i < options.maxValue; i += valuePerNonExactTick) {
774-
ticks.push(i);
778+
else {
779+
for (; i < options.maxValue; i += valuePerNonExactTick) {
780+
ticks.push(i);
781+
}
775782
}
776783
}
777784

‎lib/RadialGauge.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,7 @@ function drawRadialMinorTicks(context, options) {
244244
let s, range, angle;
245245
let i = 0;
246246
let delta = 0;
247+
let minTicks = Math.abs(options.minorTicks) || 0;
247248
let ratio = options.ticksAngle / (options.maxValue - options.minValue);
248249

249250
context.lineWidth = SmartCanvas.pixelRatio;
@@ -253,12 +254,12 @@ function drawRadialMinorTicks(context, options) {
253254

254255
if (options.exactTicks) {
255256
range = options.maxValue - options.minValue;
256-
s = range / options.minorTicks;
257-
delta = (options.majorTicks[0] % options.minorTicks) * ratio;
257+
s = minTicks ? range / minTicks : 0;
258+
delta = ((options.majorTicks[0] % minTicks) || 0) * ratio;
258259
}
259260

260261
else {
261-
s = options.minorTicks * (options.majorTicks.length - 1);
262+
s = minTicks * (options.majorTicks.length - 1);
262263
}
263264

264265
for (; i < s; ++i) {

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "canvas-gauges",
3-
"version": "2.1.1",
3+
"version": "2.1.2",
44
"description": "Minimalist HTML5 Canvas Gauges",
55
"main": "gauge.min.js",
66
"directories": {

‎test-coverage.svg

+1-1
Loading

0 commit comments

Comments
 (0)