@erpsquad/common 1.8.45 → 1.8.47

package/dist/components/card-wrapper/card-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/card-wrapper/card-wrapper.tsx"],"sourcesContent":["import { Box } from \"@mui/material\";\nimport \"./card-wrapper.scss\";\nimport React from \"react\";\n\ninterface CardWrapperPropsType {\n  children: React.ReactNode;\n}\n\nconst CardWrapper = ({ children, ...rest }: CardWrapperPropsType) => {\n  return (\n    <Box className=\"card-wrapper\" {...rest}>\n      {children}\n    </Box>\n  );\n};\n\nexport default CardWrapper;\n"],"names":["children","rest","Box","className"],"mappings":"sOAQoB,EAAGA,cAAaC,0BAE/BC,EAAAA,QAAA,CAAIC,UAAU,kBAAmBF,EAC/BD"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/card-wrapper/card-wrapper.tsx"],"sourcesContent":["import { Box } from \"@mui/material\";\nimport \"./card-wrapper.scss\";\nimport React from \"react\";\n\ninterface CardWrapperPropsType {\n  children: React.ReactNode;\n}\n\nconst CardWrapper = ({ children, ...rest }: CardWrapperPropsType) => {\n  return (\n    <Box className=\"card-wrapper\" {...rest}>\n      {children}\n    </Box>\n  );\n};\n\nexport { CardWrapper };\nexport default CardWrapper;\n"],"names":["CardWrapper","children","rest","Box","className"],"mappings":"sNAQA,MAAMA,EAAc,EAAGC,cAAaC,0BAE/BC,EAAAA,QAAA,CAAIC,UAAU,kBAAmBF,EAC/BD"}

package/dist/components/card-wrapper/card-wrapper.d.ts

@@ -4,4 +4,5 @@ interface CardWrapperPropsType {
     children: React.ReactNode;
 }
 declare const CardWrapper: ({ children, ...rest }: CardWrapperPropsType) => import("react/jsx-runtime").JSX.Element;
+export { CardWrapper };
 export default CardWrapper;

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

@@ -1,14 +1,14 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import Modal from "../../modal/modal/index.esm.js";
+import { Modal } from "../../modal/modal/index.esm.js";
 import { useForm } from "react-hook-form";
 import { yupResolver as o } from "../../../node_modules/@hookform/resolvers/yup/dist/yup/index.esm.js";
 import * as Yup from "yup";
 import { useAuth } from "../../../hooks/useAuth/index.esm.js";
 import { Typography } from "../../typography/typography/index.esm.js";
-import DynamicInput from "../../form-control/form-builder/form-builder-element/text/index.esm.js";
-import Button from "../../button/button/index.esm.js";
-import Toast from "../../toast/toast/index.esm.js";
+import { DynamicInput } from "../../form-control/form-builder/form-builder-element/text/index.esm.js";
+import { Button } from "../../button/button/index.esm.js";
+import { Toast } from "../../toast/toast/index.esm.js";
 import styled from "../../../node_modules/@mui/system/esm/styled/index.esm.js";
 import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import { Eye } from "../../icons/eye/index.esm.js";
