var svgns='http://www.w3.org/2000/svg';function createGradient(gradientId,startColor,endColor){var gradient=document.createElementNS(svgns,'linearGradient');var rect=document.createElementNS(svgns,'rect');var stops=[{"color":startColor,"offset":"0%"},{"color":endColor,"offset":"100%"}];for(var i=0,length=stops.length;i<length;i++){var stop=document.createElementNS(svgns,'stop');stop.setAttribute('offset',stops[i].offset);stop.setAttribute('stop-color',stops[i].color);gradient.appendChild(stop)}
gradient.id=gradientId;gradient.setAttribute('x1','0');gradient.setAttribute('x2','1');gradient.setAttribute('y1','0');gradient.setAttribute('y2','1');return gradient}
const drawProgressBars=()=>{$('.slope-progressbar').each(function(){let $this=$(this);let open=$this.data('numberopen');let total=$this.data('numbertotal');let unit=$this.data('unit')??'counter';let of=$this.data('of')??'of';const defs=document.createElementNS(svgns,'defs');defs.appendChild(createGradient(`gradient-${$(this).index()}`,"#479554","#14671D"))
const circle=new ProgressBar.Circle($this.find(".progress-container").find('.progress')[0],{color:`url(#gradient-${$(this).index()})`,duration:3000,easing:'easeInOut',strokeWidth:5,trailWidth:5,trailColor:'#E7E7E7',text:{value:`<span class="_big _ocount">0</span>${unit === 'km' ? `<span class='_medium _ounit'>${' '}km</span><br><span class='_xsmall _tcountof'>${' '+of}</span>` : '/'}<span class="_small _tcount">${total}</span><span class="_xsmall _tunit">${unit === 'km' ? ' km': ''}</span>`,className:"progressbar-text"},step:function(state,circle){if(open>0){var value=Math.round(circle.value()*total);circle.setText(`<span class="_big _ocount">${value}</span>${unit === 'km' ? `<span class='_medium _ounit'>${' '}km</span><br><span class='_xsmall _tcountof'>${of+' '}</span>` : '/'}<span class="_small _tcount">${total}</span><span class="_xsmall _tunit">${unit === 'km' ? ' km' : ''}</span>`)}}});circle.svg.appendChild(defs);if(open!==0){circle.animate(open/total)}})}