gojongwon-circular-progress-bar/dist/CircularProgressBar.umd.cjs

A lightweight, customizable circular progress bar component for web applications

!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports):"function"==typeof define&&define.amd?define(["exports"],s):s((t="undefined"!=typeof globalThis?globalThis:t||self).CircularProgressBar={})}(this,(function(t){"use strict";var s=Object.defineProperty,e=(t,e,i)=>((t,e,i)=>e in t?s(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i)(t,"symbol"!=typeof e?e+"":e,i);t.CircularProgressBar=class{constructor(t,s){e(this,"container"),e(this,"options"),e(this,"svg"),e(this,"gauge"),e(this,"trail"),e(this,"text"),e(this,"resizeObserver"),e(this,"currentSize",0),this.container=t,this.options={responsive:!1,gaugeWidth:12,gaugeColor:"#2196f3",gaugeType:"round",trailWidth:12,trailColor:"#e0e0e0",textColor:"#333",textSize:24,textFont:"Arial",animate:!0,duration:800,disableInlineStyles:!1,...s},this.options.responsive&&!this.options.size&&(this.options.size=this.getContainerSize()),this.initialize(),this.render(),this.options.responsive&&this.setupResizeObserver()}resolveColor(t,s){return"function"==typeof t?t(s):t}initialize(){this.options.size||(this.options.size=this.getContainerSize()),this.currentSize=this.options.size,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.setAttribute("width",this.options.size.toString()),this.svg.setAttribute("height",this.options.size.toString()),this.svg.setAttribute("viewBox",`0 0 ${this.options.size} ${this.options.size}`),this.options.className&&this.svg.setAttribute("class",this.options.className),this.svg.style.transform="rotate(-90deg)";const t=this.options.size/2,s=this.options.size/2,e=Math.max(this.options.gaugeWidth,this.options.trailWidth),i=(this.options.size-e)/2,o=i,r=i;this.trail=document.createElementNS("http://www.w3.org/2000/svg","circle"),this.trail.setAttribute("cx",t.toString()),this.trail.setAttribute("cy",s.toString()),this.trail.setAttribute("r",o.toString()),this.trail.setAttribute("fill","none"),this.options.trailClassName&&this.trail.setAttribute("class",this.options.trailClassName),this.options.disableInlineStyles||(this.trail.setAttribute("stroke",this.resolveColor(this.options.trailColor,0)),this.trail.setAttribute("stroke-width",this.options.trailWidth.toString())),this.gauge=document.createElementNS("http://www.w3.org/2000/svg","circle"),this.gauge.setAttribute("cx",t.toString()),this.gauge.setAttribute("cy",s.toString()),this.gauge.setAttribute("r",r.toString()),this.gauge.setAttribute("fill","none"),this.options.gaugeClassName&&this.gauge.setAttribute("class",this.options.gaugeClassName),this.options.disableInlineStyles||(this.gauge.setAttribute("stroke",this.resolveColor(this.options.gaugeColor,0)),this.gauge.setAttribute("stroke-width",this.options.gaugeWidth.toString()),this.gauge.setAttribute("stroke-linecap","round"===this.options.gaugeType?"round":"butt"));const n=2*Math.PI*r;this.gauge.style.strokeDasharray=n.toString(),this.gauge.style.strokeDashoffset=n.toString();const a=document.createElementNS("http://www.w3.org/2000/svg","g");a.setAttribute("transform",`translate(${this.options.size/2}, ${this.options.size/2}) rotate(90)`),this.text=document.createElementNS("http://www.w3.org/2000/svg","text"),this.options.textClassName&&this.text.setAttribute("class",this.options.textClassName),this.options.disableInlineStyles||(this.text.setAttribute("fill",this.options.textColor),this.text.setAttribute("font-size",this.options.textSize.toString()),this.text.setAttribute("font-family",this.options.textFont),this.text.setAttribute("text-anchor","middle"),this.text.setAttribute("dominant-baseline","middle")),this.text.setAttribute("x","0"),this.text.setAttribute("y","0"),a.appendChild(this.text),this.svg.appendChild(this.trail),this.svg.appendChild(this.gauge),this.svg.appendChild(a),this.container.innerHTML="",this.container.appendChild(this.svg)}render(){const t=Math.max(this.options.gaugeWidth,this.options.trailWidth),s=(this.currentSize-t)/2,e=2*Math.PI*s,i=Math.min(Math.max(this.options.value/this.options.maxValue,0),1),o=e*i;this.options.disableInlineStyles||("function"==typeof this.options.gaugeColor&&this.gauge.setAttribute("stroke",this.resolveColor(this.options.gaugeColor,i)),"function"==typeof this.options.trailColor&&this.trail.setAttribute("stroke",this.resolveColor(this.options.trailColor,i))),this.gauge.style.strokeDasharray=e.toString(),this.gauge.style.strokeDashoffset=(e-o).toString(),this.options.animate&&this.options.duration>0?this.gauge.style.transition=`stroke-dashoffset ${this.options.duration}ms ease-in-out`:this.gauge.style.transition="none";const r=this.options.text??`${Math.round(100*i)}%`;this.text.textContent=r}setValue(t){this.options.value=Math.min(Math.max(t,0),this.options.maxValue),this.render()}getValue(){return this.options.value}getContainerSize(){const t=this.container.getBoundingClientRect();return Math.min(t.width,t.height)}setupResizeObserver(){"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((t=>{for(const s of t){const t=Math.min(s.contentRect.width,s.contentRect.height);t!==this.currentSize&&t>0&&this.resize(t)}})),this.resizeObserver.observe(this.container))}resize(t){this.currentSize=t,this.options.size=t,this.svg.setAttribute("width",t.toString()),this.svg.setAttribute("height",t.toString()),this.svg.setAttribute("viewBox",`0 0 ${t} ${t}`);const s=(t-Math.max(this.options.gaugeWidth,this.options.trailWidth))/2,e=t/2,i=t/2,o=s,r=s;this.trail.setAttribute("cx",e.toString()),this.trail.setAttribute("cy",i.toString()),this.trail.setAttribute("r",o.toString()),this.gauge.setAttribute("cx",e.toString()),this.gauge.setAttribute("cy",i.toString()),this.gauge.setAttribute("r",r.toString());const n=2*Math.PI*r,a=n*Math.min(Math.max(this.options.value/this.options.maxValue,0),1);this.gauge.style.strokeDasharray=n.toString(),this.gauge.style.strokeDashoffset=(n-a).toString(),this.gauge.style.transition="none";const h=this.svg.querySelector("g");h&&h.setAttribute("transform",`translate(${e}, ${i}) rotate(90)`),setTimeout((()=>{this.options.animate&&this.options.duration>0&&(this.gauge.style.transition=`stroke-dashoffset ${this.options.duration}ms ease-in-out`)}),0)}destroy(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0)}setGaugeColor(t){this.options.gaugeColor=t;const s=Math.min(Math.max(this.options.value/this.options.maxValue,0),1);this.gauge.setAttribute("stroke",this.resolveColor(t,s))}setTrailColor(t){this.options.trailColor=t;const s=Math.min(Math.max(this.options.value/this.options.maxValue,0),1);this.trail.setAttribute("stroke",this.resolveColor(t,s))}getGaugeColor(){return this.options.gaugeColor}getTrailColor(){return this.options.trailColor}setClassName(t){this.options.className=t,this.svg.setAttribute("class",t)}setGaugeClassName(t){this.options.gaugeClassName=t,this.gauge.setAttribute("class",t)}setTrailClassName(t){this.options.trailClassName=t,this.trail.setAttribute("class",t)}setTextClassName(t){this.options.textClassName=t,this.text.setAttribute("class",t)}setDisableInlineStyles(t){this.options.disableInlineStyles=t,t||this.render()}getClassNames(){return{className:this.options.className,gaugeClassName:this.options.gaugeClassName,trailClassName:this.options.trailClassName,textClassName:this.options.textClassName}}getSVGElement(){return this.svg}getGaugeElement(){return this.gauge}getTrailElement(){return this.trail}getTextElement(){return this.text}},Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
//# sourceMappingURL=CircularProgressBar.umd.cjs.map