@erpsquad/common 1.8.75 → 1.8.77

package/dist/components/change-user-password-modal/change-user-password-modal/index.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../modal/modal/index.js"),s=require("react-hook-form"),t=require("../../../node_modules/@hookform/resolvers/yup/dist/yup/index.js"),a=require("yup"),n=require("../../../hooks/useAuth/index.js"),l=require("../../typography/typography/index.js"),i=require("../../form-control/form-builder/form-builder-element/text/index.js"),d=require("../../button/button/index.js"),u=require("../../toast/toast/index.js"),c=require("../../../node_modules/@mui/system/esm/styled/index.js"),m=require("../../../node_modules/@mui/material/Box/Box/index.js"),h=require("../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),x=require("../../../node_modules/@mui/material/Checkbox/Checkbox/index.js"),f=require("../../icons/eye/index.js"),p=require("../../icons/eye-off/index.js");function j(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=/* @__PURE__ */Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:function(){return e[o]}})}}),r.default=e,r}var g=/* @__PURE__ */j(a);const y=g.object({login:g.object({password:g.string().required("Please enter password").min(8,"Password must be at least 8 characters").matches(/[A-Z]/,"Password must contain at least one uppercase letter").matches(/[!@#$%^&*(),.?":{}|<>]/,"Password must contain at least one special character")})});exports.default=({showModal:a,setShowModal:j,userId:g})=>{const{changeUserPasswordByAdmin:b}=n.useAuth(),[w,q]=r.useState(!1),[C,P]=r.useState(null),{control:v,handleSubmit:k,reset:S}=s.useForm({resolver:t.yupResolver(y),mode:"all"}),[O,F]=r.useState(!1),N=c.default(m.default)(()=>({display:"flex",flexDirection:"column"}));/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../modal/modal/index.js"),s=require("react-hook-form"),t=require("../../../node_modules/@hookform/resolvers/yup/dist/yup/index.js"),a=require("yup"),n=require("../../../hooks/useAuth/index.js"),l=require("../../typography/typography/index.js"),i=require("../../form-control/form-builder/form-builder-element/text/index.js"),d=require("../../button/button/index.js"),u=require("../../toast/toast/index.js"),c=require("../../../node_modules/@mui/system/esm/styled/index.js"),m=require("../../../node_modules/@mui/material/Box/Box/index.js"),h=require("../../icons/eye/index.js"),x=require("../../icons/eye-off/index.js"),p=require("../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),j=require("../../../node_modules/@mui/material/Checkbox/Checkbox/index.js");function f(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=/* @__PURE__ */Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:function(){return e[o]}})}}),r.default=e,r}var g=/* @__PURE__ */f(a);const y=g.object({login:g.object({password:g.string().required("Please enter password").min(8,"Password must be at least 8 characters").matches(/[A-Z]/,"Password must contain at least one uppercase letter").matches(/[!@#$%^&*(),.?":{}|<>]/,"Password must contain at least one special character")})}),b=({showModal:a,setShowModal:f,userId:g})=>{const{changeUserPasswordByAdmin:b}=n.useAuth(),[w,q]=r.useState(!1),[C,P]=r.useState(null),{control:v,handleSubmit:k,reset:S}=s.useForm({resolver:t.yupResolver(y),mode:"all"}),[O,F]=r.useState(!1),M=c.default(m.default)(()=>({display:"flex",flexDirection:"column"}));/* @__PURE__ */
 return e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(o.default,{open:a,onClose:()=>j(!1),children:/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsx("form",{onSubmit:k(async e=>(e.login.id=g,e.login.isNotify=w,await b(e.login,(e,r)=>{r?(P({message:e,type:"normal"}),j(!1),S({login:{password:"",id:"",isNotify:!1}})):P({message:e,type:"alert"})}),e)),children:/* @__PURE__ */e.jsxs(N,{gap:4,className:"popup-change-pass",children:[
-/* @__PURE__ */e.jsxs(N,{gap:2,children:[
+/* @__PURE__ */e.jsx(o.Modal,{open:a,onClose:()=>f(!1),children:/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsx("form",{onSubmit:k(async e=>(e.login.id=g,e.login.isNotify=w,await b(e.login,(e,r)=>{r?(P({message:e,type:"normal"}),f(!1),S({login:{password:"",id:"",isNotify:!1}})):P({message:e,type:"alert"})}),e)),children:/* @__PURE__ */e.jsxs(M,{gap:4,className:"popup-change-pass",children:[
+/* @__PURE__ */e.jsxs(M,{gap:2,children:[
 /* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(l.Typography,{align:"center",type:"h1",weight:"medium",color:"theme.secondary.1000",children:"Change Password"})}),
-/* @__PURE__ */e.jsxs(N,{gap:2,children:[
-/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(i.default,{formControl:v,label:"Enter New Password",name:"password",type:O?"text":"password",placeholder:"Enter New Password",fieldArrayName:"login",endIcon:/* @__PURE__ */e.jsx(e.Fragment,{children:O?/* @__PURE__ */e.jsx(f.Eye,{fontSize:"small",htmlColor:"#292D32"}):/* @__PURE__ */e.jsx(p.EyeOff,{fontSize:"small",htmlColor:"#292D32"})}),onIconClick:()=>F(!O)})}),
-/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(h.default,{control:/* @__PURE__ */e.jsx(x.default,{size:"small",onChange:e=>q(e.target.checked),sx:{"&.Mui-checked":{color:"#2EB273"}}}),label:"Notify User of Password Change",sx:{"& .MuiFormControlLabel-label":{fontSize:"14px"}}})})]})]}),
-/* @__PURE__ */e.jsx(N,{gap:2,children:/* @__PURE__ */e.jsx(d.default,{type:"submit",size:"large",variant:"contained",children:"Change Password"})})]})})})}),
-/* @__PURE__ */e.jsx(u.default,{open:Boolean(C),message:null==C?void 0:C.message,type:null==C?void 0:C.type,handleClose:()=>P(null),anchorOrigin:{horizontal:"right",vertical:"bottom"},autoHideDuration:3e3})]})};
+/* @__PURE__ */e.jsxs(M,{gap:2,children:[
+/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(i.DynamicInput,{formControl:v,label:"Enter New Password",name:"password",type:O?"text":"password",placeholder:"Enter New Password",fieldArrayName:"login",endIcon:/* @__PURE__ */e.jsx(e.Fragment,{children:O?/* @__PURE__ */e.jsx(h.Eye,{fontSize:"small",htmlColor:"#292D32"}):/* @__PURE__ */e.jsx(x.EyeOff,{fontSize:"small",htmlColor:"#292D32"})}),onIconClick:()=>F(!O)})}),
+/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(p.default,{control:/* @__PURE__ */e.jsx(j.default,{size:"small",onChange:e=>q(e.target.checked),sx:{"&.Mui-checked":{color:"#2EB273"}}}),label:"Notify User of Password Change",sx:{"& .MuiFormControlLabel-label":{fontSize:"14px"}}})})]})]}),
+/* @__PURE__ */e.jsx(M,{gap:2,children:/* @__PURE__ */e.jsx(d.Button,{type:"submit",size:"large",variant:"contained",children:"Change Password"})})]})})})}),
+/* @__PURE__ */e.jsx(u.Toast,{open:Boolean(C),message:null==C?void 0:C.message,type:null==C?void 0:C.type,handleClose:()=>P(null),anchorOrigin:{horizontal:"right",vertical:"bottom"},autoHideDuration:3e3})]})};exports.ChangeUserPasswordModal=b,exports.default=b;
 //# sourceMappingURL=index.js.map

