diff --git a/dist/circliful.js b/dist/circliful.js index 51ce370..17932e6 100644 --- a/dist/circliful.js +++ b/dist/circliful.js @@ -1 +1 @@ -var circliful=function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=1)}([function(t,e,i){},function(t,e,i){"use strict";i.r(e),i.d(e,"newCircle",(function(){return w})),i.d(e,"newCircleWithDataSet",(function(){return x}));i(0);var n,r=function(){function t(){}return t.extractPropertyFromObject=function(t,e){var i;return t.hasOwnProperty(e)&&t[e]&&(i=t[e]),i},t}(),o=function(){function t(t){this.options=t}return t.prototype.update=function(t){var e=this,i=document.getElementById("svg-"+this.options.id);Array.isArray(t)?t.forEach((function(t){return e.updateType(t.type,t.value)})):this.updateType(t.type,t.value),i.innerHTML="",b.initializeCircleType(this.options)},t.prototype.updateType=function(t,e){switch(t){case"percent":this.options.percent=Number(e);break;case"point":this.options.point=Boolean(e);break;case"animation":this.options.animation=Boolean(e);break;case"pointSize":this.options.pointSize=Number(e);break;case"animationStep":this.options.animationStep=Number(e);break;case"strokeGradient":this.options.strokeGradient=e;break;case"icon":this.options.icon=String(e);break;case"text":this.options.text=String(e);break;case"textReplacesPercentage":this.options.textReplacesPercentage=Boolean(e);break;case"foregroundCircleWidth":this.options.foregroundCircleWidth=Number(e);break;case"backgroundCircleWidth":this.options.backgroundCircleWidth=Number(e);break;case"additionalCssClasses":this.options.additionalCssClasses=e;break;case"progressColors":this.options.progressColors=e}},t.prototype.get=function(t){return r.extractPropertyFromObject(this.options,t)},t}(),s=function(){function t(){}return t.setAttributes=function(t,e){for(var i=0,n=Object.entries(e);i0,h=1,l=setInterval((function(e,n,a){var d=p/100*h;s.setAttributes(e,{d:s.describeArc(r.x,r.y,r.radius,c,d)}),u&&t.updateCircleColor(h,e,a),(h+=o)>n&&(clearInterval(l),"function"==typeof i&&i())}),d,n,r.percent,a)},t.updateCircleColor=function(t,e,i){var n=i.find((function(e){return e.percent===t}));n&&s.setAttributes(e,{style:"stroke: "+n.color})},t.getMilliseconds=function(t,e){var i=t||50;return e<=180&&(i/=3),i},t}(),p=function(){return(p=Object.assign||function(t){for(var e,i=1,n=arguments.length;ie},t.prototype.drawContainer=function(t){var e=this.getViewBoxParams(),i=e.minX,n=e.minY,r=e.width,o=e.height,s=a.addSvg(p({width:"100%",height:"100%",viewBox:i+" "+n+" "+r+" "+o,id:"svg-"+this.options.id,preserveAspectRatio:"xMinYMin meet"},t));this.tags.push({element:s,parentId:this.options.id})},t.prototype.getViewBoxParams=function(){var t=this.options,e=t.foregroundCircleWidth,i=t.backgroundCircleWidth,n=i;e>i&&(n=e);var r=this.size.width,o=this.size.height;return(e>5||i>5)&&(r=this.size.width+1.5*n,o=this.size.height+1.5*n),{minX:0,minY:0,width:r,height:o}},t.prototype.append=function(){this.tags.forEach((function(t){document.getElementById(t.parentId).appendChild(t.element)}))},t.prototype.initialize=function(t,e){this.options=t,this.size=e},t}(),u=(n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)},function(t,e){function i(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),h=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.coordinates={x:0,y:0},e.additionalCssClasses={},e}return u(e,t),e.prototype.initialize=function(e,i){t.prototype.initialize.call(this,e,i);var n=this.size.maxSize;this.coordinates={x:n/2,y:n/2},this.radius=n/2.2,this.options.additionalCssClasses&&(this.additionalCssClasses=this.options.additionalCssClasses),this.animateInView()},e.prototype.drawCircle=function(){var t={class:r.extractPropertyFromObject(this.additionalCssClasses,"svgContainer")};this.drawContainer(t),this.options.strokeGradient&&this.drawLinearGradient(),this.drawBackgroundCircle(),this.drawForegroundCircle(),this.options.point&&this.drawPoint(),this.options.icon&&this.drawIcon(),this.drawText(),!this.options.textReplacesPercentage&&this.options.text&&this.drawInfoText(),this.append()},e.prototype.drawBackgroundCircle=function(){var t=r.extractPropertyFromObject(this.additionalCssClasses,"backgroundCircle"),e=a.addCircle({id:"circle-"+this.options.id,class:"background-circle "+t,cx:String(this.coordinates.x),cy:String(this.coordinates.y),r:String(this.radius),"stroke-width":this.options.backgroundCircleWidth});this.tags.push({element:e,parentId:"svg-"+this.options.id})},e.prototype.drawPoint=function(){var t=this.radius/100*this.options.pointSize,e=r.extractPropertyFromObject(this.additionalCssClasses,"point"),i=a.addCircle({id:"point-"+this.options.id,class:"point-circle "+e,cx:String(this.coordinates.x),cy:String(this.coordinates.y),r:String(t)});this.tags.push({element:i,parentId:"svg-"+this.options.id})},e.prototype.drawForegroundCircle=function(){var t=3.6*this.options.percent,e=r.extractPropertyFromObject(this.additionalCssClasses,"foregroundCircle"),i={id:"arc-"+this.options.id,class:"foreground-circle "+e,d:s.describeArc(this.coordinates.x,this.coordinates.y,this.radius,0,t),"stroke-width":this.options.foregroundCircleWidth,"stroke-linecap":this.options.strokeLinecap};this.options.strokeGradient&&(i.stroke="url(#linearGradient)",i.class="foreground-circle-without-stroke-color "+e);var n=a.addArc(i);this.options.animation&&this.animate(n),this.tags.push({element:n,parentId:"svg-"+this.options.id})},e.prototype.animate=function(t,e){c.animateArc({arc:t,arcParams:{percent:e||this.options.percent,x:this.coordinates.x,y:this.coordinates.y,radius:this.radius},animationStep:this.options.animationStep,progressColors:this.options.progressColors},this.options.onAnimationEnd)},e.prototype.drawIcon=function(){var t=this.options.icon,e=r.extractPropertyFromObject(this.additionalCssClasses,"icon"),i=a.addText({id:"text-"+this.options.id,x:String(this.coordinates.x),y:String(this.coordinates.y-25),class:"circle-icon fa "+e});i.innerHTML="&#x"+t+";",this.tags.push({element:i,parentId:"svg-"+this.options.id})},e.prototype.drawText=function(){var t=r.extractPropertyFromObject(this.additionalCssClasses,"text"),e=a.addText({id:"text-"+this.options.id,x:String(this.coordinates.x),y:String(this.coordinates.y),class:"circle-text "+t}),i=this.options.noPercentageSign?"":"%",n=""+this.options.percent+i;this.options.textReplacesPercentage&&this.options.text&&(n=this.options.text),e.textContent=n,this.tags.push({element:e,parentId:"svg-"+this.options.id})},e.prototype.drawInfoText=function(){var t=r.extractPropertyFromObject(this.additionalCssClasses,"infoText"),e=a.addText({id:"text-"+this.options.id,x:String(this.coordinates.x),y:String(this.coordinates.y+20),class:"circle-info-text "+t});e.textContent=this.options.text,this.tags.push({element:e,parentId:"svg-"+this.options.id})},e.prototype.drawLinearGradient=function(){var t={};t.gradientStart=this.options.strokeGradient[0],t.gradientEnd=this.options.strokeGradient[1];var e=a.addDefs(t);this.tags.push({element:e,parentId:"svg-"+this.options.id})},e}(d),l=function(){var t=function(e,i){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(e,i)};return function(e,i){function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),f=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),e.prototype.drawCircle=function(){var t={class:r.extractPropertyFromObject(this.additionalCssClasses,"svgContainer")};this.drawContainer(t),this.drawBackgroundCircle(),this.drawForegroundCircle(),this.drawText(),this.append()},e.prototype.drawBackgroundCircle=function(){var t=r.extractPropertyFromObject(this.additionalCssClasses,"backgroundCircle"),e=a.addArc({id:"bg-arc-"+this.options.id,d:s.describeArc(this.coordinates.x,this.coordinates.y,this.radius,270,90),class:"background-circle "+t,"stroke-width":this.options.backgroundCircleWidth});this.tags.push({element:e,parentId:"svg-"+this.options.id})},e.prototype.drawForegroundCircle=function(){var t=1.8*this.options.percent,e=r.extractPropertyFromObject(this.additionalCssClasses,"foregroundCircle"),i=a.addArc({id:"arc-"+this.options.id,class:"foreground-circle "+e,d:s.describeArc(this.coordinates.x,this.coordinates.y,this.radius,0,t),transform:"rotate(-90, "+this.coordinates.x+", "+this.coordinates.y+")","stroke-width":this.options.foregroundCircleWidth,"stroke-linecap":this.options.strokeLinecap});this.options.animation&&this.animate(i),this.tags.push({element:i,parentId:"svg-"+this.options.id})},e.prototype.animate=function(t){c.animateArc({arc:t,arcParams:{percent:this.options.percent,x:this.coordinates.x,y:this.coordinates.y,radius:this.radius,endAngleGrade:180},animationStep:this.options.animationStep,progressColors:this.options.progressColors},this.options.onAnimationEnd)},e}(h),g=function(){var t=function(e,i){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(e,i)};return function(e,i){function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),y=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.coordinates={x:0,y:0},e.additionalCssClasses={},e}return g(e,t),e.prototype.initialize=function(e,i){t.prototype.initialize.call(this,e,i);var n=this.size.maxSize;this.coordinates={x:n/2,y:n/2},this.radius=n/2.2,this.options.additionalCssClasses&&(this.additionalCssClasses=this.options.additionalCssClasses),this.animateInView()},e.prototype.drawCircle=function(){this.drawContainer(),this.drawPlainCircle(),this.append()},e.prototype.drawPlainCircle=function(){var t=3.6*this.options.percent,e=r.extractPropertyFromObject(this.additionalCssClasses,"foregroundCircle"),i=a.addArc({id:"arc-"+this.options.id,class:"foreground-circle "+e,d:s.describeArc(this.coordinates.x,this.coordinates.y,this.radius,0,t),"stroke-width":this.options.foregroundCircleWidth,"stroke-linecap":this.options.strokeLinecap});this.options.animation&&this.animate(i),this.tags.push({element:i,parentId:"svg-"+this.options.id})},e.prototype.animate=function(t){c.animateArc({arc:t,arcParams:{percent:this.options.percent,x:this.coordinates.x,y:this.coordinates.y,radius:this.radius},animationStep:this.options.animationStep,progressColors:this.options.progressColors},this.options.onAnimationEnd)},e}(d),m=function(){function t(){}return t.create=function(t){var e;switch(t.toLowerCase()){case"half":e=new f;break;case"plain":e=new y;break;case"simple":e=new h;break;default:e=new h}return e},t}(),C=function(){return(C=Object.assign||function(t){for(var e,i=1,n=arguments.length;i0?e.clientWidth:200,n=e.clientHeight>0?e.clientHeight:200;return{maxSize:i>n?n:i,height:n,width:i}},t.initializeCircleType=function(e,i){void 0===i&&(i=!1);var n=t.getParentSize(e.id),r=m.create(e.type),o=(new v).mergeOptions(e,i);return r.initialize(o,n),r.drawCircle(),r},t.prototype.newCircle=function(e){return t.initializeCircleType(e),new o(e)},t.prototype.newCircleWithDataSet=function(e,i){var n={id:e,type:i,percent:1};return t.initializeCircleType(n,!0),new o(n)},t}();function w(t){return(new b).newCircle(t)}function x(t,e){return(new b).newCircleWithDataSet(t,e)}}]); \ No newline at end of file +var circliful=function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=1)}([function(t,e,i){},function(t,e,i){"use strict";i.r(e),i.d(e,"newCircle",(function(){return x})),i.d(e,"newCircleWithDataSet",(function(){return w}));i(0);var n,r=function(){function t(){}return t.extractPropertyFromObject=function(t,e){var i;return t.hasOwnProperty(e)&&t[e]&&(i=t[e]),i},t}(),o=function(){function t(t){this.options=t}return t.prototype.update=function(t){var e=this,i=document.getElementById("svg-"+this.options.id);Array.isArray(t)?t.forEach((function(t){return e.updateType(t.type,t.value)})):this.updateType(t.type,t.value),i.innerHTML="",b.initializeCircleType(this.options)},t.prototype.updateType=function(t,e){switch(t){case"percent":this.options.percent=Number(e);break;case"point":this.options.point=Boolean(e);break;case"animation":this.options.animation=Boolean(e);break;case"pointSize":this.options.pointSize=Number(e);break;case"animationStep":this.options.animationStep=Number(e);break;case"strokeGradient":this.options.strokeGradient=e;break;case"icon":this.options.icon=String(e);break;case"text":this.options.text=String(e);break;case"textReplacesPercentage":this.options.textReplacesPercentage=Boolean(e);break;case"foregroundCircleWidth":this.options.foregroundCircleWidth=Number(e);break;case"backgroundCircleWidth":this.options.backgroundCircleWidth=Number(e);break;case"additionalCssClasses":this.options.additionalCssClasses=e;break;case"progressColors":this.options.progressColors=e}},t.prototype.get=function(t){return r.extractPropertyFromObject(this.options,t)},t}(),s=function(){function t(){}return t.setAttributes=function(t,e){for(var i=0,n=Object.entries(e);is.x&&(p=!0,s.x=s.x-.001),["M",s.x,s.y,"A",n,n,0,c,0,a.x,a.y,p?"Z":""].join(" ")},t}(),a=function(){function t(){}return t.addSvg=function(e){var i=document.createElementNS(t.namespaceURI,"svg");return e.class="circle-container "+r.extractPropertyFromObject(e,"class"),s.setAttributes(i,e),i},t.addCircle=function(e){var i=document.createElementNS(t.namespaceURI,"circle");return s.setAttributes(i,e),i},t.addArc=function(e){var i=document.createElementNS(t.namespaceURI,"path");return s.setAttributes(i,e),i},t.addText=function(e){var i=document.createElementNS(t.namespaceURI,"text");return i.setAttributeNS(null,"text-anchor","middle"),s.setAttributes(i,e),i},t.addDefs=function(e){var i=document.createElementNS(t.namespaceURI,"defs"),n=document.createElementNS(t.namespaceURI,"linearGradient");s.setAttributes(n,{id:"linearGradient"});var r=document.createElementNS(t.namespaceURI,"stop"),o={offset:"0","stop-color":e.gradientStart};s.setAttributes(r,o);var a=document.createElementNS(t.namespaceURI,"stop"),c={offset:"1","stop-color":e.gradientEnd};return s.setAttributes(a,c),n.appendChild(r),n.appendChild(a),i.appendChild(n),i},t.namespaceURI="http://www.w3.org/2000/svg",t}(),c=function(){function t(){}return t.animateArc=function(e,i){var n=e.arc,r=e.arcParams,o=e.animationStep,a=e.progressColors,c=r.startAngle?r.startAngle:0,p=r.endAngleGrade?r.endAngleGrade:360,d=this.getMilliseconds(r.ms,r.endAngleGrade),u=Array.isArray(a)&&a.length>0,l=1,h=setInterval((function(e,n,a){var d=p/100*l;s.setAttributes(e,{d:s.describeArc(r.x,r.y,r.radius,c,d)}),u&&t.updateCircleColor(l,e,a),(l+=o)>n&&(clearInterval(h),"function"==typeof i&&i())}),d,n,r.percent,a)},t.updateCircleColor=function(t,e,i){var n=i.find((function(e){return e.percent===t}));n&&s.setAttributes(e,{style:"stroke: "+n.color})},t.getMilliseconds=function(t,e){var i=t||50;return e<=180&&(i/=3),i},t}(),p=function(){return(p=Object.assign||function(t){for(var e,i=1,n=arguments.length;ie},t.prototype.drawContainer=function(t){var e=this.getViewBoxParams(),i=e.minX,n=e.minY,r=e.width,o=e.height,s=a.addSvg(p({width:"100%",height:"100%",viewBox:i+" "+n+" "+r+" "+o,id:"svg-"+this.options.id,preserveAspectRatio:"xMinYMin meet"},t));this.tags.push({element:s,parentId:this.options.id})},t.prototype.getViewBoxParams=function(){var t=this.options,e=t.foregroundCircleWidth,i=t.backgroundCircleWidth,n=i;e>i&&(n=e);var r=this.size.width,o=this.size.height;return(e>5||i>5)&&(r=this.size.width+1.5*n,o=this.size.height+1.5*n),{minX:0,minY:0,width:r,height:o}},t.prototype.append=function(){this.tags.forEach((function(t){document.getElementById(t.parentId).appendChild(t.element)}))},t.prototype.initialize=function(t,e){this.options=t,this.size=e},t}(),u=(n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)},function(t,e){function i(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),l=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.coordinates={x:0,y:0},e.additionalCssClasses={},e}return u(e,t),e.prototype.initialize=function(e,i){t.prototype.initialize.call(this,e,i);var n=this.size.maxSize;this.coordinates={x:n/2,y:n/2},this.radius=n/2.2,this.options.additionalCssClasses&&(this.additionalCssClasses=this.options.additionalCssClasses),this.animateInView()},e.prototype.drawCircle=function(){var t={class:r.extractPropertyFromObject(this.additionalCssClasses,"svgContainer")};this.drawContainer(t),this.options.strokeGradient&&this.drawLinearGradient(),this.drawBackgroundCircle(),this.drawForegroundCircle(),this.options.point&&this.drawPoint(),this.options.icon&&this.drawIcon(),this.drawText(),!this.options.textReplacesPercentage&&this.options.text&&this.drawInfoText(),this.append()},e.prototype.drawBackgroundCircle=function(){var t=r.extractPropertyFromObject(this.additionalCssClasses,"backgroundCircle"),e=a.addCircle({id:"circle-"+this.options.id,class:"background-circle "+t,cx:String(this.coordinates.x),cy:String(this.coordinates.y),r:String(this.radius),"stroke-width":this.options.backgroundCircleWidth});this.tags.push({element:e,parentId:"svg-"+this.options.id})},e.prototype.drawPoint=function(){var t=this.radius/100*this.options.pointSize,e=r.extractPropertyFromObject(this.additionalCssClasses,"point"),i=a.addCircle({id:"point-"+this.options.id,class:"point-circle "+e,cx:String(this.coordinates.x),cy:String(this.coordinates.y),r:String(t)});this.tags.push({element:i,parentId:"svg-"+this.options.id})},e.prototype.drawForegroundCircle=function(){var t=3.6*this.options.percent,e=r.extractPropertyFromObject(this.additionalCssClasses,"foregroundCircle"),i={id:"arc-"+this.options.id,class:"foreground-circle "+e,d:s.describeArc(this.coordinates.x,this.coordinates.y,this.radius,0,t),"stroke-width":this.options.foregroundCircleWidth,"stroke-linecap":this.options.strokeLinecap};this.options.strokeGradient&&(i.stroke="url(#linearGradient)",i.class="foreground-circle-without-stroke-color "+e);var n=a.addArc(i);this.options.animation&&this.animate(n),this.tags.push({element:n,parentId:"svg-"+this.options.id})},e.prototype.animate=function(t,e){c.animateArc({arc:t,arcParams:{percent:e||this.options.percent,x:this.coordinates.x,y:this.coordinates.y,radius:this.radius},animationStep:this.options.animationStep,progressColors:this.options.progressColors},this.options.onAnimationEnd)},e.prototype.drawIcon=function(){var t=this.options.icon,e=r.extractPropertyFromObject(this.additionalCssClasses,"icon"),i=a.addText({id:"text-"+this.options.id,x:String(this.coordinates.x),y:String(this.coordinates.y-25),class:"circle-icon fa "+e});i.innerHTML="&#x"+t+";",this.tags.push({element:i,parentId:"svg-"+this.options.id})},e.prototype.drawText=function(){var t=r.extractPropertyFromObject(this.additionalCssClasses,"text"),e=a.addText({id:"text-"+this.options.id,x:String(this.coordinates.x),y:String(this.coordinates.y),class:"circle-text "+t}),i=this.options.noPercentageSign?"":"%",n=""+this.options.percent+i;this.options.textReplacesPercentage&&this.options.text&&(n=this.options.text),e.textContent=n,this.tags.push({element:e,parentId:"svg-"+this.options.id})},e.prototype.drawInfoText=function(){var t=r.extractPropertyFromObject(this.additionalCssClasses,"infoText"),e=a.addText({id:"text-"+this.options.id,x:String(this.coordinates.x),y:String(this.coordinates.y+20),class:"circle-info-text "+t});e.textContent=this.options.text,this.tags.push({element:e,parentId:"svg-"+this.options.id})},e.prototype.drawLinearGradient=function(){var t={};t.gradientStart=this.options.strokeGradient[0],t.gradientEnd=this.options.strokeGradient[1];var e=a.addDefs(t);this.tags.push({element:e,parentId:"svg-"+this.options.id})},e}(d),h=function(){var t=function(e,i){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(e,i)};return function(e,i){function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),f=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return h(e,t),e.prototype.drawCircle=function(){var t={class:r.extractPropertyFromObject(this.additionalCssClasses,"svgContainer")};this.drawContainer(t),this.drawBackgroundCircle(),this.drawForegroundCircle(),this.drawText(),this.append()},e.prototype.drawBackgroundCircle=function(){var t=r.extractPropertyFromObject(this.additionalCssClasses,"backgroundCircle"),e=a.addArc({id:"bg-arc-"+this.options.id,d:s.describeArc(this.coordinates.x,this.coordinates.y,this.radius,270,90),class:"background-circle "+t,"stroke-width":this.options.backgroundCircleWidth});this.tags.push({element:e,parentId:"svg-"+this.options.id})},e.prototype.drawForegroundCircle=function(){var t=1.8*this.options.percent,e=r.extractPropertyFromObject(this.additionalCssClasses,"foregroundCircle"),i=a.addArc({id:"arc-"+this.options.id,class:"foreground-circle "+e,d:s.describeArc(this.coordinates.x,this.coordinates.y,this.radius,0,t),transform:"rotate(-90, "+this.coordinates.x+", "+this.coordinates.y+")","stroke-width":this.options.foregroundCircleWidth,"stroke-linecap":this.options.strokeLinecap});this.options.animation&&this.animate(i),this.tags.push({element:i,parentId:"svg-"+this.options.id})},e.prototype.animate=function(t){c.animateArc({arc:t,arcParams:{percent:this.options.percent,x:this.coordinates.x,y:this.coordinates.y,radius:this.radius,endAngleGrade:180},animationStep:this.options.animationStep,progressColors:this.options.progressColors},this.options.onAnimationEnd)},e}(l),g=function(){var t=function(e,i){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(e,i)};return function(e,i){function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),m=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.coordinates={x:0,y:0},e.additionalCssClasses={},e}return g(e,t),e.prototype.initialize=function(e,i){t.prototype.initialize.call(this,e,i);var n=this.size.maxSize;console.log("max size",n),this.coordinates={x:n/2,y:n/2},this.radius=n/2.2,this.options.additionalCssClasses&&(this.additionalCssClasses=this.options.additionalCssClasses),this.animateInView()},e.prototype.drawCircle=function(){this.drawContainer(),this.drawPlainCircle(),this.append()},e.prototype.drawPlainCircle=function(){var t=3.6*this.options.percent,e=r.extractPropertyFromObject(this.additionalCssClasses,"foregroundCircle"),i=a.addArc({id:"arc-"+this.options.id,class:"foreground-circle "+e,d:s.describeArc(this.coordinates.x,this.coordinates.y,this.radius,0,t),"stroke-width":this.options.foregroundCircleWidth,"stroke-linecap":this.options.strokeLinecap});this.options.animation&&this.animate(i),this.tags.push({element:i,parentId:"svg-"+this.options.id})},e.prototype.animate=function(t){c.animateArc({arc:t,arcParams:{percent:this.options.percent,x:this.coordinates.x,y:this.coordinates.y,radius:this.radius},animationStep:this.options.animationStep,progressColors:this.options.progressColors},this.options.onAnimationEnd)},e}(d),y=function(){function t(){}return t.create=function(t){var e;switch(t.toLowerCase()){case"half":e=new f;break;case"plain":e=new m;break;case"simple":e=new l;break;default:e=new l}return e},t}(),C=function(){return(C=Object.assign||function(t){for(var e,i=1,n=arguments.length;i0?e.clientWidth:200,n=e.clientHeight>0?e.clientHeight:200;return console.log("clac",i>n?n:i),{maxSize:i>n?n:i,height:n,width:i}},t.initializeCircleType=function(e,i){void 0===i&&(i=!1);var n=t.getParentSize(e.id),r=y.create(e.type),o=(new v).mergeOptions(e,i);return r.initialize(o,n),r.drawCircle(),r},t.prototype.newCircle=function(e){return t.initializeCircleType(e),new o(e)},t.prototype.newCircleWithDataSet=function(e,i){var n={id:e,type:i,percent:1};return t.initializeCircleType(n,!0),new o(n)},t}();function x(t){return(new b).newCircle(t)}function w(t,e){return(new b).newCircleWithDataSet(t,e)}}]); \ No newline at end of file diff --git a/public/index.html b/public/index.html index 6cd2e94..9997a59 100644 --- a/public/index.html +++ b/public/index.html @@ -14,7 +14,7 @@
@@ -99,7 +99,7 @@ }); circliful.newCircle({ - percent: 75, + percent: 100, id: 'circle5', type: 'plain', animation: false, diff --git a/src/helper/svg-tags-helper.ts b/src/helper/svg-tags-helper.ts index a516518..a752aa2 100644 --- a/src/helper/svg-tags-helper.ts +++ b/src/helper/svg-tags-helper.ts @@ -61,10 +61,15 @@ class SvgTagsHelper { const start = SvgTagsHelper.polarToCartesian(x, y, radius, endAngle); const end = SvgTagsHelper.polarToCartesian(x, y, radius, startAngle); const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; + let closePath = false; + if (endAngle === 360 && end.x > start.x) { + closePath = true; + start.x = start.x - 0.001; + } return [ "M", start.x, start.y, - "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y, + "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y, (closePath ? 'Z' : '') ].join(" "); } }