@erpsquad/common 1.8.6 → 1.8.7

package/dist/components/Dashboard/dashboard-header/index.js

@@ -1,7 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../typography/typography/index.js"),i=require("../../chip/chip/index.js"),a=require("../../../images/index.js"),t=require("react"),n=require("../../menu/menu/index.js"),o=require("react-i18next"),s=require("../../../node_modules/@mui/material/IconButton/IconButton/index.js"),d=require("../../../node_modules/@mui/material/MenuItem/MenuItem/index.js");exports.default=({title:l,customElement:c,showEdit:u=!0,showDropDowan:m=!0})=>{const{t:h}=o.useTranslation(),[x,j]=t.useState(!1),[p,g]=t.useState(null),b=()=>{g(null)};/* @__PURE__ */
-return e.jsx("div",{children:/* @__PURE__ */e.jsxs("div",{className:"header-title",children:[
-/* @__PURE__ */e.jsx(r.Typography,{type:"h3",weight:"medium",color:"theme.secondary.1000",children:l}),
-/* @__PURE__ */e.jsxs("div",{className:"header-right-wrap",children:[c,u&&/* @__PURE__ */e.jsx(i.default,{type:"normal",label:h(x?"manufacturing.dashboard.editing_dashboard_mode_label":"manufacturing.dashboard.edit_layout_mode_label"),className:x?"edit-box":"edit-box edit-box--InActive",icon:/* @__PURE__ */e.jsx("img",{src:x?a.images.common.editIcon:a.images.edit,alt:h("common.edit")}),onClick:()=>j(!0),active:x}),m&&/* @__PURE__ */e.jsxs("div",{children:[
-/* @__PURE__ */e.jsx(s.default,{color:"inherit",size:"small",onClick:e=>{g(e.currentTarget)},children:/* @__PURE__ */e.jsx("img",{src:a.images.more,alt:h("manufacturing.dashboard.more_icon_label")})}),
-/* @__PURE__ */e.jsx(n.default,{anchorEl:p,open:Boolean(p),onClose:b,className:"dropdown-inner calender-drp",children:/* @__PURE__ */e.jsx(d.default,{onClick:b,children:h("common.export")})})]})]})]})})};
-//# sourceMappingURL=index.js.map

package/dist/components/Dashboard/dashboard-header/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Dashboard/dashboard-header.tsx"],"sourcesContent":["\nimport Typography from \"../typography/typography\";\nimport Chip from \"../chip/chip\";\nimport images from '../../assets/images';\nimport { useState } from \"react\";\nimport { IconButton, MenuItem } from '@mui/material';\nimport Menu from '../menu/menu';\nimport { useTranslation } from 'react-i18next';\nconst DashBoardHeader = ({ title, customElement, showEdit = true, showDropDowan = true }) => {\n    const { t } = useTranslation();\n    //Local State\n    const [isEditingMode, setIsEditingMode] = useState<boolean>(false);\n    const [anchorMoreEl, setAnchorMoreEl] = useState<\n        null | (EventTarget & HTMLButtonElement)\n    >(null);\n\n\n\n\n    const handleMoreIconClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setAnchorMoreEl(event.currentTarget);\n    };\n\n    const handleMoreIconClose = () => {\n        setAnchorMoreEl(null);\n    };\n\n    //   const handleConfirm = () => {\n    //     setIsDiscardModalOpen(false);\n    //     setIsEditingMode(false);\n    //   };\n\n    //   const handleSaveChange = (event: SelectChangeEvent<unknown>) => {\n    //     setIsEditingMode(false);\n    //   };\n    return (\n        <div>\n            <div className='header-title'>\n                <Typography type='h3' weight={'medium'} color={'theme.secondary.1000'}>\n                    {title}\n                </Typography>\n                <div className='header-right-wrap'>\n\n                    {customElement}\n                    {showEdit && <Chip\n                        type='normal'\n                        label={isEditingMode ? t('manufacturing.dashboard.editing_dashboard_mode_label') : t('manufacturing.dashboard.edit_layout_mode_label')}\n                        className={`${isEditingMode ? 'edit-box' : 'edit-box edit-box--InActive'\n                            }`}\n                        icon={\n                            <img\n                                src={isEditingMode ? images.common.editIcon : images.edit}\n                                alt={t('common.edit')}\n                            />\n                        }\n                        onClick={() => setIsEditingMode(true)}\n                        active={isEditingMode}\n                    />\n                    }\n                    {\n                        showDropDowan && <div>\n                            <IconButton\n                                color='inherit'\n                                size='small'\n                                onClick={handleMoreIconClick}>\n                                <img src={images.more} alt={t('manufacturing.dashboard.more_icon_label')} />\n                            </IconButton>\n                            <Menu\n                                anchorEl={anchorMoreEl}\n                                open={Boolean(anchorMoreEl)}\n                                onClose={handleMoreIconClose}\n                                className='dropdown-inner calender-drp'>\n                                <MenuItem onClick={handleMoreIconClose}>{t('common.export')}</MenuItem>\n                            </Menu>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default DashBoardHeader;\n"],"names":["title","customElement","showEdit","showDropDowan","t","useTranslation","isEditingMode","setIsEditingMode","useState","anchorMoreEl","setAnchorMoreEl","handleMoreIconClose","jsx","children","jsxs","className","Typography","type","weight","color","Chip","label","icon","src","images","common","editIcon","edit","alt","onClick","active","IconButton","size","event","currentTarget","more","Menu","anchorEl","open","Boolean","onClose","MenuItem"],"mappings":"qeAQwB,EAAGA,QAAOC,gBAAeC,YAAW,EAAMC,iBAAgB,MAC9E,MAAMC,EAAEA,GAAMC,oBAEPC,EAAeC,GAAoBC,EAAAA,UAAkB,IACrDC,EAAcC,GAAmBF,EAAAA,SAEtC,MASIG,EAAsB,KACxBD,EAAgB;AAWpB,OACIE,EAAAA,IAAC,MAAA,CACGC,wBAAAC,EAAAA,KAAC,MAAA,CAAIC,UAAU,eACXF,SAAA;eAAAD,EAAAA,IAACI,EAAAA,YAAWC,KAAK,KAAKC,OAAQ,SAAUC,MAAO,uBAC1CN,SAAAb;iBAELc,KAAC,MAAA,CAAIC,UAAU,oBAEVF,SAAA,CAAAZ,EACAC,kBAAYU,EAAAA,IAACQ,EAAAA,QAAA,CACVH,KAAK,SACLI,MAAuBjB,EAAhBE,EAAkB,uDAA4D,kDACrFS,UAAcT,EAAgB,WAAa,8BAE3CgB,oBACIV,EAAAA,IAAC,MAAA,CACGW,IAAKjB,EAAgBkB,EAAAA,OAAOC,OAAOC,SAAWF,EAAAA,OAAOG,KACrDC,IAAKxB,EAAE,iBAGfyB,QAAS,IAAMtB,GAAiB,GAChCuB,OAAQxB,IAIRH,yBAAkB,MAAA,CACdU,SAAA;eAAAD,EAAAA,IAACmB,EAAAA,QAAA,CACGZ,MAAM,UACNa,KAAK,QACLH,QA7CCI,IACzBvB,EAAgBuB,EAAMC,gBA6CErB,wBAAAD,EAAAA,IAAC,OAAIW,IAAKC,SAAOW,KAAMP,IAAKxB,EAAE;eAElCQ,EAAAA,IAACwB,EAAAA,QAAA,CACGC,SAAU5B,EACV6B,KAAMC,QAAQ9B,GACd+B,QAAS7B,EACTI,UAAU,8BACVF,8BAAC4B,EAAAA,QAAA,CAASZ,QAASlB,EAAsBE,SAAAT,EAAE"}