package/dist/components/change-user-password-modal/change-user-password-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport Modal from \"../modal/modal\";\nimport { useForm } from \"react-hook-form\";\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as Yup from \"yup\";\nimport { useAuth } from \"../../hooks/useAuth\";\nimport { styled } from \"@mui/system\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"../typography/typography\";\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\nimport { Eye, EyeOff } from \"../icons\";\nimport Button from \"../button/button\";\nimport Toast from \"../toast/toast\";\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\n\n\nconst validationSchema = Yup.object({\n  login: Yup.object({\n      password: Yup.string()\n                .required(\"Please enter password\")\n                .min(8, \"Password must be at least 8 characters\")\n                .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\n                .matches(/[!@#$%^&*(),.?\":{}|<>]/, \"Password must contain at least one special character\"),\n  }),\n});\n\n\n\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\n     const { changeUserPasswordByAdmin } = useAuth();\n     const [isNotify, setIsNotify] = useState(false);\n    const [toast, setToast] = useState<IToast | null>(null);\n\n    interface FormValeus {\n        login: LoginFormValues;\n    }\n\n    const { control, handleSubmit, reset } = useForm<FormValeus>({\n      resolver: yupResolver(validationSchema),\n      mode: \"all\",\n    });\n\n    const onSubmit = async (values: FormValeus) => {\n        values.login.id = userId;\n        values.login.isNotify = isNotify;\n      await changeUserPasswordByAdmin(values.login, (message, type) => {\n        if (type) {\n          setToast({ message: message, type: \"normal\" });\n          setShowModal(false);\n          reset({\n            login: {\n                password: \"\",\n                id: \"\",\n                isNotify: false\n            },\n        });\n        } else {\n          setToast({ message: message, type: \"alert\" });\n        }\n      });\n      return values;      \n    };\n\n    const [showPassword, setShowPassword] = useState<boolean>(false);\n    const handleShowPassword = () => setShowPassword(!showPassword);\n\n     const FlexBox = styled(Box)(() => ({\n        display: \"flex\",\n        flexDirection: \"column\",\n    }));\n\n    return (\n        <>\n        <Modal \n        open={showModal}\n        onClose={() => setShowModal(false)} \n        children={\n          <>\n            <form onSubmit={handleSubmit(onSubmit)}>\n                <FlexBox gap={4} className=\"popup-change-pass\">\n                  <FlexBox gap={2}>\n                    <Box>\n                      <Typography\n                        align=\"center\"\n                        type=\"h1\"\n                        weight=\"medium\"\n                        color=\"theme.secondary.1000\"\n                      >\n                        Change Password\n                      </Typography>\n                    </Box>\n                    <FlexBox gap={2}>\n                      <Box>\n                        <DynamicInput\n                          formControl={control}\n                          label=\"Enter New Password\"\n                          name=\"password\"\n                          type={showPassword ? \"text\" : \"password\"}\n                          placeholder=\"Enter New Password\"\n                          fieldArrayName=\"login\"\n                          endIcon={\n                            <>\n                              {showPassword ? (\n                                <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\n                              ) : (\n                                <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\n                              )}\n                            </>\n                          }\n                          onIconClick={handleShowPassword}\n                        />\n                      </Box>\n                      <Box>\n                        <FormControlLabel  control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\n                            '&.Mui-checked': {\n                            color: '#2EB273',\n                            },\n                        }} />} label=\"Notify User of Password Change\" sx={{ \n                            '& .MuiFormControlLabel-label': {\n                            fontSize: '14px',\n                            },\n                        }}/>\n                      </Box>\n                    </FlexBox>\n                  </FlexBox>\n                  <FlexBox gap={2}>\n                    <Button type=\"submit\" size=\"large\" variant=\"contained\">\n                      Change Password\n                    </Button>\n                  </FlexBox>\n                </FlexBox>\n              </form>          \n          </>\n        }\n        />\n        <Toast\n            open={Boolean(toast)}\n            message={toast?.message}\n            type={toast?.type}\n            handleClose={() => setToast(null)}\n            anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\n            autoHideDuration={3000}\n            />\n        </>\n    );\n}\n\nexport default ChangeUserPasswordModal;"],"names":["validationSchema","Yup","object","login","password","string","required","min","matches","showModal","setShowModal","userId","changeUserPasswordByAdmin","useAuth","isNotify","setIsNotify","useState","toast","setToast","control","handleSubmit","reset","useForm","resolver","yupResolver","mode","showPassword","setShowPassword","FlexBox","styled","Box","display","flexDirection","jsxs","Fragment","children","jsx","Modal","open","onClose","onSubmit","async","values","id","message","type","gap","className","Typography","align","weight","color","DynamicInput","formControl","label","name","placeholder","fieldArrayName","endIcon","Eye","fontSize","htmlColor","EyeOff","onIconClick","FormControlLabel","Checkbox","size","onChange","e","target","checked","sx","Button","variant","Toast","Boolean","handleClose","anchorOrigin","horizontal","vertical","autoHideDuration"],"mappings":"uuCAiBA,MAAMA,EAAmBC,EAAIC,OAAO,CAClCC,MAAOF,EAAIC,OAAO,CACdE,SAAUH,EAAII,SACHC,SAAS,yBACTC,IAAI,EAAG,0CACPC,QAAQ,QAAS,uDACjBA,QAAQ,yBAA0B,4EAMnB,EAAEC,YAAWC,eAAcC,aACtD,MAAMC,0BAAEA,GAA8BC,aAC/BC,EAAUC,GAAeC,EAAAA,UAAS,IACnCC,EAAOC,GAAYF,EAAAA,SAAwB,OAM5CG,QAAEA,EAAAC,aAASA,EAAAC,MAAcA,GAAUC,EAAAA,QAAoB,CAC3DC,SAAUC,EAAAA,YAAYxB,GACtByB,KAAM,SAwBDC,EAAcC,GAAmBX,EAAAA,UAAkB,GAGnDY,EAAUC,EAAAA,QAAOC,EAAAA,QAAPD,CAAY,KAAA,CACzBE,QAAS,OACTC,cAAe;AAGnB,OACIC,EAAAA,KAAAC,WAAA,CACAC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,QAAA,CACDC,KAAM7B,EACN8B,QAAS,IAAM7B,GAAa,GAC5ByB,wBACEC,EAAAA,IAAAF,EAAAA,SAAA,CACEC,wBAAAC,EAAAA,IAAC,OAAA,CAAKI,SAAUpB,EApCPqB,MAAOC,IACpBA,EAAOvC,MAAMwC,GAAKhC,EAClB+B,EAAOvC,MAAMW,SAAWA,QACpBF,EAA0B8B,EAAOvC,MAAO,CAACyC,EAASC,KAClDA,GACF3B,EAAS,CAAE0B,UAAkBC,KAAM,WACnCnC,GAAa,GACbW,EAAM,CACJlB,MAAO,CACHC,SAAU,GACVuC,GAAI,GACJ7B,UAAU,MAIhBI,EAAS,CAAE0B,UAAkBC,KAAM,YAGhCH,IAmBGP,wBAAAF,EAAAA,KAACL,EAAA,CAAQkB,IAAK,EAAGC,UAAU,oBACzBZ,SAAA;iBAAAF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACY,EAAAA,WAAA,CACCC,MAAM,SACNJ,KAAK,KACLK,OAAO,SACPC,MAAM,uBACPhB,SAAA;iBAIHF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACgB,EAAAA,QAAA,CACCC,YAAalC,EACbmC,MAAM,qBACNC,KAAK,WACLV,KAAMnB,EAAe,OAAS,WAC9B8B,YAAY,qBACZC,eAAe,QACfC,uBACEtB,EAAAA,IAAAF,EAAAA,SAAA,CACGC,SAAAT,iBACCU,MAACuB,EAAAA,IAAA,CAAIC,SAAS,QAAQC,UAAU,iCAE/BC,SAAA,CAAOF,SAAS,QAAQC,UAAU,cAIzCE,YA7CK,IAAMpC,GAAiBD;qBAgD/BI,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAAC4B,EAAAA,QAAA,CAAkB7C,6BAAU8C,UAAA,CAASC,KAAK,QAAQC,SAAWC,GAAMrD,EAAYqD,EAAEC,OAAOC,SAAUC,GAAI,CACnG,gBAAiB,CACjBpB,MAAO,cAEJG,MAAM,iCAAiCiB,GAAI,CAC9C,+BAAgC,CAChCX,SAAU;eAMpBxB,EAAAA,IAACR,EAAA,CAAQkB,IAAK,EACZX,wBAAAC,EAAAA,IAACoC,UAAA,CAAO3B,KAAK,SAASqB,KAAK,QAAQO,QAAQ,YAAYtC;eASnEC,EAAAA,IAACsC,EAAAA,QAAA,CACGpC,KAAMqC,QAAQ1D,GACd2B,QAAS3B,MAAAA,OAAAA,EAAAA,EAAO2B,QAChBC,KAAM5B,MAAAA,OAAAA,EAAAA,EAAO4B,KACb+B,YAAa,IAAM1D,EAAS,MAC5B2D,aAAc,CAAEC,WAAY,QAASC,SAAU,UAC/CC,iBAAkB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport Modal from \"../modal/modal\";\nimport { useForm } from \"react-hook-form\";\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as Yup from \"yup\";\nimport { useAuth } from \"../../hooks/useAuth\";\nimport { styled } from \"@mui/system\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"../typography/typography\";\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\nimport { Eye, EyeOff } from \"../icons\";\nimport Button from \"../button/button\";\nimport Toast from \"../toast/toast\";\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\n\n\nconst validationSchema = Yup.object({\n  login: Yup.object({\n      password: Yup.string()\n                .required(\"Please enter password\")\n                .min(8, \"Password must be at least 8 characters\")\n                .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\n                .matches(/[!@#$%^&*(),.?\":{}|<>]/, \"Password must contain at least one special character\"),\n  }),\n});\n\n\n\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\n     const { changeUserPasswordByAdmin } = useAuth();\n     const [isNotify, setIsNotify] = useState(false);\n    const [toast, setToast] = useState<IToast | null>(null);\n\n    interface FormValeus {\n        login: LoginFormValues;\n    }\n\n    const { control, handleSubmit, reset } = useForm<FormValeus>({\n      resolver: yupResolver(validationSchema),\n      mode: \"all\",\n    });\n\n    const onSubmit = async (values: FormValeus) => {\n        values.login.id = userId;\n        values.login.isNotify = isNotify;\n      await changeUserPasswordByAdmin(values.login, (message, type) => {\n        if (type) {\n          setToast({ message: message, type: \"normal\" });\n          setShowModal(false);\n          reset({\n            login: {\n                password: \"\",\n                id: \"\",\n                isNotify: false\n            },\n        });\n        } else {\n          setToast({ message: message, type: \"alert\" });\n        }\n      });\n      return values;      \n    };\n\n    const [showPassword, setShowPassword] = useState<boolean>(false);\n    const handleShowPassword = () => setShowPassword(!showPassword);\n\n     const FlexBox = styled(Box)(() => ({\n        display: \"flex\",\n        flexDirection: \"column\",\n    }));\n\n    return (\n        <>\n        <Modal \n        open={showModal}\n        onClose={() => setShowModal(false)} \n        children={\n          <>\n            <form onSubmit={handleSubmit(onSubmit)}>\n                <FlexBox gap={4} className=\"popup-change-pass\">\n                  <FlexBox gap={2}>\n                    <Box>\n                      <Typography\n                        align=\"center\"\n                        type=\"h1\"\n                        weight=\"medium\"\n                        color=\"theme.secondary.1000\"\n                      >\n                        Change Password\n                      </Typography>\n                    </Box>\n                    <FlexBox gap={2}>\n                      <Box>\n                        <DynamicInput\n                          formControl={control}\n                          label=\"Enter New Password\"\n                          name=\"password\"\n                          type={showPassword ? \"text\" : \"password\"}\n                          placeholder=\"Enter New Password\"\n                          fieldArrayName=\"login\"\n                          endIcon={\n                            <>\n                              {showPassword ? (\n                                <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\n                              ) : (\n                                <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\n                              )}\n                            </>\n                          }\n                          onIconClick={handleShowPassword}\n                        />\n                      </Box>\n                      <Box>\n                        <FormControlLabel  control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\n                            '&.Mui-checked': {\n                            color: '#2EB273',\n                            },\n                        }} />} label=\"Notify User of Password Change\" sx={{ \n                            '& .MuiFormControlLabel-label': {\n                            fontSize: '14px',\n                            },\n                        }}/>\n                      </Box>\n                    </FlexBox>\n                  </FlexBox>\n                  <FlexBox gap={2}>\n                    <Button type=\"submit\" size=\"large\" variant=\"contained\">\n                      Change Password\n                    </Button>\n                  </FlexBox>\n                </FlexBox>\n              </form>          \n          </>\n        }\n        />\n        <Toast\n            open={Boolean(toast)}\n            message={toast?.message}\n            type={toast?.type}\n            handleClose={() => setToast(null)}\n            anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\n            autoHideDuration={3000}\n            />\n        </>\n    );\n}\n\nexport { ChangeUserPasswordModal };\nexport default ChangeUserPasswordModal;"],"names":["validationSchema","Yup","object","login","password","string","required","min","matches","ChangeUserPasswordModal","showModal","setShowModal","userId","changeUserPasswordByAdmin","useAuth","isNotify","setIsNotify","useState","toast","setToast","control","handleSubmit","reset","useForm","resolver","yupResolver","mode","showPassword","setShowPassword","FlexBox","styled","Box","display","flexDirection","jsxs","Fragment","children","jsx","Modal","open","onClose","onSubmit","async","values","id","message","type","gap","className","Typography","align","weight","color","DynamicInput","formControl","label","name","placeholder","fieldArrayName","endIcon","Eye","fontSize","htmlColor","EyeOff","onIconClick","FormControlLabel","Checkbox","size","onChange","e","target","checked","sx","Button","variant","Toast","Boolean","handleClose","anchorOrigin","horizontal","vertical","autoHideDuration"],"mappings":"uuCAiBA,MAAMA,EAAmBC,EAAIC,OAAO,CAClCC,MAAOF,EAAIC,OAAO,CACdE,SAAUH,EAAII,SACHC,SAAS,yBACTC,IAAI,EAAG,0CACPC,QAAQ,QAAS,uDACjBA,QAAQ,yBAA0B,4DAM7CC,EAA0B,EAAEC,YAAWC,eAAcC,aACtD,MAAMC,0BAAEA,GAA8BC,aAC/BC,EAAUC,GAAeC,EAAAA,UAAS,IACnCC,EAAOC,GAAYF,EAAAA,SAAwB,OAM5CG,QAAEA,EAAAC,aAASA,EAAAC,MAAcA,GAAUC,EAAAA,QAAoB,CAC3DC,SAAUC,EAAAA,YAAYzB,GACtB0B,KAAM,SAwBDC,EAAcC,GAAmBX,EAAAA,UAAkB,GAGnDY,EAAUC,EAAAA,QAAOC,EAAAA,QAAPD,CAAY,KAAA,CACzBE,QAAS,OACTC,cAAe;AAGnB,OACIC,EAAAA,KAAAC,WAAA,CACAC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,MAAA,CACDC,KAAM7B,EACN8B,QAAS,IAAM7B,GAAa,GAC5ByB,wBACEC,EAAAA,IAAAF,EAAAA,SAAA,CACEC,wBAAAC,EAAAA,IAAC,OAAA,CAAKI,SAAUpB,EApCPqB,MAAOC,IACpBA,EAAOxC,MAAMyC,GAAKhC,EAClB+B,EAAOxC,MAAMY,SAAWA,QACpBF,EAA0B8B,EAAOxC,MAAO,CAAC0C,EAASC,KAClDA,GACF3B,EAAS,CAAE0B,UAAkBC,KAAM,WACnCnC,GAAa,GACbW,EAAM,CACJnB,MAAO,CACHC,SAAU,GACVwC,GAAI,GACJ7B,UAAU,MAIhBI,EAAS,CAAE0B,UAAkBC,KAAM,YAGhCH,IAmBGP,wBAAAF,EAAAA,KAACL,EAAA,CAAQkB,IAAK,EAAGC,UAAU,oBACzBZ,SAAA;iBAAAF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACY,EAAAA,WAAA,CACCC,MAAM,SACNJ,KAAK,KACLK,OAAO,SACPC,MAAM,uBACPhB,SAAA;iBAIHF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACgB,EAAAA,aAAA,CACCC,YAAalC,EACbmC,MAAM,qBACNC,KAAK,WACLV,KAAMnB,EAAe,OAAS,WAC9B8B,YAAY,qBACZC,eAAe,QACfC,uBACEtB,EAAAA,IAAAF,EAAAA,SAAA,CACGC,SAAAT,iBACCU,MAACuB,EAAAA,IAAA,CAAIC,SAAS,QAAQC,UAAU,iCAE/BC,SAAA,CAAOF,SAAS,QAAQC,UAAU,cAIzCE,YA7CK,IAAMpC,GAAiBD;qBAgD/BI,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAAC4B,EAAAA,QAAA,CAAkB7C,6BAAU8C,UAAA,CAASC,KAAK,QAAQC,SAAWC,GAAMrD,EAAYqD,EAAEC,OAAOC,SAAUC,GAAI,CACnG,gBAAiB,CACjBpB,MAAO,cAEJG,MAAM,iCAAiCiB,GAAI,CAC9C,+BAAgC,CAChCX,SAAU;eAMpBxB,EAAAA,IAACR,EAAA,CAAQkB,IAAK,EACZX,wBAAAC,EAAAA,IAACoC,SAAA,CAAO3B,KAAK,SAASqB,KAAK,QAAQO,QAAQ,YAAYtC;eASnEC,EAAAA,IAACsC,EAAAA,MAAA,CACGpC,KAAMqC,QAAQ1D,GACd2B,QAAS3B,MAAAA,OAAAA,EAAAA,EAAO2B,QAChBC,KAAM5B,MAAAA,OAAAA,EAAAA,EAAO4B,KACb+B,YAAa,IAAM1D,EAAS,MAC5B2D,aAAc,CAAEC,WAAY,QAASC,SAAU,UAC/CC,iBAAkB"}

package/dist/components/change-user-password-modal/change-user-password-modal.d.ts

