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

React linear and circular percentage progress bars.

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