/** * donutty // Create SVG donut charts with Javascript * @author simeydotme * @version 2.0.0 * @license MIT * @link http://simey.me * @preserve */ !function(t,i){var s,e="http://www.w3.org/2000/svg";function o(t){return void 0!==t}function n(t){return parseFloat(t,10)}function r(t){return o(t)&&(!0===t||"true"===t)}(s=i.Donutty=function(i,s){return i&&"string"==typeof i?this.$wrapper=t.querySelectorAll(i)[0]:t.querySelector(`.${i.className}`)?this.$wrapper=i:(this.$wrapper=t.body,s=i),this.$wrapper?(o(s)||(s=this.getOptionsFromTag()),this.state={},this.options=s||{},this.options.min=o(this.options.min)?n(this.options.min):0,this.options.max=o(this.options.max)?n(this.options.max):100,this.options.value=o(this.options.value)?n(this.options.value):50,this.options.round=!o(this.options.round)||r(this.options.round),this.options.circle=!o(this.options.circle)||r(this.options.circle),this.options.padding=o(this.options.padding)?n(this.options.padding):4,this.options.radius=n(this.options.radius)||50,this.options.thickness=n(this.options.thickness)||10,this.options.bg=this.options.bg||"rgba(70, 130, 180, 0.15)",this.options.color=this.options.color||"mediumslateblue",this.options.transition=this.options.transition||"all 1.2s cubic-bezier(0.57, 0.13, 0.18, 0.98)",this.options.text=!!o(this.options.text)&&this.options.text,this.init(),this):this}).prototype.getOptionsFromTag=function(){return JSON.parse(JSON.stringify(this.$wrapper.dataset))},s.prototype.init=function(){var t;return this.$wrapper.donutty=this,this.createState(),t=this.getDashValues(),this.createSvg(),this.createBg(t),this.createDonut(t),this.createText(),this.insertFragments(t),this},s.prototype.createState=function(){return this.state.min=this.options.min,this.state.max=this.options.max,this.state.value=this.options.value,this.state.bg=this.options.bg,this.state.color=this.options.color,this},s.prototype.createText=function(){return"function"==typeof this.options.text&&(this.$text=t.createElement("span"),this.$text.setAttribute("class","donut-text"),this.$text.style.opacity=0,this.updateText()),this},s.prototype.createBg=function(i){return this.$bg=t.createElementNS(e,"circle"),this.$bg.setAttribute("cx","50%"),this.$bg.setAttribute("cy","50%"),this.$bg.setAttribute("r",this.options.radius),this.$bg.setAttribute("fill","transparent"),this.$bg.setAttribute("stroke",this.state.bg),this.$bg.setAttribute("stroke-width",this.options.thickness+this.options.padding),this.$bg.setAttribute("stroke-dasharray",i.full*i.multiplier),this.$bg.setAttribute("class","donut-bg"),this.options.round&&this.$bg.setAttribute("stroke-linecap","round"),this},s.prototype.createDonut=function(i){return this.$donut=t.createElementNS(e,"circle"),this.$donut.setAttribute("fill","transparent"),this.$donut.setAttribute("cx","50%"),this.$donut.setAttribute("cy","50%"),this.$donut.setAttribute("r",this.options.radius),this.$donut.setAttribute("stroke",this.state.color),this.$donut.setAttribute("stroke-width",this.options.thickness),this.$donut.setAttribute("stroke-dashoffset",i.full),this.$donut.setAttribute("stroke-dasharray",i.full),this.$donut.setAttribute("class","donut-fill"),this.$donut.style.opacity=0,this.options.round&&this.$donut.setAttribute("stroke-linecap","round"),this},s.prototype.createSvg=function(){var i=2*this.options.radius+this.options.thickness+2*this.options.padding,s=this.options.round?this.options.thickness/3:0,o=this.options.circle?90+s:-225;return this.$html=t.createDocumentFragment(),this.$svg=t.createElementNS(e,"svg"),this.$svg.setAttribute("xmlns",e),this.$svg.setAttribute("viewbox","0 0 "+i+" "+i),this.$svg.setAttribute("transform","rotate( "+o+" )"),this.$svg.setAttribute("preserveAspectRatio","xMidYMid meet"),this.$svg.setAttribute("class","donut"),this},s.prototype.insertFragments=function(t){this.$svg.appendChild(this.$bg),this.$svg.appendChild(this.$donut),this.$html.appendChild(this.$svg),this.$text&&this.$html.appendChild(this.$text),this.$wrapper.appendChild(this.$html),this.$wrapper.innerHTML=this.$wrapper.innerHTML,this.$svg=this.$wrapper.querySelector(".donut"),this.$bg=this.$wrapper.querySelector(".donut-bg"),this.$donut=this.$wrapper.querySelector(".donut-fill"),this.$text&&(this.$text=this.$wrapper.querySelector(".donut-text")),this.animate(t.fill,t.full)},s.prototype.getDashValues=function(){var t,i,s,e;return e=this.options.circle?1:.75,s=(t=2*Math.PI*this.options.radius)-t*e/100*(i=(this.state.value-this.state.min)/(this.state.max-this.state.min)*100),this.options.round&&this.options.circle&&i<100&&s