@@ -0,0 +1,7 @@
+declare const ChangeUserPasswordModal: ({ showModal, setShowModal, userId }: {
+    showModal: any;
+    setShowModal: any;
+    userId: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export { ChangeUserPasswordModal };
+export default ChangeUserPasswordModal;

package/dist/components/change-user-password-modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ChangeUserPasswordModal } from './change-user-password-modal';
+export * from './change-user-password-modal';

package/dist/components/charts/ChartLegends.d.ts

@@ -0,0 +1,7 @@
+
+interface IProps {
+    legends: string[];
+    colors: string[];
+}
+export declare function ChartLegends({ legends, colors }: IProps): import("react/jsx-runtime").JSX.Element;
+export default ChartLegends;

package/dist/components/charts/areaLinerChart/index.esm.js

@@ -105,6 +105,7 @@ const AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelTyp
   ] });
 };
 export {
+  AreaLineChart,
   AreaLineChart as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/charts/areaLinerChart/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n    data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n    height: number,\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string;\n    colors?: string[];\n    customLegend: React.ReactNode\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol || ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n    const svgRef = useRef<SVGSVGElement | null>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [tooltipData, setTooltipData] = useState<any>(null);\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (containerWidth === 0) return; // Wait for the container width\n\n        const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n        const width = containerWidth - margin.left - margin.right;\n        const chartHeight = height - margin.top - margin.bottom;\n\n        // Clear the SVG\n        d3.select(svgRef.current).selectAll('*').remove();\n\n        const svg = d3\n            .select(svgRef.current)\n            .attr('width', containerWidth)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Define scales\n        const x = d3\n            .scalePoint()\n            .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n            .range([0, width]);\n\n        const y = d3\n            .scaleLinear()\n            .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n            .range([chartHeight, 0]);\n\n        // Limit x-axis ticks dynamically based on width\n        const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n        const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n        const xAxisGroup = svg.append('g')\n            .attr('transform', `translate(0,${chartHeight})`)\n            .call(xAxis);\n\n        xAxisGroup.selectAll(\"text\")\n            .attr(\"transform\", \"translate(0, 10)\")\n            .attr('color', '#8E8E93')\n            .style(\"text-anchor\", \"middle\");\n\n        // Y Axis\n        const yAxis = svg.append('g')\n        yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n            .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            ).tickSizeOuter(0) as any)\n            .selectAll('line')\n            .attr('stroke-dasharray', '3,3')\n            .attr('stroke', '#D3D3D4');\n\n        xAxisGroup.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Define color scale for lines\n        // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n        // Line and area generators\n        const line = (isSmooth: boolean) => d3.line<any>()\n            .x(d => x(d.month)!)\n            .y(d => y(d.value))\n            .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear);  // Conditionally smooth the line\n\n        const area = d3.area<any>()\n            .x(d => x(d.month)!)\n            .y0(chartHeight)\n            .y1(d => y(d.value));\n\n        // Iterate over each dataset to create lines and areas\n        data.forEach((dataset, i) => {\n            // const datasetColor = color(i.toString());\n\n            // Create gradient for each area\n            const gradient = svg.append('defs')\n                .append('linearGradient')\n                .attr('id', `area-gradient-${i}`)\n                .attr('x1', '0%')\n                .attr('x2', '0%')\n                .attr('y1', '0%')\n                .attr('y2', '100%');\n\n            gradient.append('stop')\n                .attr('offset', '0%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.4);\n\n            gradient.append('stop')\n                .attr('offset', '100%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.1);\n\n            // Append the area with gradient\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', `url(#area-gradient-${i})`)\n                .attr('d', area);\n\n            // Append the line with smoothness condition\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', 'none')\n                .attr('stroke', colors[i])\n                .attr('stroke-width', 2)\n                .attr('d', line(dataset.isSmooth || false));  // Use smoothness from the dataset\n\n            // Append circles for hover effect\n            {\n                dataset?.showCircle &&\n                    svg.selectAll(`circle-${i}`)\n                        .data(dataset.values)\n                        .enter()\n                        .append('circle')\n                        .attr('cx', d => x(d.month)!)\n                        .attr('cy', d => y(d.value))\n                        .attr('r', 5)\n                        .attr('fill', colors[i])\n                        .attr('stroke', '#fff')\n                        .style('cursor', 'pointer')\n                        .on('mouseover', function (event, d) {\n                            setTooltipData({\n                                x: `${event.pageX + 10}px`,\n                                y: `${event.pageY - 30}px`,\n                                content: `${dataset.name}: ${d.value}`\n                            });\n                            d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n                        })\n                        .on('mouseout', function () {\n                            setTooltipData(null);\n                            d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n                        });\n            }\n\n        });\n\n    }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <svg ref={svgRef} width=\"100%\" height={height} />\n                {\n                    customLegend &&\n                    customLegend\n\n                }\n            </div>\n            {tooltipData &&\n                <Box sx={{\n                    position: 'absolute',\n                    left: tooltipData.x,\n                    top: tooltipData.y,\n                    pointerEvents: 'none',\n                    backgroundColor: '#2EB273',\n                    zIndex: '99999',\n                    border: 'none',\n                    borderRadius: '3px',\n                    transform: 'translate(-50%, -100%)',\n                    padding: '2px 6px 2px 6px',\n                    gap: '10px'\n                }}>\n                    <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n                        {tooltipData.content}\n                    </span>\n                </Box>\n            }\n        </div>\n    );\n};\n\nexport default AreaLineChart;\n"],"names":["d3.format","d3.select","d3.scalePoint","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft","line","d3.line","d3.curveMonotoneX","d3.curveLinear","area","d3.area"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n    data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n    height: number,\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string;\n    colors?: string[];\n    customLegend: React.ReactNode\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol || ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n    const svgRef = useRef<SVGSVGElement | null>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [tooltipData, setTooltipData] = useState<any>(null);\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (containerWidth === 0) return; // Wait for the container width\n\n        const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n        const width = containerWidth - margin.left - margin.right;\n        const chartHeight = height - margin.top - margin.bottom;\n\n        // Clear the SVG\n        d3.select(svgRef.current).selectAll('*').remove();\n\n        const svg = d3\n            .select(svgRef.current)\n            .attr('width', containerWidth)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Define scales\n        const x = d3\n            .scalePoint()\n            .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n            .range([0, width]);\n\n        const y = d3\n            .scaleLinear()\n            .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n            .range([chartHeight, 0]);\n\n        // Limit x-axis ticks dynamically based on width\n        const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n        const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n        const xAxisGroup = svg.append('g')\n            .attr('transform', `translate(0,${chartHeight})`)\n            .call(xAxis);\n\n        xAxisGroup.selectAll(\"text\")\n            .attr(\"transform\", \"translate(0, 10)\")\n            .attr('color', '#8E8E93')\n            .style(\"text-anchor\", \"middle\");\n\n        // Y Axis\n        const yAxis = svg.append('g')\n        yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n            .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            ).tickSizeOuter(0) as any)\n            .selectAll('line')\n            .attr('stroke-dasharray', '3,3')\n            .attr('stroke', '#D3D3D4');\n\n        xAxisGroup.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Define color scale for lines\n        // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n        // Line and area generators\n        const line = (isSmooth: boolean) => d3.line<any>()\n            .x(d => x(d.month)!)\n            .y(d => y(d.value))\n            .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear);  // Conditionally smooth the line\n\n        const area = d3.area<any>()\n            .x(d => x(d.month)!)\n            .y0(chartHeight)\n            .y1(d => y(d.value));\n\n        // Iterate over each dataset to create lines and areas\n        data.forEach((dataset, i) => {\n            // const datasetColor = color(i.toString());\n\n            // Create gradient for each area\n            const gradient = svg.append('defs')\n                .append('linearGradient')\n                .attr('id', `area-gradient-${i}`)\n                .attr('x1', '0%')\n                .attr('x2', '0%')\n                .attr('y1', '0%')\n                .attr('y2', '100%');\n\n            gradient.append('stop')\n                .attr('offset', '0%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.4);\n\n            gradient.append('stop')\n                .attr('offset', '100%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.1);\n\n            // Append the area with gradient\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', `url(#area-gradient-${i})`)\n                .attr('d', area);\n\n            // Append the line with smoothness condition\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', 'none')\n                .attr('stroke', colors[i])\n                .attr('stroke-width', 2)\n                .attr('d', line(dataset.isSmooth || false));  // Use smoothness from the dataset\n\n            // Append circles for hover effect\n            {\n                dataset?.showCircle &&\n                    svg.selectAll(`circle-${i}`)\n                        .data(dataset.values)\n                        .enter()\n                        .append('circle')\n                        .attr('cx', d => x(d.month)!)\n                        .attr('cy', d => y(d.value))\n                        .attr('r', 5)\n                        .attr('fill', colors[i])\n                        .attr('stroke', '#fff')\n                        .style('cursor', 'pointer')\n                        .on('mouseover', function (event, d) {\n                            setTooltipData({\n                                x: `${event.pageX + 10}px`,\n                                y: `${event.pageY - 30}px`,\n                                content: `${dataset.name}: ${d.value}`\n                            });\n                            d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n                        })\n                        .on('mouseout', function () {\n                            setTooltipData(null);\n                            d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n                        });\n            }\n\n        });\n\n    }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <svg ref={svgRef} width=\"100%\" height={height} />\n                {\n                    customLegend &&\n                    customLegend\n\n                }\n            </div>\n            {tooltipData &&\n                <Box sx={{\n                    position: 'absolute',\n                    left: tooltipData.x,\n                    top: tooltipData.y,\n                    pointerEvents: 'none',\n                    backgroundColor: '#2EB273',\n                    zIndex: '99999',\n                    border: 'none',\n                    borderRadius: '3px',\n                    transform: 'translate(-50%, -100%)',\n                    padding: '2px 6px 2px 6px',\n                    gap: '10px'\n                }}>\n                    <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n                        {tooltipData.content}\n                    </span>\n                </Box>\n            }\n        </div>\n    );\n};\n\nexport { AreaLineChart };\nexport default AreaLineChart;\n"],"names":["d3.format","d3.select","d3.scalePoint","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft","line","d3.line","d3.curveMonotoneX","d3.curveLinear","area","d3.area"],"mappings":"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"}

package/dist/components/charts/areaLinerChart/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../node_modules/d3-scale/src/linear/index.js"),a=require("../../../node_modules/d3-array/src/max/index.js"),n=require("../../../node_modules/@mui/material/Box/Box/index.js"),o=require("../../../node_modules/d3-selection/src/select/index.js"),s=require("../../../node_modules/d3-scale/src/band/index.js"),l=require("../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../node_modules/d3-shape/src/area/index.js"),d=require("../../../node_modules/d3-shape/src/line/index.js"),u=require("../../../node_modules/d3-format/src/defaultLocale/index.js"),c=require("../../../node_modules/d3-shape/src/curve/monotone/index.js"),p=require("../../../node_modules/d3-shape/src/curve/linear/index.js");exports.default=({data:f,height:m=400,customLabelFormatter:x,yAxisLabelType:h="inValue",currency:v,colors:g,customLegend:y})=>{const j=t.useRef(null),k=t.useRef(null),[q,_]=t.useState(0),[b,$]=t.useState(null);return t.useEffect(()=>{const e=k.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;_(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===q)return;const e=q-40-30,t=m-20-30;o.default(j.current).selectAll("*").remove();const n=o.default(j.current).attr("width",q).attr("height",m).append("g").attr("transform","translate(40,20)"),y=s.point().domain(f[0].values.map(e=>e.month)).range([0,e]),k=r.default().domain([0,a.default(f,e=>a.default(e.values,e=>e.value))]).range([t,0]),_=Math.floor(e/80),b=l.axisBottom(y).ticks(_),E=n.append("g").attr("transform",`translate(0,${t})`).call(b);E.selectAll("text").attr("transform","translate(0, 10)").attr("color","#8E8E93").style("text-anchor","middle");const w=n.append("g");w.append("g").attr("color","#8E8E93").attr("transform","translate(-10,0)").call(l.axisLeft(k).tickSize(-e).tickFormat(e=>{return x?x(e):(t=e,r=v,"inPercent"===(a=h)?`${u.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${u.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0)).selectAll("line").attr("stroke-dasharray","3,3").attr("stroke","#D3D3D4"),E.selectAll(".tick line").remove(),w.select(".domain").attr("stroke","none"),E.select(".domain").attr("stroke","none");const S=i.default().x(e=>y(e.month)).y0(t).y1(e=>k(e.value));f.forEach((e,t)=>{const r=n.append("defs").append("linearGradient").attr("id",`area-gradient-${t}`).attr("x1","0%").attr("x2","0%").attr("y1","0%").attr("y2","100%");var a;r.append("stop").attr("offset","0%").attr("stop-color",g[t]).attr("stop-opacity",.4),r.append("stop").attr("offset","100%").attr("stop-color",g[t]).attr("stop-opacity",.1),n.append("path").datum(e.values).attr("fill",`url(#area-gradient-${t})`).attr("d",S),n.append("path").datum(e.values).attr("fill","none").attr("stroke",g[t]).attr("stroke-width",2).attr("d",(a=e.isSmooth||!1,d.default().x(e=>y(e.month)).y(e=>k(e.value)).curve(a?c.monotoneX:p.default))),(null==e?void 0:e.showCircle)&&n.selectAll(`circle-${t}`).data(e.values).enter().append("circle").attr("cx",e=>y(e.month)).attr("cy",e=>k(e.value)).attr("r",5).attr("fill",g[t]).attr("stroke","#fff").style("cursor","pointer").on("mouseover",function(t,r){$({x:`${t.pageX+10}px`,y:t.pageY-30+"px",content:`${e.name}: ${r.value}`}),o.default(this).transition().attr("r",7).attr("fill","#ff4500")}).on("mouseout",function(){$(null),o.default(this).transition().attr("r",5).attr("fill",g[t])})})},[f,q,m,x,h,v,g,y]),/* @__PURE__ */e.jsxs("div",{ref:k,style:{width:"100%",height:"100%"},children:[
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../node_modules/d3-scale/src/linear/index.js"),a=require("../../../node_modules/d3-array/src/max/index.js"),n=require("../../../node_modules/@mui/material/Box/Box/index.js"),o=require("../../../node_modules/d3-selection/src/select/index.js"),s=require("../../../node_modules/d3-scale/src/band/index.js"),l=require("../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../node_modules/d3-shape/src/area/index.js"),d=require("../../../node_modules/d3-shape/src/line/index.js"),u=require("../../../node_modules/d3-format/src/defaultLocale/index.js"),c=require("../../../node_modules/d3-shape/src/curve/monotone/index.js"),p=require("../../../node_modules/d3-shape/src/curve/linear/index.js");const f=({data:f,height:m=400,customLabelFormatter:x,yAxisLabelType:h="inValue",currency:v,colors:g,customLegend:y})=>{const j=t.useRef(null),k=t.useRef(null),[q,_]=t.useState(0),[b,$]=t.useState(null);return t.useEffect(()=>{const e=k.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;_(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===q)return;const e=q-40-30,t=m-20-30;o.default(j.current).selectAll("*").remove();const n=o.default(j.current).attr("width",q).attr("height",m).append("g").attr("transform","translate(40,20)"),y=s.point().domain(f[0].values.map(e=>e.month)).range([0,e]),k=r.default().domain([0,a.default(f,e=>a.default(e.values,e=>e.value))]).range([t,0]),_=Math.floor(e/80),b=l.axisBottom(y).ticks(_),E=n.append("g").attr("transform",`translate(0,${t})`).call(b);E.selectAll("text").attr("transform","translate(0, 10)").attr("color","#8E8E93").style("text-anchor","middle");const w=n.append("g");w.append("g").attr("color","#8E8E93").attr("transform","translate(-10,0)").call(l.axisLeft(k).tickSize(-e).tickFormat(e=>{return x?x(e):(t=e,r=v,"inPercent"===(a=h)?`${u.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${u.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0)).selectAll("line").attr("stroke-dasharray","3,3").attr("stroke","#D3D3D4"),E.selectAll(".tick line").remove(),w.select(".domain").attr("stroke","none"),E.select(".domain").attr("stroke","none");const A=i.default().x(e=>y(e.month)).y0(t).y1(e=>k(e.value));f.forEach((e,t)=>{const r=n.append("defs").append("linearGradient").attr("id",`area-gradient-${t}`).attr("x1","0%").attr("x2","0%").attr("y1","0%").attr("y2","100%");var a;r.append("stop").attr("offset","0%").attr("stop-color",g[t]).attr("stop-opacity",.4),r.append("stop").attr("offset","100%").attr("stop-color",g[t]).attr("stop-opacity",.1),n.append("path").datum(e.values).attr("fill",`url(#area-gradient-${t})`).attr("d",A),n.append("path").datum(e.values).attr("fill","none").attr("stroke",g[t]).attr("stroke-width",2).attr("d",(a=e.isSmooth||!1,d.default().x(e=>y(e.month)).y(e=>k(e.value)).curve(a?c.monotoneX:p.default))),(null==e?void 0:e.showCircle)&&n.selectAll(`circle-${t}`).data(e.values).enter().append("circle").attr("cx",e=>y(e.month)).attr("cy",e=>k(e.value)).attr("r",5).attr("fill",g[t]).attr("stroke","#fff").style("cursor","pointer").on("mouseover",function(t,r){$({x:`${t.pageX+10}px`,y:t.pageY-30+"px",content:`${e.name}: ${r.value}`}),o.default(this).transition().attr("r",7).attr("fill","#ff4500")}).on("mouseout",function(){$(null),o.default(this).transition().attr("r",5).attr("fill",g[t])})})},[f,q,m,x,h,v,g,y]),/* @__PURE__ */e.jsxs("div",{ref:k,style:{width:"100%",height:"100%"},children:[
 /* @__PURE__ */e.jsxs("div",{style:{position:"relative"},children:[
-/* @__PURE__ */e.jsx("svg",{ref:j,width:"100%",height:m}),y&&y]}),b&&/* @__PURE__ */e.jsx(n.default,{sx:{position:"absolute",left:b.x,top:b.y,pointerEvents:"none",backgroundColor:"#2EB273",zIndex:"99999",border:"none",borderRadius:"3px",transform:"translate(-50%, -100%)",padding:"2px 6px 2px 6px",gap:"10px"},children:/* @__PURE__ */e.jsx("span",{style:{fontSize:"16px",weight:"500",color:"#ffff"},children:b.content})})]})};
+/* @__PURE__ */e.jsx("svg",{ref:j,width:"100%",height:m}),y&&y]}),b&&/* @__PURE__ */e.jsx(n.default,{sx:{position:"absolute",left:b.x,top:b.y,pointerEvents:"none",backgroundColor:"#2EB273",zIndex:"99999",border:"none",borderRadius:"3px",transform:"translate(-50%, -100%)",padding:"2px 6px 2px 6px",gap:"10px"},children:/* @__PURE__ */e.jsx("span",{style:{fontSize:"16px",weight:"500",color:"#ffff"},children:b.content})})]})};exports.AreaLineChart=f,exports.default=f;
 //# sourceMappingURL=index.js.map

