react-percentage-bar/dist/cjs/index.js

React linear and circular percentage progress bars.

"use strict";var e=require("react/jsx-runtime"),t=require("react");const r=e=>{let t=e.toString().toLowerCase();return t.includes("em")||t.includes("rem")?16*parseFloat(t):parseFloat(t)},a=({radius:a,size:i,percentage:s,duration:n,color:o,startPosition:l,returnState:c,roundLineCap:d,animation:p,percentageAnimation:h,reverse:u,reverseDuration:g,loopCount:x,startDelay:f,reverseDelay:m,antiClockWise:y,margin:v,separator:b,styles:S,chartValue:j})=>{const[k,C]=t.useState(0),[w,N]=t.useState(0),[$,D]=t.useState(!1),[A,P]=t.useState(1);let W;W="pie-chart"!==S?2*Math.PI*(r(a)-r(i)/2):2*Math.PI*(r(a)/2);const L=e=>W-W*Math.round(e)/100+(![0,100].includes(e)&&d&&"pie-chart"!==S?r(i)/4:0);let T,z="#0ea5e9",B="#0ea5e9";const F=Object.keys(j).map(Number).sort((e,t)=>t-e),E=e=>e>s?s:e<0?0:e,M=(e,t)=>{setTimeout(()=>{C(e=>E(e+t)),c(h?E(k+t):s),k+t>=s&&D(!0),k+t<=0&&(D(!1),P(e=>++e))},((e,t)=>1===t&&1!==A&&0===k?f+e/100:-1===t&&k===s?m+e/100:e/100)(e,t))};t.useEffect(()=>{(p||h)&&"pie-chart"!==S?x>=A?s>k&&!$?M(n,1):k>0&&u&&$?M(g,-1):k>0&&!u&&$&&(D(!1),P(e=>++e),C(0),c(h?0:s)):s>k&&M(n,1):p&&"pie-chart"===S?w<100&&setTimeout(()=>{N(e=>++e)},n/100):(C(s),c(s))}),Array.isArray(o)?(z=void 0===o[0]?z:o[0],B=void 0===o[1]?B:o[1]):z=B=o,T=y?`rotateZ(${l+90}deg) rotateY(180deg)`:`rotateZ(${l-90}deg)`;const G=2*r(a);return e.jsxs("svg",{className:"svg",xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:G,height:G,viewBox:`0 0 ${G} ${G}`,style:{transform:T,margin:v},children:[e.jsx("defs",{children:e.jsxs("linearGradient",{id:`${z.substring(1)}-${B}`,children:[e.jsx("stop",{offset:"0%",stopColor:B}),e.jsx("stop",{offset:"100%",stopColor:z})]})}),e.jsx("circle",{className:"stroke-circles circle",style:{stroke:`url(#${z.substring(1)}-${B}`},cx:r(a),cy:r(a),r:r(a)-r(i)/2,strokeLinecap:d?"round":"butt",strokeWidth:i,display:"pie-chart"!==S?"flex":"none",strokeDasharray:W,strokeDashoffset:L(p?k:s)}),e.jsx("circle",{className:"circle",cx:r(a),cy:r(a),r:r(a)-r(i)/2,style:{stroke:b[2]},strokeLinecap:"butt",strokeWidth:i,display:"separators"===S?"flex":"none",strokeDasharray:`${b[0]} , ${(W-b[0]*b[1])/b[1]} `}),F.map(t=>(t=>e.jsx("circle",{className:"circle",r:"25%",cx:"50%",cy:"50%",strokeWidth:a,strokeDasharray:W,stroke:j[t],display:"pie-chart"===S?"flex":"none",strokeDashoffset:L(t>w&&p?w:t)},t))(t))]})};function i(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===r&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}i(".outer-div{align-items:center;display:flex;justify-content:center;position:relative}.inner-div,.outer-div{border-radius:50%}.circle{fill:none}.svg{left:0;position:absolute;top:0}.text-area{align-items:center;display:flex;flex-direction:column;justify-content:center}.text-area p{color:#00235b;font-family:Verdana,Geneva,Tahoma,sans-serif;margin:0;padding:0}");i(".outer-div-linear{padding:2px}.inner-div-linear{align-items:center;display:flex;justify-content:center;position:relative}.progress-div{position:relative}.progress-bar,.track{align-items:center;display:flex;position:absolute}.on-top-percentage{font-weight:600;padding:0 5px;width:fit-content;width:100%}.on-top-percentage,.percentage-linear{font-family:Arial,Helvetica,sans-serif;margin:0}.percentage-linear{font-size:1.2rem;padding:0}");exports.CircularProgressBar=({color:i="#0ea5e9",trackColor:s="#efefef",radius:n="5rem",styles:o="solid",size:l="1rem",percentage:c=75,duration:d=2e3,startPosition:p=0,shadow:h=!1,innerShadowStyle:u=null,outerShadowStyle:g=null,text:x=null,showPercentage:f=!0,percentageStyle:m=null,textStyle:y=null,children:v=null,roundLineCap:b=!0,animation:S=!0,percentageAnimation:j=!0,reverse:k=!0,reverseDuration:C=2e3,loopCount:w=0,startDelay:N=100,reverseDelay:$=100,antiClockWise:D=!1,padding:A=0,backgroundColor:P="transparent",separator:W=[5,12,"#fff"],chartValue:L={20:"#9CB4CC",60:"#0EA293",100:"#FFA559"}})=>{let T,z,B,F;const[E,M]=t.useState(0);h?(B=null!==u?u:{boxShadow:"inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0px rgba(255, 255, 255, 1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05)"},F=null!==g?g:{boxShadow:"6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7)"}):B=F={boxShadow:"none"},null===m&&(m={fontSize:"1.5rem",fontWeight:"600"}),null===y&&(y={fontSize:"1.3rem",fontWeight:"500"});const G=2*r(n),V=2*(r(n)-r(l));z={width:V,height:V};const R={width:G+2*r(A),height:G+2*r(A),background:P};return T={borderColor:s,borderWidth:l,borderStyle:"pie-chart"===o?"none":"solid",margin:A},e.jsx("div",{className:"outer-div",style:{...R,...F},children:e.jsxs("div",{className:"inner-div",style:{...T,...B},children:[e.jsx(a,{radius:n,size:l,percentage:c,duration:d,color:i,startPosition:parseFloat(p.toString()),returnState:e=>{M(e)},roundLineCap:b,animation:S,percentageAnimation:j,reverse:k,reverseDuration:C,loopCount:w,startDelay:N,reverseDelay:$,antiClockWise:D,margin:A,separator:W,styles:o,chartValue:L}),e.jsxs("div",{className:"text-area",style:{...z},children:[e.jsx("p",{style:{...m,display:"pie-chart"!==o?"flex":"none"},children:f?`${E}%`:""}),e.jsx("p",{style:{...y,display:"pie-chart"!==o?"flex":"none"},children:x}),v]})]})})},exports.LinearProgressBar=({text:a=null,textStyle:i=null,percentageColor:s="#00235B",percentage:n=75,showPercentage:o=!0,color:l="#0ea5e9",trackColor:c="#efefef",width:d="20rem",height:p="0.8rem",duration:h=2e3,percentagePosition:u="right",startDirection:g="left",animation:x=!0,percentageAnimation:f=!0,roundLineCap:m=!0})=>{const[y,v]=t.useState(0),b=e=>r(d)*e/100;let S="#0ea5e9",j="#0ea5e9";Array.isArray(l)?(S=void 0===l[0]?S:l[0],j=void 0===l[1]?j:l[1]):S=j=l;const k={background:c,width:d,height:p,borderRadius:m?`calc(${p} / 2)`:0},C={background:`linear-gradient(to ${"right"===g?"left":"right"} , ${S}, ${j})`,height:p,width:b(x?y:n),right:"right"===g?0:"auto",borderRadius:m?`calc(${p} / 2)`:0};i=null===i?{fontSize:"1.2rem",margin:"10px 0",fontFamily:"'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif",fontWeight:"600",color:"#00235B"}:i;const w=o&&"left"===u,N=o&&"right"===u,$=o&&["onright","onleft"].includes(u);return t.useEffect(()=>{x||f?y<n&&setTimeout(()=>{v(e=>++e)},h/100):v(n)}),e.jsxs("div",{className:"outer-div-linear",style:{width:`calc(${d} + 5rem)`},children:[e.jsx("p",{style:{...i},children:a}),e.jsxs("div",{className:"inner-div-linear",children:[e.jsxs("p",{style:{color:s,display:w?"flex":"none",marginRight:"10px"},className:"percentage-linear",children:[f?y:n,"%"]}),e.jsxs("div",{className:"progress-div",style:{width:d,height:p},children:[e.jsx("div",{className:"track",style:{...k}}),e.jsx("div",{className:"progress-bar",style:{...C},children:e.jsxs("p",{style:{color:s,fontSize:`calc(${p} * 0.8)`,display:$?"block":"none",textAlign:"onleft"===u?"left":"right"},className:"on-top-percentage",children:[f?y:n,"%"]})})]}),e.jsxs("p",{style:{color:s,display:N?"flex":"none",marginLeft:"10px"},className:"percentage-linear",children:[f?y:n,"%"]})]})]})};