diff --git a/dist/liquid_fill_gauge.js b/dist/liquid_fill_gauge.js index 03e24395..2ddd8cb2 100644 --- a/dist/liquid_fill_gauge.js +++ b/dist/liquid_fill_gauge.js @@ -6,4 +6,4 @@ * * This file was copied from https://raw.githubusercontent.com/ugomeda/d3-liquid-fill-gauge/master/liquidFillGauge.js * and modified for use in the Looker example custom visualizations project. - */var r={minValue:0,maxValue:100,circleThickness:.05,circleFillGap:.05,circleColor:"#178BCA",backgroundColor:null,waveColor:"#178BCA",width:0,height:0,gradientFromColor:"#FFF",gradientToColor:"#000",waveHeight:.05,waveCount:1,waveOffset:0,waveRise:!0,waveRiseTime:1e3,waveRiseAtStart:!0,waveAnimate:!0,waveAnimateTime:1800,waveHeightScaling:!0,valueCountUp:!0,valueCountUpAtStart:!0,textVertPosition:.5,textSize:1,displayPercent:!0,textColor:"#045681",waveTextColor:"#A4DBf8"};e.exports={initialize:function(e){var t,n=(t=0,function(e){return e+"-"+t++});e.liquidfillgauge=function(t,u,i){var a=e.map(r);e.map(i).each(function(e,t){a.set(t,e)}),t.each(function(t){var r,i=e.select(this),o=0!==a.get("width")?a.get("width"):parseInt(i.style("width")),l=0!==a.get("height")?a.get("height"):parseInt(i.style("height")),c=Math.min(o,l)/2,f=o/2-c,s=l/2-c,d=Math.max(a.get("minValue"),Math.min(a.get("maxValue"),u))/a.get("maxValue");r=a.get("waveHeightScaling")?e.scaleLinear().range([0,a.get("waveHeight"),0]).domain([0,50,100]):e.scaleLinear().range([a.get("waveHeight"),a.get("waveHeight")]).domain([0,100]);var h=a.get("textSize")*c/2,p=parseFloat(u).toFixed(2),_=a.get("valueCountUp")?a.get("minValue"):p,v=a.get("displayPercent")?"%":"",y=a.get("circleThickness")*c,b=y+a.get("circleFillGap")*c,g=c-b,m=g*r(100*d),M=2*g/a.get("waveCount"),P=1+a.get("waveCount"),O=M*P,x=function(e){return Math.round(e)};parseFloat(p)!=parseFloat(x(p))&&(x=function(e){return parseFloat(e).toFixed(1)}),parseFloat(p)!=parseFloat(x(p))&&(x=function(e){return parseFloat(e).toFixed(2)});for(var j=[],w=0;w<=40*P;w++)j.push({x:w/(40*P),y:w/40});var S=e.scaleLinear().range([0,2*Math.PI]).domain([0,1]),E=e.scaleLinear().range([0,c]).domain([0,c]),T=e.scaleLinear().range([0,O]).domain([0,1]),k=e.scaleLinear().range([0,m]).domain([0,1]),C=e.scaleLinear().range([b+2*g+m,b-m]).domain([0,1]),N=e.scaleLinear().range([0,O-2*g]).domain([0,1]),A=e.scaleLinear().range([b+2*g,b+.7*h]).domain([0,1]),R=i.append("g").attr("transform","translate("+f+","+s+")");a.get("backgroundColor")&&R.append("circle").attr("r",c).style("fill",a.get("backgroundColor")).attr("transform","translate("+c+","+c+")");var q=e.arc().startAngle(S(0)).endAngle(S(1)).outerRadius(E(c)).innerRadius(E(c-y));R.append("path").attr("d",q).style("fill",a.get("circleColor")).attr("transform","translate("+c+","+c+")");var z=R.append("text").attr("class","liquidFillGaugeText").attr("text-anchor","middle").attr("font-size",h+"px").style("fill",a.get("textColor")).attr("transform","translate("+c+","+A(a.get("textVertPosition"))+")"),I=e.area().x(function(e){return T(e.x)}).y0(function(e){return k(Math.sin(2*Math.PI*a.get("waveOffset")*-1+2*Math.PI*(1-a.get("waveCount"))+2*e.y*Math.PI))}).y1(function(e){return 2*g+m}),L=R.append("defs"),D=n("clipWave"),F=L.append("clipPath").attr("id",D),U=F.append("path").datum(j).attr("d",I),H=R.append("g").attr("clip-path","url(#"+D+")");if(H.append("circle").attr("cx",c).attr("cy",c).attr("r",g),a.get("fillWithGradient")){var B=a.get("gradientPoints"),Y=n("linearGradient"),V=L.append("linearGradient").attr("id",Y).attr("x1",B[0]).attr("y1",B[1]).attr("x2",B[2]).attr("y2",B[3]);V.append("stop").attr("offset","0").attr("stop-color",a.get("gradientFromColor")),V.append("stop").attr("offset","1").attr("stop-color",a.get("gradientToColor")),H.style("fill","url(#"+Y+")")}else H.style("fill",a.get("waveColor"));var W=H.append("text").attr("class","liquidFillGaugeText").attr("text-anchor","middle").attr("font-size",h+"px").style("fill",a.get("waveTextColor")).attr("transform","translate("+c+","+A(a.get("textVertPosition"))+")"),X=b+2*g-O;a.get("waveAnimate")&&function t(){U.transition().duration(a.get("waveAnimateTime")).ease(e.easeLinear).attr("transform","translate("+N(1)+",0)").on("end",function(){U.attr("transform","translate("+N(0)+",0)"),t()})}();var G=function(t,n,r,u){if(u){var i=function(){var r=e.select(this),u=e.interpolate(t,n);return function(e){r.text(x(u(e))+v)}};z.transition().duration(a.get("waveRiseTime")).tween("text",i),W.transition().duration(a.get("waveRiseTime")).tween("text",i)}else z.text(x(n)+v),W.text(x(n)+v);toPercent=Math.max(a.get("minValue"),Math.min(a.get("maxValue"),n))/a.get("maxValue"),fromPercent=Math.max(a.get("minValue"),Math.min(a.get("maxValue"),t))/a.get("maxValue"),r?F.attr("transform","translate("+X+","+C(fromPercent)+")").transition().duration(a.get("waveRiseTime")).attr("transform","translate("+X+","+C(toPercent)+")"):F.attr("transform","translate("+X+","+C(toPercent)+")")};G(_,p,a.get("waveRise")&&a.get("waveRiseAtStart"),a.get("valueCountUp")&&a.get("valueCountUpAtStart")),i.on("valueChanged",function(e){G(u,e,a.get("waveRise"),a.get("valueCountUp")),u=e}),i.on("destroy",function(){z.interrupt().transition(),W.interrupt().transition(),F.interrupt().transition(),U.interrupt().transition(),i.on("valueChanged",null),i.on("destroy",null)})})}},defaultConfig:r}}])}); \ No newline at end of file + */var r={minValue:0,maxValue:100,circleThickness:.05,circleFillGap:.05,circleColor:"#178BCA",backgroundColor:null,waveColor:"#178BCA",width:0,height:0,gradientFromColor:"#FFF",gradientToColor:"#000",waveHeight:.05,waveCount:1,waveOffset:0,waveRise:!0,waveRiseTime:1e3,waveRiseAtStart:!0,waveAnimate:!0,waveAnimateTime:1800,waveHeightScaling:!0,valueCountUp:!0,valueCountUpAtStart:!0,textVertPosition:.5,textSize:1,displayPercent:!0,textColor:"#045681",waveTextColor:"#A4DBf8"};e.exports={initialize:function(e){var t,n=(t=0,function(e){return e+"-"+t++});e.liquidfillgauge=function(t,u,i){var a=e.map(r);e.map(i).each(function(e,t){a.set(t,e)}),t.each(function(t){var r,i=e.select(this),o=0!==a.get("width")?a.get("width"):parseInt(i.style("width")),l=0!==a.get("height")?a.get("height"):parseInt(i.style("height")),c=Math.min(o,l)/2,f=o/2-c,s=l/2-c,d=Math.max(a.get("minValue"),Math.min(a.get("maxValue"),u))/a.get("maxValue");r=a.get("waveHeightScaling")?e.scaleLinear().range([0,a.get("waveHeight"),0]).domain([0,50,100]):e.scaleLinear().range([a.get("waveHeight"),a.get("waveHeight")]).domain([0,100]);var h=a.get("textSize")*c/2,p=parseFloat(u).toFixed(2),_=a.get("valueCountUp")?a.get("minValue"):p,v=a.get("displayPercent")?"%":"",y=a.get("circleThickness")*c,b=y+a.get("circleFillGap")*c,g=c-b,m=g*r(100*d),M=2*g/a.get("waveCount"),P=1+a.get("waveCount"),O=M*P,x=function(e){return Math.round(e)};parseFloat(p)!=parseFloat(x(p))&&(x=function(e){return parseFloat(e).toFixed(1)}),parseFloat(p)!=parseFloat(x(p))&&(x=function(e){return parseFloat(e).toFixed(2)});for(var j=[],w=0;w<=40*P;w++)j.push({x:w/(40*P),y:w/40});var S=e.scaleLinear().range([0,2*Math.PI]).domain([0,1]),E=e.scaleLinear().range([0,c]).domain([0,c]),T=e.scaleLinear().range([0,O]).domain([0,1]),k=e.scaleLinear().range([0,m]).domain([0,1]),C=e.scaleLinear().range([b+2*g+m,b-m]).domain([0,1]),N=e.scaleLinear().range([0,O-2*g]).domain([0,1]),A=e.scaleLinear().range([b+2*g,b+.7*h]).domain([0,1]),R=i.append("g").attr("transform","translate("+f+","+s+")");a.get("backgroundColor")&&R.append("circle").attr("r",c).style("fill",a.get("backgroundColor")).attr("transform","translate("+c+","+c+")");var q=e.arc().startAngle(S(0)).endAngle(S(1)).outerRadius(E(c)).innerRadius(E(c-y));R.append("path").attr("d",q).style("fill",a.get("circleColor")).attr("transform","translate("+c+","+c+")");var z=R.append("text").attr("class","liquidFillGaugeText").attr("text-anchor","middle").attr("font-size",h+"px").style("fill",a.get("textColor")).attr("transform","translate("+c+","+A(a.get("textVertPosition"))+")"),I=e.area().x(function(e){return T(e.x)}).y0(function(e){return k(Math.sin(2*Math.PI*a.get("waveOffset")*-1+2*Math.PI*(1-a.get("waveCount"))+2*e.y*Math.PI))}).y1(function(e){return 2*g+m}),L=R.append("defs"),D=n("clipWave"),F=L.append("clipPath").attr("id",D),U=F.append("path").datum(j).attr("d",I),H=R.append("g").attr("clip-path","url(#"+D+")");if(H.append("circle").attr("cx",c).attr("cy",c).attr("r",g),a.get("fillWithGradient")){var B=a.get("gradientPoints"),Y=n("linearGradient"),V=L.append("linearGradient").attr("id",Y).attr("x1",B[0]).attr("y1",B[1]).attr("x2",B[2]).attr("y2",B[3]);V.append("stop").attr("offset","0").attr("stop-color",a.get("gradientFromColor")),V.append("stop").attr("offset","1").attr("stop-color",a.get("gradientToColor")),H.style("fill","url(#"+Y+")")}else H.style("fill",a.get("waveColor"));var W=H.append("text").attr("class","liquidFillGaugeText").attr("text-anchor","middle").attr("font-size",h+"px").style("fill",a.get("waveTextColor")).attr("transform","translate("+c+","+A(a.get("textVertPosition"))+")"),X=b+2*g-O;a.get("waveAnimate")&&function t(){U.transition().duration(a.get("waveAnimateTime")).ease(e.easeLinear).attr("transform","translate("+N(1)+",0)").on("end",function(){U.attr("transform","translate("+N(0)+",0)"),t()})}();var G=function(t,n,r,u){if(u){var i=function(){var r=e.select(this),u=e.interpolate(t,n);return function(e){r.text(x(u(e))+v)}};z.transition().duration(a.get("waveRiseTime")).tween("text",i),W.transition().duration(a.get("waveRiseTime")).tween("text",i)}else z.text(x(n)+v),W.text(x(n)+v);var o=Math.max(a.get("minValue"),Math.min(a.get("maxValue"),n))/a.get("maxValue"),l=Math.max(a.get("minValue"),Math.min(a.get("maxValue"),t))/a.get("maxValue");r?F.attr("transform","translate("+X+","+C(l)+")").transition().duration(a.get("waveRiseTime")).attr("transform","translate("+X+","+C(o)+")"):F.attr("transform","translate("+X+","+C(o)+")")};G(_,p,a.get("waveRise")&&a.get("waveRiseAtStart"),a.get("valueCountUp")&&a.get("valueCountUpAtStart")),i.on("valueChanged",function(e){G(u,e,a.get("waveRise"),a.get("valueCountUp")),u=e}),i.on("destroy",function(){z.interrupt().transition(),W.interrupt().transition(),F.interrupt().transition(),U.interrupt().transition(),i.on("valueChanged",null),i.on("destroy",null)})})}},defaultConfig:r}}])}); \ No newline at end of file diff --git a/src/examples/liquid_fill_gauge/liquid_fill_gauge.js b/src/examples/liquid_fill_gauge/liquid_fill_gauge.js index 58a8a0cc..18a0cb81 100644 --- a/src/examples/liquid_fill_gauge/liquid_fill_gauge.js +++ b/src/examples/liquid_fill_gauge/liquid_fill_gauge.js @@ -275,8 +275,8 @@ function initialize(d3) { } // Update the wave - toPercent = Math.max(config.get("minValue"), Math.min(config.get("maxValue"), to)) / config.get("maxValue"); - fromPercent = Math.max(config.get("minValue"), Math.min(config.get("maxValue"), from)) / config.get("maxValue"); + const toPercent = Math.max(config.get("minValue"), Math.min(config.get("maxValue"), to)) / config.get("maxValue"); + const fromPercent = Math.max(config.get("minValue"), Math.min(config.get("maxValue"), from)) / config.get("maxValue"); if (riseWave) { waveGroup.attr('transform', 'translate(' + waveGroupXPosition + ',' + waveRiseScale(fromPercent) + ')')