package/dist/components/charts/areaLinerChart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n    data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n    height: number,\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string;\n    colors?: string[];\n    customLegend: React.ReactNode\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol || ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n    const svgRef = useRef<SVGSVGElement | null>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [tooltipData, setTooltipData] = useState<any>(null);\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (containerWidth === 0) return; // Wait for the container width\n\n        const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n        const width = containerWidth - margin.left - margin.right;\n        const chartHeight = height - margin.top - margin.bottom;\n\n        // Clear the SVG\n        d3.select(svgRef.current).selectAll('*').remove();\n\n        const svg = d3\n            .select(svgRef.current)\n            .attr('width', containerWidth)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Define scales\n        const x = d3\n            .scalePoint()\n            .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n            .range([0, width]);\n\n        const y = d3\n            .scaleLinear()\n            .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n            .range([chartHeight, 0]);\n\n        // Limit x-axis ticks dynamically based on width\n        const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n        const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n        const xAxisGroup = svg.append('g')\n            .attr('transform', `translate(0,${chartHeight})`)\n            .call(xAxis);\n\n        xAxisGroup.selectAll(\"text\")\n            .attr(\"transform\", \"translate(0, 10)\")\n            .attr('color', '#8E8E93')\n            .style(\"text-anchor\", \"middle\");\n\n        // Y Axis\n        const yAxis = svg.append('g')\n        yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n            .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            ).tickSizeOuter(0) as any)\n            .selectAll('line')\n            .attr('stroke-dasharray', '3,3')\n            .attr('stroke', '#D3D3D4');\n\n        xAxisGroup.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Define color scale for lines\n        // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n        // Line and area generators\n        const line = (isSmooth: boolean) => d3.line<any>()\n            .x(d => x(d.month)!)\n            .y(d => y(d.value))\n            .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear);  // Conditionally smooth the line\n\n        const area = d3.area<any>()\n            .x(d => x(d.month)!)\n            .y0(chartHeight)\n            .y1(d => y(d.value));\n\n        // Iterate over each dataset to create lines and areas\n        data.forEach((dataset, i) => {\n            // const datasetColor = color(i.toString());\n\n            // Create gradient for each area\n            const gradient = svg.append('defs')\n                .append('linearGradient')\n                .attr('id', `area-gradient-${i}`)\n                .attr('x1', '0%')\n                .attr('x2', '0%')\n                .attr('y1', '0%')\n                .attr('y2', '100%');\n\n            gradient.append('stop')\n                .attr('offset', '0%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.4);\n\n            gradient.append('stop')\n                .attr('offset', '100%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.1);\n\n            // Append the area with gradient\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', `url(#area-gradient-${i})`)\n                .attr('d', area);\n\n            // Append the line with smoothness condition\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', 'none')\n                .attr('stroke', colors[i])\n                .attr('stroke-width', 2)\n                .attr('d', line(dataset.isSmooth || false));  // Use smoothness from the dataset\n\n            // Append circles for hover effect\n            {\n                dataset?.showCircle &&\n                    svg.selectAll(`circle-${i}`)\n                        .data(dataset.values)\n                        .enter()\n                        .append('circle')\n                        .attr('cx', d => x(d.month)!)\n                        .attr('cy', d => y(d.value))\n                        .attr('r', 5)\n                        .attr('fill', colors[i])\n                        .attr('stroke', '#fff')\n                        .style('cursor', 'pointer')\n                        .on('mouseover', function (event, d) {\n                            setTooltipData({\n                                x: `${event.pageX + 10}px`,\n                                y: `${event.pageY - 30}px`,\n                                content: `${dataset.name}: ${d.value}`\n                            });\n                            d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n                        })\n                        .on('mouseout', function () {\n                            setTooltipData(null);\n                            d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n                        });\n            }\n\n        });\n\n    }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <svg ref={svgRef} width=\"100%\" height={height} />\n                {\n                    customLegend &&\n                    customLegend\n\n                }\n            </div>\n            {tooltipData &&\n                <Box sx={{\n                    position: 'absolute',\n                    left: tooltipData.x,\n                    top: tooltipData.y,\n                    pointerEvents: 'none',\n                    backgroundColor: '#2EB273',\n                    zIndex: '99999',\n                    border: 'none',\n                    borderRadius: '3px',\n                    transform: 'translate(-50%, -100%)',\n                    padding: '2px 6px 2px 6px',\n                    gap: '10px'\n                }}>\n                    <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n                        {tooltipData.content}\n                    </span>\n                </Box>\n            }\n        </div>\n    );\n};\n\nexport default AreaLineChart;\n"],"names":["data","height","customLabelFormatter","yAxisLabelType","currency","colors","customLegend","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","tooltipData","setTooltipData","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartHeight","d3.select","selectAll","remove","svg","attr","append","x","d3.scalePoint","domain","values","map","d","month","range","y","d3.scaleLinear","d3.max","dataset","value","numTicks","Math","floor","xAxis","d3.axisBottom","ticks","xAxisGroup","call","style","yAxis","d3.axisLeft","tickSize","tickFormat","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","select","area","d3.area","y0","y1","forEach","i","gradient","isSmooth","datum","d3.line","curve","d3.curveMonotoneX","d3.curveLinear","showCircle","enter","on","event","pageX","pageY","content","name","this","transition","jsxs","ref","children","position","jsx","Box","sx","left","top","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","padding","gap","fontSize","weight","color"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n    data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n    height: number,\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string;\n    colors?: string[];\n    customLegend: React.ReactNode\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol || ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n    const svgRef = useRef<SVGSVGElement | null>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [tooltipData, setTooltipData] = useState<any>(null);\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (containerWidth === 0) return; // Wait for the container width\n\n        const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n        const width = containerWidth - margin.left - margin.right;\n        const chartHeight = height - margin.top - margin.bottom;\n\n        // Clear the SVG\n        d3.select(svgRef.current).selectAll('*').remove();\n\n        const svg = d3\n            .select(svgRef.current)\n            .attr('width', containerWidth)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Define scales\n        const x = d3\n            .scalePoint()\n            .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n            .range([0, width]);\n\n        const y = d3\n            .scaleLinear()\n            .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n            .range([chartHeight, 0]);\n\n        // Limit x-axis ticks dynamically based on width\n        const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n        const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n        const xAxisGroup = svg.append('g')\n            .attr('transform', `translate(0,${chartHeight})`)\n            .call(xAxis);\n\n        xAxisGroup.selectAll(\"text\")\n            .attr(\"transform\", \"translate(0, 10)\")\n            .attr('color', '#8E8E93')\n            .style(\"text-anchor\", \"middle\");\n\n        // Y Axis\n        const yAxis = svg.append('g')\n        yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n            .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            ).tickSizeOuter(0) as any)\n            .selectAll('line')\n            .attr('stroke-dasharray', '3,3')\n            .attr('stroke', '#D3D3D4');\n\n        xAxisGroup.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Define color scale for lines\n        // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n        // Line and area generators\n        const line = (isSmooth: boolean) => d3.line<any>()\n            .x(d => x(d.month)!)\n            .y(d => y(d.value))\n            .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear);  // Conditionally smooth the line\n\n        const area = d3.area<any>()\n            .x(d => x(d.month)!)\n            .y0(chartHeight)\n            .y1(d => y(d.value));\n\n        // Iterate over each dataset to create lines and areas\n        data.forEach((dataset, i) => {\n            // const datasetColor = color(i.toString());\n\n            // Create gradient for each area\n            const gradient = svg.append('defs')\n                .append('linearGradient')\n                .attr('id', `area-gradient-${i}`)\n                .attr('x1', '0%')\n                .attr('x2', '0%')\n                .attr('y1', '0%')\n                .attr('y2', '100%');\n\n            gradient.append('stop')\n                .attr('offset', '0%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.4);\n\n            gradient.append('stop')\n                .attr('offset', '100%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.1);\n\n            // Append the area with gradient\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', `url(#area-gradient-${i})`)\n                .attr('d', area);\n\n            // Append the line with smoothness condition\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', 'none')\n                .attr('stroke', colors[i])\n                .attr('stroke-width', 2)\n                .attr('d', line(dataset.isSmooth || false));  // Use smoothness from the dataset\n\n            // Append circles for hover effect\n            {\n                dataset?.showCircle &&\n                    svg.selectAll(`circle-${i}`)\n                        .data(dataset.values)\n                        .enter()\n                        .append('circle')\n                        .attr('cx', d => x(d.month)!)\n                        .attr('cy', d => y(d.value))\n                        .attr('r', 5)\n                        .attr('fill', colors[i])\n                        .attr('stroke', '#fff')\n                        .style('cursor', 'pointer')\n                        .on('mouseover', function (event, d) {\n                            setTooltipData({\n                                x: `${event.pageX + 10}px`,\n                                y: `${event.pageY - 30}px`,\n                                content: `${dataset.name}: ${d.value}`\n                            });\n                            d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n                        })\n                        .on('mouseout', function () {\n                            setTooltipData(null);\n                            d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n                        });\n            }\n\n        });\n\n    }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <svg ref={svgRef} width=\"100%\" height={height} />\n                {\n                    customLegend &&\n                    customLegend\n\n                }\n            </div>\n            {tooltipData &&\n                <Box sx={{\n                    position: 'absolute',\n                    left: tooltipData.x,\n                    top: tooltipData.y,\n                    pointerEvents: 'none',\n                    backgroundColor: '#2EB273',\n                    zIndex: '99999',\n                    border: 'none',\n                    borderRadius: '3px',\n                    transform: 'translate(-50%, -100%)',\n                    padding: '2px 6px 2px 6px',\n                    gap: '10px'\n                }}>\n                    <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n                        {tooltipData.content}\n                    </span>\n                </Box>\n            }\n        </div>\n    );\n};\n\nexport { AreaLineChart };\nexport default AreaLineChart;\n"],"names":["AreaLineChart","data","height","customLabelFormatter","yAxisLabelType","currency","colors","customLegend","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","tooltipData","setTooltipData","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartHeight","d3.select","selectAll","remove","svg","attr","append","x","d3.scalePoint","domain","values","map","d","month","range","y","d3.scaleLinear","d3.max","dataset","value","numTicks","Math","floor","xAxis","d3.axisBottom","ticks","xAxisGroup","call","style","yAxis","d3.axisLeft","tickSize","tickFormat","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","select","area","d3.area","y0","y1","forEach","i","gradient","isSmooth","datum","d3.line","curve","d3.curveMonotoneX","d3.curveLinear","showCircle","enter","on","event","pageX","pageY","content","name","this","transition","jsxs","ref","children","position","jsx","Box","sx","left","top","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","padding","gap","fontSize","weight","color"],"mappings":"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"}

package/dist/components/charts/areaLinerChart.d.ts

@@ -0,0 +1,19 @@
+interface IChartProps {
+    data: {
+        name: string;
+        values: {
+            month: string;
+            value: number;
+        }[];
+        isSmooth?: boolean;
+    }[];
+    height: number;
+    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';
+    customLabelFormatter?: (value: number) => string;
+    currency?: string;
+    colors?: string[];
+    customLegend: React.ReactNode;
+}
+declare const AreaLineChart: ({ data, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend }: IChartProps) => import("react/jsx-runtime").JSX.Element;
+export { AreaLineChart };
+export default AreaLineChart;

package/dist/components/charts/bar-chart/bar-chart/index.esm.js

