Skip to content

Commit

Permalink
Merge pull request #102 from Mikhus/v2.1.2
Browse files Browse the repository at this point in the history
Merge release 2.1.2
  • Loading branch information
Mikhus authored Jan 10, 2017
2 parents 9ac0b9c + aac8d58 commit 7765087
Show file tree
Hide file tree
Showing 8 changed files with 324 additions and 22 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "canvas-gauges",
"version": "2.1.1",
"version": "2.1.2",
"homepage": "https://github.com/Mikhus/canvas-gauges",
"authors": [
"Mykhailo Stadnyk <[email protected]>"
Expand Down
294 changes: 294 additions & 0 deletions examples/issue-99.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,294 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<script src="../gauge.min.js"></script>
<style>body {
padding: 20px;
margin: 0;
background: #fff
}</style>
</head>
<body>

<canvas id="radial-gauge"></canvas>
<canvas id="linear-gauge"></canvas>

<script>
var gauge = new RadialGauge({
"renderTo": 'radial-gauge',
"width": 201,
"height": 200,
"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();

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>


</body>
</html>
6 changes: 3 additions & 3 deletions gauge.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion gauge.min.js.map

Large diffs are not rendered by default.

31 changes: 19 additions & 12 deletions lib/LinearGauge.js
Original file line number Diff line number Diff line change
Expand Up @@ -605,6 +605,8 @@ function drawLinearTicks(context, color, ticks, minVal, maxVal,
let tickOffset = (width - barWidth) / 2;
let tickX, tickY;
let i = 0;
let s = ticks.length;
let val;
let tickLen = lineLength * width;
let tickLeft = tickOffset - ticksPadding * width;
let tickRight = tickOffset + barWidth + tickLen + ticksPadding * width;
Expand All @@ -615,8 +617,9 @@ function drawLinearTicks(context, color, ticks, minVal, maxVal,
context.save();

let ratio = ticksLength / (maxVal - minVal);
for (let val of ticks) {
context.strokeStyle = colors[ticks.indexOf(val)];
for (; i < s; i++) {
val = ticks[i];
context.strokeStyle = colors[i];

if (isVertical) {
tickY = Y + length - barMargin - barOffset
Expand Down Expand Up @@ -758,20 +761,24 @@ function drawLinearMinorTicks(context, options) {
let [hasLeft, hasRight] = drawings.prepareTicks(options);
let ticks = [];
let i = options.minValue;
let valuePerNonExactTick = (options.maxValue - options.minValue) /
(options.minorTicks * (options.majorTicks.length - 1));
let minTicks = Math.abs(options.minorTicks) || 0;
let valuePerNonExactTick = minTicks ?
(options.maxValue - options.minValue) /
(minTicks * (options.majorTicks.length - 1)) : 0;

if (options.exactTicks) {
let delta = options.majorTicks[0] % options.minorTicks;
if (minTicks) {
if (options.exactTicks) {
let delta = (options.majorTicks[0] % minTicks) || 0;

for (; i < options.maxValue; i += options.minorTicks) {
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);
}
}
}

Expand Down
7 changes: 4 additions & 3 deletions lib/RadialGauge.js
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ function drawRadialMinorTicks(context, options) {
let s, range, angle;
let i = 0;
let delta = 0;
let minTicks = Math.abs(options.minorTicks) || 0;
let ratio = options.ticksAngle / (options.maxValue - options.minValue);

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

if (options.exactTicks) {
range = options.maxValue - options.minValue;
s = range / options.minorTicks;
delta = (options.majorTicks[0] % options.minorTicks) * ratio;
s = minTicks ? range / minTicks : 0;
delta = ((options.majorTicks[0] % minTicks) || 0) * ratio;
}

else {
s = options.minorTicks * (options.majorTicks.length - 1);
s = minTicks * (options.majorTicks.length - 1);
}

for (; i < s; ++i) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "canvas-gauges",
"version": "2.1.1",
"version": "2.1.2",
"description": "Minimalist HTML5 Canvas Gauges",
"main": "gauge.min.js",
"directories": {
Expand Down
2 changes: 1 addition & 1 deletion test-coverage.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7765087

Please sign in to comment.