package/dist/components/activityLog/activity-log/index.esm.js

@@ -1,104 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-/* empty css                             */
-import { Typography } from "../../typography/typography/index.esm.js";
-import dayjs from "dayjs";
-import formatText from "../../../utils/format-text/index.esm.js";
-import { useTranslation } from "react-i18next";
-import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
-import Timeline from "../../../node_modules/@mui/lab/Timeline/Timeline/index.esm.js";
-import TimelineItem from "../../../node_modules/@mui/lab/TimelineItem/TimelineItem/index.esm.js";
-import TimelineSeparator from "../../../node_modules/@mui/lab/TimelineSeparator/TimelineSeparator/index.esm.js";
-import TimelineDot from "../../../node_modules/@mui/lab/TimelineDot/TimelineDot/index.esm.js";
-import TimelineConnector from "../../../node_modules/@mui/lab/TimelineConnector/TimelineConnector/index.esm.js";
-import TimelineContent from "../../../node_modules/@mui/lab/TimelineContent/TimelineContent/index.esm.js";
-const ActivityTag = (props) => {
-  const { t } = useTranslation();
-  const { data } = props;
-  const formatDateTime = (date) => {
-    const formattedDate = dayjs(date).format("DD MMM, YYYY");
-    const formattedTime = dayjs(date).format("HH:mm");
-    return `${formattedDate} • ${formattedTime}`;
-  };
-  const actions = {
-    view: t("common.viewed_text"),
-    delete: t("common.deleted_text"),
-    create: t("common.created_text"),
-    update: t("common.updated_text")
-  };
-  return (
-    // <Box position='relative'>
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Timeline, { className: "Timeline", children: /* @__PURE__ */ jsxs(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          gap: 2,
-          padding: "16px"
-        },
-        className: "box-class",
-        children: [
-          /* @__PURE__ */ jsx(Typography, { type: "s3", weight: "medium", color: "theme.secondary.800", children: t("common.activities_label") }),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                height: 400,
-                overflowY: "auto",
-                gap: 1.5,
-                display: "flex",
-                flexDirection: "column"
-              },
-              children: data == null ? void 0 : data.map((item, index) => {
-                var _a;
-                return /* @__PURE__ */ jsx("div", { className: "Timeline--Activity", children: /* @__PURE__ */ jsxs(TimelineItem, { children: [
-                  /* @__PURE__ */ jsxs(TimelineSeparator, { children: [
-                    /* @__PURE__ */ jsx(
-                      TimelineDot,
-                      {
-                        color: "primary",
-                        sx: { backgroundColor: "#D3D3D4" }
-                      }
-                    ),
-                    data.length - 1 !== index && /* @__PURE__ */ jsx(TimelineConnector, {})
-                  ] }),
-                  /* @__PURE__ */ jsxs(TimelineContent, { className: "Timeline--Content", children: [
-                    /* @__PURE__ */ jsxs(
-                      Typography,
-                      {
-                        type: "s5",
-                        color: "theme.secondary.800",
-                        className: "Timeline--ActivityLogItem",
-                        children: [
-                          /* @__PURE__ */ jsx("b", { children: formatText(item.username) }),
-                          " ",
-                          actions[item.action],
-                          " ",
-                          /* @__PURE__ */ jsx("b", { children: formatText((_a = item.resource) == null ? void 0 : _a.replace("_", " ")) })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        type: "s5",
-                        color: "theme.secondary.800",
-                        className: "Timeline--ActivityLogItem",
-                        children: formatDateTime(item == null ? void 0 : item.created_at)
-                      }
-                    )
-                  ] })
-                ] }, index) });
-              })
-            }
-          )
-        ]
-      }
-    ) }) })
-  );
-};
-export {
-  ActivityTag,
-  ActivityTag as default
-};
-//# sourceMappingURL=index.esm.js.map