@@ -80,6 +80,7 @@ const BarChart = ({
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width, height }) });
 };
 export {
+  BarChart,
   BarChart as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/charts/bar-chart/bar-chart/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/bar-chart/bar-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface BarChartProps {\n  data: DataPoint[];\n  numOfLines?: number;\n  width?: number;\n  height?: number;\n  line?: boolean;\n}\n\nconst formatNumber = (num: number) => {\n  if (num >= 1e9) return (num / 1e9).toFixed(1) + \"B\";\n  if (num >= 1e6) return (num / 1e6).toFixed(1) + \"M\";\n  if (num >= 1e3) return (num / 1e3).toFixed(1) + \"K\";\n  return num;\n};\n\nconst BarChart: React.FC<BarChartProps> = ({\n  data,\n  numOfLines = 5,\n  width = 500,\n  height = 300,\n  line = false,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const maxValue = useMemo(() => {\n    return Math.max(...data.map((d) => d.value));\n  }, [data]);\n\n  const yAxisMaxValue = useMemo(() => {\n    return maxValue * 1.25;\n  }, [maxValue]);\n\n  const yAxisTicks = useMemo(() => {\n    const ticks = [];\n    const interval = yAxisMaxValue / numOfLines;\n    for (let i = 0; i <= numOfLines; i++) {\n      ticks.push(interval * i);\n    }\n    return ticks;\n  }, [yAxisMaxValue, numOfLines]);\n\n  useEffect(() => {\n    if (!svgRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = { top: 20, right: 20, bottom: 70, left: 40 };\n    const barWidth = width - margin.left - margin.right;\n    const barHeight = height - margin.top - margin.bottom;\n\n    const mousemove = (event: MouseEvent, d: DataPoint) => {\n      let xPosition = event.offsetX + margin.left - 25;\n      const yPosition = event.offsetY + margin.top - 40;\n      const tooltipWidth = tooltip.node()?.getBoundingClientRect()?.width;\n      const rightOffset = tooltipWidth ? xPosition + tooltipWidth : xPosition;\n      if (rightOffset > width) {\n        xPosition = Math.floor(\n          tooltipWidth ? xPosition - tooltipWidth - 20 : xPosition - 20,\n        );\n      }\n\n      const text = `${d.label} - ${d.value}`;\n      tooltip\n        .attr(\"x\", xPosition)\n        .attr(\"y\", yPosition)\n        .style(\"opacity\", 9)\n        .style(\"height\", text.length >= 16 ? 50 : 35);\n\n      tooltipText.html(text);\n    };\n\n    const mouseleave = () => {\n      tooltip.style(\"opacity\", 0);\n    };\n\n    const x = d3\n      .scaleBand()\n      .domain(data.map((d) => d.label))\n      .range([0, barWidth])\n      .padding(0.1);\n\n    const y = d3.scaleLinear().domain([0, yAxisMaxValue]).range([barHeight, 0]);\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    if (line) {\n      yAxisTicks.slice(1).forEach((tick) => {\n        chart\n          .append(\"line\")\n          .attr(\"class\", \"dotted-line\")\n          .attr(\"x1\", 0)\n          .attr(\"y1\", y(tick))\n          .attr(\"x2\", barWidth)\n          .attr(\"y2\", y(tick))\n          .style(\"stroke\", \"gray\")\n          .style(\"stroke-dasharray\", \"3,3\")\n          .style(\"opacity\", 1);\n      });\n    }\n\n    chart\n      .selectAll(\".bar\")\n      .data(data)\n      .enter()\n      .append(\"rect\")\n      .attr(\"class\", \"bar\")\n      //@ts-expect-error not applicable\n      .attr(\"x\", (d: any) => x(d.label))\n      .attr(\"y\", (d: any) => y(d.value))\n      .attr(\"width\", x.bandwidth())\n      .attr(\"height\", (d: any) => barHeight - y(d.value))\n      .style(\"fill\", \"#357AF6\")\n      .style(\"opacity\", \"1\")\n      .on(\"mousemove\", mousemove)\n      .on(\"mouseleave\", mouseleave);\n\n    const xAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"x-axis\")\n      .attr(\"transform\", `translate(0, ${barHeight})`)\n      .call(d3.axisBottom(x) as any);\n\n    xAxis.selectAll(\".tick line\").remove();\n\n    const yAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"y-axis\")\n      .call(\n        d3\n          .axisLeft(y)\n          .tickValues(yAxisTicks)\n          //@ts-expect-error not applicable\n          .tickFormat((d: any) => {\n            return formatNumber(d);\n          })\n          .tickSizeOuter(0) as any,\n      );\n\n    yAxis.selectAll(\".tick line\").remove();\n\n    const tooltip = svg\n      .append(\"foreignObject\")\n      .attr(\"class\", \"tooltip\")\n      .attr(\"width\", 120)\n      .attr(\"height\", 20)\n      .style(\"opacity\", 0)\n      .style(\"position\", \"absolute\")\n      .style(\"background-color\", \"white\")\n      .style(\"border\", \"none\")\n      .style(\"box-shadow\", \"0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)\")\n      .style(\"border-radius\", \"0.313rem\")\n      .style(\"padding\", \"0.625rem\")\n      .style(\"font-size\", \"0.75rem\");\n\n    const tooltipText = tooltip\n      .append(\"xhtml:div\")\n      .style(\"font-size\", \"0.75rem\")\n      .style(\"color\", \"black\");\n  }, [data, height, width, line, yAxisMaxValue, yAxisTicks]);\n\n  return (\n    <>\n      <svg ref={svgRef} width={width} height={height}></svg>\n    </>\n  );\n};\n\nexport default BarChart;\n"],"names":["d3.select","d3.scaleBand","d3.scaleLinear","d3.axisBottom","d3.axisLeft"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/bar-chart/bar-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface BarChartProps {\n  data: DataPoint[];\n  numOfLines?: number;\n  width?: number;\n  height?: number;\n  line?: boolean;\n}\n\nconst formatNumber = (num: number) => {\n  if (num >= 1e9) return (num / 1e9).toFixed(1) + \"B\";\n  if (num >= 1e6) return (num / 1e6).toFixed(1) + \"M\";\n  if (num >= 1e3) return (num / 1e3).toFixed(1) + \"K\";\n  return num;\n};\n\nconst BarChart: React.FC<BarChartProps> = ({\n  data,\n  numOfLines = 5,\n  width = 500,\n  height = 300,\n  line = false,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const maxValue = useMemo(() => {\n    return Math.max(...data.map((d) => d.value));\n  }, [data]);\n\n  const yAxisMaxValue = useMemo(() => {\n    return maxValue * 1.25;\n  }, [maxValue]);\n\n  const yAxisTicks = useMemo(() => {\n    const ticks = [];\n    const interval = yAxisMaxValue / numOfLines;\n    for (let i = 0; i <= numOfLines; i++) {\n      ticks.push(interval * i);\n    }\n    return ticks;\n  }, [yAxisMaxValue, numOfLines]);\n\n  useEffect(() => {\n    if (!svgRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = { top: 20, right: 20, bottom: 70, left: 40 };\n    const barWidth = width - margin.left - margin.right;\n    const barHeight = height - margin.top - margin.bottom;\n\n    const mousemove = (event: MouseEvent, d: DataPoint) => {\n      let xPosition = event.offsetX + margin.left - 25;\n      const yPosition = event.offsetY + margin.top - 40;\n      const tooltipWidth = tooltip.node()?.getBoundingClientRect()?.width;\n      const rightOffset = tooltipWidth ? xPosition + tooltipWidth : xPosition;\n      if (rightOffset > width) {\n        xPosition = Math.floor(\n          tooltipWidth ? xPosition - tooltipWidth - 20 : xPosition - 20,\n        );\n      }\n\n      const text = `${d.label} - ${d.value}`;\n      tooltip\n        .attr(\"x\", xPosition)\n        .attr(\"y\", yPosition)\n        .style(\"opacity\", 9)\n        .style(\"height\", text.length >= 16 ? 50 : 35);\n\n      tooltipText.html(text);\n    };\n\n    const mouseleave = () => {\n      tooltip.style(\"opacity\", 0);\n    };\n\n    const x = d3\n      .scaleBand()\n      .domain(data.map((d) => d.label))\n      .range([0, barWidth])\n      .padding(0.1);\n\n    const y = d3.scaleLinear().domain([0, yAxisMaxValue]).range([barHeight, 0]);\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    if (line) {\n      yAxisTicks.slice(1).forEach((tick) => {\n        chart\n          .append(\"line\")\n          .attr(\"class\", \"dotted-line\")\n          .attr(\"x1\", 0)\n          .attr(\"y1\", y(tick))\n          .attr(\"x2\", barWidth)\n          .attr(\"y2\", y(tick))\n          .style(\"stroke\", \"gray\")\n          .style(\"stroke-dasharray\", \"3,3\")\n          .style(\"opacity\", 1);\n      });\n    }\n\n    chart\n      .selectAll(\".bar\")\n      .data(data)\n      .enter()\n      .append(\"rect\")\n      .attr(\"class\", \"bar\")\n      //@ts-expect-error not applicable\n      .attr(\"x\", (d: any) => x(d.label))\n      .attr(\"y\", (d: any) => y(d.value))\n      .attr(\"width\", x.bandwidth())\n      .attr(\"height\", (d: any) => barHeight - y(d.value))\n      .style(\"fill\", \"#357AF6\")\n      .style(\"opacity\", \"1\")\n      .on(\"mousemove\", mousemove)\n      .on(\"mouseleave\", mouseleave);\n\n    const xAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"x-axis\")\n      .attr(\"transform\", `translate(0, ${barHeight})`)\n      .call(d3.axisBottom(x) as any);\n\n    xAxis.selectAll(\".tick line\").remove();\n\n    const yAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"y-axis\")\n      .call(\n        d3\n          .axisLeft(y)\n          .tickValues(yAxisTicks)\n          //@ts-expect-error not applicable\n          .tickFormat((d: any) => {\n            return formatNumber(d);\n          })\n          .tickSizeOuter(0) as any,\n      );\n\n    yAxis.selectAll(\".tick line\").remove();\n\n    const tooltip = svg\n      .append(\"foreignObject\")\n      .attr(\"class\", \"tooltip\")\n      .attr(\"width\", 120)\n      .attr(\"height\", 20)\n      .style(\"opacity\", 0)\n      .style(\"position\", \"absolute\")\n      .style(\"background-color\", \"white\")\n      .style(\"border\", \"none\")\n      .style(\"box-shadow\", \"0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)\")\n      .style(\"border-radius\", \"0.313rem\")\n      .style(\"padding\", \"0.625rem\")\n      .style(\"font-size\", \"0.75rem\");\n\n    const tooltipText = tooltip\n      .append(\"xhtml:div\")\n      .style(\"font-size\", \"0.75rem\")\n      .style(\"color\", \"black\");\n  }, [data, height, width, line, yAxisMaxValue, yAxisTicks]);\n\n  return (\n    <>\n      <svg ref={svgRef} width={width} height={height}></svg>\n    </>\n  );\n};\n\nexport { BarChart };\nexport default BarChart;\n"],"names":["d3.select","d3.scaleBand","d3.scaleLinear","d3.axisBottom","d3.axisLeft"],"mappings":";;;;;;AAgBA,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,OAAO,IAAK,SAAQ,MAAM,KAAK,QAAQ,CAAC,IAAI;AAChD,MAAI,OAAO,IAAK,SAAQ,MAAM,KAAK,QAAQ,CAAC,IAAI;AAChD,MAAI,OAAO,IAAK,SAAQ,MAAM,KAAK,QAAQ,CAAC,IAAI;AAChD,SAAO;AACT;AAEA,MAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AACT,MAAM;AACJ,QAAM,SAAS,OAAsB,IAAI;AAEzC,QAAM,WAAW,QAAQ,MAAM;AAC7B,WAAO,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAAA,EAC7C,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,gBAAgB,QAAQ,MAAM;AAClC,WAAO,WAAW;AAAA,EACpB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,QAAQ,CAAA;AACd,UAAM,WAAW,gBAAgB;AACjC,aAAS,IAAI,GAAG,KAAK,YAAY,KAAK;AACpC,YAAM,KAAK,WAAW,CAAC;AAAA,IACzB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,UAAU,CAAC;AAE9B,YAAU,MAAM;AACd,QAAI,CAAC,OAAO,QAAS;AAErB,UAAM,MAAMA,OAAU,OAAO,OAAO;AAEpC,QAAI,UAAU,GAAG,EAAE,OAAA;AAEnB,UAAM,SAAS,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAA;AACvD,UAAM,WAAW,QAAQ,OAAO,OAAO,OAAO;AAC9C,UAAM,YAAY,SAAS,OAAO,MAAM,OAAO;AAE/C,UAAM,YAAY,CAAC,OAAmB,MAAiB;;AACrD,UAAI,YAAY,MAAM,UAAU,OAAO,OAAO;AAC9C,YAAM,YAAY,MAAM,UAAU,OAAO,MAAM;AAC/C,YAAM,gBAAe,mBAAQ,KAAA,MAAR,mBAAgB,4BAAhB,mBAAyC;AAC9D,YAAM,cAAc,eAAe,YAAY,eAAe;AAC9D,UAAI,cAAc,OAAO;AACvB,oBAAY,KAAK;AAAA,UACf,eAAe,YAAY,eAAe,KAAK,YAAY;AAAA,QAAA;AAAA,MAE/D;AAEA,YAAM,OAAO,GAAG,EAAE,KAAK,MAAM,EAAE,KAAK;AACpC,cACG,KAAK,KAAK,SAAS,EACnB,KAAK,KAAK,SAAS,EACnB,MAAM,WAAW,CAAC,EAClB,MAAM,UAAU,KAAK,UAAU,KAAK,KAAK,EAAE;AAE9C,kBAAY,KAAK,IAAI;AAAA,IACvB;AAEA,UAAM,aAAa,MAAM;AACvB,cAAQ,MAAM,WAAW,CAAC;AAAA,IAC5B;AAEA,UAAM,IAAIC,OAEP,OAAO,KAAK,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAC/B,MAAM,CAAC,GAAG,QAAQ,CAAC,EACnB,QAAQ,GAAG;AAEd,UAAM,IAAIC,SAAiB,OAAO,CAAC,GAAG,aAAa,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;AAE1E,UAAM,QAAQ,IACX,OAAO,GAAG,EACV,KAAK,aAAa,aAAa,OAAO,IAAI,IAAI,OAAO,GAAG,GAAG;AAE9D,QAAI,MAAM;AACR,iBAAW,MAAM,CAAC,EAAE,QAAQ,CAAC,SAAS;AACpC,cACG,OAAO,MAAM,EACb,KAAK,SAAS,aAAa,EAC3B,KAAK,MAAM,CAAC,EACZ,KAAK,MAAM,EAAE,IAAI,CAAC,EAClB,KAAK,MAAM,QAAQ,EACnB,KAAK,MAAM,EAAE,IAAI,CAAC,EAClB,MAAM,UAAU,MAAM,EACtB,MAAM,oBAAoB,KAAK,EAC/B,MAAM,WAAW,CAAC;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,UACG,UAAU,MAAM,EAChB,KAAK,IAAI,EACT,MAAA,EACA,OAAO,MAAM,EACb,KAAK,SAAS,KAAK,EAEnB,KAAK,KAAK,CAAC,MAAW,EAAE,EAAE,KAAK,CAAC,EAChC,KAAK,KAAK,CAAC,MAAW,EAAE,EAAE,KAAK,CAAC,EAChC,KAAK,SAAS,EAAE,UAAA,CAAW,EAC3B,KAAK,UAAU,CAAC,MAAW,YAAY,EAAE,EAAE,KAAK,CAAC,EACjD,MAAM,QAAQ,SAAS,EACvB,MAAM,WAAW,GAAG,EACpB,GAAG,aAAa,SAAS,EACzB,GAAG,cAAc,UAAU;AAE9B,UAAM,QAAQ,MACX,OAAO,GAAG,EACV,KAAK,SAAS,QAAQ,EACtB,KAAK,aAAa,gBAAgB,SAAS,GAAG,EAC9C,KAAKC,WAAc,CAAC,CAAQ;AAE/B,UAAM,UAAU,YAAY,EAAE,OAAA;AAE9B,UAAM,QAAQ,MACX,OAAO,GAAG,EACV,KAAK,SAAS,QAAQ,EACtB;AAAA,MACCC,SACY,CAAC,EACV,WAAW,UAAU,EAErB,WAAW,CAAC,MAAW;AACtB,eAAO,aAAa,CAAC;AAAA,MACvB,CAAC,EACA,cAAc,CAAC;AAAA,IAAA;AAGtB,UAAM,UAAU,YAAY,EAAE,OAAA;AAE9B,UAAM,UAAU,IACb,OAAO,eAAe,EACtB,KAAK,SAAS,SAAS,EACvB,KAAK,SAAS,GAAG,EACjB,KAAK,UAAU,EAAE,EACjB,MAAM,WAAW,CAAC,EAClB,MAAM,YAAY,UAAU,EAC5B,MAAM,oBAAoB,OAAO,EACjC,MAAM,UAAU,MAAM,EACtB,MAAM,cAAc,6CAA6C,EACjE,MAAM,iBAAiB,UAAU,EACjC,MAAM,WAAW,UAAU,EAC3B,MAAM,aAAa,SAAS;AAE/B,UAAM,cAAc,QACjB,OAAO,WAAW,EAClB,MAAM,aAAa,SAAS,EAC5B,MAAM,SAAS,OAAO;AAAA,EAC3B,GAAG,CAAC,MAAM,QAAQ,OAAO,MAAM,eAAe,UAAU,CAAC;AAEzD,yCAEI,UAAA,oBAAC,OAAA,EAAI,KAAK,QAAQ,OAAc,QAAgB,EAAA,CAClD;AAEJ;"}

package/dist/components/charts/bar-chart/bar-chart/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),a=require("../../../../node_modules/d3-scale/src/linear/index.js"),s=require("../../../../node_modules/d3-selection/src/select/index.js"),l=require("../../../../node_modules/d3-axis/src/axis/index.js");exports.default=({data:o,numOfLines:i=5,width:n=500,height:d=300,line:c=!1})=>{const u=t.useRef(null),m=t.useMemo(()=>Math.max(...o.map(e=>e.value)),[o]),y=t.useMemo(()=>1.25*m,[m]),p=t.useMemo(()=>{const e=[],t=y/i;for(let r=0;r<=i;r++)e.push(t*r);return e},[y,i]);return t.useEffect(()=>{if(!u.current)return;const e=s.default(u.current);e.selectAll("*").remove();const t=n-40-20,i=d-20-70,m=r.default().domain(o.map(e=>e.label)).range([0,t]).padding(.1),h=a.default().domain([0,y]).range([i,0]),x=e.append("g").attr("transform","translate(40,20)");c&&p.slice(1).forEach(e=>{x.append("line").attr("class","dotted-line").attr("x1",0).attr("y1",h(e)).attr("x2",t).attr("y2",h(e)).style("stroke","gray").style("stroke-dasharray","3,3").style("opacity",1)}),x.selectAll(".bar").data(o).enter().append("rect").attr("class","bar").attr("x",e=>m(e.label)).attr("y",e=>h(e.value)).attr("width",m.bandwidth()).attr("height",e=>i-h(e.value)).style("fill","#357AF6").style("opacity","1").on("mousemove",(e,t)=>{var r,a;let s=e.offsetX+40-25;const l=e.offsetY+20-40,o=null==(a=null==(r=f.node())?void 0:r.getBoundingClientRect())?void 0:a.width;(o?s+o:s)>n&&(s=Math.floor(o?s-o-20:s-20));const i=`${t.label} - ${t.value}`;f.attr("x",s).attr("y",l).style("opacity",9).style("height",i.length>=16?50:35),g.html(i)}).on("mouseleave",()=>{f.style("opacity",0)}),x.append("g").attr("class","x-axis").attr("transform",`translate(0, ${i})`).call(l.axisBottom(m)).selectAll(".tick line").remove(),x.append("g").attr("class","y-axis").call(l.axisLeft(h).tickValues(p).tickFormat(e=>{return(t=e)>=1e9?(t/1e9).toFixed(1)+"B":t>=1e6?(t/1e6).toFixed(1)+"M":t>=1e3?(t/1e3).toFixed(1)+"K":t;var t}).tickSizeOuter(0)).selectAll(".tick line").remove();const f=e.append("foreignObject").attr("class","tooltip").attr("width",120).attr("height",20).style("opacity",0).style("position","absolute").style("background-color","white").style("border","none").style("box-shadow","0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)").style("border-radius","0.313rem").style("padding","0.625rem").style("font-size","0.75rem"),g=f.append("xhtml:div").style("font-size","0.75rem").style("color","black")},[o,d,n,c,y,p]),/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsx("svg",{ref:u,width:n,height:d})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),a=require("../../../../node_modules/d3-scale/src/linear/index.js"),s=require("../../../../node_modules/d3-selection/src/select/index.js"),l=require("../../../../node_modules/d3-axis/src/axis/index.js");const o=({data:o,numOfLines:i=5,width:n=500,height:d=300,line:c=!1})=>{const u=t.useRef(null),m=t.useMemo(()=>Math.max(...o.map(e=>e.value)),[o]),y=t.useMemo(()=>1.25*m,[m]),p=t.useMemo(()=>{const e=[],t=y/i;for(let r=0;r<=i;r++)e.push(t*r);return e},[y,i]);return t.useEffect(()=>{if(!u.current)return;const e=s.default(u.current);e.selectAll("*").remove();const t=n-40-20,i=d-20-70,m=r.default().domain(o.map(e=>e.label)).range([0,t]).padding(.1),h=a.default().domain([0,y]).range([i,0]),x=e.append("g").attr("transform","translate(40,20)");c&&p.slice(1).forEach(e=>{x.append("line").attr("class","dotted-line").attr("x1",0).attr("y1",h(e)).attr("x2",t).attr("y2",h(e)).style("stroke","gray").style("stroke-dasharray","3,3").style("opacity",1)}),x.selectAll(".bar").data(o).enter().append("rect").attr("class","bar").attr("x",e=>m(e.label)).attr("y",e=>h(e.value)).attr("width",m.bandwidth()).attr("height",e=>i-h(e.value)).style("fill","#357AF6").style("opacity","1").on("mousemove",(e,t)=>{var r,a;let s=e.offsetX+40-25;const l=e.offsetY+20-40,o=null==(a=null==(r=f.node())?void 0:r.getBoundingClientRect())?void 0:a.width;(o?s+o:s)>n&&(s=Math.floor(o?s-o-20:s-20));const i=`${t.label} - ${t.value}`;f.attr("x",s).attr("y",l).style("opacity",9).style("height",i.length>=16?50:35),g.html(i)}).on("mouseleave",()=>{f.style("opacity",0)}),x.append("g").attr("class","x-axis").attr("transform",`translate(0, ${i})`).call(l.axisBottom(m)).selectAll(".tick line").remove(),x.append("g").attr("class","y-axis").call(l.axisLeft(h).tickValues(p).tickFormat(e=>{return(t=e)>=1e9?(t/1e9).toFixed(1)+"B":t>=1e6?(t/1e6).toFixed(1)+"M":t>=1e3?(t/1e3).toFixed(1)+"K":t;var t}).tickSizeOuter(0)).selectAll(".tick line").remove();const f=e.append("foreignObject").attr("class","tooltip").attr("width",120).attr("height",20).style("opacity",0).style("position","absolute").style("background-color","white").style("border","none").style("box-shadow","0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)").style("border-radius","0.313rem").style("padding","0.625rem").style("font-size","0.75rem"),g=f.append("xhtml:div").style("font-size","0.75rem").style("color","black")},[o,d,n,c,y,p]),/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsx("svg",{ref:u,width:n,height:d})})};exports.BarChart=o,exports.default=o;
 //# sourceMappingURL=index.js.map

