Skip to content

Commit

Permalink
Shows color for initial value if provided. Positive min and positive …
Browse files Browse the repository at this point in the history 
…max now work properly
  • Loading branch information
@naikus
naikus committed Nov 16, 2017
1 parent 22241a7 commit a502cf4
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 48 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Javascript
npm install svg-gauge

// Require JS
var Gauge = require("svg-guage");
var Gauge = require("svg-gauge");

// Standalone
var Gauge = window.Gauge;
Expand Down
55 changes: 32 additions & 23 deletions dist/gauge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,9 +139,10 @@
}

function getValueInPercentage(value, min, max) {
// const newMax = max - min, newVal = Math.abs(min) + value;
// return 100 * newVal / newMax;
return 100 * (Math.abs(min) + value) / (max - min);
const newMax = max - min, newVal = value - min;
return 100 * newVal / newMax;
// var absMin = Math.abs(min);
// return 100 * (absMin + value) / (max + absMin);
}

/**
Expand Down Expand Up @@ -277,12 +278,37 @@
gaugeValuePath.setAttribute("d", pathString(radius, startAngle, angle + startAngle, flag));
}

function setGaugeColor(value, duration) {
var c = gaugeColor(value),
dur = duration * 1000,
pathTransition = "stroke " + dur + "ms ease";
// textTransition = "fill " + dur + "ms ease";

gaugeValuePath.style = [
"stroke: " + c,
"-webkit-transition: " + pathTransition,
"-moz-transition: " + pathTransition,
"transition: " + pathTransition,
].join(";");
/*
gaugeValueElem.style = [
"fill: " + c,
"-webkit-transition: " + textTransition,
"-moz-transition: " + textTransition,
"transition: " + textTransition,
].join(";");
*/
}

instance = {
setMaxValue: function(max) {
limit = max;
},
setValue: function(val) {
value = normalize(val, min, limit);
if(gaugeColor) {
setGaugeColor(value, 0)
}
updateGauge(value);
},
setValueAnimated: function(val, duration) {
Expand All @@ -291,26 +317,9 @@
if(oldVal === value) {
return;
}
if(gaugeColor) {
var c = gaugeColor(value),
dur = duration * 1000,
pathTransition = "stroke " + dur + "ms ease";
// textTransition = "fill " + dur + "ms ease";

gaugeValuePath.style = [
"stroke: " + c,
"-webkit-transition: " + pathTransition,
"-moz-transition: " + pathTransition,
"transition: " + pathTransition,
].join(";");
/*
gaugeValueElem.style = [
"fill: " + c,
"-webkit-transition: " + textTransition,
"-moz-transition: " + textTransition,
"transition: " + textTransition,
].join(";");
*/
if(gaugeColor) {
setGaugeColor(value, duration);
}
Animation({
start: oldVal || 0,
Expand All @@ -327,7 +336,7 @@
};

initializeGauge(gaugeContainer);
updateGauge(value);
instance.setValue(value);
return instance;
};
})();
Expand Down
2 changes: 1 addition & 1 deletion dist/gauge.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

55 changes: 32 additions & 23 deletions src/gauge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,9 +139,10 @@
}

function getValueInPercentage(value, min, max) {
// const newMax = max - min, newVal = Math.abs(min) + value;
// return 100 * newVal / newMax;
return 100 * (Math.abs(min) + value) / (max - min);
const newMax = max - min, newVal = value - min;
return 100 * newVal / newMax;
// var absMin = Math.abs(min);
// return 100 * (absMin + value) / (max + absMin);
}

/**
Expand Down Expand Up @@ -277,12 +278,37 @@
gaugeValuePath.setAttribute("d", pathString(radius, startAngle, angle + startAngle, flag));
}

function setGaugeColor(value, duration) {
var c = gaugeColor(value),
dur = duration * 1000,
pathTransition = "stroke " + dur + "ms ease";
// textTransition = "fill " + dur + "ms ease";

gaugeValuePath.style = [
"stroke: " + c,
"-webkit-transition: " + pathTransition,
"-moz-transition: " + pathTransition,
"transition: " + pathTransition,
].join(";");
/*
gaugeValueElem.style = [
"fill: " + c,
"-webkit-transition: " + textTransition,
"-moz-transition: " + textTransition,
"transition: " + textTransition,
].join(";");
*/
}

instance = {
setMaxValue: function(max) {
limit = max;
},
setValue: function(val) {
value = normalize(val, min, limit);
if(gaugeColor) {
setGaugeColor(value, 0)
}
updateGauge(value);
},
setValueAnimated: function(val, duration) {
Expand All @@ -291,26 +317,9 @@
if(oldVal === value) {
return;
}
if(gaugeColor) {
var c = gaugeColor(value),
dur = duration * 1000,
pathTransition = "stroke " + dur + "ms ease";
// textTransition = "fill " + dur + "ms ease";

gaugeValuePath.style = [
"stroke: " + c,
"-webkit-transition: " + pathTransition,
"-moz-transition: " + pathTransition,
"transition: " + pathTransition,
].join(";");
/*
gaugeValueElem.style = [
"fill: " + c,
"-webkit-transition: " + textTransition,
"-moz-transition: " + textTransition,
"transition: " + textTransition,
].join(";");
*/
if(gaugeColor) {
setGaugeColor(value, duration);
}
Animation({
start: oldVal || 0,
Expand All @@ -327,7 +336,7 @@
};

initializeGauge(gaugeContainer);
updateGauge(value);
instance.setValue(value);
return instance;
};
})();
Expand Down

0 comments on commit a502cf4

Please sign in to comment.