package/dist/components/activityLog/activity-log/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/activityLog/activity-log.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Box } from '@mui/material';\nimport Timeline from '@mui/lab/Timeline';\nimport TimelineItem from '@mui/lab/TimelineItem';\nimport TimelineSeparator from '@mui/lab/TimelineSeparator';\nimport TimelineConnector from '@mui/lab/TimelineConnector';\nimport TimelineContent from '@mui/lab/TimelineContent';\nimport TimelineDot from '@mui/lab/TimelineDot';\nimport './activity-log.scss';\nimport Typography from '../typography/typography';\nimport dayjs from 'dayjs';\nimport formatText from '../../utils/format-text';\nimport { useTranslation } from 'react-i18next';\n\nexport const ActivityTag = (props: any) => {\n\tconst { t } = useTranslation();\n\tconst { data } = props;\n\n\tconst formatDateTime = (date: Date): string => {\n\t\tconst formattedDate = dayjs(date).format('DD MMM, YYYY');\n\t\tconst formattedTime = dayjs(date).format('HH:mm');\n\t\treturn `${formattedDate} • ${formattedTime}`;\n\t};\n\n\tconst actions = {\n\t\tview: t('common.viewed_text'),\n\t\tdelete: t('common.deleted_text'),\n\t\tcreate: t('common.created_text'),\n\t\tupdate: t('common.updated_text')\n\t};\n\treturn (\n\t\t// <Box position='relative'>\n\t\t<Box>\n\t\t\t<Timeline className='Timeline'>\n\t\t\t\t<Box\n\t\t\t\t\tsx={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: 2,\n\t\t\t\t\t\tpadding: '16px'\n\t\t\t\t\t}}\n\t\t\t\t\tclassName='box-class'>\n\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.800'>\n\t\t\t\t\t\t{t('common.activities_label')}\n\t\t\t\t\t</Typography>\n\t\t\t\t\t<Box\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\theight: 400,\n\t\t\t\t\t\t\toverflowY: 'auto',\n\t\t\t\t\t\t\tgap: 1.5,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column'\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t{data?.map((item: any, index: number) => (\n\t\t\t\t\t\t\t<div className='Timeline--Activity'>\n\t\t\t\t\t\t\t\t<TimelineItem key={index}>\n\t\t\t\t\t\t\t\t\t<TimelineSeparator>\n\t\t\t\t\t\t\t\t\t\t<TimelineDot\n\t\t\t\t\t\t\t\t\t\t\tcolor='primary'\n\t\t\t\t\t\t\t\t\t\t\tsx={{ backgroundColor: '#D3D3D4' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{data.length - 1 !== index && <TimelineConnector />}\n\t\t\t\t\t\t\t\t\t</TimelineSeparator>\n\t\t\t\t\t\t\t\t\t<TimelineContent className='Timeline--Content'>\n\t\t\t\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\t\t\t\ttype='s5'\n\t\t\t\t\t\t\t\t\t\t\tcolor='theme.secondary.800'\n\t\t\t\t\t\t\t\t\t\t\tclassName='Timeline--ActivityLogItem'>\n\t\t\t\t\t\t\t\t\t\t\t<b>{formatText(item.username)}</b> {actions[item.action]}{' '}\n\t\t\t\t\t\t\t\t\t\t\t<b>{formatText(item.resource?.replace('_', ' '))}</b>\n\t\t\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\t\t\t\ttype='s5'\n\t\t\t\t\t\t\t\t\t\t\tcolor='theme.secondary.800'\n\t\t\t\t\t\t\t\t\t\t\tclassName='Timeline--ActivityLogItem'>\n\t\t\t\t\t\t\t\t\t\t\t{formatDateTime(item?.created_at)}\n\t\t\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t\t\t</TimelineContent>\n\t\t\t\t\t\t\t\t</TimelineItem>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t</Timeline>\n\t\t</Box>\n\t\t// </Box>\n\t);\n};\n\nexport default ActivityTag;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAeO,MAAM,cAAc,CAAC,UAAe;AAC1C,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM,EAAE,SAAS;AAEjB,QAAM,iBAAiB,CAAC,SAAuB;AAC9C,UAAM,gBAAgB,MAAM,IAAI,EAAE,OAAO,cAAc;AACvD,UAAM,gBAAgB,MAAM,IAAI,EAAE,OAAO,OAAO;AAChD,WAAO,GAAG,aAAa,MAAM,aAAa;AAAA,EAC3C;AAEA,QAAM,UAAU;AAAA,IACf,MAAM,EAAE,oBAAoB;AAAA,IAC5B,QAAQ,EAAE,qBAAqB;AAAA,IAC/B,QAAQ,EAAE,qBAAqB;AAAA,IAC/B,QAAQ,EAAE,qBAAqB;AAAA,EAAA;AAEhC;AAAA;AAAA,IAEC,oBAAC,KAAA,EACA,UAAA,oBAAC,UAAA,EAAS,WAAU,YACnB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,IAAI;AAAA,UACH,SAAS;AAAA,UACT,eAAe;AAAA,UACf,KAAK;AAAA,UACL,SAAS;AAAA,QAAA;AAAA,QAEV,WAAU;AAAA,QACV,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,QAAO,UAAS,OAAM,uBAC1C,UAAA,EAAE,yBAAyB,EAAA,CAC7B;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,IAAI;AAAA,gBACH,QAAQ;AAAA,gBACR,WAAW;AAAA,gBACX,KAAK;AAAA,gBACL,SAAS;AAAA,gBACT,eAAe;AAAA,cAAA;AAAA,cAEf,UAAA,6BAAM,IAAI,CAAC,MAAW,UAAA;;2CACrB,OAAA,EAAI,WAAU,sBACd,UAAA,qBAAC,cAAA,EACA,UAAA;AAAA,kBAAA,qBAAC,mBAAA,EACA,UAAA;AAAA,oBAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACA,OAAM;AAAA,wBACN,IAAI,EAAE,iBAAiB,UAAA;AAAA,sBAAU;AAAA,oBAAA;AAAA,oBAEjC,KAAK,SAAS,MAAM,6BAAU,mBAAA,CAAA,CAAkB;AAAA,kBAAA,GAClD;AAAA,kBACA,qBAAC,iBAAA,EAAgB,WAAU,qBAC1B,UAAA;AAAA,oBAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACA,MAAK;AAAA,wBACL,OAAM;AAAA,wBACN,WAAU;AAAA,wBACV,UAAA;AAAA,0BAAA,oBAAC,KAAA,EAAG,UAAA,WAAW,KAAK,QAAQ,GAAE;AAAA,0BAAI;AAAA,0BAAE,QAAQ,KAAK,MAAM;AAAA,0BAAG;AAAA,0BAC1D,oBAAC,OAAG,UAAA,YAAW,UAAK,aAAL,mBAAe,QAAQ,KAAK,IAAI,EAAA,CAAE;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAElD;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACA,MAAK;AAAA,wBACL,OAAM;AAAA,wBACN,WAAU;AAAA,wBACT,UAAA,eAAe,6BAAM,UAAU;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACjC,EAAA,CACD;AAAA,gBAAA,EAAA,GAtBkB,KAuBnB,GACD;AAAA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,GAEF,EAAA,CACD;AAAA;AAGF;"}

package/dist/components/activityLog/activity-log/index.js

@@ -1,14 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");;/* empty css                          */var i=,/* empty css                                 */t=require("dayjs"),l=,/* empty css                                */r=require("react-i18next"),n=,/* empty css                                                 */a=,/* empty css                                                      */o=,/* empty css                                                              */s=,/* empty css                                                                        */d=,/* empty css                                                            */m=,/* empty css                                                                        */u=;/* empty css                                                                    */function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=/* @__PURE__ */c(t);const p=t=>{const{t:c}=r.useTranslation(),{data:p}=t,j={view:c("common.viewed_text"),delete:c("common.deleted_text"),create:c("common.created_text"),update:c("common.updated_text")};
-/* @__PURE__ */
-return e.jsx(n.default,{children:/* @__PURE__ */e.jsx(a.default,{className:"Timeline",children:/* @__PURE__ */e.jsxs(n.default,{sx:{display:"flex",flexDirection:"column",gap:2,padding:"16px"},className:"box-class",children:[
-/* @__PURE__ */e.jsx(i.Typography,{type:"s3",weight:"medium",color:"theme.secondary.800",children:c("common.activities_label")}),
-/* @__PURE__ */e.jsx(n.default,{sx:{height:400,overflowY:"auto",gap:1.5,display:"flex",flexDirection:"column"},children:null==p?void 0:p.map((t,r)=>{var n,a;/* @__PURE__ */
-return e.jsx("div",{className:"Timeline--Activity",children:/* @__PURE__ */e.jsxs(o.default,{children:[
-/* @__PURE__ */e.jsxs(s.default,{children:[
-/* @__PURE__ */e.jsx(d.default,{color:"primary",sx:{backgroundColor:"#D3D3D4"}}),p.length-1!==r&&/* @__PURE__ */e.jsx(m.default,{})]}),
-/* @__PURE__ */e.jsxs(u.default,{className:"Timeline--Content",children:[
-/* @__PURE__ */e.jsxs(i.Typography,{type:"s5",color:"theme.secondary.800",className:"Timeline--ActivityLogItem",children:[
-/* @__PURE__ */e.jsx("b",{children:l.default(t.username)})," ",j[t.action]," ",
-/* @__PURE__ */e.jsx("b",{children:l.default(null==(n=t.resource)?void 0:n.replace("_"," "))})]}),
-/* @__PURE__ */e.jsx(i.Typography,{type:"s5",color:"theme.secondary.800",className:"Timeline--ActivityLogItem",children:(a=null==t?void 0:t.created_at,`${x.default(a).format("DD MMM, YYYY")} • ${x.default(a).format("HH:mm")}`)})]})]},r)})})})]})})})};exports.ActivityTag=p,exports.default=p;
-//# sourceMappingURL=index.js.map

package/dist/components/activityLog/activity-log/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/activityLog/activity-log.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Box } from '@mui/material';\nimport Timeline from '@mui/lab/Timeline';\nimport TimelineItem from '@mui/lab/TimelineItem';\nimport TimelineSeparator from '@mui/lab/TimelineSeparator';\nimport TimelineConnector from '@mui/lab/TimelineConnector';\nimport TimelineContent from '@mui/lab/TimelineContent';\nimport TimelineDot from '@mui/lab/TimelineDot';\nimport './activity-log.scss';\nimport Typography from '../typography/typography';\nimport dayjs from 'dayjs';\nimport formatText from '../../utils/format-text';\nimport { useTranslation } from 'react-i18next';\n\nexport const ActivityTag = (props: any) => {\n\tconst { t } = useTranslation();\n\tconst { data } = props;\n\n\tconst formatDateTime = (date: Date): string => {\n\t\tconst formattedDate = dayjs(date).format('DD MMM, YYYY');\n\t\tconst formattedTime = dayjs(date).format('HH:mm');\n\t\treturn `${formattedDate} • ${formattedTime}`;\n\t};\n\n\tconst actions = {\n\t\tview: t('common.viewed_text'),\n\t\tdelete: t('common.deleted_text'),\n\t\tcreate: t('common.created_text'),\n\t\tupdate: t('common.updated_text')\n\t};\n\treturn (\n\t\t// <Box position='relative'>\n\t\t<Box>\n\t\t\t<Timeline className='Timeline'>\n\t\t\t\t<Box\n\t\t\t\t\tsx={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: 2,\n\t\t\t\t\t\tpadding: '16px'\n\t\t\t\t\t}}\n\t\t\t\t\tclassName='box-class'>\n\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.800'>\n\t\t\t\t\t\t{t('common.activities_label')}\n\t\t\t\t\t</Typography>\n\t\t\t\t\t<Box\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\theight: 400,\n\t\t\t\t\t\t\toverflowY: 'auto',\n\t\t\t\t\t\t\tgap: 1.5,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column'\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t{data?.map((item: any, index: number) => (\n\t\t\t\t\t\t\t<div className='Timeline--Activity'>\n\t\t\t\t\t\t\t\t<TimelineItem key={index}>\n\t\t\t\t\t\t\t\t\t<TimelineSeparator>\n\t\t\t\t\t\t\t\t\t\t<TimelineDot\n\t\t\t\t\t\t\t\t\t\t\tcolor='primary'\n\t\t\t\t\t\t\t\t\t\t\tsx={{ backgroundColor: '#D3D3D4' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{data.length - 1 !== index && <TimelineConnector />}\n\t\t\t\t\t\t\t\t\t</TimelineSeparator>\n\t\t\t\t\t\t\t\t\t<TimelineContent className='Timeline--Content'>\n\t\t\t\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\t\t\t\ttype='s5'\n\t\t\t\t\t\t\t\t\t\t\tcolor='theme.secondary.800'\n\t\t\t\t\t\t\t\t\t\t\tclassName='Timeline--ActivityLogItem'>\n\t\t\t\t\t\t\t\t\t\t\t<b>{formatText(item.username)}</b> {actions[item.action]}{' '}\n\t\t\t\t\t\t\t\t\t\t\t<b>{formatText(item.resource?.replace('_', ' '))}</b>\n\t\t\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\t\t\t\ttype='s5'\n\t\t\t\t\t\t\t\t\t\t\tcolor='theme.secondary.800'\n\t\t\t\t\t\t\t\t\t\t\tclassName='Timeline--ActivityLogItem'>\n\t\t\t\t\t\t\t\t\t\t\t{formatDateTime(item?.created_at)}\n\t\t\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t\t\t</TimelineContent>\n\t\t\t\t\t\t\t\t</TimelineItem>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t</Timeline>\n\t\t</Box>\n\t\t// </Box>\n\t);\n};\n\nexport default ActivityTag;\n"],"names":["ActivityTag","props","t","useTranslation","data","actions","view","delete","create","update","jsx","Box","children","Timeline","className","jsxs","sx","display","flexDirection","gap","padding","Typography","type","weight","color","height","overflowY","map","item","index","date","TimelineItem","TimelineSeparator","TimelineDot","backgroundColor","length","TimelineConnector","TimelineContent","formatText","username","action","_a","resource","replace","created_at","dayjs","format"],"mappings":"m7BAeO,MAAMA,EAAeC,IAC3B,MAAMC,EAAEA,GAAMC,oBACRC,KAAEA,GAASH,EAQXI,EAAU,CACfC,KAAMJ,EAAE,sBACRK,OAAQL,EAAE,uBACVM,OAAQN,EAAE,uBACVO,OAAQP,EAAE;;AAEX,OAECQ,MAACC,EAAAA,QAAA,CACAC,wBAAAF,EAAAA,IAACG,EAAAA,QAAA,CAASC,UAAU,WACnBF,wBAAAG,EAAAA,KAACJ,EAAAA,QAAA,CACAK,GAAI,CACHC,QAAS,OACTC,cAAe,SACfC,IAAK,EACLC,QAAS,QAEVN,UAAU,YACVF,SAAA;eAAAF,EAAAA,IAACW,EAAAA,WAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,sBAC1CZ,SAAAV,EAAE;eAEJQ,EAAAA,IAACC,EAAAA,QAAA,CACAK,GAAI,CACHS,OAAQ,IACRC,UAAW,OACXP,IAAK,IACLF,QAAS,OACTC,cAAe,UAEfN,SAAA,MAAAR,OAAA,EAAAA,EAAMuB,IAAI,CAACC,EAAWC,WAnCJC;aAoCjB,MAAA,CAAIhB,UAAU,qBACdF,wBAAAG,EAAAA,KAACgB,EAAAA,QAAA,CACAnB,SAAA;eAAAG,OAACiB,EAAAA,QAAA,CACApB,SAAA;eAAAF,EAAAA,IAACuB,EAAAA,QAAA,CACAT,MAAM,UACNR,GAAI,CAAEkB,gBAAiB,aAEvB9B,EAAK+B,OAAS,IAAMN,wBAAUO,EAAAA,QAAA,CAAA;iBAEhCrB,KAACsB,EAAAA,QAAA,CAAgBvB,UAAU,oBAC1BF,SAAA;eAAAG,EAAAA,KAACM,EAAAA,WAAA,CACAC,KAAK,KACLE,MAAM,sBACNV,UAAU,4BACVF,SAAA;eAAAF,EAAAA,IAAC,IAAA,CAAGE,SAAA0B,EAAAA,QAAWV,EAAKW,YAAc,IAAElC,EAAQuB,EAAKY,QAAS;eAC1D9B,EAAAA,IAAC,KAAGE,SAAA0B,UAAW,OAAAG,EAAAb,EAAKc,eAAL,EAAAD,EAAeE,QAAQ,IAAK;eAE5CjC,EAAAA,IAACW,EAAAA,WAAA,CACAC,KAAK,KACLE,MAAM,sBACNV,UAAU,4BACTF,UAzDakB,EAyDE,MAAAF,OAAA,EAAAA,EAAMgB,WAtDxB,GAFeC,EAAAA,QAAMf,GAAMgB,OAAO,qBACnBD,EAAAA,QAAMf,GAAMgB,OAAO,mBAmChBjB"}

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

@@ -1,31 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Typography } from "../../typography/typography/index.esm.js";
-/* empty css                            */
-import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
-function ChartLegends({ legends, colors }) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        alignContent: "space-between"
-      },
-      children: legends.map((legend, index) => /* @__PURE__ */ jsxs("div", { style: { marginLeft: "20px", display: "flex" }, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "legends-circle",
-            style: { backgroundColor: colors[index] }
-          }
-        ),
-        /* @__PURE__ */ jsx(Typography, { type: "s5", sx: { color: "#656669" }, children: legend })
-      ] }))
-    }
-  );
-}
-export {
-  ChartLegends,
-  ChartLegends as default
-};
-//# sourceMappingURL=index.esm.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/charts/ChartLegends.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport Typography from '../typography/typography';\nimport './chartLegend.scss';\ninterface IProps {\n\tlegends: string[];\n\tcolors: string[];\n}\nexport function ChartLegends({ legends, colors }: IProps) {\n\treturn (\n\t\t<Box\n\t\t\tsx={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'center',\n\t\t\t\talignContent: 'space-between'\n\t\t\t}}>\n\t\t\t{legends.map((legend, index) => (\n\t\t\t\t<div style={{ marginLeft: '20px', display: 'flex' }}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName='legends-circle'\n\t\t\t\t\t\tstyle={{ backgroundColor: colors[index] }}></div>\n\t\t\t\t\t<Typography type='s5' sx={{ color: '#656669' }}>\n\t\t\t\t\t\t{legend}\n\t\t\t\t\t</Typography>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</Box>\n\t);\n}\n\nexport default ChartLegends\n"],"names":[],"mappings":";;;;AAOO,SAAS,aAAa,EAAE,SAAS,UAAkB;AACzD,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,IAAI;AAAA,QACH,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,cAAc;AAAA,MAAA;AAAA,MAEd,UAAA,QAAQ,IAAI,CAAC,QAAQ,UACrB,qBAAC,OAAA,EAAI,OAAO,EAAE,YAAY,QAAQ,SAAS,UAC1C,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAO,EAAE,iBAAiB,OAAO,KAAK,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,QACzC,oBAAC,cAAW,MAAK,MAAK,IAAI,EAAE,OAAO,UAAA,GACjC,UAAA,OAAA,CACF;AAAA,MAAA,GACD,CACA;AAAA,IAAA;AAAA,EAAA;AAGJ;"}

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