package/dist/components/charts/bar-chart/bar-chart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/bar-chart/bar-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface BarChartProps {\n  data: DataPoint[];\n  numOfLines?: number;\n  width?: number;\n  height?: number;\n  line?: boolean;\n}\n\nconst formatNumber = (num: number) => {\n  if (num >= 1e9) return (num / 1e9).toFixed(1) + \"B\";\n  if (num >= 1e6) return (num / 1e6).toFixed(1) + \"M\";\n  if (num >= 1e3) return (num / 1e3).toFixed(1) + \"K\";\n  return num;\n};\n\nconst BarChart: React.FC<BarChartProps> = ({\n  data,\n  numOfLines = 5,\n  width = 500,\n  height = 300,\n  line = false,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const maxValue = useMemo(() => {\n    return Math.max(...data.map((d) => d.value));\n  }, [data]);\n\n  const yAxisMaxValue = useMemo(() => {\n    return maxValue * 1.25;\n  }, [maxValue]);\n\n  const yAxisTicks = useMemo(() => {\n    const ticks = [];\n    const interval = yAxisMaxValue / numOfLines;\n    for (let i = 0; i <= numOfLines; i++) {\n      ticks.push(interval * i);\n    }\n    return ticks;\n  }, [yAxisMaxValue, numOfLines]);\n\n  useEffect(() => {\n    if (!svgRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = { top: 20, right: 20, bottom: 70, left: 40 };\n    const barWidth = width - margin.left - margin.right;\n    const barHeight = height - margin.top - margin.bottom;\n\n    const mousemove = (event: MouseEvent, d: DataPoint) => {\n      let xPosition = event.offsetX + margin.left - 25;\n      const yPosition = event.offsetY + margin.top - 40;\n      const tooltipWidth = tooltip.node()?.getBoundingClientRect()?.width;\n      const rightOffset = tooltipWidth ? xPosition + tooltipWidth : xPosition;\n      if (rightOffset > width) {\n        xPosition = Math.floor(\n          tooltipWidth ? xPosition - tooltipWidth - 20 : xPosition - 20,\n        );\n      }\n\n      const text = `${d.label} - ${d.value}`;\n      tooltip\n        .attr(\"x\", xPosition)\n        .attr(\"y\", yPosition)\n        .style(\"opacity\", 9)\n        .style(\"height\", text.length >= 16 ? 50 : 35);\n\n      tooltipText.html(text);\n    };\n\n    const mouseleave = () => {\n      tooltip.style(\"opacity\", 0);\n    };\n\n    const x = d3\n      .scaleBand()\n      .domain(data.map((d) => d.label))\n      .range([0, barWidth])\n      .padding(0.1);\n\n    const y = d3.scaleLinear().domain([0, yAxisMaxValue]).range([barHeight, 0]);\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    if (line) {\n      yAxisTicks.slice(1).forEach((tick) => {\n        chart\n          .append(\"line\")\n          .attr(\"class\", \"dotted-line\")\n          .attr(\"x1\", 0)\n          .attr(\"y1\", y(tick))\n          .attr(\"x2\", barWidth)\n          .attr(\"y2\", y(tick))\n          .style(\"stroke\", \"gray\")\n          .style(\"stroke-dasharray\", \"3,3\")\n          .style(\"opacity\", 1);\n      });\n    }\n\n    chart\n      .selectAll(\".bar\")\n      .data(data)\n      .enter()\n      .append(\"rect\")\n      .attr(\"class\", \"bar\")\n      //@ts-expect-error not applicable\n      .attr(\"x\", (d: any) => x(d.label))\n      .attr(\"y\", (d: any) => y(d.value))\n      .attr(\"width\", x.bandwidth())\n      .attr(\"height\", (d: any) => barHeight - y(d.value))\n      .style(\"fill\", \"#357AF6\")\n      .style(\"opacity\", \"1\")\n      .on(\"mousemove\", mousemove)\n      .on(\"mouseleave\", mouseleave);\n\n    const xAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"x-axis\")\n      .attr(\"transform\", `translate(0, ${barHeight})`)\n      .call(d3.axisBottom(x) as any);\n\n    xAxis.selectAll(\".tick line\").remove();\n\n    const yAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"y-axis\")\n      .call(\n        d3\n          .axisLeft(y)\n          .tickValues(yAxisTicks)\n          //@ts-expect-error not applicable\n          .tickFormat((d: any) => {\n            return formatNumber(d);\n          })\n          .tickSizeOuter(0) as any,\n      );\n\n    yAxis.selectAll(\".tick line\").remove();\n\n    const tooltip = svg\n      .append(\"foreignObject\")\n      .attr(\"class\", \"tooltip\")\n      .attr(\"width\", 120)\n      .attr(\"height\", 20)\n      .style(\"opacity\", 0)\n      .style(\"position\", \"absolute\")\n      .style(\"background-color\", \"white\")\n      .style(\"border\", \"none\")\n      .style(\"box-shadow\", \"0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)\")\n      .style(\"border-radius\", \"0.313rem\")\n      .style(\"padding\", \"0.625rem\")\n      .style(\"font-size\", \"0.75rem\");\n\n    const tooltipText = tooltip\n      .append(\"xhtml:div\")\n      .style(\"font-size\", \"0.75rem\")\n      .style(\"color\", \"black\");\n  }, [data, height, width, line, yAxisMaxValue, yAxisTicks]);\n\n  return (\n    <>\n      <svg ref={svgRef} width={width} height={height}></svg>\n    </>\n  );\n};\n\nexport default BarChart;\n"],"names":["data","numOfLines","width","height","line","svgRef","useRef","maxValue","useMemo","Math","max","map","d","value","yAxisMaxValue","yAxisTicks","ticks","interval","i","push","useEffect","current","svg","d3.select","selectAll","remove","barWidth","barHeight","x","d3.scaleBand","domain","label","range","padding","y","d3.scaleLinear","chart","append","attr","slice","forEach","tick","style","enter","bandwidth","on","event","xPosition","offsetX","yPosition","offsetY","tooltipWidth","_b","_a","tooltip","node","getBoundingClientRect","floor","text","length","tooltipText","html","call","d3.axisBottom","d3.axisLeft","tickValues","tickFormat","num","toFixed","tickSizeOuter","children","jsx","ref"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/bar-chart/bar-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface BarChartProps {\n  data: DataPoint[];\n  numOfLines?: number;\n  width?: number;\n  height?: number;\n  line?: boolean;\n}\n\nconst formatNumber = (num: number) => {\n  if (num >= 1e9) return (num / 1e9).toFixed(1) + \"B\";\n  if (num >= 1e6) return (num / 1e6).toFixed(1) + \"M\";\n  if (num >= 1e3) return (num / 1e3).toFixed(1) + \"K\";\n  return num;\n};\n\nconst BarChart: React.FC<BarChartProps> = ({\n  data,\n  numOfLines = 5,\n  width = 500,\n  height = 300,\n  line = false,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const maxValue = useMemo(() => {\n    return Math.max(...data.map((d) => d.value));\n  }, [data]);\n\n  const yAxisMaxValue = useMemo(() => {\n    return maxValue * 1.25;\n  }, [maxValue]);\n\n  const yAxisTicks = useMemo(() => {\n    const ticks = [];\n    const interval = yAxisMaxValue / numOfLines;\n    for (let i = 0; i <= numOfLines; i++) {\n      ticks.push(interval * i);\n    }\n    return ticks;\n  }, [yAxisMaxValue, numOfLines]);\n\n  useEffect(() => {\n    if (!svgRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = { top: 20, right: 20, bottom: 70, left: 40 };\n    const barWidth = width - margin.left - margin.right;\n    const barHeight = height - margin.top - margin.bottom;\n\n    const mousemove = (event: MouseEvent, d: DataPoint) => {\n      let xPosition = event.offsetX + margin.left - 25;\n      const yPosition = event.offsetY + margin.top - 40;\n      const tooltipWidth = tooltip.node()?.getBoundingClientRect()?.width;\n      const rightOffset = tooltipWidth ? xPosition + tooltipWidth : xPosition;\n      if (rightOffset > width) {\n        xPosition = Math.floor(\n          tooltipWidth ? xPosition - tooltipWidth - 20 : xPosition - 20,\n        );\n      }\n\n      const text = `${d.label} - ${d.value}`;\n      tooltip\n        .attr(\"x\", xPosition)\n        .attr(\"y\", yPosition)\n        .style(\"opacity\", 9)\n        .style(\"height\", text.length >= 16 ? 50 : 35);\n\n      tooltipText.html(text);\n    };\n\n    const mouseleave = () => {\n      tooltip.style(\"opacity\", 0);\n    };\n\n    const x = d3\n      .scaleBand()\n      .domain(data.map((d) => d.label))\n      .range([0, barWidth])\n      .padding(0.1);\n\n    const y = d3.scaleLinear().domain([0, yAxisMaxValue]).range([barHeight, 0]);\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    if (line) {\n      yAxisTicks.slice(1).forEach((tick) => {\n        chart\n          .append(\"line\")\n          .attr(\"class\", \"dotted-line\")\n          .attr(\"x1\", 0)\n          .attr(\"y1\", y(tick))\n          .attr(\"x2\", barWidth)\n          .attr(\"y2\", y(tick))\n          .style(\"stroke\", \"gray\")\n          .style(\"stroke-dasharray\", \"3,3\")\n          .style(\"opacity\", 1);\n      });\n    }\n\n    chart\n      .selectAll(\".bar\")\n      .data(data)\n      .enter()\n      .append(\"rect\")\n      .attr(\"class\", \"bar\")\n      //@ts-expect-error not applicable\n      .attr(\"x\", (d: any) => x(d.label))\n      .attr(\"y\", (d: any) => y(d.value))\n      .attr(\"width\", x.bandwidth())\n      .attr(\"height\", (d: any) => barHeight - y(d.value))\n      .style(\"fill\", \"#357AF6\")\n      .style(\"opacity\", \"1\")\n      .on(\"mousemove\", mousemove)\n      .on(\"mouseleave\", mouseleave);\n\n    const xAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"x-axis\")\n      .attr(\"transform\", `translate(0, ${barHeight})`)\n      .call(d3.axisBottom(x) as any);\n\n    xAxis.selectAll(\".tick line\").remove();\n\n    const yAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"y-axis\")\n      .call(\n        d3\n          .axisLeft(y)\n          .tickValues(yAxisTicks)\n          //@ts-expect-error not applicable\n          .tickFormat((d: any) => {\n            return formatNumber(d);\n          })\n          .tickSizeOuter(0) as any,\n      );\n\n    yAxis.selectAll(\".tick line\").remove();\n\n    const tooltip = svg\n      .append(\"foreignObject\")\n      .attr(\"class\", \"tooltip\")\n      .attr(\"width\", 120)\n      .attr(\"height\", 20)\n      .style(\"opacity\", 0)\n      .style(\"position\", \"absolute\")\n      .style(\"background-color\", \"white\")\n      .style(\"border\", \"none\")\n      .style(\"box-shadow\", \"0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)\")\n      .style(\"border-radius\", \"0.313rem\")\n      .style(\"padding\", \"0.625rem\")\n      .style(\"font-size\", \"0.75rem\");\n\n    const tooltipText = tooltip\n      .append(\"xhtml:div\")\n      .style(\"font-size\", \"0.75rem\")\n      .style(\"color\", \"black\");\n  }, [data, height, width, line, yAxisMaxValue, yAxisTicks]);\n\n  return (\n    <>\n      <svg ref={svgRef} width={width} height={height}></svg>\n    </>\n  );\n};\n\nexport { BarChart };\nexport default BarChart;\n"],"names":["BarChart","data","numOfLines","width","height","line","svgRef","useRef","maxValue","useMemo","Math","max","map","d","value","yAxisMaxValue","yAxisTicks","ticks","interval","i","push","useEffect","current","svg","d3.select","selectAll","remove","barWidth","barHeight","x","d3.scaleBand","domain","label","range","padding","y","d3.scaleLinear","chart","append","attr","slice","forEach","tick","style","enter","bandwidth","on","event","xPosition","offsetX","yPosition","offsetY","tooltipWidth","_b","_a","tooltip","node","getBoundingClientRect","floor","text","length","tooltipText","html","call","d3.axisBottom","d3.axisLeft","tickValues","tickFormat","num","toFixed","tickSizeOuter","children","jsx","ref"],"mappings":"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"}