@@ -115,6 +115,7 @@ const ChangeUserPasswordModal = ({ showModal, setShowModal, userId }) => {
   ] });
 };
 export {
+  ChangeUserPasswordModal,
   ChangeUserPasswordModal as default
 };
 //# sourceMappingURL=index.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n  login: Yup.object({\r\n      password: Yup.string()\r\n                .required(\"Please enter password\")\r\n                .min(8, \"Password must be at least 8 characters\")\r\n                .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n                .matches(/[!@#$%^&*(),.?\":{}|<>]/, \"Password must contain at least one special character\"),\r\n  }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n     const { changeUserPasswordByAdmin } = useAuth();\r\n     const [isNotify, setIsNotify] = useState(false);\r\n    const [toast, setToast] = useState<IToast | null>(null);\r\n\r\n    interface FormValeus {\r\n        login: LoginFormValues;\r\n    }\r\n\r\n    const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n      resolver: yupResolver(validationSchema),\r\n      mode: \"all\",\r\n    });\r\n\r\n    const onSubmit = async (values: FormValeus) => {\r\n        values.login.id = userId;\r\n        values.login.isNotify = isNotify;\r\n      await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n        if (type) {\r\n          setToast({ message: message, type: \"normal\" });\r\n          setShowModal(false);\r\n          reset({\r\n            login: {\r\n                password: \"\",\r\n                id: \"\",\r\n                isNotify: false\r\n            },\r\n        });\r\n        } else {\r\n          setToast({ message: message, type: \"alert\" });\r\n        }\r\n      });\r\n      return values;      \r\n    };\r\n\r\n    const [showPassword, setShowPassword] = useState<boolean>(false);\r\n    const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n     const FlexBox = styled(Box)(() => ({\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    }));\r\n\r\n    return (\r\n        <>\r\n        <Modal \r\n        open={showModal}\r\n        onClose={() => setShowModal(false)} \r\n        children={\r\n          <>\r\n            <form onSubmit={handleSubmit(onSubmit)}>\r\n                <FlexBox gap={4} className=\"popup-change-pass\">\r\n                  <FlexBox gap={2}>\r\n                    <Box>\r\n                      <Typography\r\n                        align=\"center\"\r\n                        type=\"h1\"\r\n                        weight=\"medium\"\r\n                        color=\"theme.secondary.1000\"\r\n                      >\r\n                        Change Password\r\n                      </Typography>\r\n                    </Box>\r\n                    <FlexBox gap={2}>\r\n                      <Box>\r\n                        <DynamicInput\r\n                          formControl={control}\r\n                          label=\"Enter New Password\"\r\n                          name=\"password\"\r\n                          type={showPassword ? \"text\" : \"password\"}\r\n                          placeholder=\"Enter New Password\"\r\n                          fieldArrayName=\"login\"\r\n                          endIcon={\r\n                            <>\r\n                              {showPassword ? (\r\n                                <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              ) : (\r\n                                <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              )}\r\n                            </>\r\n                          }\r\n                          onIconClick={handleShowPassword}\r\n                        />\r\n                      </Box>\r\n                      <Box>\r\n                        <FormControlLabel  control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n                            '&.Mui-checked': {\r\n                            color: '#2EB273',\r\n                            },\r\n                        }} />} label=\"Notify User of Password Change\" sx={{ \r\n                            '& .MuiFormControlLabel-label': {\r\n                            fontSize: '14px',\r\n                            },\r\n                        }}/>\r\n                      </Box>\r\n                    </FlexBox>\r\n                  </FlexBox>\r\n                  <FlexBox gap={2}>\r\n                    <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n                      Change Password\r\n                    </Button>\r\n                  </FlexBox>\r\n                </FlexBox>\r\n              </form>          \r\n          </>\r\n        }\r\n        />\r\n        <Toast\r\n            open={Boolean(toast)}\r\n            message={toast?.message}\r\n            type={toast?.type}\r\n            handleClose={() => setToast(null)}\r\n            anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n            autoHideDuration={3000}\r\n            />\r\n        </>\r\n    );\r\n}\r\n\r\nexport default ChangeUserPasswordModal;"],"names":["yupResolver"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n  login: Yup.object({\r\n      password: Yup.string()\r\n                .required(\"Please enter password\")\r\n                .min(8, \"Password must be at least 8 characters\")\r\n                .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n                .matches(/[!@#$%^&*(),.?\":{}|<>]/, \"Password must contain at least one special character\"),\r\n  }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n     const { changeUserPasswordByAdmin } = useAuth();\r\n     const [isNotify, setIsNotify] = useState(false);\r\n    const [toast, setToast] = useState<IToast | null>(null);\r\n\r\n    interface FormValeus {\r\n        login: LoginFormValues;\r\n    }\r\n\r\n    const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n      resolver: yupResolver(validationSchema),\r\n      mode: \"all\",\r\n    });\r\n\r\n    const onSubmit = async (values: FormValeus) => {\r\n        values.login.id = userId;\r\n        values.login.isNotify = isNotify;\r\n      await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n        if (type) {\r\n          setToast({ message: message, type: \"normal\" });\r\n          setShowModal(false);\r\n          reset({\r\n            login: {\r\n                password: \"\",\r\n                id: \"\",\r\n                isNotify: false\r\n            },\r\n        });\r\n        } else {\r\n          setToast({ message: message, type: \"alert\" });\r\n        }\r\n      });\r\n      return values;      \r\n    };\r\n\r\n    const [showPassword, setShowPassword] = useState<boolean>(false);\r\n    const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n     const FlexBox = styled(Box)(() => ({\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    }));\r\n\r\n    return (\r\n        <>\r\n        <Modal \r\n        open={showModal}\r\n        onClose={() => setShowModal(false)} \r\n        children={\r\n          <>\r\n            <form onSubmit={handleSubmit(onSubmit)}>\r\n                <FlexBox gap={4} className=\"popup-change-pass\">\r\n                  <FlexBox gap={2}>\r\n                    <Box>\r\n                      <Typography\r\n                        align=\"center\"\r\n                        type=\"h1\"\r\n                        weight=\"medium\"\r\n                        color=\"theme.secondary.1000\"\r\n                      >\r\n                        Change Password\r\n                      </Typography>\r\n                    </Box>\r\n                    <FlexBox gap={2}>\r\n                      <Box>\r\n                        <DynamicInput\r\n                          formControl={control}\r\n                          label=\"Enter New Password\"\r\n                          name=\"password\"\r\n                          type={showPassword ? \"text\" : \"password\"}\r\n                          placeholder=\"Enter New Password\"\r\n                          fieldArrayName=\"login\"\r\n                          endIcon={\r\n                            <>\r\n                              {showPassword ? (\r\n                                <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              ) : (\r\n                                <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              )}\r\n                            </>\r\n                          }\r\n                          onIconClick={handleShowPassword}\r\n                        />\r\n                      </Box>\r\n                      <Box>\r\n                        <FormControlLabel  control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n                            '&.Mui-checked': {\r\n                            color: '#2EB273',\r\n                            },\r\n                        }} />} label=\"Notify User of Password Change\" sx={{ \r\n                            '& .MuiFormControlLabel-label': {\r\n                            fontSize: '14px',\r\n                            },\r\n                        }}/>\r\n                      </Box>\r\n                    </FlexBox>\r\n                  </FlexBox>\r\n                  <FlexBox gap={2}>\r\n                    <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n                      Change Password\r\n                    </Button>\r\n                  </FlexBox>\r\n                </FlexBox>\r\n              </form>          \r\n          </>\r\n        }\r\n        />\r\n        <Toast\r\n            open={Boolean(toast)}\r\n            message={toast?.message}\r\n            type={toast?.type}\r\n            handleClose={() => setToast(null)}\r\n            anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n            autoHideDuration={3000}\r\n            />\r\n        </>\r\n    );\r\n}\r\n\r\nexport { ChangeUserPasswordModal };\nexport default ChangeUserPasswordModal;"],"names":["yupResolver"],"mappings":"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"}

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("../../icons/eye/index.js"),x=require("../../icons/eye-off/index.js"),f=require("../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),p=require("../../../node_modules/@mui/material/Checkbox/Checkbox/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(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(f.default,{control:/* @__PURE__ */e.jsx(p.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\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n  login: Yup.object({\r\n      password: Yup.string()\r\n                .required(\"Please enter password\")\r\n                .min(8, \"Password must be at least 8 characters\")\r\n                .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n                .matches(/[!@#$%^&*(),.?\":{}|<>]/, \"Password must contain at least one special character\"),\r\n  }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n     const { changeUserPasswordByAdmin } = useAuth();\r\n     const [isNotify, setIsNotify] = useState(false);\r\n    const [toast, setToast] = useState<IToast | null>(null);\r\n\r\n    interface FormValeus {\r\n        login: LoginFormValues;\r\n    }\r\n\r\n    const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n      resolver: yupResolver(validationSchema),\r\n      mode: \"all\",\r\n    });\r\n\r\n    const onSubmit = async (values: FormValeus) => {\r\n        values.login.id = userId;\r\n        values.login.isNotify = isNotify;\r\n      await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n        if (type) {\r\n          setToast({ message: message, type: \"normal\" });\r\n          setShowModal(false);\r\n          reset({\r\n            login: {\r\n                password: \"\",\r\n                id: \"\",\r\n                isNotify: false\r\n            },\r\n        });\r\n        } else {\r\n          setToast({ message: message, type: \"alert\" });\r\n        }\r\n      });\r\n      return values;      \r\n    };\r\n\r\n    const [showPassword, setShowPassword] = useState<boolean>(false);\r\n    const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n     const FlexBox = styled(Box)(() => ({\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    }));\r\n\r\n    return (\r\n        <>\r\n        <Modal \r\n        open={showModal}\r\n        onClose={() => setShowModal(false)} \r\n        children={\r\n          <>\r\n            <form onSubmit={handleSubmit(onSubmit)}>\r\n                <FlexBox gap={4} className=\"popup-change-pass\">\r\n                  <FlexBox gap={2}>\r\n                    <Box>\r\n                      <Typography\r\n                        align=\"center\"\r\n                        type=\"h1\"\r\n                        weight=\"medium\"\r\n                        color=\"theme.secondary.1000\"\r\n                      >\r\n                        Change Password\r\n                      </Typography>\r\n                    </Box>\r\n                    <FlexBox gap={2}>\r\n                      <Box>\r\n                        <DynamicInput\r\n                          formControl={control}\r\n                          label=\"Enter New Password\"\r\n                          name=\"password\"\r\n                          type={showPassword ? \"text\" : \"password\"}\r\n                          placeholder=\"Enter New Password\"\r\n                          fieldArrayName=\"login\"\r\n                          endIcon={\r\n                            <>\r\n                              {showPassword ? (\r\n                                <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              ) : (\r\n                                <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              )}\r\n                            </>\r\n                          }\r\n                          onIconClick={handleShowPassword}\r\n                        />\r\n                      </Box>\r\n                      <Box>\r\n                        <FormControlLabel  control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n                            '&.Mui-checked': {\r\n                            color: '#2EB273',\r\n                            },\r\n                        }} />} label=\"Notify User of Password Change\" sx={{ \r\n                            '& .MuiFormControlLabel-label': {\r\n                            fontSize: '14px',\r\n                            },\r\n                        }}/>\r\n                      </Box>\r\n                    </FlexBox>\r\n                  </FlexBox>\r\n                  <FlexBox gap={2}>\r\n                    <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n                      Change Password\r\n                    </Button>\r\n                  </FlexBox>\r\n                </FlexBox>\r\n              </form>          \r\n          </>\r\n        }\r\n        />\r\n        <Toast\r\n            open={Boolean(toast)}\r\n            message={toast?.message}\r\n            type={toast?.type}\r\n            handleClose={() => setToast(null)}\r\n            anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n            autoHideDuration={3000}\r\n            />\r\n        </>\r\n    );\r\n}\r\n\r\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\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n  login: Yup.object({\r\n      password: Yup.string()\r\n                .required(\"Please enter password\")\r\n                .min(8, \"Password must be at least 8 characters\")\r\n                .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n                .matches(/[!@#$%^&*(),.?\":{}|<>]/, \"Password must contain at least one special character\"),\r\n  }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n     const { changeUserPasswordByAdmin } = useAuth();\r\n     const [isNotify, setIsNotify] = useState(false);\r\n    const [toast, setToast] = useState<IToast | null>(null);\r\n\r\n    interface FormValeus {\r\n        login: LoginFormValues;\r\n    }\r\n\r\n    const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n      resolver: yupResolver(validationSchema),\r\n      mode: \"all\",\r\n    });\r\n\r\n    const onSubmit = async (values: FormValeus) => {\r\n        values.login.id = userId;\r\n        values.login.isNotify = isNotify;\r\n      await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n        if (type) {\r\n          setToast({ message: message, type: \"normal\" });\r\n          setShowModal(false);\r\n          reset({\r\n            login: {\r\n                password: \"\",\r\n                id: \"\",\r\n                isNotify: false\r\n            },\r\n        });\r\n        } else {\r\n          setToast({ message: message, type: \"alert\" });\r\n        }\r\n      });\r\n      return values;      \r\n    };\r\n\r\n    const [showPassword, setShowPassword] = useState<boolean>(false);\r\n    const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n     const FlexBox = styled(Box)(() => ({\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    }));\r\n\r\n    return (\r\n        <>\r\n        <Modal \r\n        open={showModal}\r\n        onClose={() => setShowModal(false)} \r\n        children={\r\n          <>\r\n            <form onSubmit={handleSubmit(onSubmit)}>\r\n                <FlexBox gap={4} className=\"popup-change-pass\">\r\n                  <FlexBox gap={2}>\r\n                    <Box>\r\n                      <Typography\r\n                        align=\"center\"\r\n                        type=\"h1\"\r\n                        weight=\"medium\"\r\n                        color=\"theme.secondary.1000\"\r\n                      >\r\n                        Change Password\r\n                      </Typography>\r\n                    </Box>\r\n                    <FlexBox gap={2}>\r\n                      <Box>\r\n                        <DynamicInput\r\n                          formControl={control}\r\n                          label=\"Enter New Password\"\r\n                          name=\"password\"\r\n                          type={showPassword ? \"text\" : \"password\"}\r\n                          placeholder=\"Enter New Password\"\r\n                          fieldArrayName=\"login\"\r\n                          endIcon={\r\n                            <>\r\n                              {showPassword ? (\r\n                                <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              ) : (\r\n                                <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              )}\r\n                            </>\r\n                          }\r\n                          onIconClick={handleShowPassword}\r\n                        />\r\n                      </Box>\r\n                      <Box>\r\n                        <FormControlLabel  control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n                            '&.Mui-checked': {\r\n                            color: '#2EB273',\r\n                            },\r\n                        }} />} label=\"Notify User of Password Change\" sx={{ \r\n                            '& .MuiFormControlLabel-label': {\r\n                            fontSize: '14px',\r\n                            },\r\n                        }}/>\r\n                      </Box>\r\n                    </FlexBox>\r\n                  </FlexBox>\r\n                  <FlexBox gap={2}>\r\n                    <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n                      Change Password\r\n                    </Button>\r\n                  </FlexBox>\r\n                </FlexBox>\r\n              </form>          \r\n          </>\r\n        }\r\n        />\r\n        <Toast\r\n            open={Boolean(toast)}\r\n            message={toast?.message}\r\n            type={toast?.type}\r\n            handleClose={() => setToast(null)}\r\n            anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n            autoHideDuration={3000}\r\n            />\r\n        </>\r\n    );\r\n}\r\n\r\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

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

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

@@ -15,4 +15,5 @@ interface IChartProps {
     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.d.ts

@@ -12,4 +12,5 @@ interface BarChartProps {
     line?: boolean;
 }
 declare const BarChart: React.FC<BarChartProps>;
+export { BarChart };
 export default BarChart;

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

@@ -16,4 +16,5 @@ interface BarChartProps {
     currency: string;
 }
 declare const BarChart: React.FC<BarChartProps>;
+export { BarChart };
 export default BarChart;

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

@@ -18,4 +18,5 @@ interface DonutChartProps {
     totalUsers?: any;
 }
 declare const DonutChart: React.FC<DonutChartProps>;
+export { DonutChart };
 export default DonutChart;

package/dist/components/charts/donutChart/DonutChart.d.ts

@@ -18,4 +18,5 @@ interface DonutChartProps {
     title: string;
 }
 declare const DonutChart: React.FC<DonutChartProps>;
+export { DonutChart };
 export default DonutChart;

package/dist/components/charts/groupBarChart/GroupBarChart/index.esm.js

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

package/dist/components/charts/groupBarChart/GroupBarChart/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/groupBarChart/GroupBarChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useMemo } from 'react';\nimport * as d3 from 'd3';\nimport { useAuth } from '../../../hooks/useAuth';\n\nexport interface IGroupChartProps {\n    chartData: any[],\n    height?: number,\n    margin?: any,\n    barWidth?: number,\n    line?: boolean\n}\n\nconst formatNumber = (num: number, symbol) => {\n    return `${symbol} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n};\n\nconst GroupedBarChart = ({ \n    chartData, \n    height = 500, \n    barWidth = 40, \n    margin = { top: 40, right: 20, bottom: 40, left: 50 }, \n    line = false \n}: IGroupChartProps) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n\n    const maxValue = useMemo(() => Math.max(...chartData.map((d) => d.data.map(v=>v.value)).flat()), [chartData]);\n\n    const needsHorizontalScroll = chartData.length > 12;\n    const minGroupWidth = 120; \n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(chartData.length * minGroupWidth, containerWidth)\n        : containerWidth;\n\n    const { user } = useAuth();\n    const defaultCurrencySymbol = user?.currency_data?.symbol || '';\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\n    useEffect(() => {\n        if (containerWidth === 0) return; \n        \n        const chartWidth = calculatedChartWidth - margin.left - margin.right;\n        const chartHeight = maxValue ? height - margin.top - margin.bottom : 0;\n        \n        d3.select(svgRef.current).selectAll('*').remove();\n        \n        const svg = d3.select(svgRef.current)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left}, ${maxValue ? margin.top : height-50})`);\n\n        const x0 = d3.scaleBand()\n            .domain(chartData.map(d => d.month))\n            .range([0, chartWidth])\n            .padding(0.2);\n\n        const x1 = d3.scaleBand()\n            .domain(['Total Transaction', 'Total Value', 'Average Value'])\n            .range([0, x0.bandwidth()])\n            .padding(0.1);\n\n        const y = d3.scaleLinear()\n            .domain([0, d3.max(chartData, d => d3.max(d.data, data => data.value))])\n            .nice()\n            .range([chartHeight, 0]);\n\n        const xAxis = svg.append('g')\n            .attr('class', 'x-axis')\n            .attr('transform', `translate(0, ${chartHeight})`)\n            .call(d3.axisBottom(x0).tickPadding(20));\n            \n        const yAxis = svg.append('g')\n            .attr('class', 'y-axis')\n            .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) => formatNumber(d, defaultCurrencySymbol)));\n\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        \n        if (line) {\n            svg.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', chartWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '3,3') // Dotted line\n                .style('stroke-width', 1);\n        }\n\n        const monthGroups = svg.selectAll('.month-group')\n            .data(chartData)\n            .enter()\n            .append('g')\n            .attr('class', 'month-group')\n            .attr('transform', d => `translate(${x0(d.month)}, 0)`);\n\n        monthGroups.selectAll('rect')\n            .data(d => d.data)\n            .enter()\n            .append('rect')\n            .attr('x', d => x1(d.type) + (x1.bandwidth() - barWidth) / 2)\n            .attr('y', d => y(d.value))\n            .attr('width', barWidth)\n            .attr('height', d => chartHeight - y(d.value))\n            .attr('fill', d => d.color)\n            .attr('rx', 5)\n            .attr('ry', 5);\n\n    }, [chartData, barWidth, height, calculatedChartWidth, containerWidth, line, margin, defaultCurrencySymbol, maxValue]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <div \n                    ref={scrollContainerRef}\n                        style={{ \n                            width: '100%', \n                            overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n                            overflowY: 'hidden'\n                        }}\n                >\n                    <svg \n                        ref={svgRef} \n                        width={calculatedChartWidth} \n                        height={height} \n                        viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n                        style={{ display: 'block' }}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default GroupedBarChart;"],"names":["d3.format","d3.select","d3.scaleBand","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/groupBarChart/GroupBarChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useMemo } from 'react';\nimport * as d3 from 'd3';\nimport { useAuth } from '../../../hooks/useAuth';\n\nexport interface IGroupChartProps {\n    chartData: any[],\n    height?: number,\n    margin?: any,\n    barWidth?: number,\n    line?: boolean\n}\n\nconst formatNumber = (num: number, symbol) => {\n    return `${symbol} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n};\n\nconst GroupedBarChart = ({ \n    chartData, \n    height = 500, \n    barWidth = 40, \n    margin = { top: 40, right: 20, bottom: 40, left: 50 }, \n    line = false \n}: IGroupChartProps) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n\n    const maxValue = useMemo(() => Math.max(...chartData.map((d) => d.data.map(v=>v.value)).flat()), [chartData]);\n\n    const needsHorizontalScroll = chartData.length > 12;\n    const minGroupWidth = 120; \n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(chartData.length * minGroupWidth, containerWidth)\n        : containerWidth;\n\n    const { user } = useAuth();\n    const defaultCurrencySymbol = user?.currency_data?.symbol || '';\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\n    useEffect(() => {\n        if (containerWidth === 0) return; \n        \n        const chartWidth = calculatedChartWidth - margin.left - margin.right;\n        const chartHeight = maxValue ? height - margin.top - margin.bottom : 0;\n        \n        d3.select(svgRef.current).selectAll('*').remove();\n        \n        const svg = d3.select(svgRef.current)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left}, ${maxValue ? margin.top : height-50})`);\n\n        const x0 = d3.scaleBand()\n            .domain(chartData.map(d => d.month))\n            .range([0, chartWidth])\n            .padding(0.2);\n\n        const x1 = d3.scaleBand()\n            .domain(['Total Transaction', 'Total Value', 'Average Value'])\n            .range([0, x0.bandwidth()])\n            .padding(0.1);\n\n        const y = d3.scaleLinear()\n            .domain([0, d3.max(chartData, d => d3.max(d.data, data => data.value))])\n            .nice()\n            .range([chartHeight, 0]);\n\n        const xAxis = svg.append('g')\n            .attr('class', 'x-axis')\n            .attr('transform', `translate(0, ${chartHeight})`)\n            .call(d3.axisBottom(x0).tickPadding(20));\n            \n        const yAxis = svg.append('g')\n            .attr('class', 'y-axis')\n            .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) => formatNumber(d, defaultCurrencySymbol)));\n\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        \n        if (line) {\n            svg.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', chartWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '3,3') // Dotted line\n                .style('stroke-width', 1);\n        }\n\n        const monthGroups = svg.selectAll('.month-group')\n            .data(chartData)\n            .enter()\n            .append('g')\n            .attr('class', 'month-group')\n            .attr('transform', d => `translate(${x0(d.month)}, 0)`);\n\n        monthGroups.selectAll('rect')\n            .data(d => d.data)\n            .enter()\n            .append('rect')\n            .attr('x', d => x1(d.type) + (x1.bandwidth() - barWidth) / 2)\n            .attr('y', d => y(d.value))\n            .attr('width', barWidth)\n            .attr('height', d => chartHeight - y(d.value))\n            .attr('fill', d => d.color)\n            .attr('rx', 5)\n            .attr('ry', 5);\n\n    }, [chartData, barWidth, height, calculatedChartWidth, containerWidth, line, margin, defaultCurrencySymbol, maxValue]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <div \n                    ref={scrollContainerRef}\n                        style={{ \n                            width: '100%', \n                            overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n                            overflowY: 'hidden'\n                        }}\n                >\n                    <svg \n                        ref={svgRef} \n                        width={calculatedChartWidth} \n                        height={height} \n                        viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n                        style={{ display: 'block' }}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport { GroupedBarChart };\nexport default GroupedBarChart;"],"names":["d3.format","d3.select","d3.scaleBand","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft"],"mappings":"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"}

package/dist/components/charts/groupBarChart/GroupBarChart/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../../../hooks/useAuth/index.js"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),s=require("../../../../node_modules/d3-scale/src/linear/index.js"),l=require("../../../../node_modules/d3-array/src/max/index.js"),d=require("../../../../node_modules/d3-selection/src/select/index.js"),n=require("../../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../../node_modules/d3-format/src/defaultLocale/index.js");exports.default=({chartData:o,height:u=500,barWidth:c=40,margin:h={top:40,right:20,bottom:40,left:50},line:f=!1})=>{var m;const p=t.useRef(null),x=t.useRef(null),g=t.useRef(null),[v,y]=t.useState(0),j=t.useMemo(()=>Math.max(...o.map(e=>e.data.map(e=>e.value)).flat()),[o]),b=o.length>12,k=b?Math.max(120*o.length,v):v,{user:w}=a.useAuth(),q=(null==(m=null==w?void 0:w.currency_data)?void 0:m.symbol)||"";return t.useEffect(()=>{const e=x.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;y(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===v)return;const e=k-h.left-h.right,t=j?u-h.top-h.bottom:0;d.default(p.current).selectAll("*").remove();const a=d.default(p.current).attr("height",u).append("g").attr("transform",`translate(${h.left}, ${j?h.top:u-50})`),m=r.default().domain(o.map(e=>e.month)).range([0,e]).padding(.2),x=r.default().domain(["Total Transaction","Total Value","Average Value"]).range([0,m.bandwidth()]).padding(.1),g=s.default().domain([0,l.default(o,e=>l.default(e.data,e=>e.value))]).nice().range([t,0]),y=a.append("g").attr("class","x-axis").attr("transform",`translate(0, ${t})`).call(n.axisBottom(m).tickPadding(20));a.append("g").attr("class","y-axis").call(n.axisLeft(g).tickPadding(10).tickFormat(e=>{return t=e,`${q} ${i.format(".2s")(t).replace("k","K")}`;var t})).select(".domain").attr("stroke","none"),y.select(".domain").attr("stroke","none"),f&&a.selectAll(".grid-line").data(g.ticks()).enter().append("line").attr("class","grid-line").attr("x1",0).attr("x2",e).attr("y1",e=>g(e)).attr("y2",e=>g(e)).style("stroke","#ddd").style("stroke-dasharray","3,3").style("stroke-width",1),a.selectAll(".month-group").data(o).enter().append("g").attr("class","month-group").attr("transform",e=>`translate(${m(e.month)}, 0)`).selectAll("rect").data(e=>e.data).enter().append("rect").attr("x",e=>x(e.type)+(x.bandwidth()-c)/2).attr("y",e=>g(e.value)).attr("width",c).attr("height",e=>t-g(e.value)).attr("fill",e=>e.color).attr("rx",5).attr("ry",5)},[o,c,u,k,v,f,h,q,j]),/* @__PURE__ */e.jsx("div",{ref:x,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsx("div",{style:{position:"relative"},children:/* @__PURE__ */e.jsx("div",{ref:g,style:{width:"100%",overflowX:b?"auto":"hidden",overflowY:"hidden"},children:/* @__PURE__ */e.jsx("svg",{ref:p,width:k,height:u,viewBox:`0 0 ${k} ${u}`,style:{display:"block"}})})})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../../../hooks/useAuth/index.js"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),s=require("../../../../node_modules/d3-scale/src/linear/index.js"),l=require("../../../../node_modules/d3-array/src/max/index.js"),d=require("../../../../node_modules/d3-selection/src/select/index.js"),n=require("../../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../../node_modules/d3-format/src/defaultLocale/index.js");const o=({chartData:o,height:u=500,barWidth:c=40,margin:h={top:40,right:20,bottom:40,left:50},line:f=!1})=>{var m;const p=t.useRef(null),x=t.useRef(null),g=t.useRef(null),[v,y]=t.useState(0),j=t.useMemo(()=>Math.max(...o.map(e=>e.data.map(e=>e.value)).flat()),[o]),b=o.length>12,k=b?Math.max(120*o.length,v):v,{user:w}=a.useAuth(),q=(null==(m=null==w?void 0:w.currency_data)?void 0:m.symbol)||"";return t.useEffect(()=>{const e=x.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;y(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===v)return;const e=k-h.left-h.right,t=j?u-h.top-h.bottom:0;d.default(p.current).selectAll("*").remove();const a=d.default(p.current).attr("height",u).append("g").attr("transform",`translate(${h.left}, ${j?h.top:u-50})`),m=r.default().domain(o.map(e=>e.month)).range([0,e]).padding(.2),x=r.default().domain(["Total Transaction","Total Value","Average Value"]).range([0,m.bandwidth()]).padding(.1),g=s.default().domain([0,l.default(o,e=>l.default(e.data,e=>e.value))]).nice().range([t,0]),y=a.append("g").attr("class","x-axis").attr("transform",`translate(0, ${t})`).call(n.axisBottom(m).tickPadding(20));a.append("g").attr("class","y-axis").call(n.axisLeft(g).tickPadding(10).tickFormat(e=>{return t=e,`${q} ${i.format(".2s")(t).replace("k","K")}`;var t})).select(".domain").attr("stroke","none"),y.select(".domain").attr("stroke","none"),f&&a.selectAll(".grid-line").data(g.ticks()).enter().append("line").attr("class","grid-line").attr("x1",0).attr("x2",e).attr("y1",e=>g(e)).attr("y2",e=>g(e)).style("stroke","#ddd").style("stroke-dasharray","3,3").style("stroke-width",1),a.selectAll(".month-group").data(o).enter().append("g").attr("class","month-group").attr("transform",e=>`translate(${m(e.month)}, 0)`).selectAll("rect").data(e=>e.data).enter().append("rect").attr("x",e=>x(e.type)+(x.bandwidth()-c)/2).attr("y",e=>g(e.value)).attr("width",c).attr("height",e=>t-g(e.value)).attr("fill",e=>e.color).attr("rx",5).attr("ry",5)},[o,c,u,k,v,f,h,q,j]),/* @__PURE__ */e.jsx("div",{ref:x,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsx("div",{style:{position:"relative"},children:/* @__PURE__ */e.jsx("div",{ref:g,style:{width:"100%",overflowX:b?"auto":"hidden",overflowY:"hidden"},children:/* @__PURE__ */e.jsx("svg",{ref:p,width:k,height:u,viewBox:`0 0 ${k} ${u}`,style:{display:"block"}})})})})};exports.GroupedBarChart=o,exports.default=o;
 //# sourceMappingURL=index.js.map

package/dist/components/charts/groupBarChart/GroupBarChart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/groupBarChart/GroupBarChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useMemo } from 'react';\nimport * as d3 from 'd3';\nimport { useAuth } from '../../../hooks/useAuth';\n\nexport interface IGroupChartProps {\n    chartData: any[],\n    height?: number,\n    margin?: any,\n    barWidth?: number,\n    line?: boolean\n}\n\nconst formatNumber = (num: number, symbol) => {\n    return `${symbol} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n};\n\nconst GroupedBarChart = ({ \n    chartData, \n    height = 500, \n    barWidth = 40, \n    margin = { top: 40, right: 20, bottom: 40, left: 50 }, \n    line = false \n}: IGroupChartProps) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n\n    const maxValue = useMemo(() => Math.max(...chartData.map((d) => d.data.map(v=>v.value)).flat()), [chartData]);\n\n    const needsHorizontalScroll = chartData.length > 12;\n    const minGroupWidth = 120; \n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(chartData.length * minGroupWidth, containerWidth)\n        : containerWidth;\n\n    const { user } = useAuth();\n    const defaultCurrencySymbol = user?.currency_data?.symbol || '';\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\n    useEffect(() => {\n        if (containerWidth === 0) return; \n        \n        const chartWidth = calculatedChartWidth - margin.left - margin.right;\n        const chartHeight = maxValue ? height - margin.top - margin.bottom : 0;\n        \n        d3.select(svgRef.current).selectAll('*').remove();\n        \n        const svg = d3.select(svgRef.current)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left}, ${maxValue ? margin.top : height-50})`);\n\n        const x0 = d3.scaleBand()\n            .domain(chartData.map(d => d.month))\n            .range([0, chartWidth])\n            .padding(0.2);\n\n        const x1 = d3.scaleBand()\n            .domain(['Total Transaction', 'Total Value', 'Average Value'])\n            .range([0, x0.bandwidth()])\n            .padding(0.1);\n\n        const y = d3.scaleLinear()\n            .domain([0, d3.max(chartData, d => d3.max(d.data, data => data.value))])\n            .nice()\n            .range([chartHeight, 0]);\n\n        const xAxis = svg.append('g')\n            .attr('class', 'x-axis')\n            .attr('transform', `translate(0, ${chartHeight})`)\n            .call(d3.axisBottom(x0).tickPadding(20));\n            \n        const yAxis = svg.append('g')\n            .attr('class', 'y-axis')\n            .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) => formatNumber(d, defaultCurrencySymbol)));\n\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        \n        if (line) {\n            svg.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', chartWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '3,3') // Dotted line\n                .style('stroke-width', 1);\n        }\n\n        const monthGroups = svg.selectAll('.month-group')\n            .data(chartData)\n            .enter()\n            .append('g')\n            .attr('class', 'month-group')\n            .attr('transform', d => `translate(${x0(d.month)}, 0)`);\n\n        monthGroups.selectAll('rect')\n            .data(d => d.data)\n            .enter()\n            .append('rect')\n            .attr('x', d => x1(d.type) + (x1.bandwidth() - barWidth) / 2)\n            .attr('y', d => y(d.value))\n            .attr('width', barWidth)\n            .attr('height', d => chartHeight - y(d.value))\n            .attr('fill', d => d.color)\n            .attr('rx', 5)\n            .attr('ry', 5);\n\n    }, [chartData, barWidth, height, calculatedChartWidth, containerWidth, line, margin, defaultCurrencySymbol, maxValue]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <div \n                    ref={scrollContainerRef}\n                        style={{ \n                            width: '100%', \n                            overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n                            overflowY: 'hidden'\n                        }}\n                >\n                    <svg \n                        ref={svgRef} \n                        width={calculatedChartWidth} \n                        height={height} \n                        viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n                        style={{ display: 'block' }}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default GroupedBarChart;"],"names":["chartData","height","barWidth","margin","top","right","bottom","left","line","svgRef","useRef","wrapperRef","scrollContainerRef","containerWidth","setContainerWidth","useState","maxValue","useMemo","Math","max","map","d","data","v","value","flat","needsHorizontalScroll","length","calculatedChartWidth","user","useAuth","defaultCurrencySymbol","_a","currency_data","symbol","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartWidth","chartHeight","d3.select","selectAll","remove","svg","attr","append","x0","d3.scaleBand","domain","month","range","padding","x1","bandwidth","y","d3.scaleLinear","d3.max","nice","xAxis","call","d3.axisBottom","tickPadding","d3.axisLeft","tickFormat","formatNumber","num","d3.format","replace","select","ticks","enter","style","type","color","ref","children","jsx","position","overflowX","overflowY","viewBox","display"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/groupBarChart/GroupBarChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState, useMemo } from 'react';\nimport * as d3 from 'd3';\nimport { useAuth } from '../../../hooks/useAuth';\n\nexport interface IGroupChartProps {\n    chartData: any[],\n    height?: number,\n    margin?: any,\n    barWidth?: number,\n    line?: boolean\n}\n\nconst formatNumber = (num: number, symbol) => {\n    return `${symbol} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n};\n\nconst GroupedBarChart = ({ \n    chartData, \n    height = 500, \n    barWidth = 40, \n    margin = { top: 40, right: 20, bottom: 40, left: 50 }, \n    line = false \n}: IGroupChartProps) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n\n    const maxValue = useMemo(() => Math.max(...chartData.map((d) => d.data.map(v=>v.value)).flat()), [chartData]);\n\n    const needsHorizontalScroll = chartData.length > 12;\n    const minGroupWidth = 120; \n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(chartData.length * minGroupWidth, containerWidth)\n        : containerWidth;\n\n    const { user } = useAuth();\n    const defaultCurrencySymbol = user?.currency_data?.symbol || '';\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\n    useEffect(() => {\n        if (containerWidth === 0) return; \n        \n        const chartWidth = calculatedChartWidth - margin.left - margin.right;\n        const chartHeight = maxValue ? height - margin.top - margin.bottom : 0;\n        \n        d3.select(svgRef.current).selectAll('*').remove();\n        \n        const svg = d3.select(svgRef.current)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left}, ${maxValue ? margin.top : height-50})`);\n\n        const x0 = d3.scaleBand()\n            .domain(chartData.map(d => d.month))\n            .range([0, chartWidth])\n            .padding(0.2);\n\n        const x1 = d3.scaleBand()\n            .domain(['Total Transaction', 'Total Value', 'Average Value'])\n            .range([0, x0.bandwidth()])\n            .padding(0.1);\n\n        const y = d3.scaleLinear()\n            .domain([0, d3.max(chartData, d => d3.max(d.data, data => data.value))])\n            .nice()\n            .range([chartHeight, 0]);\n\n        const xAxis = svg.append('g')\n            .attr('class', 'x-axis')\n            .attr('transform', `translate(0, ${chartHeight})`)\n            .call(d3.axisBottom(x0).tickPadding(20));\n            \n        const yAxis = svg.append('g')\n            .attr('class', 'y-axis')\n            .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) => formatNumber(d, defaultCurrencySymbol)));\n\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        \n        if (line) {\n            svg.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', chartWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '3,3') // Dotted line\n                .style('stroke-width', 1);\n        }\n\n        const monthGroups = svg.selectAll('.month-group')\n            .data(chartData)\n            .enter()\n            .append('g')\n            .attr('class', 'month-group')\n            .attr('transform', d => `translate(${x0(d.month)}, 0)`);\n\n        monthGroups.selectAll('rect')\n            .data(d => d.data)\n            .enter()\n            .append('rect')\n            .attr('x', d => x1(d.type) + (x1.bandwidth() - barWidth) / 2)\n            .attr('y', d => y(d.value))\n            .attr('width', barWidth)\n            .attr('height', d => chartHeight - y(d.value))\n            .attr('fill', d => d.color)\n            .attr('rx', 5)\n            .attr('ry', 5);\n\n    }, [chartData, barWidth, height, calculatedChartWidth, containerWidth, line, margin, defaultCurrencySymbol, maxValue]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <div \n                    ref={scrollContainerRef}\n                        style={{ \n                            width: '100%', \n                            overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n                            overflowY: 'hidden'\n                        }}\n                >\n                    <svg \n                        ref={svgRef} \n                        width={calculatedChartWidth} \n                        height={height} \n                        viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n                        style={{ display: 'block' }}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport { GroupedBarChart };\nexport default GroupedBarChart;"],"names":["GroupedBarChart","chartData","height","barWidth","margin","top","right","bottom","left","line","svgRef","useRef","wrapperRef","scrollContainerRef","containerWidth","setContainerWidth","useState","maxValue","useMemo","Math","max","map","d","data","v","value","flat","needsHorizontalScroll","length","calculatedChartWidth","user","useAuth","defaultCurrencySymbol","_a","currency_data","symbol","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartWidth","chartHeight","d3.select","selectAll","remove","svg","attr","append","x0","d3.scaleBand","domain","month","range","padding","x1","bandwidth","y","d3.scaleLinear","d3.max","nice","xAxis","call","d3.axisBottom","tickPadding","d3.axisLeft","tickFormat","formatNumber","num","d3.format","replace","select","ticks","enter","style","type","color","ref","children","jsx","position","overflowX","overflowY","viewBox","display"],"mappings":"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"}

package/dist/components/charts/groupBarChart/GroupBarChart.d.ts

@@ -6,4 +6,5 @@ export interface IGroupChartProps {
     line?: boolean;
 }
 declare const GroupedBarChart: ({ chartData, height, barWidth, margin, line }: IGroupChartProps) => import("react/jsx-runtime").JSX.Element;
+export { GroupedBarChart };
 export default GroupedBarChart;

package/dist/components/charts/multiLineChart/multi-line-chart/index.esm.js

@@ -95,6 +95,7 @@ const MultiLineChart = ({
   return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width: "100%", height, viewBox: `0 0 ${containerWidth} ${height}` }) }) });
 };
 export {
+  MultiLineChart,
   MultiLineChart as default
 };
 //# sourceMappingURL=index.esm.js.map