@@ -1,5 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=;/* empty css                                 */;/* empty css                         */var s=;/* empty css                                                 */function t({legends:t,colors:n}){/* @__PURE__ */
-return e.jsx(s.default,{sx:{display:"flex",justifyContent:"center",alignContent:"space-between"},children:t.map((s,t)=>/* @__PURE__ */e.jsxs("div",{style:{marginLeft:"20px",display:"flex"},children:[
-/* @__PURE__ */e.jsx("div",{className:"legends-circle",style:{backgroundColor:n[t]}}),
-/* @__PURE__ */e.jsx(r.Typography,{type:"s5",sx:{color:"#656669"},children:s})]}))})}exports.ChartLegends=t,exports.default=t;
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/charts/ChartLegends.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport Typography from '../typography/typography';\nimport './chartLegend.scss';\ninterface IProps {\n\tlegends: string[];\n\tcolors: string[];\n}\nexport function ChartLegends({ legends, colors }: IProps) {\n\treturn (\n\t\t<Box\n\t\t\tsx={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'center',\n\t\t\t\talignContent: 'space-between'\n\t\t\t}}>\n\t\t\t{legends.map((legend, index) => (\n\t\t\t\t<div style={{ marginLeft: '20px', display: 'flex' }}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName='legends-circle'\n\t\t\t\t\t\tstyle={{ backgroundColor: colors[index] }}></div>\n\t\t\t\t\t<Typography type='s5' sx={{ color: '#656669' }}>\n\t\t\t\t\t\t{legend}\n\t\t\t\t\t</Typography>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</Box>\n\t);\n}\n\nexport default ChartLegends\n"],"names":["ChartLegends","legends","colors","jsx","Box","sx","display","justifyContent","alignContent","children","map","legend","index","jsxs","style","marginLeft","className","backgroundColor","Typography","type","color"],"mappings":"uQAOO,SAASA,GAAaC,QAAEA,EAAAC,OAASA;AACvC,OACCC,EAAAA,IAACC,EAAAA,QAAA,CACAC,GAAI,CACHC,QAAS,OACTC,eAAgB,SAChBC,aAAc,iBAEdC,SAAAR,EAAQS,IAAI,CAACC,EAAQC,mBACrBC,EAAAA,KAAC,MAAA,CAAIC,MAAO,CAAEC,WAAY,OAAQT,QAAS,QAC1CG,SAAA;eAAAN,EAAAA,IAAC,MAAA,CACAa,UAAU,iBACVF,MAAO,CAAEG,gBAAiBf,EAAOU;eAClCT,EAAAA,IAACe,EAAAA,YAAWC,KAAK,KAAKd,GAAI,CAAEe,MAAO,WACjCX,SAAAE,SAMP"}

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

@@ -1,110 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-import linear from "../../../node_modules/d3-scale/src/linear/index.esm.js";
-import max from "../../../node_modules/d3-array/src/max/index.esm.js";
-import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
-import select from "../../../node_modules/d3-selection/src/select/index.esm.js";
-import { point } from "../../../node_modules/d3-scale/src/band/index.esm.js";
-import { axisBottom, axisLeft } from "../../../node_modules/d3-axis/src/axis/index.esm.js";
-import area from "../../../node_modules/d3-shape/src/area/index.esm.js";
-import line from "../../../node_modules/d3-shape/src/line/index.esm.js";
-import { format } from "../../../node_modules/d3-format/src/defaultLocale/index.esm.js";
-import { monotoneX } from "../../../node_modules/d3-shape/src/curve/monotone/index.esm.js";
-import curveLinear from "../../../node_modules/d3-shape/src/curve/linear/index.esm.js";
-const formatNumber = (num, symbol, labelType) => {
-  if (labelType === "inPercent") {
-    return `${format(".0%")(num / 100)}`;
-  } else if (labelType === "inValue") {
-    return `${symbol || ""} ${format(".2s")(num).replace("k", "K")}`;
-  }
-  return num.toString();
-};
-const AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = "inValue", currency, colors, customLegend }) => {
-  const svgRef = useRef(null);
-  const wrapperRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [tooltipData, setTooltipData] = useState(null);
-  useEffect(() => {
-    const wrapper = wrapperRef.current;
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (entries[0]) {
-        const newWidth = entries[0].contentRect.width;
-        setContainerWidth(newWidth);
-      }
-    });
-    if (wrapper) {
-      resizeObserver.observe(wrapper);
-    }
-    return () => {
-      if (wrapper) {
-        resizeObserver.unobserve(wrapper);
-      }
-    };
-  }, []);
-  useEffect(() => {
-    if (containerWidth === 0) return;
-    const margin = { top: 20, right: 30, bottom: 30, left: 40 };
-    const width = containerWidth - margin.left - margin.right;
-    const chartHeight = height - margin.top - margin.bottom;
-    select(svgRef.current).selectAll("*").remove();
-    const svg = select(svgRef.current).attr("width", containerWidth).attr("height", height).append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-    const x = point().domain(data[0].values.map((d) => d.month)).range([0, width]);
-    const y = linear().domain([0, max(data, (dataset) => max(dataset.values, (d) => d.value))]).range([chartHeight, 0]);
-    const numTicks = Math.floor(width / 80);
-    const xAxis = axisBottom(x).ticks(numTicks);
-    const xAxisGroup = svg.append("g").attr("transform", `translate(0,${chartHeight})`).call(xAxis);
-    xAxisGroup.selectAll("text").attr("transform", "translate(0, 10)").attr("color", "#8E8E93").style("text-anchor", "middle");
-    const yAxis = svg.append("g");
-    yAxis.append("g").attr("color", "#8E8E93").attr("transform", `translate(-10,0)`).call(axisLeft(y).tickSize(-width).tickFormat(
-      (d) => customLabelFormatter ? customLabelFormatter(d) : formatNumber(d, currency, yAxisLabelType)
-    ).tickSizeOuter(0)).selectAll("line").attr("stroke-dasharray", "3,3").attr("stroke", "#D3D3D4");
-    xAxisGroup.selectAll(".tick line").remove();
-    yAxis.select(".domain").attr("stroke", "none");
-    xAxisGroup.select(".domain").attr("stroke", "none");
-    const line$1 = (isSmooth) => line().x((d) => x(d.month)).y((d) => y(d.value)).curve(isSmooth ? monotoneX : curveLinear);
-    const area$1 = area().x((d) => x(d.month)).y0(chartHeight).y1((d) => y(d.value));
-    data.forEach((dataset, i) => {
-      const gradient = svg.append("defs").append("linearGradient").attr("id", `area-gradient-${i}`).attr("x1", "0%").attr("x2", "0%").attr("y1", "0%").attr("y2", "100%");
-      gradient.append("stop").attr("offset", "0%").attr("stop-color", colors[i]).attr("stop-opacity", 0.4);
-      gradient.append("stop").attr("offset", "100%").attr("stop-color", colors[i]).attr("stop-opacity", 0.1);
-      svg.append("path").datum(dataset.values).attr("fill", `url(#area-gradient-${i})`).attr("d", area$1);
-      svg.append("path").datum(dataset.values).attr("fill", "none").attr("stroke", colors[i]).attr("stroke-width", 2).attr("d", line$1(dataset.isSmooth || false));
-      {
-        (dataset == null ? void 0 : dataset.showCircle) && svg.selectAll(`circle-${i}`).data(dataset.values).enter().append("circle").attr("cx", (d) => x(d.month)).attr("cy", (d) => y(d.value)).attr("r", 5).attr("fill", colors[i]).attr("stroke", "#fff").style("cursor", "pointer").on("mouseover", function(event, d) {
-          setTooltipData({
-            x: `${event.pageX + 10}px`,
-            y: `${event.pageY - 30}px`,
-            content: `${dataset.name}: ${d.value}`
-          });
-          select(this).transition().attr("r", 7).attr("fill", "#ff4500");
-        }).on("mouseout", function() {
-          setTooltipData(null);
-          select(this).transition().attr("r", 5).attr("fill", colors[i]);
-        });
-      }
-    });
-  }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);
-  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx("svg", { ref: svgRef, width: "100%", height }),
-      customLegend && customLegend
-    ] }),
-    tooltipData && /* @__PURE__ */ jsx(Box, { sx: {
-      position: "absolute",
-      left: tooltipData.x,
-      top: tooltipData.y,
-      pointerEvents: "none",
-      backgroundColor: "#2EB273",
-      zIndex: "99999",
-      border: "none",
-      borderRadius: "3px",
-      transform: "translate(-50%, -100%)",
-      padding: "2px 6px 2px 6px",
-      gap: "10px"
-    }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "16px", weight: "500", color: "#ffff" }, children: tooltipData.content }) })
-  ] });
-};
-export {
-  AreaLineChart as default
-};
-//# sourceMappingURL=index.esm.js.map

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