package/dist/components/charts/bar-chart/bar-chart.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+interface DataPoint {
+    label: string;
+    value: number;
+}
+interface BarChartProps {
+    data: DataPoint[];
+    numOfLines?: number;
+    width?: number;
+    height?: number;
+    line?: boolean;
+}
+declare const BarChart: React.FC<BarChartProps>;
+export { BarChart };
+export default BarChart;

package/dist/components/charts/bar-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BarChart } from './bar-chart';
+export * from './bar-chart';

package/dist/components/charts/barChart/barChart/index.esm.js

@@ -142,6 +142,7 @@ const BarChart = ({
   );
 };
 export {
+  BarChart,
   BarChart as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/charts/barChart/barChart/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/barChart/barChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo, useState } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n    label: string;\n    value: number;\n}\n\ninterface BarChartProps {\n    data: DataPoint[];\n    numOfLines?: number;\n    initialWidth?: number;\n    height?: any;\n    line?: boolean;\n    chartBarWidth?: number;\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency: string\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol || ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\nfunction wrapText(textSelection: any, width: number) {\n    textSelection.each(function (this: any) {\n      const text = d3.select(this);\n      const originalText = text.text();\n      \n      if (originalText.length <= 8) {\n        return;\n      }\n      \n      if (originalText.length > 12) {\n        text.text(originalText.substring(0, 10) + '...');\n        return;\n      }\n      \n      const words = originalText.split(/\\s+/).reverse();\n      let word;\n      let line: string[] = [];\n      let lineNumber = 0;\n      const lineHeight = 1.1; // ems\n      const y = text.attr(\"y\");\n      const dy = parseFloat(text.attr(\"dy\")) || 0;\n  \n      let tspan = text\n        .text(null)\n        .append(\"tspan\")\n        .attr(\"x\", 0)\n        .attr(\"y\", y)\n        .attr(\"dy\", `${dy}em`);\n  \n      while ((word = words.pop())) {\n        line.push(word);\n        tspan.text(line.join(\" \"));\n        if (tspan.node() && tspan.node()!.getComputedTextLength() > width) {\n          line.pop();\n          tspan.text(line.join(\" \"));\n          line = [word];\n          tspan = text\n            .append(\"tspan\")\n            .attr(\"x\", 0)\n            .attr(\"y\", y)\n            .attr(\"dy\", `${++lineNumber * lineHeight + dy}em`)\n            .text(word);\n        }\n      }\n    });\n  }\n  \nconst BarChart: React.FC<BarChartProps> = ({\n    data,\n    numOfLines = 5,\n    initialWidth = 500,\n    height = 400,\n    line = false,\n    yAxisLabelType = 'inValue',\n    currency,\n    customLabelFormatter,\n}) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState(initialWidth);\n\n    const maxValue = useMemo(() => Math.max(...data.map((d) => d.value)), [data]);\n\n    const yAxisMaxValue = useMemo(() => maxValue * 1.25, [maxValue]);\n\n    const yAxisTicks = useMemo(() => {\n        const ticks = [];\n        const interval = yAxisMaxValue / numOfLines;\n        for (let i = 0; i <= numOfLines; i++) {\n            ticks.push(interval * i);\n        }\n        return ticks;\n    }, [yAxisMaxValue, numOfLines]);\n\n\n    const needsHorizontalScroll = data.length > 12;\n    const minGroupWidth = 120; \n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(data.length * minGroupWidth, containerWidth)\n        : containerWidth;\n\n    // ResizeObserver to make the chart responsive\n\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n    \n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n    useEffect(() => {\n        if (containerWidth === 0) return;\n\n        const svg = d3.select(svgRef.current);\n\n        svg.selectAll(\"*\").remove();\n\n        // Calculate dynamic left margin based on label length (accounting for wrapping)\n        // const sampleLabel = customLabelFormatter \n        //     ? customLabelFormatter(yAxisMaxValue)\n        //     : formatNumber(yAxisMaxValue, currency, yAxisLabelType);\n        const maxLabelWidth = 80; // Maximum width for wrapped labels\n        const dynamicLeftMargin = Math.max(60, maxLabelWidth + 30);\n        \n        const margin = { top: 20, right: 20, bottom: 25, left: dynamicLeftMargin };\n        const barWidth = calculatedChartWidth - margin.left - margin.right;\n        const barHeight = maxValue ? height - margin.top - margin.bottom : 0;\n\n        const x = d3\n            .scaleBand()\n            .domain(data.map((d) => d.label))\n            .range([0, barWidth])\n            .padding(0.5);\n\n        const y = d3.scaleLinear().domain([0, yAxisMaxValue]).range([barHeight, 0]);\n\n        \n        const chart = svg\n        .append(\"g\")\n        .attr(\"transform\", `translate(${margin.left},${maxValue?margin.top:height-50})`);\n        \n        if (line) {\n            yAxisTicks.slice(1).forEach((tick) => {\n                chart\n                    .append(\"line\")\n                    .attr(\"class\", \"dotted-line\")\n                    .attr(\"x1\", 0)\n                    .attr(\"y1\", y(tick))\n                    .attr(\"x2\", barWidth)\n                    .attr(\"y2\", y(tick))\n                    .style(\"stroke\", \"#D3D3D4\")\n                    .style(\"stroke-dasharray\", \"3,3\")\n                    .style(\"opacity\", 1);\n            });\n        }\n\n        chart\n            .selectAll(\".bar\")\n            .data(data)\n            .enter()\n            .append(\"rect\")\n            .attr(\"rx\", 5)\n            .attr(\"ry\", 5)\n            .attr(\"class\", \"bar\")\n            .attr(\"x\", (d: any) => x(d.label))\n            .attr(\"y\", (d: any) => y(d.value))\n            .attr(\"width\", x.bandwidth())\n            .attr(\"height\", (d: any) => barHeight - y(d.value))\n            .style(\"fill\", (d: any) => d.color);\n\n        const xAxis = chart\n            .append(\"g\")\n            .attr(\"class\", \"x-axis\")\n            .attr(\"transform\", `translate(0, ${barHeight})`)\n            .call(d3.axisTop(x).tickPadding(10) as any)\n            .call(d3.axisBottom(x).tickPadding(5) as any)\n            // .call(d3.axisLeft(x).tickPadding(5) as any)\n\n        xAxis.selectAll(\".tick line\").remove();\n        xAxis.selectAll(\".tick text\").call(wrapText,80);   \n\n        // Calculate optimal number of ticks to prevent overlap\n        const availableHeight = barHeight;\n        const minTickSpacing = 30; // Minimum pixels between ticks\n        const maxOptimalTicks = Math.floor(availableHeight / minTickSpacing);\n        const optimalNumTicks = Math.min(numOfLines, maxOptimalTicks, 8);\n        \n        // Generate optimal tick values\n        const optimalTicks = [];\n        const optimalInterval = yAxisMaxValue / optimalNumTicks;\n        for (let i = 0; i <= optimalNumTicks; i++) {\n            optimalTicks.push(optimalInterval * i);\n        }\n\n        const yAxis = chart\n            .append(\"g\")\n            .attr(\"class\", \"y-axis\")\n            .call(\n                d3.axisLeft(y)\n                    .tickValues(optimalTicks)\n                    .tickFormat((d: any) =>\n                        customLabelFormatter\n                            ? customLabelFormatter(d)\n                            : formatNumber(d, currency, yAxisLabelType)\n                    )\n                    .tickSizeOuter(0)\n                    .tickPadding(8) as any, // Add padding between ticks and labels\n            );\n\n        yAxis.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        \n        // Style y-axis labels for better readability and apply text wrapping\n        yAxis.selectAll(\".tick text\")\n            .style(\"font-size\", \"11px\")\n            .style(\"fill\", \"#666\")\n            .style(\"font-family\", \"Inter, system-ui, Avenir, Helvetica, Arial, sans-serif\")\n            .style(\"text-anchor\", \"end\")\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [data, containerWidth, height, line, yAxisMaxValue, yAxisTicks, currency, yAxisLabelType, customLabelFormatter, calculatedChartWidth]);\n\n    return (\n        <div ref={wrapperRef} \n        style={{ \n            width: '100%', \n            overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n            overflowY: 'hidden'\n        }}>\n            <svg ref={svgRef} width={calculatedChartWidth} height={height} viewBox={`0 0 ${calculatedChartWidth} ${height}`} />\n        </div>\n    );\n};\n\nexport default BarChart;\n"],"names":["d3.format","d3.select","d3.scaleBand","d3.scaleLinear","d3.axisTop","d3.axisBottom","d3.axisLeft"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/barChart/barChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo, useState } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n    label: string;\n    value: number;\n}\n\ninterface BarChartProps {\n    data: DataPoint[];\n    numOfLines?: number;\n    initialWidth?: number;\n    height?: any;\n    line?: boolean;\n    chartBarWidth?: number;\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency: string\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol || ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\nfunction wrapText(textSelection: any, width: number) {\n    textSelection.each(function (this: any) {\n      const text = d3.select(this);\n      const originalText = text.text();\n      \n      if (originalText.length <= 8) {\n        return;\n      }\n      \n      if (originalText.length > 12) {\n        text.text(originalText.substring(0, 10) + '...');\n        return;\n      }\n      \n      const words = originalText.split(/\\s+/).reverse();\n      let word;\n      let line: string[] = [];\n      let lineNumber = 0;\n      const lineHeight = 1.1; // ems\n      const y = text.attr(\"y\");\n      const dy = parseFloat(text.attr(\"dy\")) || 0;\n  \n      let tspan = text\n        .text(null)\n        .append(\"tspan\")\n        .attr(\"x\", 0)\n        .attr(\"y\", y)\n        .attr(\"dy\", `${dy}em`);\n  \n      while ((word = words.pop())) {\n        line.push(word);\n        tspan.text(line.join(\" \"));\n        if (tspan.node() && tspan.node()!.getComputedTextLength() > width) {\n          line.pop();\n          tspan.text(line.join(\" \"));\n          line = [word];\n          tspan = text\n            .append(\"tspan\")\n            .attr(\"x\", 0)\n            .attr(\"y\", y)\n            .attr(\"dy\", `${++lineNumber * lineHeight + dy}em`)\n            .text(word);\n        }\n      }\n    });\n  }\n  \nconst BarChart: React.FC<BarChartProps> = ({\n    data,\n    numOfLines = 5,\n    initialWidth = 500,\n    height = 400,\n    line = false,\n    yAxisLabelType = 'inValue',\n    currency,\n    customLabelFormatter,\n}) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState(initialWidth);\n\n    const maxValue = useMemo(() => Math.max(...data.map((d) => d.value)), [data]);\n\n    const yAxisMaxValue = useMemo(() => maxValue * 1.25, [maxValue]);\n\n    const yAxisTicks = useMemo(() => {\n        const ticks = [];\n        const interval = yAxisMaxValue / numOfLines;\n        for (let i = 0; i <= numOfLines; i++) {\n            ticks.push(interval * i);\n        }\n        return ticks;\n    }, [yAxisMaxValue, numOfLines]);\n\n\n    const needsHorizontalScroll = data.length > 12;\n    const minGroupWidth = 120; \n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(data.length * minGroupWidth, containerWidth)\n        : containerWidth;\n\n    // ResizeObserver to make the chart responsive\n\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n    \n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n    useEffect(() => {\n        if (containerWidth === 0) return;\n\n        const svg = d3.select(svgRef.current);\n\n        svg.selectAll(\"*\").remove();\n\n        // Calculate dynamic left margin based on label length (accounting for wrapping)\n        // const sampleLabel = customLabelFormatter \n        //     ? customLabelFormatter(yAxisMaxValue)\n        //     : formatNumber(yAxisMaxValue, currency, yAxisLabelType);\n        const maxLabelWidth = 80; // Maximum width for wrapped labels\n        const dynamicLeftMargin = Math.max(60, maxLabelWidth + 30);\n        \n        const margin = { top: 20, right: 20, bottom: 25, left: dynamicLeftMargin };\n        const barWidth = calculatedChartWidth - margin.left - margin.right;\n        const barHeight = maxValue ? height - margin.top - margin.bottom : 0;\n\n        const x = d3\n            .scaleBand()\n            .domain(data.map((d) => d.label))\n            .range([0, barWidth])\n            .padding(0.5);\n\n        const y = d3.scaleLinear().domain([0, yAxisMaxValue]).range([barHeight, 0]);\n\n        \n        const chart = svg\n        .append(\"g\")\n        .attr(\"transform\", `translate(${margin.left},${maxValue?margin.top:height-50})`);\n        \n        if (line) {\n            yAxisTicks.slice(1).forEach((tick) => {\n                chart\n                    .append(\"line\")\n                    .attr(\"class\", \"dotted-line\")\n                    .attr(\"x1\", 0)\n                    .attr(\"y1\", y(tick))\n                    .attr(\"x2\", barWidth)\n                    .attr(\"y2\", y(tick))\n                    .style(\"stroke\", \"#D3D3D4\")\n                    .style(\"stroke-dasharray\", \"3,3\")\n                    .style(\"opacity\", 1);\n            });\n        }\n\n        chart\n            .selectAll(\".bar\")\n            .data(data)\n            .enter()\n            .append(\"rect\")\n            .attr(\"rx\", 5)\n            .attr(\"ry\", 5)\n            .attr(\"class\", \"bar\")\n            .attr(\"x\", (d: any) => x(d.label))\n            .attr(\"y\", (d: any) => y(d.value))\n            .attr(\"width\", x.bandwidth())\n            .attr(\"height\", (d: any) => barHeight - y(d.value))\n            .style(\"fill\", (d: any) => d.color);\n\n        const xAxis = chart\n            .append(\"g\")\n            .attr(\"class\", \"x-axis\")\n            .attr(\"transform\", `translate(0, ${barHeight})`)\n            .call(d3.axisTop(x).tickPadding(10) as any)\n            .call(d3.axisBottom(x).tickPadding(5) as any)\n            // .call(d3.axisLeft(x).tickPadding(5) as any)\n\n        xAxis.selectAll(\".tick line\").remove();\n        xAxis.selectAll(\".tick text\").call(wrapText,80);   \n\n        // Calculate optimal number of ticks to prevent overlap\n        const availableHeight = barHeight;\n        const minTickSpacing = 30; // Minimum pixels between ticks\n        const maxOptimalTicks = Math.floor(availableHeight / minTickSpacing);\n        const optimalNumTicks = Math.min(numOfLines, maxOptimalTicks, 8);\n        \n        // Generate optimal tick values\n        const optimalTicks = [];\n        const optimalInterval = yAxisMaxValue / optimalNumTicks;\n        for (let i = 0; i <= optimalNumTicks; i++) {\n            optimalTicks.push(optimalInterval * i);\n        }\n\n        const yAxis = chart\n            .append(\"g\")\n            .attr(\"class\", \"y-axis\")\n            .call(\n                d3.axisLeft(y)\n                    .tickValues(optimalTicks)\n                    .tickFormat((d: any) =>\n                        customLabelFormatter\n                            ? customLabelFormatter(d)\n                            : formatNumber(d, currency, yAxisLabelType)\n                    )\n                    .tickSizeOuter(0)\n                    .tickPadding(8) as any, // Add padding between ticks and labels\n            );\n\n        yAxis.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        \n        // Style y-axis labels for better readability and apply text wrapping\n        yAxis.selectAll(\".tick text\")\n            .style(\"font-size\", \"11px\")\n            .style(\"fill\", \"#666\")\n            .style(\"font-family\", \"Inter, system-ui, Avenir, Helvetica, Arial, sans-serif\")\n            .style(\"text-anchor\", \"end\")\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [data, containerWidth, height, line, yAxisMaxValue, yAxisTicks, currency, yAxisLabelType, customLabelFormatter, calculatedChartWidth]);\n\n    return (\n        <div ref={wrapperRef} \n        style={{ \n            width: '100%', \n            overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n            overflowY: 'hidden'\n        }}>\n            <svg ref={svgRef} width={calculatedChartWidth} height={height} viewBox={`0 0 ${calculatedChartWidth} ${height}`} />\n        </div>\n    );\n};\n\nexport { BarChart };\nexport default BarChart;\n"],"names":["d3.format","d3.select","d3.scaleBand","d3.scaleLinear","d3.axisTop","d3.axisBottom","d3.axisLeft"],"mappings":"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"}

package/dist/components/charts/barChart/barChart/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),a=require("../../../../node_modules/d3-scale/src/linear/index.js"),s=require("../../../../node_modules/d3-selection/src/select/index.js"),n=require("../../../../node_modules/d3-axis/src/axis/index.js"),l=require("../../../../node_modules/d3-format/src/defaultLocale/index.js");function i(e,t){e.each(function(){const e=s.default(this),r=e.text();if(r.length<=8)return;if(r.length>12)return void e.text(r.substring(0,10)+"...");const a=r.split(/\s+/).reverse();let n,l=[],i=0;const o=e.attr("y"),c=parseFloat(e.attr("dy"))||0;let d=e.text(null).append("tspan").attr("x",0).attr("y",o).attr("dy",`${c}em`);for(;n=a.pop();)l.push(n),d.text(l.join(" ")),d.node()&&d.node().getComputedTextLength()>t&&(l.pop(),d.text(l.join(" ")),l=[n],d=e.append("tspan").attr("x",0).attr("y",o).attr("dy",`${1.1*++i+c}em`).text(n))})}exports.default=({data:o,numOfLines:c=5,initialWidth:d=500,height:u=400,line:f=!1,yAxisLabelType:x="inValue",currency:m,customLabelFormatter:p})=>{const h=t.useRef(null),y=t.useRef(null),[g,v]=t.useState(d),k=t.useMemo(()=>Math.max(...o.map(e=>e.value)),[o]),b=t.useMemo(()=>1.25*k,[k]),j=t.useMemo(()=>{const e=[],t=b/c;for(let r=0;r<=c;r++)e.push(t*r);return e},[b,c]),$=o.length>12,w=$?Math.max(120*o.length,g):g;return t.useEffect(()=>{const e=y.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;v(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===g)return;const e=s.default(h.current);e.selectAll("*").remove();const t=Math.max(60,110),d=w-t-20,y=k?u-20-25:0,v=r.default().domain(o.map(e=>e.label)).range([0,d]).padding(.5),$=a.default().domain([0,b]).range([y,0]),A=e.append("g").attr("transform",`translate(${t},${k?20:u-50})`);f&&j.slice(1).forEach(e=>{A.append("line").attr("class","dotted-line").attr("x1",0).attr("y1",$(e)).attr("x2",d).attr("y2",$(e)).style("stroke","#D3D3D4").style("stroke-dasharray","3,3").style("opacity",1)}),A.selectAll(".bar").data(o).enter().append("rect").attr("rx",5).attr("ry",5).attr("class","bar").attr("x",e=>v(e.label)).attr("y",e=>$(e.value)).attr("width",v.bandwidth()).attr("height",e=>y-$(e.value)).style("fill",e=>e.color);const M=A.append("g").attr("class","x-axis").attr("transform",`translate(0, ${y})`).call(n.axisTop(v).tickPadding(10)).call(n.axisBottom(v).tickPadding(5));M.selectAll(".tick line").remove(),M.selectAll(".tick text").call(i,80);const q=y,_=Math.floor(q/30),L=Math.min(c,_,8),P=[],O=b/L;for(let r=0;r<=L;r++)P.push(O*r);const R=A.append("g").attr("class","y-axis").call(n.axisLeft($).tickValues(P).tickFormat(e=>{return p?p(e):(t=e,r=m,"inPercent"===(a=x)?`${l.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${l.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0).tickPadding(8));R.selectAll(".tick line").remove(),R.select(".domain").attr("stroke","none"),M.select(".domain").attr("stroke","none"),R.selectAll(".tick text").style("font-size","11px").style("fill","#666").style("font-family","Inter, system-ui, Avenir, Helvetica, Arial, sans-serif").style("text-anchor","end")},[o,g,u,f,b,j,m,x,p,w]),/* @__PURE__ */e.jsx("div",{ref:y,style:{width:"100%",overflowX:$?"auto":"hidden",overflowY:"hidden"},children:/* @__PURE__ */e.jsx("svg",{ref:h,width:w,height:u,viewBox:`0 0 ${w} ${u}`})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),a=require("../../../../node_modules/d3-scale/src/linear/index.js"),s=require("../../../../node_modules/d3-selection/src/select/index.js"),n=require("../../../../node_modules/d3-axis/src/axis/index.js"),l=require("../../../../node_modules/d3-format/src/defaultLocale/index.js");function i(e,t){e.each(function(){const e=s.default(this),r=e.text();if(r.length<=8)return;if(r.length>12)return void e.text(r.substring(0,10)+"...");const a=r.split(/\s+/).reverse();let n,l=[],i=0;const o=e.attr("y"),c=parseFloat(e.attr("dy"))||0;let d=e.text(null).append("tspan").attr("x",0).attr("y",o).attr("dy",`${c}em`);for(;n=a.pop();)l.push(n),d.text(l.join(" ")),d.node()&&d.node().getComputedTextLength()>t&&(l.pop(),d.text(l.join(" ")),l=[n],d=e.append("tspan").attr("x",0).attr("y",o).attr("dy",`${1.1*++i+c}em`).text(n))})}const o=({data:o,numOfLines:c=5,initialWidth:d=500,height:u=400,line:f=!1,yAxisLabelType:x="inValue",currency:p,customLabelFormatter:m})=>{const h=t.useRef(null),y=t.useRef(null),[g,v]=t.useState(d),k=t.useMemo(()=>Math.max(...o.map(e=>e.value)),[o]),b=t.useMemo(()=>1.25*k,[k]),j=t.useMemo(()=>{const e=[],t=b/c;for(let r=0;r<=c;r++)e.push(t*r);return e},[b,c]),$=o.length>12,w=$?Math.max(120*o.length,g):g;return t.useEffect(()=>{const e=y.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;v(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===g)return;const e=s.default(h.current);e.selectAll("*").remove();const t=Math.max(60,110),d=w-t-20,y=k?u-20-25:0,v=r.default().domain(o.map(e=>e.label)).range([0,d]).padding(.5),$=a.default().domain([0,b]).range([y,0]),A=e.append("g").attr("transform",`translate(${t},${k?20:u-50})`);f&&j.slice(1).forEach(e=>{A.append("line").attr("class","dotted-line").attr("x1",0).attr("y1",$(e)).attr("x2",d).attr("y2",$(e)).style("stroke","#D3D3D4").style("stroke-dasharray","3,3").style("opacity",1)}),A.selectAll(".bar").data(o).enter().append("rect").attr("rx",5).attr("ry",5).attr("class","bar").attr("x",e=>v(e.label)).attr("y",e=>$(e.value)).attr("width",v.bandwidth()).attr("height",e=>y-$(e.value)).style("fill",e=>e.color);const M=A.append("g").attr("class","x-axis").attr("transform",`translate(0, ${y})`).call(n.axisTop(v).tickPadding(10)).call(n.axisBottom(v).tickPadding(5));M.selectAll(".tick line").remove(),M.selectAll(".tick text").call(i,80);const q=y,_=Math.floor(q/30),L=Math.min(c,_,8),P=[],O=b/L;for(let r=0;r<=L;r++)P.push(O*r);const R=A.append("g").attr("class","y-axis").call(n.axisLeft($).tickValues(P).tickFormat(e=>{return m?m(e):(t=e,r=p,"inPercent"===(a=x)?`${l.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${l.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0).tickPadding(8));R.selectAll(".tick line").remove(),R.select(".domain").attr("stroke","none"),M.select(".domain").attr("stroke","none"),R.selectAll(".tick text").style("font-size","11px").style("fill","#666").style("font-family","Inter, system-ui, Avenir, Helvetica, Arial, sans-serif").style("text-anchor","end")},[o,g,u,f,b,j,p,x,m,w]),/* @__PURE__ */e.jsx("div",{ref:y,style:{width:"100%",overflowX:$?"auto":"hidden",overflowY:"hidden"},children:/* @__PURE__ */e.jsx("svg",{ref:h,width:w,height:u,viewBox:`0 0 ${w} ${u}`})})};exports.BarChart=o,exports.default=o;
 //# sourceMappingURL=index.js.map