mgx-circular-progress-bar
Version:
A library for circular progress bars components, an elegant way to rappresent your percentages.
2 lines • 12.7 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("mgx-circular-progress-bar",["exports","@angular/core","@angular/common"],e):e(t["mgx-circular-progress-bar"]={},t.ng.core,t.ng.common)}(this,function(t,e,n){"use strict";var r=function(){function t(){this.total=1,this.barValue=0,this.percentage=0,this.diameter=150,this.color="#3282b8",this.bgColor="#eee",this.contentSize=83,this.pathPosition=90,this.mgxPrefix="mgx-circular-progress-full-bar",this.percentual=0,this.context={percentual:0,$implicit:0}}return t.prototype.ngOnChanges=function(){var t=this.circlePath.nativeElement,e=2*Math.PI*this.pathPosition;t.style.strokeDasharray=e,this.showWarnings(),this.percentual=+this.percentage||+this.barValue/+this.total*100,this.percentual=isNaN(this.percentual)?0:+this.percentual.toFixed(2),100<this.percentual?(t.style.strokeDashoffset=0,this.percentual=100):t.style.strokeDashoffset=e-this.percentual/100*e,this.context.percentual=this.percentual,this.context.$implicit=this.percentual},t.prototype.showWarnings=function(){this.percentual&&!isNaN(this.percentual)||(isNaN(this.barValue)?console.warn(this.mgxPrefix+" barValue: "+this.barValue):isNaN(this.total)?console.warn(this.mgxPrefix+" total: "+this.total):this.barValue>this.total&&console.warn(this.mgxPrefix+" barValue: "+this.barValue+" is more than total: "+this.total))},t.prototype.getFontSize=function(t){return void 0===t&&(t=1),(this.fontSize||this.diameter/4)/t+"px"},t.decorators=[{type:e.Component,args:[{selector:"mgx-circular-progress-full-bar",template:'<div class="contain">\n <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" [ngStyle]="{\'width.px\': diameter, \'height.px\': diameter }"\n viewBox="0 0 200 200">\n <circle id="base-circle" [attr.fill]="bgColor" stroke-width="15" cx="100" cy="100" [attr.r]="contentSize" />\n <circle id="path" #circlePath [attr.stroke]="color" fill="none" stroke-width="15" cx="100" cy="100"\n [attr.r]="pathPosition" rotate="50" />\n </svg>\n <div class="label">\n <ng-container *ngIf="contentTemplate; else projectContent">\n <ng-template *ngTemplateOutlet="contentTemplate; context: context"></ng-template>\n </ng-container>\n <ng-template #projectContent>\n <div #contentRef>\n <ng-content></ng-content>\n </div>\n <div *ngIf="!contentRef?.childNodes?.length" [style.font-size]="getFontSize()">{{percentual}}<span\n [style.font-size]="getFontSize(1.2)">%</span></div>\n </ng-template>\n </div>\n</div>',styles:[".contain{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;box-sizing:border-box;position:relative}#path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg);transform-origin:center center;-webkit-transform-origin:center center;-ms-transform-origin:center center;-moz-transform-origin:center center;transition:stroke-dashoffset .3s ease-in-out;-webkit-transition:stroke-dashoffset .3s ease-in-out;-ms-transition:stroke-dashoffset .3s ease-in-out;-moz-transition:stroke-dashoffset .3s ease-in-out}#pie-path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg)}.label{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;font-family:Kreon VariableFont;color:#7f8c8d}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={total:[{type:e.Input}],barValue:[{type:e.Input}],percentage:[{type:e.Input}],contentTemplate:[{type:e.Input}],diameter:[{type:e.Input}],fontSize:[{type:e.Input}],color:[{type:e.Input}],bgColor:[{type:e.Input}],contentSize:[{type:e.Input}],pathPosition:[{type:e.Input}],circlePath:[{type:e.ViewChild,args:["circlePath"]}]},t}(),o=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule],declarations:[r],exports:[r]}]}],t}();var i=function(){function t(){this.total=1,this.barValue=0,this.percentage=0,this.diameter=150,this.color="#3282b8",this.bgColor="#eee",this.bgSize=10,this.mgxPrefix="mgx-circular-progress-pie",this.percentual=0}return t.prototype.ngOnChanges=function(){this.showWarnings(),this.percentual=+this.percentage||+this.barValue/+this.total*100,this.percentual=isNaN(this.percentual)?0:+this.percentual.toFixed(2),100<this.percentual?(this.setSlice(1),this.percentual=100):this.setSlice(this.percentual/100)},t.prototype.setSlice=function(t){var e=function l(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,o,i=n.call(t),a=[];try{for(;(void 0===e||0<e--)&&!(r=i.next()).done;)a.push(r.value)}catch(s){o={error:s}}finally{try{r&&!r.done&&(n=i["return"])&&n.call(i)}finally{if(o)throw o.error}}return a}(this.getCoordinatesForPercent(t),2),n=e[0],r=e[1],o=.5<t?1:0;this.pathData=["M 1 0","A 1 1 0 "+o+" 1 "+n+" "+r,"L 0 0"].join(" ")},t.prototype.getCoordinatesForPercent=function(t){return[Math.cos(2*Math.PI*t),Math.sin(2*Math.PI*t)]},t.prototype.showWarnings=function(){this.percentage&&!isNaN(this.percentage)||(isNaN(this.barValue)?console.warn(this.mgxPrefix+" barValue: "+this.barValue):isNaN(this.total)?console.warn(this.mgxPrefix+" total: "+this.total):this.barValue>this.total&&console.warn(this.mgxPrefix+" barValue: "+this.barValue+" is more than total: "+this.total))},t.prototype.getFontSize=function(t){return void 0===t&&(t=1),(this.fontSize||this.diameter/4)/t+"px"},t.decorators=[{type:e.Component,args:[{selector:"mgx-circular-progress-pie",template:'<div class="contain">\n <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" [ngStyle]="{\'width.px\': diameter, \'height.px\': diameter }"\n viewBox="-1 -1 2 2">\n <circle id="base-circle" [attr.stroke]="bgColor" [attr.fill]="bgColor" cx="0" cy="0" [attr.r]="bgSize / 20" />\n <path id="pie-path" [attr.fill]="color" [attr.d]="pathData" rotate="50"></path>\n </svg>\n <div class="label">\n <ng-container *ngIf="contentTemplate; else projectContent">\n <ng-template *ngTemplateOutlet="contentTemplate"></ng-template>\n </ng-container>\n <ng-template #projectContent>\n <div #contentRef>\n <ng-content></ng-content>\n </div>\n <div *ngIf="!contentRef?.childNodes?.length" [style.font-size]="getFontSize()">\n {{percentual}}<span [style.font-size]="getFontSize(1.2)">%</span>\n </div>\n </ng-template>\n </div>\n</div>',styles:[".contain{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;box-sizing:border-box;position:relative}#path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg);transform-origin:center center;-webkit-transform-origin:center center;-ms-transform-origin:center center;-moz-transform-origin:center center;transition:stroke-dashoffset .3s ease-in-out;-webkit-transition:stroke-dashoffset .3s ease-in-out;-ms-transition:stroke-dashoffset .3s ease-in-out;-moz-transition:stroke-dashoffset .3s ease-in-out}#pie-path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg)}.label{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;font-family:Kreon VariableFont;color:#7f8c8d}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={total:[{type:e.Input}],barValue:[{type:e.Input}],percentage:[{type:e.Input}],contentTemplate:[{type:e.Input}],diameter:[{type:e.Input}],fontSize:[{type:e.Input}],color:[{type:e.Input}],bgColor:[{type:e.Input}],bgSize:[{type:e.Input}]},t}(),a=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule],declarations:[i],exports:[i]}]}],t}(),s=function(){function t(){this.total=1,this.barValue=0,this.percentage=0,this.diameter=150,this.color="#3282b8",this.bgColor="#eee",this.radius=90,this.mgxPrefix="mgx-circular-progress-bar",this.percentual=0,this.context={percentual:0,$implicit:0}}return t.prototype.ngOnChanges=function(){var t=this.circlePath.nativeElement,e=2*Math.PI*this.radius;t.style.strokeDasharray=e,this.showWarnings(),this.percentual=+this.percentage||+this.barValue/+this.total*100,this.percentual=isNaN(this.percentual)?0:+this.percentual.toFixed(2),100<this.percentual?(t.style.strokeDashoffset=0,this.percentual=100):t.style.strokeDashoffset=e-this.percentual/100*e,this.context.percentual=this.percentual,this.context.$implicit=this.percentual},t.prototype.showWarnings=function(){this.percentage&&!isNaN(this.percentage)||(isNaN(this.barValue)?console.warn(this.mgxPrefix+" barValue: "+this.barValue):isNaN(this.total)?console.warn(this.mgxPrefix+" total: "+this.total):this.barValue>this.total&&console.warn(this.mgxPrefix+" barValue: "+this.barValue+" is more than total: "+this.total))},t.prototype.getFontSize=function(t){return void 0===t&&(t=1),(this.fontSize||this.diameter/4)/t+"px"},t.decorators=[{type:e.Component,args:[{selector:"mgx-circular-progress-bar",template:'\n <div class="contain">\n <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" [ngStyle]="{\'width.px\': diameter, \'height.px\': diameter }" viewBox="0 0 200 200">\n <circle id="base-circle" [attr.stroke]="bgColor" fill="none" stroke-width="15" cx="100" cy="100"\n [attr.r]="radius" />\n <circle id="path" #circlePath [attr.stroke]="color" fill="none" stroke-width="15" cx="100" cy="100"\n [attr.r]="radius" rotate="50" />\n </svg>\n <div class="label">\n <ng-container *ngIf="contentTemplate; else projectContent">\n <ng-template *ngTemplateOutlet="contentTemplate; context: context"></ng-template>\n </ng-container>\n <ng-template #projectContent>\n <div #contentRef>\n <ng-content></ng-content>\n </div>\n <div *ngIf="!contentRef?.childNodes?.length" [style.font-size]="getFontSize()">\n {{percentual}}<span [style.font-size]="getFontSize(1.2)">%</span>\n </div>\n </ng-template>\n </div>\n</div>',styles:[".contain{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;box-sizing:border-box;position:relative}#path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg);transform-origin:center center;-webkit-transform-origin:center center;-ms-transform-origin:center center;-moz-transform-origin:center center;transition:stroke-dashoffset .3s ease-in-out;-webkit-transition:stroke-dashoffset .3s ease-in-out;-ms-transition:stroke-dashoffset .3s ease-in-out;-moz-transition:stroke-dashoffset .3s ease-in-out}#pie-path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg)}.label{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;font-family:Kreon VariableFont;color:#7f8c8d}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={total:[{type:e.Input}],barValue:[{type:e.Input}],percentage:[{type:e.Input}],contentTemplate:[{type:e.Input}],diameter:[{type:e.Input}],fontSize:[{type:e.Input}],color:[{type:e.Input}],bgColor:[{type:e.Input}],circlePath:[{type:e.ViewChild,args:["circlePath"]}]},t}(),l=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule],declarations:[s],exports:[s]}]}],t}(),c=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,l,a,o],exports:[l,a,o]}]}],t}();t.MgxCircularProgressModule=c,t.MgxCircularProgressBarModule=l,t.MgxCircularProgressFullBarModule=o,t.MgxCircularProgressPieModule=a,t.ɵa=s,t.ɵc=r,t.ɵb=i,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=mgx-circular-progress-bar.umd.min.js.map