@@ -1 +0,0 @@
-{"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":";;;;;;;;;;;;;AAcA,MAAM,eAAe,CAAC,KAAa,QAAgB,cAAsB;AACrE,MAAI,cAAc,aAAa;AAC3B,WAAO,GAAGA,OAAU,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,EACzC,WAAW,cAAc,WAAW;AAChC,WAAO,GAAG,UAAU,EAAE,IAAIA,OAAU,KAAK,EAAE,GAAG,EAAE,QAAQ,KAAK,GAAG,CAAC;AAAA,EACrE;AACA,SAAO,IAAI,SAAA;AACf;AAEA,MAAM,gBAAgB,CAAC,EAAE,MAAM,SAAS,KAAK,sBAAsB,iBAAiB,WAAW,UAAU,QAAQ,aAAA,MAAgC;AAC7I,QAAM,SAAS,OAA6B,IAAI;AAChD,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB,CAAC;AAC9D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAc,IAAI;AACxD,YAAU,MAAM;AACZ,UAAM,UAAU,WAAW;AAE3B,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAAY;AACnD,UAAI,QAAQ,CAAC,GAAG;AACZ,cAAM,WAAW,QAAQ,CAAC,EAAE,YAAY;AACxC,0BAAkB,QAAQ;AAAA,MAC9B;AAAA,IACJ,CAAC;AAED,QAAI,SAAS;AACT,qBAAe,QAAQ,OAAO;AAAA,IAClC;AAEA,WAAO,MAAM;AACT,UAAI,SAAS;AACT,uBAAe,UAAU,OAAO;AAAA,MACpC;AAAA,IACJ;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACZ,QAAI,mBAAmB,EAAG;AAE1B,UAAM,SAAS,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAA;AACvD,UAAM,QAAQ,iBAAiB,OAAO,OAAO,OAAO;AACpD,UAAM,cAAc,SAAS,OAAO,MAAM,OAAO;AAGjDC,WAAU,OAAO,OAAO,EAAE,UAAU,GAAG,EAAE,OAAA;AAEzC,UAAM,MAAMA,OACA,OAAO,OAAO,EACrB,KAAK,SAAS,cAAc,EAC5B,KAAK,UAAU,MAAM,EACrB,OAAO,GAAG,EACV,KAAK,aAAa,aAAa,OAAO,IAAI,IAAI,OAAO,GAAG,GAAG;AAGhE,UAAM,IAAIC,QAEL,OAAO,KAAK,CAAC,EAAE,OAAO,IAAI,CAAA,MAAK,EAAE,KAAK,CAAC,EACvC,MAAM,CAAC,GAAG,KAAK,CAAC;AAErB,UAAM,IAAIC,OACL,EACA,OAAO,CAAC,GAAGC,IAAO,MAAM,CAAA,YAAWA,IAAO,QAAQ,QAAQ,CAAA,MAAK,EAAE,KAAK,CAAC,CAAE,CAAC,EAC1E,MAAM,CAAC,aAAa,CAAC,CAAC;AAG3B,UAAM,WAAW,KAAK,MAAM,QAAQ,EAAE;AACtC,UAAM,QAAQC,WAAc,CAAC,EAAE,MAAM,QAAQ;AAE7C,UAAM,aAAa,IAAI,OAAO,GAAG,EAC5B,KAAK,aAAa,eAAe,WAAW,GAAG,EAC/C,KAAK,KAAK;AAEf,eAAW,UAAU,MAAM,EACtB,KAAK,aAAa,kBAAkB,EACpC,KAAK,SAAS,SAAS,EACvB,MAAM,eAAe,QAAQ;AAGlC,UAAM,QAAQ,IAAI,OAAO,GAAG;AAC5B,UAAM,OAAO,GAAG,EAAE,KAAK,SAAS,SAAS,EAAE,KAAK,aAAa,kBAAkB,EAC1E,KAAKC,SAAY,CAAC,EAAE,SAAS,CAAC,KAAK,EAAE;AAAA,MAAW,CAAC,MAC9C,uBACM,qBAAqB,CAAC,IACtB,aAAa,GAAG,UAAU,cAAc;AAAA,IAAA,EAChD,cAAc,CAAC,CAAQ,EACxB,UAAU,MAAM,EAChB,KAAK,oBAAoB,KAAK,EAC9B,KAAK,UAAU,SAAS;AAE7B,eAAW,UAAU,YAAY,EAAE,OAAA;AACnC,UAAM,OAAO,SAAS,EAAE,KAAK,UAAU,MAAM;AAC7C,eAAW,OAAO,SAAS,EAAE,KAAK,UAAU,MAAM;AAMlD,UAAMC,SAAO,CAAC,aAAsBC,KAAG,EAClC,EAAE,CAAA,MAAK,EAAE,EAAE,KAAK,CAAE,EAClB,EAAE,CAAA,MAAK,EAAE,EAAE,KAAK,CAAC,EACjB,MAAM,WAAWC,YAAoBC,WAAc;AAExD,UAAMC,SAAOC,OACR,EAAE,CAAA,MAAK,EAAE,EAAE,KAAK,CAAE,EAClB,GAAG,WAAW,EACd,GAAG,OAAK,EAAE,EAAE,KAAK,CAAC;AAGvB,SAAK,QAAQ,CAAC,SAAS,MAAM;AAIzB,YAAM,WAAW,IAAI,OAAO,MAAM,EAC7B,OAAO,gBAAgB,EACvB,KAAK,MAAM,iBAAiB,CAAC,EAAE,EAC/B,KAAK,MAAM,IAAI,EACf,KAAK,MAAM,IAAI,EACf,KAAK,MAAM,IAAI,EACf,KAAK,MAAM,MAAM;AAEtB,eAAS,OAAO,MAAM,EACjB,KAAK,UAAU,IAAI,EACnB,KAAK,cAAc,OAAO,CAAC,CAAC,EAC5B,KAAK,gBAAgB,GAAG;AAE7B,eAAS,OAAO,MAAM,EACjB,KAAK,UAAU,MAAM,EACrB,KAAK,cAAc,OAAO,CAAC,CAAC,EAC5B,KAAK,gBAAgB,GAAG;AAG7B,UAAI,OAAO,MAAM,EACZ,MAAM,QAAQ,MAAM,EACpB,KAAK,QAAQ,sBAAsB,CAAC,GAAG,EACvC,KAAK,KAAKD,MAAI;AAGnB,UAAI,OAAO,MAAM,EACZ,MAAM,QAAQ,MAAM,EACpB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,OAAO,CAAC,CAAC,EACxB,KAAK,gBAAgB,CAAC,EACtB,KAAK,KAAKJ,OAAK,QAAQ,YAAY,KAAK,CAAC;AAG9C;AACI,4CAAS,eACL,IAAI,UAAU,UAAU,CAAC,EAAE,EACtB,KAAK,QAAQ,MAAM,EACnB,QACA,OAAO,QAAQ,EACf,KAAK,MAAM,CAAA,MAAK,EAAE,EAAE,KAAK,CAAE,EAC3B,KAAK,MAAM,CAAA,MAAK,EAAE,EAAE,KAAK,CAAC,EAC1B,KAAK,KAAK,CAAC,EACX,KAAK,QAAQ,OAAO,CAAC,CAAC,EACtB,KAAK,UAAU,MAAM,EACrB,MAAM,UAAU,SAAS,EACzB,GAAG,aAAa,SAAU,OAAO,GAAG;AACjC,yBAAe;AAAA,YACX,GAAG,GAAG,MAAM,QAAQ,EAAE;AAAA,YACtB,GAAG,GAAG,MAAM,QAAQ,EAAE;AAAA,YACtB,SAAS,GAAG,QAAQ,IAAI,KAAK,EAAE,KAAK;AAAA,UAAA,CACvC;AACDN,iBAAU,IAAI,EAAE,WAAA,EAAa,KAAK,KAAK,CAAC,EAAE,KAAK,QAAQ,SAAS;AAAA,QACpE,CAAC,EACA,GAAG,YAAY,WAAY;AACxB,yBAAe,IAAI;AACnBA,iBAAU,IAAI,EAAE,WAAA,EAAa,KAAK,KAAK,CAAC,EAAE,KAAK,QAAQ,OAAO,CAAC,CAAC;AAAA,QACpE,CAAC;AAAA,MACb;AAAA,IAEJ,CAAC;AAAA,EAEL,GAAG,CAAC,MAAM,gBAAgB,QAAQ,sBAAsB,gBAAgB,UAAU,QAAQ,YAAY,CAAC;AAEvG,SACI,qBAAC,OAAA,EAAI,KAAK,YAAY,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAA,GAClD,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,OAAO,EAAE,UAAU,cACpB,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,KAAK,QAAQ,OAAM,QAAO,QAAgB;AAAA,MAE3C,gBACA;AAAA,IAAA,GAGR;AAAA,IACC,eACG,oBAAC,KAAA,EAAI,IAAI;AAAA,MACL,UAAU;AAAA,MACV,MAAM,YAAY;AAAA,MAClB,KAAK,YAAY;AAAA,MACjB,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,WAAW;AAAA,MACX,SAAS;AAAA,MACT,KAAK;AAAA,IAAA,GAEL,UAAA,oBAAC,QAAA,EAAK,OAAO,EAAE,UAAU,QAAQ,QAAQ,OAAO,OAAO,QAAA,GAClD,UAAA,YAAY,SACjB,EAAA,CACJ;AAAA,EAAA,GAER;AAER;"}

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

@@ -1,4 +0,0 @@
-"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:[
-/* @__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})})]})};
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"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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"}

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

@@ -1,85 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useMemo, useEffect } from "react";
-import band from "../../../../node_modules/d3-scale/src/band/index.esm.js";
-import linear from "../../../../node_modules/d3-scale/src/linear/index.esm.js";
-import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
-import { axisBottom, axisLeft } from "../../../../node_modules/d3-axis/src/axis/index.esm.js";
-const formatNumber = (num) => {
-  if (num >= 1e9) return (num / 1e9).toFixed(1) + "B";
-  if (num >= 1e6) return (num / 1e6).toFixed(1) + "M";
-  if (num >= 1e3) return (num / 1e3).toFixed(1) + "K";
-  return num;
-};
-const BarChart = ({
-  data,
-  numOfLines = 5,
-  width = 500,
-  height = 300,
-  line = false
-}) => {
-  const svgRef = useRef(null);
-  const maxValue = useMemo(() => {
-    return Math.max(...data.map((d) => d.value));
-  }, [data]);
-  const yAxisMaxValue = useMemo(() => {
-    return maxValue * 1.25;
-  }, [maxValue]);
-  const yAxisTicks = useMemo(() => {
-    const ticks = [];
-    const interval = yAxisMaxValue / numOfLines;
-    for (let i = 0; i <= numOfLines; i++) {
-      ticks.push(interval * i);
-    }
-    return ticks;
-  }, [yAxisMaxValue, numOfLines]);
-  useEffect(() => {
-    if (!svgRef.current) return;
-    const svg = select(svgRef.current);
-    svg.selectAll("*").remove();
-    const margin = { top: 20, right: 20, bottom: 70, left: 40 };
-    const barWidth = width - margin.left - margin.right;
-    const barHeight = height - margin.top - margin.bottom;
-    const mousemove = (event, d) => {
-      var _a, _b;
-      let xPosition = event.offsetX + margin.left - 25;
-      const yPosition = event.offsetY + margin.top - 40;
-      const tooltipWidth = (_b = (_a = tooltip.node()) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.width;
-      const rightOffset = tooltipWidth ? xPosition + tooltipWidth : xPosition;
-      if (rightOffset > width) {
-        xPosition = Math.floor(
-          tooltipWidth ? xPosition - tooltipWidth - 20 : xPosition - 20
-        );
-      }
-      const text = `${d.label} - ${d.value}`;
-      tooltip.attr("x", xPosition).attr("y", yPosition).style("opacity", 9).style("height", text.length >= 16 ? 50 : 35);
-      tooltipText.html(text);
-    };
-    const mouseleave = () => {
-      tooltip.style("opacity", 0);
-    };
-    const x = band().domain(data.map((d) => d.label)).range([0, barWidth]).padding(0.1);
-    const y = linear().domain([0, yAxisMaxValue]).range([barHeight, 0]);
-    const chart = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-    if (line) {
-      yAxisTicks.slice(1).forEach((tick) => {
-        chart.append("line").attr("class", "dotted-line").attr("x1", 0).attr("y1", y(tick)).attr("x2", barWidth).attr("y2", y(tick)).style("stroke", "gray").style("stroke-dasharray", "3,3").style("opacity", 1);
-      });
-    }
-    chart.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr("x", (d) => x(d.label)).attr("y", (d) => y(d.value)).attr("width", x.bandwidth()).attr("height", (d) => barHeight - y(d.value)).style("fill", "#357AF6").style("opacity", "1").on("mousemove", mousemove).on("mouseleave", mouseleave);
-    const xAxis = chart.append("g").attr("class", "x-axis").attr("transform", `translate(0, ${barHeight})`).call(axisBottom(x));
-    xAxis.selectAll(".tick line").remove();
-    const yAxis = chart.append("g").attr("class", "y-axis").call(
-      axisLeft(y).tickValues(yAxisTicks).tickFormat((d) => {
-        return formatNumber(d);
-      }).tickSizeOuter(0)
-    );
-    yAxis.selectAll(".tick line").remove();
-    const tooltip = svg.append("foreignObject").attr("class", "tooltip").attr("width", 120).attr("height", 20).style("opacity", 0).style("position", "absolute").style("background-color", "white").style("border", "none").style("box-shadow", "0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)").style("border-radius", "0.313rem").style("padding", "0.625rem").style("font-size", "0.75rem");
-    const tooltipText = tooltip.append("xhtml:div").style("font-size", "0.75rem").style("color", "black");
-  }, [data, height, width, line, yAxisMaxValue, yAxisTicks]);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width, height }) });
-};
-export {
-  BarChart as default
-};
-//# sourceMappingURL=index.esm.js.map

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

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

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

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

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

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