DoubleGauge.min.js

Icris={};Icris.DoubleGauge=function(n,t){var i=this;i.element=document.getElementById(n);i.element.innerHTML=Icris.GaugeMarkup;i.element.firstChild.setAttribute("height",t);i.element.firstChild.setAttribute("width",t);i.value1=0;i.value2=0;i.OEE=0;i.delta=0;i.setValues=function(n,t){if(n!==null){i.value1=n;var r=n/100*60;i.element.getElementsByClassName("needle1")[0].setAttribute("transform","rotate(-"+r+",0,100)")}t!==null&&(i.value2=t,r=t/100*60,i.element.getElementsByClassName("needle2")[0].setAttribute("transform","rotate("+r+",100,100)"));i.element.getElementsByClassName("aggregated")[0].innerHTML="OEE "+Math.round(parseFloat(i.value1)*parseFloat(i.value2)/100)+" %"};i.animationDelay=250;i.animateRandom=function(n){n!=null&&(i.animationDelay=n);var r=Math.random()>.5,t=Math.random()*10;r?i.value1+=t:i.value1-=t;(i.value1>100||i.value1<0)&&(i.value1=50);i.setValues(i.value1,null);r=Math.random()>.5;t=Math.random()*10;r?i.value2+=t:i.value2-=t;(i.value2>100||i.value2<0)&&(i.value2=50);i.setValues(null,i.value2);setTimeout(i.animateRandom,i.animationDelay)}};Icris.GaugeMarkup='<svg viewBox="0 0 120 120"><g transform= "translate(10,10)"> <rect style="fill:#EEEEEE;stroke-width:0.3;stroke:#000000;stroke-opacity:1" id="rect3680" width="114" height="100" x="-7" y="0" /> <text x="40" y="95" style="font-family:Arial; font-size:4px" class="aggregated">OEE<\/text><path style="fill:none;stroke:#AA0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 100,100" class="needle1" inkscape:connector-curvature="0" transform="rotate(-60,0,100)" /> <path style="fill:none;stroke:#AA0000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 95,100 100,100" inkscape:connector-curvature="0" transform="rotate(-30,0,100)" /> <path style="fill:none;stroke:#AA0000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 95,100 100,100" inkscape:connector-curvature="0" transform="rotate(-6,0,100)" /> <path style="fill:none;stroke:#AA0000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 95,100 100,100" inkscape:connector-curvature="0" transform="rotate(-12,0,100)" /> <text x="100" y="101" transform="rotate(-12,0,100)" style="font-family:Arial; font-size:4px">20%<\/text> <path style="fill:none;stroke:#AA0000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 95,100 100,100" inkscape:connector-curvature="0" transform="rotate(-18,0,100)" /> <path style="fill:none;stroke:#AA0000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 95,100 100,100" inkscape:connector-curvature="0" transform="rotate(-24,0,100)" /> <text x="100" y="101" transform="rotate(-24,0,100)" style="font-family:Arial; font-size:4px">40%<\/text> <path style="fill:none;stroke:#AA0000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 95,100 100,100" inkscape:connector-curvature="0" transform="rotate(-36,0,100)" /> <text x="100" y="101" transform="rotate(-36,0,100)" style="font-family:Arial; font-size:4px">60%<\/text> <path style="fill:none;stroke:#AA0000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 95,100 100,100" inkscape:connector-curvature="0" transform="rotate(-42,0,100)" /> <path style="fill:none;stroke:#AA0000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 95,100 100,100" inkscape:connector-curvature="0" transform="rotate(-48,0,100)" /> <text x="100" y="101" transform="rotate(-48,0,100)" style="font-family:Arial; font-size:4px">80%<\/text> <path style="fill:none;stroke:#AA0000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 95,100 100,100" inkscape:connector-curvature="0" transform="rotate(-54,0,100)" /> <path style="fill:none;stroke:#AA0000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 95,100 100,100" inkscape:connector-curvature="0" transform="rotate(-60,0,100)" /> <text x="100" y="100" transform="rotate(-58,0,100)" style="font-family:Arial; font-size:4px">100%<\/text> <path style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 100,100 0,100" class="needle2" inkscape:connector-curvature="0" transform="rotate(60,100,100)" /> <path style="fill:none;stroke:#000000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 5,100" inkscape:connector-curvature="0" transform="rotate(30,100,100)" /> <text x="-8" y="101" transform="rotate(36,100,100)" style="font-family:Arial; font-size:4px">60%<\/text> <text x="-8" y="101" transform="rotate(12,100,100)" style="font-family:Arial; font-size:4px">20%<\/text> <text x="-8" y="101" transform="rotate(24,100,100)" style="font-family:Arial; font-size:4px">40%<\/text> <text x="-8" y="101" transform="rotate(48,100,100)" style="font-family:Arial; font-size:4px">80%<\/text> <path style="fill:none;stroke:#000000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 5,100" inkscape:connector-curvature="0" transform="rotate(60,100,100)" /> <text x="-10" y="100" transform="rotate(58,100,100)" style="font-family:Arial; font-size:4px">100%<\/text> <path style="fill:none;stroke:#000000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 5,100" inkscape:connector-curvature="0" transform="rotate(6,100,100)" /> <path style="fill:none;stroke:#000000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 5,100" inkscape:connector-curvature="0" transform="rotate(12,100,100)" /> <path style="fill:none;stroke:#000000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 5,100" inkscape:connector-curvature="0" transform="rotate(18,100,100)" /> <path style="fill:none;stroke:#000000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 5,100" inkscape:connector-curvature="0" transform="rotate(24,100,100)" /> <path style="fill:none;stroke:#000000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 5,100" inkscape:connector-curvature="0" transform="rotate(36,100,100)" /> <path style="fill:none;stroke:#000000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 5,100" inkscape:connector-curvature="0" transform="rotate(42,100,100)" /> <path style="fill:none;stroke:#000000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 5,100" inkscape:connector-curvature="0" transform="rotate(48,100,100)" /> <path style="fill:none;stroke:#000000;stroke-width:0.4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 0,100 5,100" inkscape:connector-curvature="0" transform="rotate(54,100,100)" /> <ellipse style="fill:#ff0000;stroke:#000000;stroke-width:0.1;stroke-opacity:1" id="path4493" cx="0" cy="100" rx="1.3" ry="1.3" /> <ellipse style="fill:#000000;stroke:#000000;stroke-width:0.1;stroke-opacity:1" id="path4495" cx="100" cy="100" rx="1.3" ry="1.3" /> <\/g > <\/svg >';