react-charts-sm/dist/index.js

A package providing bar and circle charts

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.reactChartsSm=t(require("react")):e.reactChartsSm=t(e.react)}(this,(e=>(()=>{"use strict";var t={827:(e,t,r)=>{r.d(t,{A:()=>c});var n=r(601),a=r.n(n),o=r(314),i=r.n(o)()(a());i.push([e.id,".bar-wrapper{width:100px;height:auto;display:flex;flex-direction:column;gap:5px;align-items:center}.bar-wrapper p{margin-bottom:0}.bar-wrapper .bar-container{width:50px;height:200px;background-color:#5a77df;border-radius:10px;position:relative;display:flex;align-items:flex-end;justify-content:center}.bar-wrapper .bar-container .bar-fill{width:100%;background-color:#3e53a0;border-radius:10px;display:flex;justify-content:center;align-items:center;color:white;font-size:14px;transition:height linear 0.6s}.bar-wrapper .bar-label{text-align:center;margin-top:10px;margin-bottom:20px;font-family:Arial, sans-serif}\n",""]);const c=i},770:(e,t,r)=>{r.d(t,{A:()=>c});var n=r(601),a=r.n(n),o=r(314),i=r.n(o)()(a());i.push([e.id,".circle-chart{display:flex;align-items:center;justify-content:center}.circle-bg{fill:none;stroke:#e6e6e6}.circle-progress{fill:none;stroke:#5a77df;transition:stroke-dashoffset 0.6s ease, stroke 0.6s ease;transform:rotate(-90deg);transform-origin:50% 50%}.circle-text{fill:#333}\n",""]);const c=i},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",n=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),n&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),n&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r})).join("")},t.i=function(e,r,n,a,o){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(i[s]=!0)}for(var l=0;l<e.length;l++){var u=[].concat(e[l]);n&&i[u[0]]||(void 0!==o&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=o),r&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=r):u[2]=r),a&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=a):u[4]="".concat(a)),t.push(u))}},t}},601:e=>{e.exports=function(e){return e[1]}},72:e=>{var t=[];function r(e){for(var r=-1,n=0;n<t.length;n++)if(t[n].identifier===e){r=n;break}return r}function n(e,n){for(var o={},i=[],c=0;c<e.length;c++){var s=e[c],l=n.base?s[0]+n.base:s[0],u=o[l]||0,f="".concat(l," ").concat(u);o[l]=u+1;var p=r(f),d={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==p)t[p].references++,t[p].updater(d);else{var m=a(d,n);n.byIndex=c,t.splice(c,0,{identifier:f,updater:m,references:1})}i.push(f)}return i}function a(e,t){var r=t.domAPI(t);return r.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;r.update(e=t)}else r.remove()}}e.exports=function(e,a){var o=n(e=e||[],a=a||{});return function(e){e=e||[];for(var i=0;i<o.length;i++){var c=r(o[i]);t[c].references--}for(var s=n(e,a),l=0;l<o.length;l++){var u=r(o[l]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}o=s}}},659:e=>{var t={};e.exports=function(e,r){var n=function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},56:(e,t,r)=>{e.exports=function(e){var t=r.nc;t&&e.setAttribute("nonce",t)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(r){!function(e,t,r){var n="";r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var a=void 0!==r.layer;a&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,a&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}");var o=r.sourceMap;o&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),t.styleTagTransform(n,e,t.options)}(t,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},155:t=>{t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var o=r[e]={id:e,exports:{}};return t[e](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nc=void 0;var a={};n.r(a),n.d(a,{Bar:()=>j,CircleChart:()=>C});var o=n(155),i=n.n(o),c=n(72),s=n.n(c),l=n(825),u=n.n(l),f=n(659),p=n.n(f),d=n(56),m=n.n(d),v=n(540),y=n.n(v),h=n(113),b=n.n(h),g=n(770),x={};x.styleTagTransform=b(),x.setAttributes=m(),x.insert=p().bind(null,"head"),x.domAPI=u(),x.insertStyleElement=y(),s()(g.A,x),g.A&&g.A.locals&&g.A.locals;var w=n(827),A={};function S(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,a,o,i,c=[],s=!0,l=!1;try{if(o=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;s=!1}else for(;!(s=(n=o.call(r)).done)&&(c.push(n.value),c.length!==t);s=!0);}catch(e){l=!0,a=e}finally{try{if(!s&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(l)throw a}}return c}}(e,t)||function(e,t){if(e){if("string"==typeof e)return E(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?E(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function E(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}A.styleTagTransform=b(),A.setAttributes=m(),A.insert=p().bind(null,"head"),A.domAPI=u(),A.insertStyleElement=y(),s()(w.A,A),w.A&&w.A.locals&&w.A.locals;var C=function(e){var t=e.percentage,r=e.radius,n=e.strokeWidth,a=e.progressColor,c=e.label,s=2*Math.PI*r,l=s-t/100*s,u=S((0,o.useState)(l),2),f=u[0],p=u[1],d=S((0,o.useState)(!1),2),m=d[0],v=d[1];return(0,o.useEffect)((function(){m?p(s-t/100*s):v(!0)}),[t,s,m]),i().createElement("div",{className:"circle-wrapper d-flex flex-column justify-content-center align-items-center"},i().createElement("div",{className:"circle-chart"},i().createElement("svg",{width:"120",height:"120"},i().createElement("circle",{className:"circle-bg",cx:"60",cy:"60",r,strokeWidth:n}),i().createElement("circle",{className:"circle-progress",cx:"60",cy:"60",r,strokeWidth:n,strokeDasharray:s,strokeDashoffset:f,style:{stroke:a}}),i().createElement("text",{x:"50%",y:"50%",textAnchor:"middle",dy:".3em",className:"circle-text fw-bold fs-14"},t,"%"))),i().createElement("p",{className:"circle-label fs-13 text-wrap"},c))},j=function(e){var t=e.value,r=e.label,n=e.barColor,a=e.progressColor,c=S((0,o.useState)(0),2),s=c[0],l=c[1];return(0,o.useEffect)((function(){t>=0&&t<=100?l(t):console.log("Please enter a value between 0 to 100")}),[t]),i().createElement("div",{className:"bar-wrapper"},i().createElement("p",{className:""},s,"%"),i().createElement("div",{className:"bar-container",style:{backgroundColor:"".concat(n)}},i().createElement("div",{className:"bar-fill",style:{height:"".concat(s,"%"),backgroundColor:"".concat(a)}})),i().createElement("p",{className:"bar-label"},r))};return a})()));