-
Notifications
You must be signed in to change notification settings - Fork 0
/
svg-dash-meter.min.js
1 lines (1 loc) · 2.99 KB
/
svg-dash-meter.min.js
1
function svg_meter(t,e){function r(t,e,r){return Math.round(t+(e-t)*r)}var i,a,n={target:75,show_target:!1,value:1,min:0,max:100,width:160,duration:1e3,gradient:[{r:0,g:200,b:0},{r:240,g:240,b:0},{r:200,g:0,b:0}],stops:[60,75,90]};e.target&&!e.show_target&&(e.show_target=!0),e.target&&!e.stops&&(e.stops=[e.target-.15*(e.max||n.max),e.target,e.target+.15*(e.max||n.max)]),i=window.requestAnimationFrame?window.requestAnimationFrame:function(t){return window.setTimeout(t,16)};var s=function(t,e){var r,i={};for(r in t)Object.prototype.hasOwnProperty.call(t,r)&&(i[r]=t[r]);for(r in e)Object.prototype.hasOwnProperty.call(e,r)&&(i[r]=e[r]);return i};e=s(n,e);var o=document.createElementNS("http://www.w3.org/2000/svg","svg");o.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),o.setAttribute("width",e.width),o.setAttribute("height","30");var g=document.createElementNS("http://www.w3.org/2000/svg","style");g.innerHTML=".meter-fill{transition: fill "+e.duration/1e3+"s ease; fill:green}",o.appendChild(g);var u=document.createElementNS("http://www.w3.org/2000/svg","rect");u.setAttribute("fill","#999999"),u.setAttribute("x","5"),u.setAttribute("y","5"),u.setAttribute("width",e.width-10),u.setAttribute("height","20"),o.appendChild(u);var w=document.createElementNS("http://www.w3.org/2000/svg","rect");w.setAttribute("class","meter-fill"),w.setAttribute("style","fill:rgb(0,240,0)"),w.setAttribute("x","5"),w.setAttribute("y","5"),w.setAttribute("width","1"),w.setAttribute("height","20"),o.appendChild(w);var d=document.createElementNS("http://www.w3.org/2000/svg","line");d.setAttribute("stroke-dasharray","2 2"),d.setAttribute("stroke","#555555"),d.setAttribute("stroke-width","2px"),d.setAttribute("x1",0),d.setAttribute("x2",0),d.setAttribute("y1","0"),d.setAttribute("y2","30"),e.show_target&&o.appendChild(d),t.appendChild(o);var l=function(t,r){w.setAttribute("style","fill:"+r);var n,s=parseFloat(w.getAttribute("width")),o=t,g=(new Date).getTime(),u=function(){var t=(new Date).getTime(),r=Math.min((t-g)/e.duration,1);if(1===r)n=o,w.setAttribute("width",n),window.requestAnimationFrame?cancelAnimationFrame(a):clearTimeout(a);else{var d=o-s;n=s+d*r,w.setAttribute("width",n),a=i(u)}};window.requestAnimationFrame?cancelAnimationFrame(a):clearTimeout(a),a=i(u)},m=function(t){e.value=t;var i,a,n,s;t=t<e.min?e.min:t,t=t>e.max?e.max:t,i=t/e.max*(e.width-10),n=e.target/e.max*(e.width-10)+5,d.setAttribute("x1",n),d.setAttribute("x2",n),t<e.stops[0]?a="rgb("+e.gradient[0].r+","+e.gradient[0].g+","+e.gradient[0].b+")":t<e.stops[1]?(s=(t-e.stops[0])/(e.stops[1]-e.stops[0]),a="rgb("+r(e.gradient[0].r,e.gradient[1].r,s)+","+r(e.gradient[0].g,e.gradient[1].g,s)+","+r(e.gradient[0].b,e.gradient[1].b,s)+")"):t<e.stops[2]?(s=(t-e.stops[1])/(e.stops[2]-e.stops[1]),a="rgb("+r(e.gradient[1].r,e.gradient[2].r,s)+","+r(e.gradient[1].g,e.gradient[2].g,s)+","+r(e.gradient[1].b,e.gradient[2].b,s)+")"):a="rgb("+e.gradient[2].r+","+e.gradient[2].g+","+e.gradient[2].b+")",l(i,a)};return m(e.value),{update:m}}