|
/*! |
|
* @license Open source under BSD 2-clause (http://choosealicense.com/licenses/bsd-2-clause/) |
|
* Copyright (c) 2015, Curtis Bratton |
|
* All rights reserved. |
|
* |
|
* Liquid Fill Gauge v1.1 |
|
*/ |
|
function liquidFillGaugeDefaultSettings(){ |
|
return { |
|
minValue: 0, // The gauge minimum value. |
|
maxValue: 100, // The gauge maximum value. |
|
circleThickness: 0.05, // The outer circle thickness as a percentage of it's radius. |
|
circleFillGap: 0.05, // The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius. |
|
circleColor: "#178BCA", // The color of the outer circle. |
|
waveHeight: 0.05, // The wave height as a percentage of the radius of the wave circle. |
|
waveCount: 1, // The number of full waves per width of the wave circle. |
|
waveRiseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it's final height. |
|
waveAnimateTime: 18000, // The amount of time in milliseconds for a full wave to enter the wave circle. |
|
waveRise: true, // Control if the wave should rise from 0 to it's full height, or start at it's full height. |
|
waveHeightScaling: true, // Controls wave size scaling at low and high fill percentages. When true, wave height reaches it's maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appear totally full or empty when near it's minimum or maximum fill. |
|
waveAnimate: true, // Controls if the wave scrolls or is static. |
|
waveColor: "#178BCA", // The color of the fill wave. |
|
waveOffset: 0, // The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave. |
|
textVertPosition: .5, // The height at which to display the percentage text withing the wave circle. 0 = bottom, 1 = top. |
|
textSize: 1, // The relative height of the text to display in the wave circle. 1 = 50% |
|
valueCountUp: true, // If true, the displayed value counts up from 0 to it's final value upon loading. If false, the final value is displayed. |
|
displayPercent: true, // If true, a % symbol is displayed after the value. |
|
textColor: "#045681", // The color of the value text when the wave does not overlap it. |
|
waveTextColor: "#A4DBf8" // The color of the value text when the wave overlaps it. |
|
}; |
|
} |
|
|
|
function loadLiquidFillGauge(elementId, value, config) { |
|
if(config == null) config = liquidFillGaugeDefaultSettings(); |
|
|
|
var gauge = d3.select("#" + elementId); |
|
var radius = Math.min(parseInt(gauge.style("width")), parseInt(gauge.style("height")))/2; |
|
var locationX = parseInt(gauge.style("width"))/2 - radius; |
|
var locationY = parseInt(gauge.style("height"))/2 - radius; |
|
var fillPercent = Math.max(config.minValue, Math.min(config.maxValue, value))/config.maxValue; |
|
|
|
var waveHeightScale; |
|
if(config.waveHeightScaling){ |
|
waveHeightScale = d3.scale.linear() |
|
.range([0,config.waveHeight,0]) |
|
.domain([0,50,100]); |
|
} else { |
|
waveHeightScale = d3.scale.linear() |
|
.range([config.waveHeight,config.waveHeight]) |
|
.domain([0,100]); |
|
} |
|
|
|
var textPixels = (config.textSize*radius/2); |
|
var textFinalValue = parseFloat(value).toFixed(2); |
|
var textStartValue = config.valueCountUp?config.minValue:textFinalValue; |
|
var percentText = config.displayPercent?"%":""; |
|
var circleThickness = config.circleThickness * radius; |
|
var circleFillGap = config.circleFillGap * radius; |
|
var fillCircleMargin = circleThickness + circleFillGap; |
|
var fillCircleRadius = radius - fillCircleMargin; |
|
var waveHeight = fillCircleRadius*waveHeightScale(fillPercent*100); |
|
|
|
var waveLength = fillCircleRadius*2/config.waveCount; |
|
var waveClipCount = 1+config.waveCount; |
|
var waveClipWidth = waveLength*waveClipCount; |
|
|
|
// Rounding functions so that the correct number of decimal places is always displayed as the value counts up. |
|
var textRounder = function(value){ return Math.round(value); }; |
|
if(parseFloat(textFinalValue) != parseFloat(textRounder(textFinalValue))){ |
|
textRounder = function(value){ return parseFloat(value).toFixed(1); }; |
|
} |
|
if(parseFloat(textFinalValue) != parseFloat(textRounder(textFinalValue))){ |
|
textRounder = function(value){ return parseFloat(value).toFixed(2); }; |
|
} |
|
|
|
// Data for building the clip wave area. |
|
var data = []; |
|
for(var i = 0; i <= 40*waveClipCount; i++){ |
|
data.push({x: i/(40*waveClipCount), y: (i/(40))}); |
|
} |
|
|
|
// Scales for drawing the outer circle. |
|
var gaugeCircleX = d3.scale.linear().range([0,2*Math.PI]).domain([0,1]); |
|
var gaugeCircleY = d3.scale.linear().range([0,radius]).domain([0,radius]); |
|
|
|
// Scales for controlling the size of the clipping path. |
|
var waveScaleX = d3.scale.linear().range([0,waveClipWidth]).domain([0,1]); |
|
var waveScaleY = d3.scale.linear().range([0,waveHeight]).domain([0,1]); |
|
|
|
// Scales for controlling the position of the clipping path. |
|
var waveRiseScale = d3.scale.linear() |
|
// The clipping area size is the height of the fill circle + the wave height, so we position the clip wave |
|
// such that the it will overlap the fill circle at all when at 0%, and will totally cover the fill |
|
// circle at 100%. |
|
.range([(fillCircleMargin+fillCircleRadius*2+waveHeight),(fillCircleMargin-waveHeight)]) |
|
.domain([0,1]); |
|
var waveAnimateScale = d3.scale.linear() |
|
.range([0, waveClipWidth-fillCircleRadius*2]) // Push the clip area one full wave then snap back. |
|
.domain([0,1]); |
|
|
|
// Scale for controlling the position of the text within the gauge. |
|
var textRiseScaleY = d3.scale.linear() |
|
.range([fillCircleMargin+fillCircleRadius*2,(fillCircleMargin+textPixels*0.7)]) |
|
.domain([0,1]); |
|
|
|
// Center the gauge within the parent SVG. |
|
var gaugeGroup = gauge.append("g") |
|
.attr('transform','translate('+locationX+','+locationY+')'); |
|
|
|
// Draw the outer circle. |
|
var gaugeCircleArc = d3.svg.arc() |
|
.startAngle(gaugeCircleX(0)) |
|
.endAngle(gaugeCircleX(1)) |
|
.outerRadius(gaugeCircleY(radius)) |
|
.innerRadius(gaugeCircleY(radius-circleThickness)); |
|
gaugeGroup.append("path") |
|
.attr("d", gaugeCircleArc) |
|
.style("fill", config.circleColor) |
|
.attr('transform','translate('+radius+','+radius+')'); |
|
|
|
// Text where the wave does not overlap. |
|
var text1 = gaugeGroup.append("text") |
|
.text(textRounder(textStartValue) + percentText) |
|
.attr("class", "liquidFillGaugeText") |
|
.attr("text-anchor", "middle") |
|
.attr("font-size", textPixels + "px") |
|
.style("fill", config.textColor) |
|
.attr('transform','translate('+radius+','+textRiseScaleY(config.textVertPosition)+')'); |
|
|
|
// The clipping wave area. |
|
var clipArea = d3.svg.area() |
|
.x(function(d) { return waveScaleX(d.x); } ) |
|
.y0(function(d) { return waveScaleY(Math.sin(Math.PI*2*config.waveOffset*-1 + Math.PI*2*(1-config.waveCount) + d.y*2*Math.PI));} ) |
|
.y1(function(d) { return (fillCircleRadius*2 + waveHeight); } ); |
|
var waveGroup = gaugeGroup.append("defs") |
|
.append("clipPath") |
|
.attr("id", "clipWave" + elementId); |
|
var wave = waveGroup.append("path") |
|
.datum(data) |
|
.attr("d", clipArea) |
|
.attr("T", 0); |
|
|
|
// The inner circle with the clipping wave attached. |
|
var fillCircleGroup = gaugeGroup.append("g") |
|
.attr("clip-path", "url(#clipWave" + elementId + ")"); |
|
fillCircleGroup.append("circle") |
|
.attr("cx", radius) |
|
.attr("cy", radius) |
|
.attr("r", fillCircleRadius) |
|
.style("fill", config.waveColor); |
|
|
|
// Text where the wave does overlap. |
|
var text2 = fillCircleGroup.append("text") |
|
.text(textRounder(textStartValue) + percentText) |
|
.attr("class", "liquidFillGaugeText") |
|
.attr("text-anchor", "middle") |
|
.attr("font-size", textPixels + "px") |
|
.style("fill", config.waveTextColor) |
|
.attr('transform','translate('+radius+','+textRiseScaleY(config.textVertPosition)+')'); |
|
|
|
// Make the value count up. |
|
if(config.valueCountUp){ |
|
var textTween = function(){ |
|
var i = d3.interpolate(this.textContent, textFinalValue); |
|
return function(t) { this.textContent = textRounder(i(t)) + percentText; } |
|
}; |
|
text1.transition() |
|
.duration(config.waveRiseTime) |
|
.tween("text", textTween); |
|
text2.transition() |
|
.duration(config.waveRiseTime) |
|
.tween("text", textTween); |
|
} |
|
|
|
// Make the wave rise. wave and waveGroup are separate so that horizontal and vertical movement can be controlled independently. |
|
var waveGroupXPosition = fillCircleMargin+fillCircleRadius*2-waveClipWidth; |
|
if(config.waveRise){ |
|
waveGroup.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(0)+')') |
|
.transition() |
|
.duration(config.waveRiseTime) |
|
.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(fillPercent)+')') |
|
.each("start", function(){ wave.attr('transform','translate(1,0)'); }); // This transform is necessary to get the clip wave positioned correctly when waveRise=true and waveAnimate=false. The wave will not position correctly without this, but it's not clear why this is actually necessary. |
|
} else { |
|
waveGroup.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(fillPercent)+')'); |
|
} |
|
|
|
if(config.waveAnimate) animateWave(); |
|
|
|
function animateWave() { |
|
wave.attr('transform','translate('+waveAnimateScale(wave.attr('T'))+',0)'); |
|
wave.transition() |
|
.duration(config.waveAnimateTime * (1-wave.attr('T'))) |
|
.ease('linear') |
|
.attr('transform','translate('+waveAnimateScale(1)+',0)') |
|
.attr('T', 1) |
|
.each('end', function(){ |
|
wave.attr('T', 0); |
|
animateWave(config.waveAnimateTime); |
|
}); |
|
} |
|
|
|
function GaugeUpdater(){ |
|
this.update = function(value){ |
|
var newFinalValue = parseFloat(value).toFixed(2); |
|
var textRounderUpdater = function(value){ return Math.round(value); }; |
|
if(parseFloat(newFinalValue) != parseFloat(textRounderUpdater(newFinalValue))){ |
|
textRounderUpdater = function(value){ return parseFloat(value).toFixed(1); }; |
|
} |
|
if(parseFloat(newFinalValue) != parseFloat(textRounderUpdater(newFinalValue))){ |
|
textRounderUpdater = function(value){ return parseFloat(value).toFixed(2); }; |
|
} |
|
|
|
var textTween = function(){ |
|
var i = d3.interpolate(this.textContent, parseFloat(value).toFixed(2)); |
|
return function(t) { this.textContent = textRounderUpdater(i(t)) + percentText; } |
|
}; |
|
|
|
text1.transition() |
|
.duration(config.waveRiseTime) |
|
.tween("text", textTween); |
|
text2.transition() |
|
.duration(config.waveRiseTime) |
|
.tween("text", textTween); |
|
|
|
var fillPercent = Math.max(config.minValue, Math.min(config.maxValue, value))/config.maxValue; |
|
var waveHeight = fillCircleRadius*waveHeightScale(fillPercent*100); |
|
var waveRiseScale = d3.scale.linear() |
|
// The clipping area size is the height of the fill circle + the wave height, so we position the clip wave |
|
// such that the it will overlap the fill circle at all when at 0%, and will totally cover the fill |
|
// circle at 100%. |
|
.range([(fillCircleMargin+fillCircleRadius*2+waveHeight),(fillCircleMargin-waveHeight)]) |
|
.domain([0,1]); |
|
var newHeight = waveRiseScale(fillPercent); |
|
var waveScaleX = d3.scale.linear().range([0,waveClipWidth]).domain([0,1]); |
|
var waveScaleY = d3.scale.linear().range([0,waveHeight]).domain([0,1]); |
|
var newClipArea; |
|
if(config.waveHeightScaling){ |
|
newClipArea = d3.svg.area() |
|
.x(function(d) { return waveScaleX(d.x); } ) |
|
.y0(function(d) { return waveScaleY(Math.sin(Math.PI*2*config.waveOffset*-1 + Math.PI*2*(1-config.waveCount) + d.y*2*Math.PI));} ) |
|
.y1(function(d) { return (fillCircleRadius*2 + waveHeight); } ); |
|
} else { |
|
newClipArea = clipArea; |
|
} |
|
|
|
var newWavePosition = config.waveAnimate?waveAnimateScale(1):0; |
|
wave.transition() |
|
.duration(0) |
|
.transition() |
|
.duration(config.waveAnimate?(config.waveAnimateTime * (1-wave.attr('T'))):(config.waveRiseTime)) |
|
.ease('linear') |
|
.attr('d', newClipArea) |
|
.attr('transform','translate('+newWavePosition+',0)') |
|
.attr('T','1') |
|
.each("end", function(){ |
|
if(config.waveAnimate){ |
|
wave.attr('transform','translate('+waveAnimateScale(0)+',0)'); |
|
animateWave(config.waveAnimateTime); |
|
} |
|
}); |
|
waveGroup.transition() |
|
.duration(config.waveRiseTime) |
|
.attr('transform','translate('+waveGroupXPosition+','+newHeight+')') |
|
} |
|
} |
|
|
|
return new GaugeUpdater(); |
|
} |
Here is an example of d3 v5 in style of svelte component based on original copy.
By passing a config object, waveColor and circleColor can also be changed by calling updater.
If your gauge has chance to be hidden, you can set waveAnimate to false to stop the animation.
Then set it to true and call updater again to bring back animation when the gauge is visible again.
Usage Example: