@mx-cartographer/experiences 9.3.0-alpha.bb2 → 9.3.0

package/dist/common/components/calendar/Header.es.js

@@ -1,29 +1,32 @@
-import { DATE_FORMATS_INTL as l, formatDate as o } from "../../../core/constants/DateFormats.es.js";
+import { DATE_FORMATS_INTL as o, formatDate as c } from "../../../core/constants/DateFormats.es.js";
 import "react";
-import { H2 as c } from "@mxenabled/mxui";
-import { css as d } from "@mxenabled/cssinjs";
+import { H2 as d } from "@mxenabled/mxui";
+import { css as s } from "@mxenabled/cssinjs";
 import a from "@mui/material/Button";
-import { ChevronLeft as s, ChevronRight as h } from "@mxenabled/mx-icons";
+import { ChevronLeft as h, ChevronRight as f } from "@mxenabled/mx-icons";
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-var b = ({ copy: r, date: i, onNextClick: n, onPreviousClick: m }) => /* @__PURE__ */ t("div", {
-  className: `mx-cmn-calendar-header ${f()}`,
-  children: [/* @__PURE__ */ e(c, {
-    className: "mx-cmn-calendar-header-title",
-    variant: "h3",
-    children: o(i, l.MONTH_YEAR)
-  }), /* @__PURE__ */ t("div", {
-    className: "mx-cmn-calendar-header-button-container",
-    children: [/* @__PURE__ */ e(a, {
-      "aria-label": r.prevAria,
-      onClick: m,
-      children: /* @__PURE__ */ e(s, { size: 24 })
-    }), /* @__PURE__ */ e(a, {
-      "aria-label": r.nextAria,
-      onClick: n,
-      children: /* @__PURE__ */ e(h, { size: 24 })
+var C = ({ copy: r, date: i, onNextClick: n, onPreviousClick: m }) => {
+  const l = p();
+  return /* @__PURE__ */ t("div", {
+    className: `mx-cmn-calendar-header ${l}`,
+    children: [/* @__PURE__ */ e(d, {
+      className: "mx-cmn-calendar-header-title",
+      variant: "h3",
+      children: c(i, o.MONTH_YEAR)
+    }), /* @__PURE__ */ t("div", {
+      className: "mx-cmn-calendar-header-button-container",
+      children: [/* @__PURE__ */ e(a, {
+        "aria-label": r.prevAria,
+        onClick: m,
+        children: /* @__PURE__ */ e(h, { size: 24 })
+      }), /* @__PURE__ */ e(a, {
+        "aria-label": r.nextAria,
+        onClick: n,
+        children: /* @__PURE__ */ e(f, { size: 24 })
+      })]
     })]
-  })]
-}), f = () => d({
+  });
+}, p = () => s({
   alignItems: "center",
   display: "flex",
   marginBottom: 16,
@@ -36,7 +39,7 @@ var b = ({ copy: r, date: i, onNextClick: n, onPreviousClick: m }) => /* @__PURE
   }
 });
 export {
-  b as default
+  C as default
 };
 
 //# sourceMappingURL=Header.es.js.map

package/dist/common/components/calendar/Header.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.es.js","names":[],"sources":["../../../../src/common/components/calendar/Header.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\n\nimport { ChevronLeft, ChevronRight } from '@mxenabled/mx-icons'\n\nimport Button from '@mui/material/Button'\n\nimport { H2 } from '@mxenabled/mxui'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\n\nimport type { CalendarCopy } from './Calendar'\n\ninterface HeaderProps {\n  copy: CalendarCopy\n  date: Date\n  onNextClick: () => void\n  onPreviousClick: () => void\n}\n\nconst Header: React.FC<HeaderProps> = ({ copy, date, onNextClick, onPreviousClick }) => {\n  const styles = getStyles()\n\n  return (\n    <div className={`mx-cmn-calendar-header ${styles}`}>\n      <H2 className=\"mx-cmn-calendar-header-title\" variant=\"h3\">\n        {formatDate(date, DATE_FORMATS_INTL.MONTH_YEAR)}\n      </H2>\n      <div className=\"mx-cmn-calendar-header-button-container\">\n        <Button aria-label={copy.prevAria} onClick={onPreviousClick}>\n          <ChevronLeft size={24} />\n        </Button>\n        <Button aria-label={copy.nextAria} onClick={onNextClick}>\n          <ChevronRight size={24} />\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst getStyles = () =>\n  css({\n    alignItems: 'center',\n    display: 'flex',\n    marginBottom: 16,\n    marginRight: -16,\n    paddingLeft: 8,\n    '& .mx-cmn-calendar-header-title': {\n      flexGrow: 1,\n    },\n    '& .mx-cmn-calendar-header-button-container': {\n      display: 'flex',\n      gap: 4,\n    },\n  })\n\nexport default Header\n"],"mappings":";;;;;;;AAoBA,IAAM,IAAA,CAAiC,EAAE,MAAA,GAAM,MAAA,GAAM,aAAA,GAAa,iBAAA,EAAA,MAI9D,gBAAA,EAAC,OAAD;AAAA,EAAK,WAAW,0BAHH,EAG6B,CAAA;AAAA,YAA1C,CACE,gBAAA,EAAC,GAAD;AAAA,IAAI,WAAU;AAAA,IAA+B,SAAQ;AAAA,cAClD,EAAW,GAAM,EAAkB,UAAU;AAAA,EAC5C,CAAA,GACJ,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,cAAf,CACE,gBAAA,EAAC,GAAD;AAAA,MAAQ,cAAY,EAAK;AAAA,MAAU,SAAS;AAAA,gBAC1C,gBAAA,EAAC,GAAD,EAAa,MAAM,GAAK,CAAA;AAAA,IAClB,CAAA,GACR,gBAAA,EAAC,GAAD;AAAA,MAAQ,cAAY,EAAK;AAAA,MAAU,SAAS;AAAA,gBAC1C,gBAAA,EAAC,GAAD,EAAc,MAAM,GAAK,CAAA;AAAA,IACnB,CAAA,CACL;AAAA,IACF;IAIH,IAAA,MACJ,EAAI;AAAA,EACF,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,mCAAmC,EACjC,UAAU,EACZ;AAAA,EACA,8CAA8C;AAAA,IAC5C,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AACF,CAAC"}
+{"version":3,"file":"Header.es.js","names":[],"sources":["../../../../src/common/components/calendar/Header.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\n\nimport { ChevronLeft, ChevronRight } from '@mxenabled/mx-icons'\n\nimport Button from '@mui/material/Button'\n\nimport { H2 } from '@mxenabled/mxui'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\n\nimport type { CalendarCopy } from './Calendar'\n\ninterface HeaderProps {\n  copy: CalendarCopy\n  date: Date\n  onNextClick: () => void\n  onPreviousClick: () => void\n}\n\nconst Header: React.FC<HeaderProps> = ({ copy, date, onNextClick, onPreviousClick }) => {\n  const styles = getStyles()\n\n  return (\n    <div className={`mx-cmn-calendar-header ${styles}`}>\n      <H2 className=\"mx-cmn-calendar-header-title\" variant=\"h3\">\n        {formatDate(date, DATE_FORMATS_INTL.MONTH_YEAR)}\n      </H2>\n      <div className=\"mx-cmn-calendar-header-button-container\">\n        <Button aria-label={copy.prevAria} onClick={onPreviousClick}>\n          <ChevronLeft size={24} />\n        </Button>\n        <Button aria-label={copy.nextAria} onClick={onNextClick}>\n          <ChevronRight size={24} />\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst getStyles = () =>\n  css({\n    alignItems: 'center',\n    display: 'flex',\n    marginBottom: 16,\n    marginRight: -16,\n    paddingLeft: 8,\n    '& .mx-cmn-calendar-header-title': {\n      flexGrow: 1,\n    },\n    '& .mx-cmn-calendar-header-button-container': {\n      display: 'flex',\n      gap: 4,\n    },\n  })\n\nexport default Header\n"],"mappings":";;;;;;;AAoBA,IAAM,IAAA,CAAiC,EAAE,MAAA,GAAM,MAAA,GAAM,aAAA,GAAa,iBAAA,EAAA,MAAsB;AACtF,QAAM,IAAS,EAAU;AAEzB,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,0BAA0B,CAAA;AAAA,IAA1C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAI,WAAU;AAAA,MAA+B,SAAQ;AAAA,MAClD,UAAA,EAAW,GAAM,EAAkB,UAAU;AAAA,IAC5C,CAAA,GACJ,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,MAAf,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAQ,cAAY,EAAK;AAAA,QAAU,SAAS;AAAA,QAC1C,UAAA,gBAAA,EAAC,GAAD,EAAa,MAAM,GAAK,CAAA;AAAA,MAClB,CAAA,GACR,gBAAA,EAAC,GAAD;AAAA,QAAQ,cAAY,EAAK;AAAA,QAAU,SAAS;AAAA,QAC1C,UAAA,gBAAA,EAAC,GAAD,EAAc,MAAM,GAAK,CAAA;AAAA,MACnB,CAAA,CACL;AAAA,IACF,CAAA,CAAA;AAAA;AAET,GAEM,IAAA,MACJ,EAAI;AAAA,EACF,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,mCAAmC,EACjC,UAAU,EACZ;AAAA,EACA,8CAA8C;AAAA,IAC5C,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AACF,CAAC"}

package/dist/common/components/charts/Donut.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Donut.es.js","names":[],"sources":["../../../../src/common/components/charts/Donut.tsx"],"sourcesContent":["import React from 'react'\nimport { arc, selectAll, interpolateString } from 'd3'\n\nimport Box from '@mui/material/Box'\nimport { darken, lighten, useTheme } from '@mui/material/styles'\n\nconst INNER_RADIUS = 100\nconst OUT_RADIUS = 140\nconst SELECTION_RADIUS = 10\n\nexport interface DonutData {\n  id: string\n  label?: string\n  color: string\n  value: number\n}\n\nexport interface DonutProps {\n  data: DonutData[]\n  hoveredId?: string\n  onClick?: (id: string) => void\n  onMouseEnter?: (id: string) => void\n  onMouseLeave?: (id: string) => void\n  selectedId?: string\n  size?: number\n}\n\nconst Donut: React.FC<React.PropsWithChildren<DonutProps>> = ({\n  data,\n  hoveredId,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  selectedId,\n  size = 300,\n  children,\n}) => {\n  const theme = useTheme()\n  let offset = 0\n\n  const handleKeyDown = (event: React.KeyboardEvent, id: string) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onClick?.(id)\n    }\n  }\n\n  const handleFocus = (id: string) => {\n    onMouseEnter?.(id)\n  }\n\n  const handleBlur = (id: string) => {\n    onMouseLeave?.(id)\n  }\n\n  React.useEffect(() => {\n    selectAll('.arc-outer')\n      .transition('roll')\n      .duration(500)\n      .attrTween('transform', () => interpolateString('rotate(0)', 'rotate(360)'))\n  }, [])\n\n  return (\n    <Box height={size} position=\"relative\" width={size}>\n      <Box height=\"100%\" width=\"100%\">\n        {children}\n      </Box>\n      <svg\n        height={size}\n        style={{ position: 'absolute', top: 0, left: 0, touchAction: 'manipulation' }}\n        viewBox={`-150 -150 300 300`}\n        width={size}\n      >\n        <style>\n          {`\n            .arc-outer:focus,\n            .arc-outer:focus-visible {\n              stroke: ${theme.palette.primary.main};\n              stroke-width: 3;\n              stroke-opacity: 0.8;\n            }\n          `}\n        </style>\n        <g>\n          {data.map((item) => {\n            const startAngle = offset\n            offset = offset + 2 * Math.PI * (item.value / 100)\n            const endAngle = offset\n\n            const segment = arc().cornerRadius(4)({\n              innerRadius: INNER_RADIUS,\n              outerRadius:\n                OUT_RADIUS +\n                (item.id === selectedId || item.id === hoveredId ? SELECTION_RADIUS : 0),\n              startAngle,\n              endAngle,\n              padAngle: 0.025,\n            }) as string\n\n            return (\n              <path\n                aria-label={item.label || `Segment ${item.id}`}\n                aria-pressed={item.id === selectedId}\n                className=\"arc-outer\"\n                d={segment}\n                fill={item.color}\n                key={item.id}\n                onBlur={() => handleBlur(item.id)}\n                onClick={() => onClick?.(item.id)}\n                onFocus={() => handleFocus(item.id)}\n                onKeyDown={(e) => handleKeyDown(e, item.id)}\n                onMouseEnter={() => onMouseEnter?.(item.id)}\n                onMouseLeave={() => onMouseLeave?.(item.id)}\n                role=\"button\"\n                stroke={\n                  theme.palette.mode === 'light'\n                    ? darken(item.color, 0.3)\n                    : lighten(item.color, 0.3)\n                }\n                strokeWidth={2}\n                style={{\n                  cursor: 'pointer',\n                  outline: 'none',\n                }}\n                tabIndex={0}\n              />\n            )\n          })}\n        </g>\n      </svg>\n    </Box>\n  )\n}\n\nexport default Donut\n"],"mappings":";;;;;AAMA,IAAM,IAAe,KACf,IAAa,KACb,IAAmB,IAmBnB,IAAA,CAAwD,EAC5D,MAAA,GACA,WAAA,GACA,SAAA,GACA,cAAA,GACA,cAAA,GACA,YAAA,GACA,MAAA,IAAO,KACP,UAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS;AACvB,MAAI,IAAS;AAEb,QAAM,IAAA,CAAiB,GAA4B,MAAe;AAChE,KAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,IAAU,CAAE;AAAA,EAEhB,GAEM,IAAA,CAAe,MAAe;AAClC,IAAA,IAAe,CAAE;AAAA,EACnB,GAEM,IAAA,CAAc,MAAe;AACjC,IAAA,IAAe,CAAE;AAAA,EACnB;AAEA,SAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAU,YAAY,EACnB,WAAW,MAAM,EACjB,SAAS,GAAG,EACZ,UAAU,aAAA,MAAmB,EAAkB,aAAa,aAAa,CAAC;AAAA,EAC/E,GAAG,CAAC,CAAC,GAGH,gBAAA,EAAC,GAAD;AAAA,IAAK,QAAQ;AAAA,IAAM,UAAS;AAAA,IAAW,OAAO;AAAA,cAA9C,CACE,gBAAA,EAAC,GAAD;AAAA,MAAK,QAAO;AAAA,MAAO,OAAM;AAAA,MACtB,UAAA;AAAA,IACE,CAAA,GACL,gBAAA,EAAC,OAAD;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,QAAE,UAAU;AAAA,QAAY,KAAK;AAAA,QAAG,MAAM;AAAA,QAAG,aAAa;AAAA,MAAe;AAAA,MAC5E,SAAS;AAAA,MACT,OAAO;AAAA,gBAJT,CAME,gBAAA,EAAC,SAAD,EAAA,UACG;AAAA;AAAA;AAAA,wBAGa,EAAM,QAAQ,QAAQ,IAAA;AAAA;AAAA;AAAA;AAAA,YAK/B,CAAA,GACP,gBAAA,EAAC,KAAD,EAAA,UACG,EAAK,IAAA,CAAK,MAAS;AAClB,cAAM,IAAa;AACnB,QAAA,IAAS,IAAS,IAAI,KAAK,MAAM,EAAK,QAAQ;AAC9C,cAAM,IAAW,GAEX,IAAU,EAAI,EAAE,aAAa,CAAC,EAAE;AAAA,UACpC,aAAa;AAAA,UACb,aACE,KACC,EAAK,OAAO,KAAc,EAAK,OAAO,IAAY,IAAmB;AAAA,UACxE,YAAA;AAAA,UACA,UAAA;AAAA,UACA,UAAU;AAAA,QACZ,CAAC;AAED,eACE,gBAAA,EAAC,QAAD;AAAA,UACE,cAAY,EAAK,SAAS,WAAW,EAAK,EAAA;AAAA,UAC1C,gBAAc,EAAK,OAAO;AAAA,UAC1B,WAAU;AAAA,UACV,GAAG;AAAA,UACH,MAAM,EAAK;AAAA,UAEX,QAAA,MAAc,EAAW,EAAK,EAAE;AAAA,UAChC,SAAA,MAAe,IAAU,EAAK,EAAE;AAAA,UAChC,SAAA,MAAe,EAAY,EAAK,EAAE;AAAA,UAClC,WAAA,CAAY,MAAM,EAAc,GAAG,EAAK,EAAE;AAAA,UAC1C,cAAA,MAAoB,IAAe,EAAK,EAAE;AAAA,UAC1C,cAAA,MAAoB,IAAe,EAAK,EAAE;AAAA,UAC1C,MAAK;AAAA,UACL,QACE,EAAM,QAAQ,SAAS,UACnB,EAAO,EAAK,OAAO,GAAG,IACtB,EAAQ,EAAK,OAAO,GAAG;AAAA,UAE7B,aAAa;AAAA,UACb,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,SAAS;AAAA,UACX;AAAA,UACA,UAAU;AAAA,QACX,GAnBM,EAAK,EAmBX;AAAA,MAEL,CAAC,EACA,CAAA,CACA;AAAA,MACF;AAAA;AAET"}
+{"version":3,"file":"Donut.es.js","names":[],"sources":["../../../../src/common/components/charts/Donut.tsx"],"sourcesContent":["import React from 'react'\nimport { arc, selectAll, interpolateString } from 'd3'\n\nimport Box from '@mui/material/Box'\nimport { darken, lighten, useTheme } from '@mui/material/styles'\n\nconst INNER_RADIUS = 100\nconst OUT_RADIUS = 140\nconst SELECTION_RADIUS = 10\n\nexport interface DonutData {\n  id: string\n  label?: string\n  color: string\n  value: number\n}\n\nexport interface DonutProps {\n  data: DonutData[]\n  hoveredId?: string\n  onClick?: (id: string) => void\n  onMouseEnter?: (id: string) => void\n  onMouseLeave?: (id: string) => void\n  selectedId?: string\n  size?: number\n}\n\nconst Donut: React.FC<React.PropsWithChildren<DonutProps>> = ({\n  data,\n  hoveredId,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  selectedId,\n  size = 300,\n  children,\n}) => {\n  const theme = useTheme()\n  let offset = 0\n\n  const handleKeyDown = (event: React.KeyboardEvent, id: string) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onClick?.(id)\n    }\n  }\n\n  const handleFocus = (id: string) => {\n    onMouseEnter?.(id)\n  }\n\n  const handleBlur = (id: string) => {\n    onMouseLeave?.(id)\n  }\n\n  React.useEffect(() => {\n    selectAll('.arc-outer')\n      .transition('roll')\n      .duration(500)\n      .attrTween('transform', () => interpolateString('rotate(0)', 'rotate(360)'))\n  }, [])\n\n  return (\n    <Box height={size} position=\"relative\" width={size}>\n      <Box height=\"100%\" width=\"100%\">\n        {children}\n      </Box>\n      <svg\n        height={size}\n        style={{ position: 'absolute', top: 0, left: 0, touchAction: 'manipulation' }}\n        viewBox={`-150 -150 300 300`}\n        width={size}\n      >\n        <style>\n          {`\n            .arc-outer:focus,\n            .arc-outer:focus-visible {\n              stroke: ${theme.palette.primary.main};\n              stroke-width: 3;\n              stroke-opacity: 0.8;\n            }\n          `}\n        </style>\n        <g>\n          {data.map((item) => {\n            const startAngle = offset\n            offset = offset + 2 * Math.PI * (item.value / 100)\n            const endAngle = offset\n\n            const segment = arc().cornerRadius(4)({\n              innerRadius: INNER_RADIUS,\n              outerRadius:\n                OUT_RADIUS +\n                (item.id === selectedId || item.id === hoveredId ? SELECTION_RADIUS : 0),\n              startAngle,\n              endAngle,\n              padAngle: 0.025,\n            }) as string\n\n            return (\n              <path\n                aria-label={item.label || `Segment ${item.id}`}\n                aria-pressed={item.id === selectedId}\n                className=\"arc-outer\"\n                d={segment}\n                fill={item.color}\n                key={item.id}\n                onBlur={() => handleBlur(item.id)}\n                onClick={() => onClick?.(item.id)}\n                onFocus={() => handleFocus(item.id)}\n                onKeyDown={(e) => handleKeyDown(e, item.id)}\n                onMouseEnter={() => onMouseEnter?.(item.id)}\n                onMouseLeave={() => onMouseLeave?.(item.id)}\n                role=\"button\"\n                stroke={\n                  theme.palette.mode === 'light'\n                    ? darken(item.color, 0.3)\n                    : lighten(item.color, 0.3)\n                }\n                strokeWidth={2}\n                style={{\n                  cursor: 'pointer',\n                  outline: 'none',\n                }}\n                tabIndex={0}\n              />\n            )\n          })}\n        </g>\n      </svg>\n    </Box>\n  )\n}\n\nexport default Donut\n"],"mappings":";;;;;AAMA,IAAM,IAAe,KACf,IAAa,KACb,IAAmB,IAmBnB,IAAA,CAAwD,EAC5D,MAAA,GACA,WAAA,GACA,SAAA,GACA,cAAA,GACA,cAAA,GACA,YAAA,GACA,MAAA,IAAO,KACP,UAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS;AACvB,MAAI,IAAS;AAEb,QAAM,IAAA,CAAiB,GAA4B,MAAe;AAChE,KAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,IAAU,CAAE;AAAA,EAEhB,GAEM,IAAA,CAAe,MAAe;AAClC,IAAA,IAAe,CAAE;AAAA,EACnB,GAEM,IAAA,CAAc,MAAe;AACjC,IAAA,IAAe,CAAE;AAAA,EACnB;AAEA,SAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAU,YAAY,EACnB,WAAW,MAAM,EACjB,SAAS,GAAG,EACZ,UAAU,aAAA,MAAmB,EAAkB,aAAa,aAAa,CAAC;AAAA,EAC/E,GAAG,CAAC,CAAC,GAGH,gBAAA,EAAC,GAAD;AAAA,IAAK,QAAQ;AAAA,IAAM,UAAS;AAAA,IAAW,OAAO;AAAA,IAA9C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAK,QAAO;AAAA,MAAO,OAAM;AAAA,MACtB,UAAA;AAAA,IACE,CAAA,GACL,gBAAA,EAAC,OAAD;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,QAAE,UAAU;AAAA,QAAY,KAAK;AAAA,QAAG,MAAM;AAAA,QAAG,aAAa;AAAA,MAAe;AAAA,MAC5E,SAAS;AAAA,MACT,OAAO;AAAA,MAJT,UAAA,CAME,gBAAA,EAAC,SAAD,EAAA,UACG;AAAA;AAAA;AAAA,wBAGa,EAAM,QAAQ,QAAQ,IAAA;AAAA;AAAA;AAAA;AAAA,YAK/B,CAAA,GACP,gBAAA,EAAC,KAAD,EAAA,UACG,EAAK,IAAA,CAAK,MAAS;AAClB,cAAM,IAAa;AACnB,QAAA,IAAS,IAAS,IAAI,KAAK,MAAM,EAAK,QAAQ;AAC9C,cAAM,IAAW,GAEX,IAAU,EAAI,EAAE,aAAa,CAAC,EAAE;AAAA,UACpC,aAAa;AAAA,UACb,aACE,KACC,EAAK,OAAO,KAAc,EAAK,OAAO,IAAY,IAAmB;AAAA,UACxE,YAAA;AAAA,UACA,UAAA;AAAA,UACA,UAAU;AAAA,QACZ,CAAC;AAED,eACE,gBAAA,EAAC,QAAD;AAAA,UACE,cAAY,EAAK,SAAS,WAAW,EAAK,EAAA;AAAA,UAC1C,gBAAc,EAAK,OAAO;AAAA,UAC1B,WAAU;AAAA,UACV,GAAG;AAAA,UACH,MAAM,EAAK;AAAA,UAEX,QAAA,MAAc,EAAW,EAAK,EAAE;AAAA,UAChC,SAAA,MAAe,IAAU,EAAK,EAAE;AAAA,UAChC,SAAA,MAAe,EAAY,EAAK,EAAE;AAAA,UAClC,WAAA,CAAY,MAAM,EAAc,GAAG,EAAK,EAAE;AAAA,UAC1C,cAAA,MAAoB,IAAe,EAAK,EAAE;AAAA,UAC1C,cAAA,MAAoB,IAAe,EAAK,EAAE;AAAA,UAC1C,MAAK;AAAA,UACL,QACE,EAAM,QAAQ,SAAS,UACnB,EAAO,EAAK,OAAO,GAAG,IACtB,EAAQ,EAAK,OAAO,GAAG;AAAA,UAE7B,aAAa;AAAA,UACb,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,SAAS;AAAA,UACX;AAAA,UACA,UAAU;AAAA,QACX,GAnBM,EAAK,EAmBX;AAAA,MAEL,CAAC,EACA,CAAA,CACA;AAAA,IACF,CAAA,CAAA;AAAA;AAET"}

package/dist/common/components/charts/LineChart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.es.js","names":[],"sources":["../../../../src/common/components/charts/LineChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { AllSeriesType } from '@mui/x-charts'\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer as ResponsiveChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'\nimport { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'\nimport { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'\nimport { AreaPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart'\n\nimport { stripChartSlotProps } from './chartSlotProps'\nimport CustomLegend from './linechart/CustomLegend'\nimport { getMarkerShape } from './linechart/utils/markerShapes'\nimport { CustomLine } from './linechart/CustomLine'\nimport { CustomMark, MarkHandlers } from './linechart/CustomMark'\nimport { CustomTooltip } from './linechart/CustomTooltip'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { generateEqualIntervals } from '../../../core/utils/NumberFormatting'\n\nexport type LineChartDataset = { x: string; y: number }[]\nexport type LineChartLabel = string | { label: string; amount: number }\nexport type TooltipLabel = LineChartLabel & { header?: string }\n\ntype LineChartCurve =\n  | 'catmullRom'\n  | 'linear'\n  | 'monotoneX'\n  | 'monotoneY'\n  | 'natural'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter'\n  | 'bump'\n  | 'bumpX'\n  | 'bumpY'\n\ninterface LineChartProps {\n  areaColor?: string\n  axisColor?: string\n  baseline?: string\n  chartFor?: string\n  chartXaxisSx?: SxProps\n  chartYaxisSx?: SxProps\n  // Because theme chart colors are typed string|undefined\n  colors: (string | undefined)[]\n  curveType?: LineChartCurve\n  customLegendVariant?: string\n  customLegendSx?: SxProps\n  customLegendBoxSx?: SxProps\n  customTooltipLabels?: TooltipLabel[][]\n  datasets: LineChartDataset[]\n  height?: number\n  isCurrency?: boolean\n  isGraphClippingXAxis?: boolean\n  labels: LineChartLabel[]\n  labelBackgroundColor?: string\n  labelFontColor?: string\n  labelFontSize?: number\n  margin?: { top?: number; right?: number; bottom?: number; left?: number }\n  markHandlers?: MarkHandlers\n  markStyles?: (markIndex: number) => React.CSSProperties & {\n    markLabelStyles?: React.CSSProperties\n  }\n  minRange?: number\n  maxRange?: number\n  onItemClick?: () => void\n  peerAverage?: number\n  showArea?: boolean\n  showAverage?: boolean\n  showAxisHighlight?: boolean\n  showBars?: boolean\n  showLegend?: boolean\n  showMark?: boolean\n  showMarkLabel?: boolean\n  showTooltip?: boolean\n  showXAxis?: boolean\n  showXAxisTicks?: boolean\n  showYAxis?: boolean\n  showYAxisTicks?: boolean\n  tickIntervals?: any[] | 'auto' | ((value: any, index: number) => boolean) | undefined\n  title?: string\n  useCustomMark?: boolean\n  valueFormatterString?: string\n  width?: number\n  xAxisScaleType?: 'band' | 'point'\n}\n\n// TODO: Remove negative values and use a proper layout to support X-Charts v8\n\nexport const LineChart: React.FC<LineChartProps> = ({\n  areaColor,\n  axisColor,\n  baseline = 'max',\n  chartFor,\n  chartXaxisSx,\n  chartYaxisSx,\n  colors,\n  curveType = 'linear',\n  customLegendVariant,\n  customLegendSx,\n  customLegendBoxSx,\n  customTooltipLabels,\n  datasets,\n  height,\n  isCurrency,\n  isGraphClippingXAxis = false,\n  labels,\n  labelBackgroundColor,\n  labelFontColor,\n  labelFontSize,\n  margin,\n  markHandlers,\n  markStyles,\n  minRange,\n  maxRange,\n  onItemClick,\n  peerAverage,\n  showArea = false,\n  showAverage = false,\n  showAxisHighlight = false,\n  showBars = false,\n  showLegend = false,\n  showMark = true,\n  showMarkLabel = false,\n  showTooltip = false,\n  showXAxis = false,\n  showXAxisTicks = false,\n  showYAxis = false,\n  showYAxisTicks = false,\n  title,\n  useCustomMark = false,\n  valueFormatterString,\n  width,\n  xAxisScaleType,\n}) => {\n  const theme = useTheme()\n\n  // Data for the X axis\n  const xData = datasets.flat().map((item) => item.x)\n  const yData = datasets.flat().map((item) => item.y)\n\n  // Guard the empty-data case: with no points, reduce()/Math.min()/Math.max()\n  // produce NaN/±Infinity which flow into the y-axis and make x-charts warn\n  // \"the value NaN does not exist in the data of y axis\". Default to 0 so an\n  // empty/loading chart renders a valid (flat) axis instead.\n  const average = peerAverage\n    ? peerAverage\n    : yData.length\n      ? Math.round(yData.reduce((value, total) => total + value, 0) / yData.length)\n      : 0\n\n  // Used for the min and max Y axis values\n  const yMin = yData.length ? Math.floor(Math.min(...yData) / 100) * 100 : 0\n  const yMax = yData.length ? Math.ceil(Math.max(...yData) / 100) * 100 : 0\n\n  const series = datasets.map((data, index) => {\n    return {\n      type: showBars ? 'bar' : 'line',\n      curve: curveType,\n      color: showBars ? theme.palette.chart?.chart6 : (colors[index] ?? theme.palette.primary.main),\n      data: data.map((item) => item.y),\n      area: showArea,\n      baseline: baseline,\n      showMark: true,\n      shape: getMarkerShape(index),\n      valueFormatter: (value: number) =>\n        valueFormatterString ? formatCurrency(value || 0, valueFormatterString) : String(value),\n    }\n  })\n\n  const defaultMargin = {\n    top: 60,\n    right: 35,\n    bottom: 25,\n    left: -10,\n  }\n\n  // Merge default margin with any provided custom margin\n  const chartMargin = {\n    ...defaultMargin,\n    ...margin,\n  }\n\n  let rangeMin = minRange ?? yMin\n  let rangeMax = maxRange ?? yMax\n  if (chartFor === 'networthChart') {\n    const valueRange = yMax - yMin\n\n    const paddingRatio = valueRange < yMax * 0.05 ? 0.25 : 0.2\n    const padding = Math.max(valueRange * paddingRatio, yMax * 0.015)\n    rangeMin = yMin - padding < 0 ? yMin : yMin - padding\n    rangeMax = yMax + padding\n  }\n\n  const getTickInterval = () => {\n    if (chartFor === 'creditOverTime') {\n      return generateEqualIntervals(rangeMin, 850, 5)\n    } else if (chartFor === 'networthChart') {\n      return generateEqualIntervals(rangeMin, rangeMax, 5)\n    }\n    return undefined\n  }\n  return (\n    <Box\n      sx={{\n        position: 'relative',\n        touchAction: 'pan-y', // Allow vertical scrolling\n        '& svg': {\n          touchAction: 'pan-y', // Allow vertical scrolling on SVG\n          userSelect: 'none', // Prevent text selection\n        },\n        '& .recharts-wrapper': {\n          touchAction: 'pan-y', // For Recharts library specifically\n        },\n      }}\n    >\n      <ResponsiveChartContainer\n        height={height}\n        margin={chartMargin}\n        series={series as AllSeriesType[]}\n        sx={{\n          '& .MuiBarLabel-root': {\n            fontSize: 10,\n            fontWeight: 600,\n          },\n          '& .MuiAreaElement-root': {\n            opacity: 0.15,\n          },\n          '& .MuiChartsAxis-tickLabel > tspan': {\n            fontFamily: theme.typography.body2.fontFamily,\n          },\n          '& .MuiLineChart-markLabel': {\n            fontFamily: theme.typography.body2.fontFamily,\n          },\n        }}\n        width={width}\n        xAxis={[{ data: xData, scaleType: xAxisScaleType || (showBars ? 'band' : 'point') }]}\n        yAxis={[\n          {\n            tickInterval: getTickInterval(),\n            min: isGraphClippingXAxis ? -22 : rangeMin,\n            max: rangeMax || 100,\n            colorMap:\n              showArea && series.length < 2\n                ? {\n                    type: 'continuous',\n                    min: rangeMin,\n                    max: rangeMax,\n                    color: [\n                      theme.palette.background.paper,\n                      colors[0] ?? theme.palette.primary.main,\n                    ],\n                  }\n                : undefined,\n            valueFormatter: (value: number) =>\n              valueFormatterString ? formatCurrency(value, valueFormatterString) : String(value),\n            width: 62,\n          },\n        ]}\n      >\n        {/** Provides the average line - positioned first to be behind other elements **/}\n        {showAverage && (\n          <ChartsReferenceLine\n            lineStyle={{\n              stroke: labelBackgroundColor\n                ? theme.palette.neutral.main\n                : theme.palette.neutral.dark,\n              strokeDasharray: '10, 8',\n              strokeWidth: 2,\n            }}\n            y={average}\n          />\n        )}\n\n        {/** Area plot provides gradiant below the line **/}\n        {/* Note: Must be above the LinePlot for some style rules to work */}\n        <AreaPlot\n          onItemClick={onItemClick}\n          {...(areaColor && {\n            slots: {\n              area: (props) => {\n                return (\n                  <g>\n                    <defs>\n                      <linearGradient id=\"customGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                        <stop offset=\"0%\" stopColor={areaColor} />\n                        <stop offset=\"100%\" stopColor={areaColor} stopOpacity={0.02} />\n                      </linearGradient>\n                    </defs>\n                    <path {...stripChartSlotProps(props)} fill={`url(#customGradient)`} />\n                  </g>\n                )\n              },\n            },\n          })}\n        />\n\n        {/** Line plot provides the data line **/}\n        <LinePlot\n          onItemClick={onItemClick}\n          slots={{\n            line: (props) => (\n              <CustomLine\n                {...props}\n                lineColor={areaColor ?? props.ownerState.color ?? theme.palette.primary.main}\n              />\n            ),\n          }}\n        />\n\n        {/** Mark plot provides the circles **/}\n        <MarkPlot\n          onItemClick={onItemClick}\n          slots={\n            useCustomMark\n              ? {\n                  mark: (props) => {\n                    return (\n                      <CustomMark\n                        handlers={markHandlers}\n                        labelBackgroundColor={labelBackgroundColor}\n                        labelFontColor={labelFontColor}\n                        labelFontSize={labelFontSize}\n                        showLabel={showMarkLabel}\n                        showMark={showMark || props.dataIndex === datasets[0].length - 1}\n                        style={markStyles?.(props.dataIndex) ?? {}}\n                        valueFormatterString={valueFormatterString}\n                        yData={yData}\n                        {...props}\n                      />\n                    )\n                  },\n                }\n              : undefined\n          }\n        />\n\n        <BarPlot\n          barLabel={(item) => (Number(item.value) > 0 ? `$${item.value}` : null)}\n          borderRadius={10}\n        />\n\n        {/** Provides the X axis line and values **/}\n        <ChartsXAxis\n          disableLine={!showXAxis}\n          disableTicks={!showXAxisTicks}\n          slotProps={\n            axisColor\n              ? {\n                  axisLine: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                  axisTick: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                }\n              : {}\n          }\n          sx={{ ...chartXaxisSx }}\n        />\n\n        {/** Provides the Y axis values **/}\n        <ChartsYAxis\n          disableLine={!showYAxis}\n          disableTicks={!showYAxisTicks}\n          slotProps={\n            axisColor\n              ? {\n                  axisLine: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                  axisTick: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                }\n              : {}\n          }\n          sx={{ ...chartYaxisSx }}\n        />\n\n        {/* Add vertical crosshair on hover */}\n        {showAxisHighlight && <ChartsAxisHighlight x=\"line\" />}\n\n        {showTooltip && (\n          <ChartsTooltipContainer trigger=\"axis\">\n            <CustomTooltip\n              customLabels={customTooltipLabels}\n              isCurrency={isCurrency}\n              labels={labels}\n              series={series}\n              valueFormatterString={valueFormatterString}\n            />\n          </ChartsTooltipContainer>\n        )}\n      </ResponsiveChartContainer>\n\n      {showLegend && (\n        <CustomLegend\n          average={showAverage ? average : undefined}\n          customLegendBoxSx={customLegendBoxSx}\n          customLegendVariant={customLegendVariant}\n          labels={labels}\n          series={series}\n          style={{\n            position: 'absolute',\n            top: 16,\n            left: 16,\n            ...customLegendSx,\n          }}\n          title={title}\n          valueFormatterString={valueFormatterString}\n        />\n      )}\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"LineChart.es.js","names":[],"sources":["../../../../src/common/components/charts/LineChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { AllSeriesType } from '@mui/x-charts'\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer as ResponsiveChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'\nimport { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'\nimport { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'\nimport { AreaPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart'\n\nimport { stripChartSlotProps } from './chartSlotProps'\nimport CustomLegend from './linechart/CustomLegend'\nimport { getMarkerShape } from './linechart/utils/markerShapes'\nimport { CustomLine } from './linechart/CustomLine'\nimport { CustomMark, MarkHandlers } from './linechart/CustomMark'\nimport { CustomTooltip } from './linechart/CustomTooltip'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { generateEqualIntervals } from '../../../core/utils/NumberFormatting'\n\nexport type LineChartDataset = { x: string; y: number }[]\nexport type LineChartLabel = string | { label: string; amount: number }\nexport type TooltipLabel = LineChartLabel & { header?: string }\n\ntype LineChartCurve =\n  | 'catmullRom'\n  | 'linear'\n  | 'monotoneX'\n  | 'monotoneY'\n  | 'natural'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter'\n  | 'bump'\n  | 'bumpX'\n  | 'bumpY'\n\ninterface LineChartProps {\n  areaColor?: string\n  axisColor?: string\n  baseline?: string\n  chartFor?: string\n  chartXaxisSx?: SxProps\n  chartYaxisSx?: SxProps\n  // Because theme chart colors are typed string|undefined\n  colors: (string | undefined)[]\n  curveType?: LineChartCurve\n  customLegendVariant?: string\n  customLegendSx?: SxProps\n  customLegendBoxSx?: SxProps\n  customTooltipLabels?: TooltipLabel[][]\n  datasets: LineChartDataset[]\n  height?: number\n  isCurrency?: boolean\n  isGraphClippingXAxis?: boolean\n  labels: LineChartLabel[]\n  labelBackgroundColor?: string\n  labelFontColor?: string\n  labelFontSize?: number\n  margin?: { top?: number; right?: number; bottom?: number; left?: number }\n  markHandlers?: MarkHandlers\n  markStyles?: (markIndex: number) => React.CSSProperties & {\n    markLabelStyles?: React.CSSProperties\n  }\n  minRange?: number\n  maxRange?: number\n  onItemClick?: () => void\n  peerAverage?: number\n  showArea?: boolean\n  showAverage?: boolean\n  showAxisHighlight?: boolean\n  showBars?: boolean\n  showLegend?: boolean\n  showMark?: boolean\n  showMarkLabel?: boolean\n  showTooltip?: boolean\n  showXAxis?: boolean\n  showXAxisTicks?: boolean\n  showYAxis?: boolean\n  showYAxisTicks?: boolean\n  tickIntervals?: any[] | 'auto' | ((value: any, index: number) => boolean) | undefined\n  title?: string\n  useCustomMark?: boolean\n  valueFormatterString?: string\n  width?: number\n  xAxisScaleType?: 'band' | 'point'\n}\n\n// TODO: Remove negative values and use a proper layout to support X-Charts v8\n\nexport const LineChart: React.FC<LineChartProps> = ({\n  areaColor,\n  axisColor,\n  baseline = 'max',\n  chartFor,\n  chartXaxisSx,\n  chartYaxisSx,\n  colors,\n  curveType = 'linear',\n  customLegendVariant,\n  customLegendSx,\n  customLegendBoxSx,\n  customTooltipLabels,\n  datasets,\n  height,\n  isCurrency,\n  isGraphClippingXAxis = false,\n  labels,\n  labelBackgroundColor,\n  labelFontColor,\n  labelFontSize,\n  margin,\n  markHandlers,\n  markStyles,\n  minRange,\n  maxRange,\n  onItemClick,\n  peerAverage,\n  showArea = false,\n  showAverage = false,\n  showAxisHighlight = false,\n  showBars = false,\n  showLegend = false,\n  showMark = true,\n  showMarkLabel = false,\n  showTooltip = false,\n  showXAxis = false,\n  showXAxisTicks = false,\n  showYAxis = false,\n  showYAxisTicks = false,\n  title,\n  useCustomMark = false,\n  valueFormatterString,\n  width,\n  xAxisScaleType,\n}) => {\n  const theme = useTheme()\n\n  // Data for the X axis\n  const xData = datasets.flat().map((item) => item.x)\n  const yData = datasets.flat().map((item) => item.y)\n\n  // Guard the empty-data case: with no points, reduce()/Math.min()/Math.max()\n  // produce NaN/±Infinity which flow into the y-axis and make x-charts warn\n  // \"the value NaN does not exist in the data of y axis\". Default to 0 so an\n  // empty/loading chart renders a valid (flat) axis instead.\n  const average = peerAverage\n    ? peerAverage\n    : yData.length\n      ? Math.round(yData.reduce((value, total) => total + value, 0) / yData.length)\n      : 0\n\n  // Used for the min and max Y axis values\n  const yMin = yData.length ? Math.floor(Math.min(...yData) / 100) * 100 : 0\n  const yMax = yData.length ? Math.ceil(Math.max(...yData) / 100) * 100 : 0\n\n  const series = datasets.map((data, index) => {\n    return {\n      type: showBars ? 'bar' : 'line',\n      curve: curveType,\n      color: showBars ? theme.palette.chart?.chart6 : (colors[index] ?? theme.palette.primary.main),\n      data: data.map((item) => item.y),\n      area: showArea,\n      baseline: baseline,\n      showMark: true,\n      shape: getMarkerShape(index),\n      valueFormatter: (value: number) =>\n        valueFormatterString ? formatCurrency(value || 0, valueFormatterString) : String(value),\n    }\n  })\n\n  const defaultMargin = {\n    top: 60,\n    right: 35,\n    bottom: 25,\n    left: -10,\n  }\n\n  // Merge default margin with any provided custom margin\n  const chartMargin = {\n    ...defaultMargin,\n    ...margin,\n  }\n\n  let rangeMin = minRange ?? yMin\n  let rangeMax = maxRange ?? yMax\n  if (chartFor === 'networthChart') {\n    const valueRange = yMax - yMin\n\n    const paddingRatio = valueRange < yMax * 0.05 ? 0.25 : 0.2\n    const padding = Math.max(valueRange * paddingRatio, yMax * 0.015)\n    rangeMin = yMin - padding < 0 ? yMin : yMin - padding\n    rangeMax = yMax + padding\n  }\n\n  const getTickInterval = () => {\n    if (chartFor === 'creditOverTime') {\n      return generateEqualIntervals(rangeMin, 850, 5)\n    } else if (chartFor === 'networthChart') {\n      return generateEqualIntervals(rangeMin, rangeMax, 5)\n    }\n    return undefined\n  }\n  return (\n    <Box\n      sx={{\n        position: 'relative',\n        touchAction: 'pan-y', // Allow vertical scrolling\n        '& svg': {\n          touchAction: 'pan-y', // Allow vertical scrolling on SVG\n          userSelect: 'none', // Prevent text selection\n        },\n        '& .recharts-wrapper': {\n          touchAction: 'pan-y', // For Recharts library specifically\n        },\n      }}\n    >\n      <ResponsiveChartContainer\n        height={height}\n        margin={chartMargin}\n        series={series as AllSeriesType[]}\n        sx={{\n          '& .MuiBarLabel-root': {\n            fontSize: 10,\n            fontWeight: 600,\n          },\n          '& .MuiAreaElement-root': {\n            opacity: 0.15,\n          },\n          '& .MuiChartsAxis-tickLabel > tspan': {\n            fontFamily: theme.typography.body2.fontFamily,\n          },\n          '& .MuiLineChart-markLabel': {\n            fontFamily: theme.typography.body2.fontFamily,\n          },\n        }}\n        width={width}\n        xAxis={[{ data: xData, scaleType: xAxisScaleType || (showBars ? 'band' : 'point') }]}\n        yAxis={[\n          {\n            tickInterval: getTickInterval(),\n            min: isGraphClippingXAxis ? -22 : rangeMin,\n            max: rangeMax || 100,\n            colorMap:\n              showArea && series.length < 2\n                ? {\n                    type: 'continuous',\n                    min: rangeMin,\n                    max: rangeMax,\n                    color: [\n                      theme.palette.background.paper,\n                      colors[0] ?? theme.palette.primary.main,\n                    ],\n                  }\n                : undefined,\n            valueFormatter: (value: number) =>\n              valueFormatterString ? formatCurrency(value, valueFormatterString) : String(value),\n            width: 62,\n          },\n        ]}\n      >\n        {/** Provides the average line - positioned first to be behind other elements **/}\n        {showAverage && (\n          <ChartsReferenceLine\n            lineStyle={{\n              stroke: labelBackgroundColor\n                ? theme.palette.neutral.main\n                : theme.palette.neutral.dark,\n              strokeDasharray: '10, 8',\n              strokeWidth: 2,\n            }}\n            y={average}\n          />\n        )}\n\n        {/** Area plot provides gradiant below the line **/}\n        {/* Note: Must be above the LinePlot for some style rules to work */}\n        <AreaPlot\n          onItemClick={onItemClick}\n          {...(areaColor && {\n            slots: {\n              area: (props) => {\n                return (\n                  <g>\n                    <defs>\n                      <linearGradient id=\"customGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                        <stop offset=\"0%\" stopColor={areaColor} />\n                        <stop offset=\"100%\" stopColor={areaColor} stopOpacity={0.02} />\n                      </linearGradient>\n                    </defs>\n                    <path {...stripChartSlotProps(props)} fill={`url(#customGradient)`} />\n                  </g>\n                )\n              },\n            },\n          })}\n        />\n\n        {/** Line plot provides the data line **/}\n        <LinePlot\n          onItemClick={onItemClick}\n          slots={{\n            line: (props) => (\n              <CustomLine\n                {...props}\n                lineColor={areaColor ?? props.ownerState.color ?? theme.palette.primary.main}\n              />\n            ),\n          }}\n        />\n\n        {/** Mark plot provides the circles **/}\n        <MarkPlot\n          onItemClick={onItemClick}\n          slots={\n            useCustomMark\n              ? {\n                  mark: (props) => {\n                    return (\n                      <CustomMark\n                        handlers={markHandlers}\n                        labelBackgroundColor={labelBackgroundColor}\n                        labelFontColor={labelFontColor}\n                        labelFontSize={labelFontSize}\n                        showLabel={showMarkLabel}\n                        showMark={showMark || props.dataIndex === datasets[0].length - 1}\n                        style={markStyles?.(props.dataIndex) ?? {}}\n                        valueFormatterString={valueFormatterString}\n                        yData={yData}\n                        {...props}\n                      />\n                    )\n                  },\n                }\n              : undefined\n          }\n        />\n\n        <BarPlot\n          barLabel={(item) => (Number(item.value) > 0 ? `$${item.value}` : null)}\n          borderRadius={10}\n        />\n\n        {/** Provides the X axis line and values **/}\n        <ChartsXAxis\n          disableLine={!showXAxis}\n          disableTicks={!showXAxisTicks}\n          slotProps={\n            axisColor\n              ? {\n                  axisLine: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                  axisTick: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                }\n              : {}\n          }\n          sx={{ ...chartXaxisSx }}\n        />\n\n        {/** Provides the Y axis values **/}\n        <ChartsYAxis\n          disableLine={!showYAxis}\n          disableTicks={!showYAxisTicks}\n          slotProps={\n            axisColor\n              ? {\n                  axisLine: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                  axisTick: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                }\n              : {}\n          }\n          sx={{ ...chartYaxisSx }}\n        />\n\n        {/* Add vertical crosshair on hover */}\n        {showAxisHighlight && <ChartsAxisHighlight x=\"line\" />}\n\n        {showTooltip && (\n          <ChartsTooltipContainer trigger=\"axis\">\n            <CustomTooltip\n              customLabels={customTooltipLabels}\n              isCurrency={isCurrency}\n              labels={labels}\n              series={series}\n              valueFormatterString={valueFormatterString}\n            />\n          </ChartsTooltipContainer>\n        )}\n      </ResponsiveChartContainer>\n\n      {showLegend && (\n        <CustomLegend\n          average={showAverage ? average : undefined}\n          customLegendBoxSx={customLegendBoxSx}\n          customLegendVariant={customLegendVariant}\n          labels={labels}\n          series={series}\n          style={{\n            position: 'absolute',\n            top: 16,\n            left: 16,\n            ...customLegendSx,\n          }}\n          title={title}\n          valueFormatterString={valueFormatterString}\n        />\n      )}\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/common/components/charts/StackedLineChart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedLineChart.es.js","names":[],"sources":["../../../../src/common/components/charts/StackedLineChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport numeral from 'numeral'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { LineSeriesType, HighlightItemData } from '@mui/x-charts'\nimport { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip'\nimport { LineChart } from '@mui/x-charts/LineChart'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { useScreenSize } from '../../hooks/useScreenSize'\nimport { useDimensions } from '../../hooks/useDimensions'\nimport CustomAreaTooltip from './stackedlinechart/CustomAreaTooltip'\nimport { CustomLegend } from './stackedlinechart/CustomLegend'\nimport { CustomPointTooltip } from './stackedlinechart/CustomPointTooltip'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ntype DataPoint = { x: Date; y: number }\ntype Dataset = DataPoint[]\n\ninterface StackedLineChartData {\n  top_level_category_guid: string\n  category_guid: string\n  category_name: string\n  category_color: string\n  dataset: Dataset\n}\n\ninterface StackedLineChartProps {\n  stackedDatasets: StackedLineChartData[]\n  unstackedDatasets?: StackedLineChartData[]\n  onHoverArea?: (category: string) => void\n  onHoverPoint?: (category: string) => void\n  onHoverLegend?: (category: string) => void\n  onClickLegend?: (category: string) => void\n  availableHeight?: number\n  minimumHeight?: number\n}\n\n// TODO: Use v8 X-Charts built-in features to avoid custom implementation\n\nexport const StackedLineChart: React.FC<StackedLineChartProps> = ({\n  onHoverArea,\n  onHoverPoint,\n  onHoverLegend,\n  onClickLegend,\n  stackedDatasets,\n  unstackedDatasets = [],\n  availableHeight = 0,\n  minimumHeight = 350,\n}) => {\n  const theme = useTheme()\n  const { isMobile } = useScreenSize()\n  const [legendRef, { height: legendHeight }] = useDimensions()\n  const chartContainerRef = React.useRef<HTMLDivElement>(null)\n  const [chartHeight, setChartHeight] = React.useState<number>(0)\n\n  // Control responsive chart height based on available height\n  React.useEffect(() => {\n    const newChartHeight = Math.max(availableHeight - legendHeight, minimumHeight)\n    setChartHeight(newChartHeight)\n  }, [availableHeight, legendHeight])\n\n  const [hoveredLegend, setHoveredLegend] = React.useState<string | null>(null)\n  const [hoverState, setHoverState] = React.useState({\n    hoveredSeriesId: null as string | null,\n    hoveredAreaData: null as DataPoint[] | null,\n    isAreaHovered: false,\n    cursorPos: { x: 0, y: 0 },\n  })\n\n  const { hoveredSeriesId, hoveredAreaData, isAreaHovered, cursorPos } = hoverState\n  const showAreaTooltip = isAreaHovered && hoveredSeriesId && hoveredAreaData\n  const showPointTooltip = !showAreaTooltip\n\n  const datasets = [...stackedDatasets, ...unstackedDatasets]\n  const xTicks = datasets[0]?.dataset.length ?? 0\n  const xData = datasets.flatMap((data) => data.dataset.map((d) => d.x))\n  const yData = datasets.flatMap((data) => data.dataset.map((d) => d.y))\n\n  // Calculate max cumulative heights for stacked datasets\n  const cumulativeHeights = stackedDatasets[0]?.dataset?.map((_, i) =>\n    stackedDatasets.reduce((sum, dataset) => sum + dataset.dataset[i]?.y || 0, 0),\n  ) ?? [0]\n  const stackedMax = Math.max(...cumulativeHeights)\n  const unstackedMax = Math.max(\n    ...unstackedDatasets.flatMap((data) => data.dataset.map((d) => d.y)),\n  )\n\n  const yMin = Math.floor(Math.min(...yData) / 100) * 100\n  const yMax = Math.ceil(Math.max(stackedMax, unstackedMax) / 100) * 100\n\n  const stackedSeries = stackedDatasets.map((data, index) => ({\n    id: `stacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: true,\n    color: stackedDatasets[index].category_color ?? theme.palette.primary.main,\n    data: data.dataset.map((d) => d.y),\n    label: stackedDatasets[index].category_name,\n    stack: 'total',\n    type: 'line',\n    highlightScope: { highlight: 'item' },\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const unstackedSeries = unstackedDatasets.map((data, index) => ({\n    id: `unstacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: false,\n    color: data.category_color,\n    data: data.dataset.map((d) => d.y),\n    label: data.category_name,\n    type: 'line',\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const series = [...stackedSeries, ...unstackedSeries]\n  const guids = [\n    ...stackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n    ...unstackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n  ]\n\n  const getSeriesCategoryGuids = (seriesId: string) => {\n    const isStacked = seriesId.startsWith('stacked-')\n    const dataset = isStacked\n      ? stackedDatasets[parseInt(seriesId.split('-')[1])]\n      : unstackedDatasets[parseInt(seriesId.split('-')[1])]\n    return {\n      guid: dataset?.category_guid,\n      topLevelGuid: dataset?.top_level_category_guid,\n    }\n  }\n\n  const handleHoverLegend = (guid: string | null) => {\n    setHoveredLegend(guid)\n    onHoverLegend?.(guid ?? '')\n  }\n\n  const handleClickLegend = (guid: string | null) => {\n    onClickLegend?.(guid ?? '')\n  }\n\n  const handleClickArea = () => {\n    const clickedSeriesGuid = getSeriesCategoryGuids(String(hoveredSeriesId)).guid\n    if (clickedSeriesGuid) onClickLegend?.(clickedSeriesGuid)\n  }\n\n  const handleHighlightChange = (highlightedItem: HighlightItemData | null) => {\n    const hoveredSeriesId = String(highlightedItem?.seriesId)\n    const hoveredSeriesGuid = getSeriesCategoryGuids(hoveredSeriesId).guid\n    const hoveredSeries = series.find((s) => s.id === hoveredSeriesId)\n    const isPointHovered = hoveredSeries && highlightedItem?.dataIndex !== undefined\n    const isAreaHovered = hoveredSeries && highlightedItem?.dataIndex === undefined\n\n    if (isPointHovered) {\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n      onHoverPoint?.(hoveredSeriesGuid)\n    } else if (isAreaHovered) {\n      const hoveredDataPoints =\n        hoveredSeries?.data.map((yValue, index) => ({\n          x: xData[index],\n          y: yValue,\n        })) ?? []\n\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: hoveredDataPoints,\n        isAreaHovered: true,\n        cursorPos,\n      })\n      onHoverArea?.(hoveredSeriesGuid)\n    } else {\n      setHoverState({\n        hoveredSeriesId: null,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n    }\n  }\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (\n      event.target instanceof Element &&\n      event.target.classList[0]?.includes('MuiMarkElement-root')\n    )\n      return\n\n    const rect = event.currentTarget.getBoundingClientRect()\n    setHoverState((prev) => ({\n      ...prev,\n      cursorPos: {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n      },\n    }))\n  }\n\n  const customStyles = {\n    p: 4,\n    '& .MuiBarLabel-root': {\n      fontSize: 10,\n      fontWeight: 600,\n    },\n    '& .MuiAreaElement-root': {\n      opacity: 0.4,\n      transition: 'opacity 0.3s ease',\n    },\n    '& .MuiAreaElement-root:hover': {\n      opacity: 1,\n    },\n    '& [class*=\"MuiLineElement-series-unstacked-\"]': {\n      strokeWidth: 3,\n    },\n    ...(hoveredLegend &&\n      stackedSeries.reduce<Record<string, any>>((acc, _, index) => {\n        const selector = `.MuiAreaElement-series-stacked-${index}`\n        acc[selector] = {\n          opacity: stackedSeries[index].guid === hoveredLegend ? 0.9 : 0.2,\n        }\n        return acc\n      }, {})),\n  }\n\n  return (\n    <Box\n      onMouseMove={handleMouseMove}\n      ref={chartContainerRef}\n      sx={{\n        position: 'relative',\n        touchAction: 'pan-y',\n        '& svg': {\n          touchAction: 'pan-y',\n          userSelect: 'none',\n        },\n        '& .recharts-wrapper': {\n          touchAction: 'pan-y',\n        },\n      }}\n    >\n      <Stack\n        direction={{ xs: 'column', md: 'column' }}\n        spacing={{ xs: 0, md: 4 }}\n        sx={{ width: '100%', position: 'relative' }}\n      >\n        <LineChart\n          height={chartHeight}\n          hideLegend={true}\n          margin={{ bottom: 24, left: 12, right: 54, top: 48 }}\n          onAreaClick={handleClickArea}\n          onHighlightChange={handleHighlightChange}\n          series={series as LineSeriesType[]}\n          skipAnimation={true}\n          slotProps={{\n            tooltip: { trigger: showPointTooltip ? 'item' : 'none' },\n          }}\n          slots={{\n            tooltip:\n              showPointTooltip && hoveredSeriesId\n                ? (props) => (\n                    <ChartsTooltipContainer>\n                      <CustomPointTooltip\n                        {...props}\n                        categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n                        series={series}\n                        xData={xData}\n                      />\n                    </ChartsTooltipContainer>\n                  )\n                : undefined,\n          }}\n          sx={customStyles}\n          xAxis={[\n            {\n              data: xData,\n              scaleType: 'time',\n              valueFormatter: (value: Date) =>\n                formatDate(value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n              tickNumber: xTicks, // How many ticks to show on the x-axis\n            },\n          ]}\n          yAxis={[\n            {\n              min: yMin,\n              max: yMax || 100,\n              valueFormatter: (value: number) => numeral(value).format('0a'),\n            },\n          ]}\n        />\n        <CustomLegend\n          categoryGuids={guids}\n          hoveredLegend={hoveredLegend}\n          legendRef={legendRef}\n          onClickLegend={handleClickLegend}\n          onHoverLegend={handleHoverLegend}\n          sx={{ px: isMobile ? 0 : 24 }}\n        />\n\n        {showAreaTooltip && (\n          <CustomAreaTooltip\n            categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n            chartContainerRef={chartContainerRef}\n            cursorPosition={cursorPos}\n            hoveredAreaData={hoveredAreaData.map((point) => ({\n              ...point,\n              x: formatDate(point.x, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n            }))}\n          />\n        )}\n      </Stack>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"StackedLineChart.es.js","names":[],"sources":["../../../../src/common/components/charts/StackedLineChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport numeral from 'numeral'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { LineSeriesType, HighlightItemData } from '@mui/x-charts'\nimport { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip'\nimport { LineChart } from '@mui/x-charts/LineChart'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { useScreenSize } from '../../hooks/useScreenSize'\nimport { useDimensions } from '../../hooks/useDimensions'\nimport CustomAreaTooltip from './stackedlinechart/CustomAreaTooltip'\nimport { CustomLegend } from './stackedlinechart/CustomLegend'\nimport { CustomPointTooltip } from './stackedlinechart/CustomPointTooltip'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ntype DataPoint = { x: Date; y: number }\ntype Dataset = DataPoint[]\n\ninterface StackedLineChartData {\n  top_level_category_guid: string\n  category_guid: string\n  category_name: string\n  category_color: string\n  dataset: Dataset\n}\n\ninterface StackedLineChartProps {\n  stackedDatasets: StackedLineChartData[]\n  unstackedDatasets?: StackedLineChartData[]\n  onHoverArea?: (category: string) => void\n  onHoverPoint?: (category: string) => void\n  onHoverLegend?: (category: string) => void\n  onClickLegend?: (category: string) => void\n  availableHeight?: number\n  minimumHeight?: number\n}\n\n// TODO: Use v8 X-Charts built-in features to avoid custom implementation\n\nexport const StackedLineChart: React.FC<StackedLineChartProps> = ({\n  onHoverArea,\n  onHoverPoint,\n  onHoverLegend,\n  onClickLegend,\n  stackedDatasets,\n  unstackedDatasets = [],\n  availableHeight = 0,\n  minimumHeight = 350,\n}) => {\n  const theme = useTheme()\n  const { isMobile } = useScreenSize()\n  const [legendRef, { height: legendHeight }] = useDimensions()\n  const chartContainerRef = React.useRef<HTMLDivElement>(null)\n  const [chartHeight, setChartHeight] = React.useState<number>(0)\n\n  // Control responsive chart height based on available height\n  React.useEffect(() => {\n    const newChartHeight = Math.max(availableHeight - legendHeight, minimumHeight)\n    setChartHeight(newChartHeight)\n  }, [availableHeight, legendHeight])\n\n  const [hoveredLegend, setHoveredLegend] = React.useState<string | null>(null)\n  const [hoverState, setHoverState] = React.useState({\n    hoveredSeriesId: null as string | null,\n    hoveredAreaData: null as DataPoint[] | null,\n    isAreaHovered: false,\n    cursorPos: { x: 0, y: 0 },\n  })\n\n  const { hoveredSeriesId, hoveredAreaData, isAreaHovered, cursorPos } = hoverState\n  const showAreaTooltip = isAreaHovered && hoveredSeriesId && hoveredAreaData\n  const showPointTooltip = !showAreaTooltip\n\n  const datasets = [...stackedDatasets, ...unstackedDatasets]\n  const xTicks = datasets[0]?.dataset.length ?? 0\n  const xData = datasets.flatMap((data) => data.dataset.map((d) => d.x))\n  const yData = datasets.flatMap((data) => data.dataset.map((d) => d.y))\n\n  // Calculate max cumulative heights for stacked datasets\n  const cumulativeHeights = stackedDatasets[0]?.dataset?.map((_, i) =>\n    stackedDatasets.reduce((sum, dataset) => sum + dataset.dataset[i]?.y || 0, 0),\n  ) ?? [0]\n  const stackedMax = Math.max(...cumulativeHeights)\n  const unstackedMax = Math.max(\n    ...unstackedDatasets.flatMap((data) => data.dataset.map((d) => d.y)),\n  )\n\n  const yMin = Math.floor(Math.min(...yData) / 100) * 100\n  const yMax = Math.ceil(Math.max(stackedMax, unstackedMax) / 100) * 100\n\n  const stackedSeries = stackedDatasets.map((data, index) => ({\n    id: `stacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: true,\n    color: stackedDatasets[index].category_color ?? theme.palette.primary.main,\n    data: data.dataset.map((d) => d.y),\n    label: stackedDatasets[index].category_name,\n    stack: 'total',\n    type: 'line',\n    highlightScope: { highlight: 'item' },\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const unstackedSeries = unstackedDatasets.map((data, index) => ({\n    id: `unstacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: false,\n    color: data.category_color,\n    data: data.dataset.map((d) => d.y),\n    label: data.category_name,\n    type: 'line',\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const series = [...stackedSeries, ...unstackedSeries]\n  const guids = [\n    ...stackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n    ...unstackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n  ]\n\n  const getSeriesCategoryGuids = (seriesId: string) => {\n    const isStacked = seriesId.startsWith('stacked-')\n    const dataset = isStacked\n      ? stackedDatasets[parseInt(seriesId.split('-')[1])]\n      : unstackedDatasets[parseInt(seriesId.split('-')[1])]\n    return {\n      guid: dataset?.category_guid,\n      topLevelGuid: dataset?.top_level_category_guid,\n    }\n  }\n\n  const handleHoverLegend = (guid: string | null) => {\n    setHoveredLegend(guid)\n    onHoverLegend?.(guid ?? '')\n  }\n\n  const handleClickLegend = (guid: string | null) => {\n    onClickLegend?.(guid ?? '')\n  }\n\n  const handleClickArea = () => {\n    const clickedSeriesGuid = getSeriesCategoryGuids(String(hoveredSeriesId)).guid\n    if (clickedSeriesGuid) onClickLegend?.(clickedSeriesGuid)\n  }\n\n  const handleHighlightChange = (highlightedItem: HighlightItemData | null) => {\n    const hoveredSeriesId = String(highlightedItem?.seriesId)\n    const hoveredSeriesGuid = getSeriesCategoryGuids(hoveredSeriesId).guid\n    const hoveredSeries = series.find((s) => s.id === hoveredSeriesId)\n    const isPointHovered = hoveredSeries && highlightedItem?.dataIndex !== undefined\n    const isAreaHovered = hoveredSeries && highlightedItem?.dataIndex === undefined\n\n    if (isPointHovered) {\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n      onHoverPoint?.(hoveredSeriesGuid)\n    } else if (isAreaHovered) {\n      const hoveredDataPoints =\n        hoveredSeries?.data.map((yValue, index) => ({\n          x: xData[index],\n          y: yValue,\n        })) ?? []\n\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: hoveredDataPoints,\n        isAreaHovered: true,\n        cursorPos,\n      })\n      onHoverArea?.(hoveredSeriesGuid)\n    } else {\n      setHoverState({\n        hoveredSeriesId: null,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n    }\n  }\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (\n      event.target instanceof Element &&\n      event.target.classList[0]?.includes('MuiMarkElement-root')\n    )\n      return\n\n    const rect = event.currentTarget.getBoundingClientRect()\n    setHoverState((prev) => ({\n      ...prev,\n      cursorPos: {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n      },\n    }))\n  }\n\n  const customStyles = {\n    p: 4,\n    '& .MuiBarLabel-root': {\n      fontSize: 10,\n      fontWeight: 600,\n    },\n    '& .MuiAreaElement-root': {\n      opacity: 0.4,\n      transition: 'opacity 0.3s ease',\n    },\n    '& .MuiAreaElement-root:hover': {\n      opacity: 1,\n    },\n    '& [class*=\"MuiLineElement-series-unstacked-\"]': {\n      strokeWidth: 3,\n    },\n    ...(hoveredLegend &&\n      stackedSeries.reduce<Record<string, any>>((acc, _, index) => {\n        const selector = `.MuiAreaElement-series-stacked-${index}`\n        acc[selector] = {\n          opacity: stackedSeries[index].guid === hoveredLegend ? 0.9 : 0.2,\n        }\n        return acc\n      }, {})),\n  }\n\n  return (\n    <Box\n      onMouseMove={handleMouseMove}\n      ref={chartContainerRef}\n      sx={{\n        position: 'relative',\n        touchAction: 'pan-y',\n        '& svg': {\n          touchAction: 'pan-y',\n          userSelect: 'none',\n        },\n        '& .recharts-wrapper': {\n          touchAction: 'pan-y',\n        },\n      }}\n    >\n      <Stack\n        direction={{ xs: 'column', md: 'column' }}\n        spacing={{ xs: 0, md: 4 }}\n        sx={{ width: '100%', position: 'relative' }}\n      >\n        <LineChart\n          height={chartHeight}\n          hideLegend={true}\n          margin={{ bottom: 24, left: 12, right: 54, top: 48 }}\n          onAreaClick={handleClickArea}\n          onHighlightChange={handleHighlightChange}\n          series={series as LineSeriesType[]}\n          skipAnimation={true}\n          slotProps={{\n            tooltip: { trigger: showPointTooltip ? 'item' : 'none' },\n          }}\n          slots={{\n            tooltip:\n              showPointTooltip && hoveredSeriesId\n                ? (props) => (\n                    <ChartsTooltipContainer>\n                      <CustomPointTooltip\n                        {...props}\n                        categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n                        series={series}\n                        xData={xData}\n                      />\n                    </ChartsTooltipContainer>\n                  )\n                : undefined,\n          }}\n          sx={customStyles}\n          xAxis={[\n            {\n              data: xData,\n              scaleType: 'time',\n              valueFormatter: (value: Date) =>\n                formatDate(value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n              tickNumber: xTicks, // How many ticks to show on the x-axis\n            },\n          ]}\n          yAxis={[\n            {\n              min: yMin,\n              max: yMax || 100,\n              valueFormatter: (value: number) => numeral(value).format('0a'),\n            },\n          ]}\n        />\n        <CustomLegend\n          categoryGuids={guids}\n          hoveredLegend={hoveredLegend}\n          legendRef={legendRef}\n          onClickLegend={handleClickLegend}\n          onHoverLegend={handleHoverLegend}\n          sx={{ px: isMobile ? 0 : 24 }}\n        />\n\n        {showAreaTooltip && (\n          <CustomAreaTooltip\n            categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n            chartContainerRef={chartContainerRef}\n            cursorPosition={cursorPos}\n            hoveredAreaData={hoveredAreaData.map((point) => ({\n              ...point,\n              x: formatDate(point.x, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n            }))}\n          />\n        )}\n      </Stack>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/common/components/charts/StatusBar.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.es.js","names":[],"sources":["../../../../src/common/components/charts/StatusBar.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nexport type StatusBarData = {\n  color: string\n  percentage: string\n}\n\ninterface StatusBarProps {\n  data: StatusBarData[]\n  height?: number\n}\n\nconst StatusBar = ({ data, height = 8 }: StatusBarProps) => {\n  const borderRadius = `${height / 4}px`\n\n  return (\n    <Stack\n      bgcolor=\"divider\"\n      borderRadius={borderRadius}\n      direction=\"row\"\n      gap={2}\n      height={height}\n      width=\"100%\"\n    >\n      {data.map((item, index) => (\n        <Box\n          bgcolor={item.color}\n          borderRadius={borderRadius}\n          height={height}\n          key={index}\n          width={item.percentage}\n        />\n      ))}\n    </Stack>\n  )\n}\n\nexport default StatusBar\n"],"mappings":";;;AAaA,IAAM,IAAA,CAAa,EAAE,MAAA,GAAM,QAAA,IAAS,EAAA,MAAwB;AAC1D,QAAM,IAAe,GAAG,IAAS,CAAA;AAEjC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,SAAQ;AAAA,IACM,cAAA;AAAA,IACd,WAAU;AAAA,IACV,KAAK;AAAA,IACG,QAAA;AAAA,IACR,OAAM;AAAA,cAEL,EAAK,IAAA,CAAK,GAAM,MACf,gBAAA,EAAC,GAAD;AAAA,MACE,SAAS,EAAK;AAAA,MACA,cAAA;AAAA,MACN,QAAA;AAAA,MAER,OAAO,EAAK;AAAA,IACb,GAFM,CAEN,CACF;AAAA,EACI,CAAA;AAEX"}
+{"version":3,"file":"StatusBar.es.js","names":[],"sources":["../../../../src/common/components/charts/StatusBar.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nexport type StatusBarData = {\n  color: string\n  percentage: string\n}\n\ninterface StatusBarProps {\n  data: StatusBarData[]\n  height?: number\n}\n\nconst StatusBar = ({ data, height = 8 }: StatusBarProps) => {\n  const borderRadius = `${height / 4}px`\n\n  return (\n    <Stack\n      bgcolor=\"divider\"\n      borderRadius={borderRadius}\n      direction=\"row\"\n      gap={2}\n      height={height}\n      width=\"100%\"\n    >\n      {data.map((item, index) => (\n        <Box\n          bgcolor={item.color}\n          borderRadius={borderRadius}\n          height={height}\n          key={index}\n          width={item.percentage}\n        />\n      ))}\n    </Stack>\n  )\n}\n\nexport default StatusBar\n"],"mappings":";;;AAaA,IAAM,IAAA,CAAa,EAAE,MAAA,GAAM,QAAA,IAAS,EAAA,MAAwB;AAC1D,QAAM,IAAe,GAAG,IAAS,CAAA;AAEjC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,SAAQ;AAAA,IACM,cAAA;AAAA,IACd,WAAU;AAAA,IACV,KAAK;AAAA,IACG,QAAA;AAAA,IACR,OAAM;AAAA,IAEL,UAAA,EAAK,IAAA,CAAK,GAAM,MACf,gBAAA,EAAC,GAAD;AAAA,MACE,SAAS,EAAK;AAAA,MACA,cAAA;AAAA,MACN,QAAA;AAAA,MAER,OAAO,EAAK;AAAA,IACb,GAFM,CAEN,CACF;AAAA,EACI,CAAA;AAEX"}

package/dist/common/components/charts/linechart/CustomLegend.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomLegend.es.js","names":[],"sources":["../../../../../src/common/components/charts/linechart/CustomLegend.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../../common'\nimport { LineChartLabel } from '../LineChart'\nimport { getMarkerShape, MARKER_SHAPE_PATHS } from './utils/markerShapes'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nexport const CustomLegendLabel = ({\n  label,\n  customLegendVariant,\n}: {\n  label: LineChartLabel\n  customLegendVariant?: string\n}) => {\n  const variant = (customLegendVariant as any) || 'body2'\n\n  if (typeof label === 'string') {\n    return <Text variant={variant}>{label}</Text>\n  }\n  if (typeof label === 'object' && label.amount !== undefined && label.label) {\n    return (\n      <>\n        <Text variant={variant}>{label.label}</Text>\n        <Text bold={true} sx={{ marginLeft: 8 }} variant={variant}>\n          {formatCurrency(label.amount, '0,0')}\n        </Text>\n      </>\n    )\n  }\n  return null\n}\n\nconst CustomLegend = ({\n  average,\n  customLegendVariant,\n  customLegendBoxSx,\n  labels = [],\n  series,\n  style,\n  title,\n  valueFormatterString,\n}: {\n  average?: number\n  customLegendVariant?: string\n  customLegendBoxSx?: SxProps\n  labels?: LineChartLabel[]\n  series: any[]\n  title?: string\n  style: any\n  valueFormatterString?: string\n}) => {\n  const { common: commonCopy } = useGlobalCopyStore()\n  const variant = (customLegendVariant as any) || 'body2'\n\n  return (\n    <Stack style={{ flexDirection: 'row', gap: 24, ...style }}>\n      {series.map((s, index) => {\n        const label = labels[index]\n        // Skip series without a label\n        return label ? (\n          <Stack\n            key={index}\n            style={{ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap' }}\n          >\n            {customLegendBoxSx !== undefined ? (\n              <Box\n                sx={{\n                  width: 10,\n                  height: 10,\n                  backgroundColor: s.color,\n                  marginRight: 8,\n                  ...customLegendBoxSx,\n                }}\n              />\n            ) : (\n              <svg\n                aria-hidden=\"true\"\n                height={14}\n                style={{ marginRight: 8, flexShrink: 0 }}\n                viewBox=\"-6 -6 12 12\"\n                width={14}\n              >\n                <path\n                  d={MARKER_SHAPE_PATHS[getMarkerShape(index)]}\n                  fill={s.color}\n                  stroke={s.color}\n                  strokeWidth={1}\n                />\n              </svg>\n            )}\n            <CustomLegendLabel customLegendVariant={customLegendVariant} label={label} />\n          </Stack>\n        ) : null\n      })}\n      {average !== undefined && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n          <Text bold={true} sx={{ marginRight: 8 }} variant={variant}>\n            – –\n          </Text>\n          <Text variant={variant}>{title ? title : commonCopy.average}&nbsp;&nbsp;</Text>\n          <Text bold={true} variant={variant}>\n            {valueFormatterString ? formatCurrency(average, valueFormatterString) : average}\n          </Text>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n\nexport default observer(CustomLegend)\n"],"mappings":";;;;;;;;AAYA,IAAa,IAAA,CAAqB,EAChC,OAAA,GACA,qBAAA,EAAA,MAII;AACJ,QAAM,IAAW,KAA+B;AAEhD,SAAI,OAAO,KAAU,WACZ,gBAAA,EAAC,GAAD;AAAA,IAAe,SAAA;AAAA,cAAU;AAAA,EAAY,CAAA,IAE1C,OAAO,KAAU,YAAY,EAAM,WAAW,UAAa,EAAM,QAEjE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAe,SAAA;AAAA,cAAU,EAAM;AAAA,EAAY,CAAA,GAC3C,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,IAAI,EAAE,YAAY,EAAE;AAAA,IAAY,SAAA;AAAA,cAC/C,EAAe,EAAM,QAAQ,KAAK;AAAA,EAC/B,CAAA,CACN,EAAA,CAAA,IAGC;AACT,GAEM,IAAA,CAAgB,EACpB,SAAA,GACA,qBAAA,GACA,mBAAA,GACA,QAAA,IAAS,CAAC,GACV,QAAA,GACA,OAAA,GACA,OAAA,GACA,sBAAA,EAAA,MAUI;AACJ,QAAM,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,IAAW,KAA+B;AAEhD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,OAAO;AAAA,MAAE,eAAe;AAAA,MAAO,KAAK;AAAA,MAAI,GAAG;AAAA,IAAM;AAAA,cAAxD,CACG,EAAO,IAAA,CAAK,GAAG,MAAU;AACxB,YAAM,IAAQ,EAAO,CAAA;AAErB,aAAO,IACL,gBAAA,EAAC,GAAD;AAAA,QAEE,OAAO;AAAA,UAAE,YAAY;AAAA,UAAU,eAAe;AAAA,UAAO,UAAU;AAAA,QAAO;AAAA,kBAFxE,CAIG,MAAsB,SACrB,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,iBAAiB,EAAE;AAAA,UACnB,aAAa;AAAA,UACb,GAAG;AAAA,QACL,EACD,CAAA,IAED,gBAAA,EAAC,OAAD;AAAA,UACE,eAAY;AAAA,UACZ,QAAQ;AAAA,UACR,OAAO;AAAA,YAAE,aAAa;AAAA,YAAG,YAAY;AAAA,UAAE;AAAA,UACvC,SAAQ;AAAA,UACR,OAAO;AAAA,oBAEP,gBAAA,EAAC,QAAD;AAAA,YACE,GAAG,EAAmB,EAAe,CAAK,CAAA;AAAA,YAC1C,MAAM,EAAE;AAAA,YACR,QAAQ,EAAE;AAAA,YACV,aAAa;AAAA,UACd,CAAA;AAAA,QACE,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,UAAwC,qBAAA;AAAA,UAA4B,OAAA;AAAA,QAAQ,CAAA,CACvE;AAAA,SA9BA,CA8BA,IACL;AAAA,IACN,CAAC,GACA,MAAY,UACX,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,MAAM;AAAA,gBAAxD;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,IAAI,EAAE,aAAa,EAAE;AAAA,UAAY,SAAA;AAAA,oBAAS;AAAA,QAEtD,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAe,SAAA;AAAA,oBAAf,CAAyB,KAAgB,EAAW,SAAQ,IAAkB;AAAA;QAC9E,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAe,SAAA;AAAA,oBACxB,IAAuB,EAAe,GAAS,CAAoB,IAAI;AAAA,QACpE,CAAA;AAAA,MACD;AAAA,MAEJ;AAAA;AAEX,GAEA,IAAe,EAAS,CAAY"}
+{"version":3,"file":"CustomLegend.es.js","names":[],"sources":["../../../../../src/common/components/charts/linechart/CustomLegend.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../../common'\nimport { LineChartLabel } from '../LineChart'\nimport { getMarkerShape, MARKER_SHAPE_PATHS } from './utils/markerShapes'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nexport const CustomLegendLabel = ({\n  label,\n  customLegendVariant,\n}: {\n  label: LineChartLabel\n  customLegendVariant?: string\n}) => {\n  const variant = (customLegendVariant as any) || 'body2'\n\n  if (typeof label === 'string') {\n    return <Text variant={variant}>{label}</Text>\n  }\n  if (typeof label === 'object' && label.amount !== undefined && label.label) {\n    return (\n      <>\n        <Text variant={variant}>{label.label}</Text>\n        <Text bold={true} sx={{ marginLeft: 8 }} variant={variant}>\n          {formatCurrency(label.amount, '0,0')}\n        </Text>\n      </>\n    )\n  }\n  return null\n}\n\nconst CustomLegend = ({\n  average,\n  customLegendVariant,\n  customLegendBoxSx,\n  labels = [],\n  series,\n  style,\n  title,\n  valueFormatterString,\n}: {\n  average?: number\n  customLegendVariant?: string\n  customLegendBoxSx?: SxProps\n  labels?: LineChartLabel[]\n  series: any[]\n  title?: string\n  style: any\n  valueFormatterString?: string\n}) => {\n  const { common: commonCopy } = useGlobalCopyStore()\n  const variant = (customLegendVariant as any) || 'body2'\n\n  return (\n    <Stack style={{ flexDirection: 'row', gap: 24, ...style }}>\n      {series.map((s, index) => {\n        const label = labels[index]\n        // Skip series without a label\n        return label ? (\n          <Stack\n            key={index}\n            style={{ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap' }}\n          >\n            {customLegendBoxSx !== undefined ? (\n              <Box\n                sx={{\n                  width: 10,\n                  height: 10,\n                  backgroundColor: s.color,\n                  marginRight: 8,\n                  ...customLegendBoxSx,\n                }}\n              />\n            ) : (\n              <svg\n                aria-hidden=\"true\"\n                height={14}\n                style={{ marginRight: 8, flexShrink: 0 }}\n                viewBox=\"-6 -6 12 12\"\n                width={14}\n              >\n                <path\n                  d={MARKER_SHAPE_PATHS[getMarkerShape(index)]}\n                  fill={s.color}\n                  stroke={s.color}\n                  strokeWidth={1}\n                />\n              </svg>\n            )}\n            <CustomLegendLabel customLegendVariant={customLegendVariant} label={label} />\n          </Stack>\n        ) : null\n      })}\n      {average !== undefined && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n          <Text bold={true} sx={{ marginRight: 8 }} variant={variant}>\n            – –\n          </Text>\n          <Text variant={variant}>{title ? title : commonCopy.average}&nbsp;&nbsp;</Text>\n          <Text bold={true} variant={variant}>\n            {valueFormatterString ? formatCurrency(average, valueFormatterString) : average}\n          </Text>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n\nexport default observer(CustomLegend)\n"],"mappings":";;;;;;;;AAYA,IAAa,IAAA,CAAqB,EAChC,OAAA,GACA,qBAAA,EAAA,MAII;AACJ,QAAM,IAAW,KAA+B;AAEhD,SAAI,OAAO,KAAU,WACZ,gBAAA,EAAC,GAAD;AAAA,IAAe,SAAA;AAAA,IAAU,UAAA;AAAA,EAAY,CAAA,IAE1C,OAAO,KAAU,YAAY,EAAM,WAAW,UAAa,EAAM,QAEjE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAe,SAAA;AAAA,IAAU,UAAA,EAAM;AAAA,EAAY,CAAA,GAC3C,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,IAAI,EAAE,YAAY,EAAE;AAAA,IAAY,SAAA;AAAA,IAC/C,UAAA,EAAe,EAAM,QAAQ,KAAK;AAAA,EAC/B,CAAA,CACN,EAAA,CAAA,IAGC;AACT,GAEM,IAAA,CAAgB,EACpB,SAAA,GACA,qBAAA,GACA,mBAAA,GACA,QAAA,IAAS,CAAC,GACV,QAAA,GACA,OAAA,GACA,OAAA,GACA,sBAAA,EAAA,MAUI;AACJ,QAAM,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,IAAW,KAA+B;AAEhD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,OAAO;AAAA,MAAE,eAAe;AAAA,MAAO,KAAK;AAAA,MAAI,GAAG;AAAA,IAAM;AAAA,IAAxD,UAAA,CACG,EAAO,IAAA,CAAK,GAAG,MAAU;AACxB,YAAM,IAAQ,EAAO,CAAA;AAErB,aAAO,IACL,gBAAA,EAAC,GAAD;AAAA,QAEE,OAAO;AAAA,UAAE,YAAY;AAAA,UAAU,eAAe;AAAA,UAAO,UAAU;AAAA,QAAO;AAAA,QAFxE,UAAA,CAIG,MAAsB,SACrB,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,iBAAiB,EAAE;AAAA,UACnB,aAAa;AAAA,UACb,GAAG;AAAA,QACL,EACD,CAAA,IAED,gBAAA,EAAC,OAAD;AAAA,UACE,eAAY;AAAA,UACZ,QAAQ;AAAA,UACR,OAAO;AAAA,YAAE,aAAa;AAAA,YAAG,YAAY;AAAA,UAAE;AAAA,UACvC,SAAQ;AAAA,UACR,OAAO;AAAA,UAEP,UAAA,gBAAA,EAAC,QAAD;AAAA,YACE,GAAG,EAAmB,EAAe,CAAK,CAAA;AAAA,YAC1C,MAAM,EAAE;AAAA,YACR,QAAQ,EAAE;AAAA,YACV,aAAa;AAAA,UACd,CAAA;AAAA,QACE,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,UAAwC,qBAAA;AAAA,UAA4B,OAAA;AAAA,QAAQ,CAAA,CACvE;AAAA,MA9BA,GAAA,CA8BA,IACL;AAAA,IACN,CAAC,GACA,MAAY,UACX,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,MAAM;AAAA,MAAxD,UAAA;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,IAAI,EAAE,aAAa,EAAE;AAAA,UAAY,SAAA;AAAA,UAAS,UAAA;AAAA,QAEtD,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAe,SAAA;AAAA,UAAf,UAAA,CAAyB,KAAgB,EAAW,SAAQ,IAAkB;AAAA;QAC9E,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAe,SAAA;AAAA,UACxB,UAAA,IAAuB,EAAe,GAAS,CAAoB,IAAI;AAAA,QACpE,CAAA;AAAA,MACD;AAAA,IAEJ,CAAA,CAAA;AAAA;AAEX,GAEA,IAAe,EAAS,CAAY"}

package/dist/common/components/charts/linechart/CustomLine.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomLine.es.js","names":[],"sources":["../../../../../src/common/components/charts/linechart/CustomLine.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { AnimatedLineProps } from '@mui/x-charts'\n\ninterface CustomLineProps extends AnimatedLineProps {\n  lineColor?: string\n}\n\nexport const CustomLine: React.FC<CustomLineProps> = (props) => {\n  return (\n    <>\n      <clipPath id={props.id}>\n        <rect height={props.height} width={props.width} x=\"0\" y=\"0\" />\n      </clipPath>\n      <g>\n        <path\n          cursor=\"unset\"\n          d={props.d}\n          style={{\n            strokeWidth: 2,\n            strokeLinejoin: 'round',\n            fill: 'none',\n            stroke: props.lineColor ? props.lineColor : props.stroke,\n            transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',\n            opacity: 1,\n          }}\n        />\n      </g>\n    </>\n  )\n}\n"],"mappings":";;AAQA,IAAa,IAAA,CAAyC,MAElD,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,YAAD;AAAA,EAAU,IAAI,EAAM;AAAA,YAClB,gBAAA,EAAC,QAAD;AAAA,IAAM,QAAQ,EAAM;AAAA,IAAQ,OAAO,EAAM;AAAA,IAAO,GAAE;AAAA,IAAI,GAAE;AAAA,EAAK,CAAA;AACrD,CAAA,GACV,gBAAA,EAAC,KAAD,EAAA,UACE,gBAAA,EAAC,QAAD;AAAA,EACE,QAAO;AAAA,EACP,GAAG,EAAM;AAAA,EACT,OAAO;AAAA,IACL,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,QAAQ,EAAM,YAAY,EAAM,YAAY,EAAM;AAAA,IAClD,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACD,CAAA,EACA,CAAA,CACH,EAAA,CAAA"}
+{"version":3,"file":"CustomLine.es.js","names":[],"sources":["../../../../../src/common/components/charts/linechart/CustomLine.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { AnimatedLineProps } from '@mui/x-charts'\n\ninterface CustomLineProps extends AnimatedLineProps {\n  lineColor?: string\n}\n\nexport const CustomLine: React.FC<CustomLineProps> = (props) => {\n  return (\n    <>\n      <clipPath id={props.id}>\n        <rect height={props.height} width={props.width} x=\"0\" y=\"0\" />\n      </clipPath>\n      <g>\n        <path\n          cursor=\"unset\"\n          d={props.d}\n          style={{\n            strokeWidth: 2,\n            strokeLinejoin: 'round',\n            fill: 'none',\n            stroke: props.lineColor ? props.lineColor : props.stroke,\n            transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',\n            opacity: 1,\n          }}\n        />\n      </g>\n    </>\n  )\n}\n"],"mappings":";;AAQA,IAAa,IAAA,CAAyC,MAElD,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,YAAD;AAAA,EAAU,IAAI,EAAM;AAAA,EAClB,UAAA,gBAAA,EAAC,QAAD;AAAA,IAAM,QAAQ,EAAM;AAAA,IAAQ,OAAO,EAAM;AAAA,IAAO,GAAE;AAAA,IAAI,GAAE;AAAA,EAAK,CAAA;AACrD,CAAA,GACV,gBAAA,EAAC,KAAD,EAAA,UACE,gBAAA,EAAC,QAAD;AAAA,EACE,QAAO;AAAA,EACP,GAAG,EAAM;AAAA,EACT,OAAO;AAAA,IACL,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,QAAQ,EAAM,YAAY,EAAM,YAAY,EAAM;AAAA,IAClD,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACD,CAAA,EACA,CAAA,CACH,EAAA,CAAA"}

package/dist/common/components/charts/linechart/CustomMark.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomMark.es.js","names":[],"sources":["../../../../../src/common/components/charts/linechart/CustomMark.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport useMediaQuery from '@mui/material/useMediaQuery'\n\nimport type { MarkElementProps } from '@mui/x-charts'\n\nimport { MARKER_SHAPE_PATHS } from './utils/markerShapes'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nexport type MarkHandlers = {\n  onMarkClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, dataIndex: number) => void\n  onMouseEnter?: (dataIndex: number) => void\n  onMouseLeave?: () => void\n}\n\ninterface CustomMarkProps extends MarkElementProps {\n  handlers?: MarkHandlers\n  showLabel: boolean\n  showMark?: boolean\n  yData: number[]\n  style?: React.CSSProperties & {\n    markLabelStyles?: React.CSSProperties\n  }\n  labelBackgroundColor?: string\n  labelFontColor?: string\n  labelFontSize?: number\n  valueFormatterString?: string\n}\n\nexport const CustomMark: React.FC<CustomMarkProps> = (props) => {\n  const theme = useTheme()\n  const showLabel = props.showLabel\n  const styles = props.style\n  const markLabelStyles = styles?.markLabelStyles\n  const xNumber = Number(props.x)\n  const yNumber = Number(props.y)\n\n  const handleMarkClick = props.handlers?.onMarkClick\n  const handleMouseEnter = props.handlers?.onMouseEnter\n  const handleMouseLeave = props.handlers?.onMouseLeave\n\n  const isSmallScreenUp = useMediaQuery(theme.breakpoints.up('sm'))\n\n  // Calculate text dimensions for proper background sizing\n  const formattedValue = props.valueFormatterString\n    ? formatCurrency(props.yData[props.dataIndex], props.valueFormatterString)\n    : String(props.yData[props.dataIndex])\n  const fontSize = isSmallScreenUp\n    ? theme.typography.body2?.fontSize\n    : theme.typography.caption?.fontSize\n  const rectWidth = 30\n  const rectHeight = 24\n\n  // Center the rectangle around the text\n  const rectX = xNumber - rectWidth / 2\n  const rectY = yNumber - 30\n  return (\n    <>\n      {showLabel && (\n        <>\n          {props.labelBackgroundColor && (\n            <rect\n              fill={props.labelBackgroundColor}\n              height={rectHeight}\n              rx=\"3\"\n              width={rectWidth}\n              x={rectX}\n              y={rectY}\n            />\n          )}\n\n          <text\n            className=\"MuiLineChart-markLabel\"\n            dominantBaseline=\"middle\"\n            fill={props.labelFontColor ? props.labelFontColor : theme.palette.text.primary}\n            style={{\n              fontSize: props.labelFontSize ? props.labelFontSize : fontSize,\n              ...markLabelStyles,\n            }}\n            textAnchor=\"middle\"\n            x={xNumber}\n            y={yNumber - 28 + rectHeight / 2}\n          >\n            {formattedValue}\n          </text>\n        </>\n      )}\n      {props.showMark && (\n        <path\n          cursor={handleMarkClick ? 'pointer' : 'unset'}\n          d={MARKER_SHAPE_PATHS[props.shape ?? 'circle']}\n          height=\"20px\"\n          onClick={(event) => {\n            handleMarkClick?.(event, props.dataIndex)\n          }}\n          onMouseEnter={() => {\n            handleMouseEnter?.(props.dataIndex)\n          }}\n          onMouseLeave={() => {\n            handleMouseLeave?.()\n          }}\n          style={{\n            fill: styles?.fill ? styles.fill : theme.palette.background.paper,\n            stroke: styles?.stroke ? styles.stroke : theme.palette.primary.main,\n            strokeWidth: 2,\n            transform: `translate(${props.x}px, ${props.y}px)`,\n            transformOrigin: `${props.x}px, ${props.y}px`,\n            filter: styles?.filter ? styles.filter : 'none',\n          }}\n          width=\"20px\"\n        />\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;AA8BA,IAAa,IAAA,CAAyC,MAAU;AAC9D,QAAM,IAAQ,EAAS,GACjB,IAAY,EAAM,WAClB,IAAS,EAAM,OACf,IAAkB,GAAQ,iBAC1B,IAAU,OAAO,EAAM,CAAC,GACxB,IAAU,OAAO,EAAM,CAAC,GAExB,IAAkB,EAAM,UAAU,aAClC,IAAmB,EAAM,UAAU,cACnC,IAAmB,EAAM,UAAU,cAEnC,IAAkB,EAAc,EAAM,YAAY,GAAG,IAAI,CAAC,GAG1D,IAAiB,EAAM,uBACzB,EAAe,EAAM,MAAM,EAAM,SAAA,GAAY,EAAM,oBAAoB,IACvE,OAAO,EAAM,MAAM,EAAM,SAAA,CAAU,GACjC,IAAW,IACb,EAAM,WAAW,OAAO,WACxB,EAAM,WAAW,SAAS,UACxB,IAAY,IACZ,IAAa,IAGb,IAAQ,IAAU,IAAY,GAC9B,IAAQ,IAAU;AACxB,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,KACC,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,EAAM,wBACL,gBAAA,EAAC,QAAD;AAAA,IACE,MAAM,EAAM;AAAA,IACZ,QAAQ;AAAA,IACR,IAAG;AAAA,IACH,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,EACJ,CAAA,GAGH,gBAAA,EAAC,QAAD;AAAA,IACE,WAAU;AAAA,IACV,kBAAiB;AAAA,IACjB,MAAM,EAAM,iBAAiB,EAAM,iBAAiB,EAAM,QAAQ,KAAK;AAAA,IACvE,OAAO;AAAA,MACL,UAAU,EAAM,gBAAgB,EAAM,gBAAgB;AAAA,MACtD,GAAG;AAAA,IACL;AAAA,IACA,YAAW;AAAA,IACX,GAAG;AAAA,IACH,GAAG,IAAU,KAAK,IAAa;AAAA,cAE9B;AAAA,EACG,CAAA,CACN,EAAA,CAAA,GAEH,EAAM,YACL,gBAAA,EAAC,QAAD;AAAA,IACE,QAAQ,IAAkB,YAAY;AAAA,IACtC,GAAG,EAAmB,EAAM,SAAS,QAAA;AAAA,IACrC,QAAO;AAAA,IACP,SAAA,CAAU,MAAU;AAClB,MAAA,IAAkB,GAAO,EAAM,SAAS;AAAA,IAC1C;AAAA,IACA,cAAA,MAAoB;AAClB,MAAA,IAAmB,EAAM,SAAS;AAAA,IACpC;AAAA,IACA,cAAA,MAAoB;AAClB,MAAA,IAAmB;AAAA,IACrB;AAAA,IACA,OAAO;AAAA,MACL,MAAM,GAAQ,OAAO,EAAO,OAAO,EAAM,QAAQ,WAAW;AAAA,MAC5D,QAAQ,GAAQ,SAAS,EAAO,SAAS,EAAM,QAAQ,QAAQ;AAAA,MAC/D,aAAa;AAAA,MACb,WAAW,aAAa,EAAM,CAAA,OAAQ,EAAM,CAAA;AAAA,MAC5C,iBAAiB,GAAG,EAAM,CAAA,OAAQ,EAAM,CAAA;AAAA,MACxC,QAAQ,GAAQ,SAAS,EAAO,SAAS;AAAA,IAC3C;AAAA,IACA,OAAM;AAAA,EACP,CAAA,CAEH,EAAA,CAAA;AAEN"}
+{"version":3,"file":"CustomMark.es.js","names":[],"sources":["../../../../../src/common/components/charts/linechart/CustomMark.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport useMediaQuery from '@mui/material/useMediaQuery'\n\nimport type { MarkElementProps } from '@mui/x-charts'\n\nimport { MARKER_SHAPE_PATHS } from './utils/markerShapes'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nexport type MarkHandlers = {\n  onMarkClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, dataIndex: number) => void\n  onMouseEnter?: (dataIndex: number) => void\n  onMouseLeave?: () => void\n}\n\ninterface CustomMarkProps extends MarkElementProps {\n  handlers?: MarkHandlers\n  showLabel: boolean\n  showMark?: boolean\n  yData: number[]\n  style?: React.CSSProperties & {\n    markLabelStyles?: React.CSSProperties\n  }\n  labelBackgroundColor?: string\n  labelFontColor?: string\n  labelFontSize?: number\n  valueFormatterString?: string\n}\n\nexport const CustomMark: React.FC<CustomMarkProps> = (props) => {\n  const theme = useTheme()\n  const showLabel = props.showLabel\n  const styles = props.style\n  const markLabelStyles = styles?.markLabelStyles\n  const xNumber = Number(props.x)\n  const yNumber = Number(props.y)\n\n  const handleMarkClick = props.handlers?.onMarkClick\n  const handleMouseEnter = props.handlers?.onMouseEnter\n  const handleMouseLeave = props.handlers?.onMouseLeave\n\n  const isSmallScreenUp = useMediaQuery(theme.breakpoints.up('sm'))\n\n  // Calculate text dimensions for proper background sizing\n  const formattedValue = props.valueFormatterString\n    ? formatCurrency(props.yData[props.dataIndex], props.valueFormatterString)\n    : String(props.yData[props.dataIndex])\n  const fontSize = isSmallScreenUp\n    ? theme.typography.body2?.fontSize\n    : theme.typography.caption?.fontSize\n  const rectWidth = 30\n  const rectHeight = 24\n\n  // Center the rectangle around the text\n  const rectX = xNumber - rectWidth / 2\n  const rectY = yNumber - 30\n  return (\n    <>\n      {showLabel && (\n        <>\n          {props.labelBackgroundColor && (\n            <rect\n              fill={props.labelBackgroundColor}\n              height={rectHeight}\n              rx=\"3\"\n              width={rectWidth}\n              x={rectX}\n              y={rectY}\n            />\n          )}\n\n          <text\n            className=\"MuiLineChart-markLabel\"\n            dominantBaseline=\"middle\"\n            fill={props.labelFontColor ? props.labelFontColor : theme.palette.text.primary}\n            style={{\n              fontSize: props.labelFontSize ? props.labelFontSize : fontSize,\n              ...markLabelStyles,\n            }}\n            textAnchor=\"middle\"\n            x={xNumber}\n            y={yNumber - 28 + rectHeight / 2}\n          >\n            {formattedValue}\n          </text>\n        </>\n      )}\n      {props.showMark && (\n        <path\n          cursor={handleMarkClick ? 'pointer' : 'unset'}\n          d={MARKER_SHAPE_PATHS[props.shape ?? 'circle']}\n          height=\"20px\"\n          onClick={(event) => {\n            handleMarkClick?.(event, props.dataIndex)\n          }}\n          onMouseEnter={() => {\n            handleMouseEnter?.(props.dataIndex)\n          }}\n          onMouseLeave={() => {\n            handleMouseLeave?.()\n          }}\n          style={{\n            fill: styles?.fill ? styles.fill : theme.palette.background.paper,\n            stroke: styles?.stroke ? styles.stroke : theme.palette.primary.main,\n            strokeWidth: 2,\n            transform: `translate(${props.x}px, ${props.y}px)`,\n            transformOrigin: `${props.x}px, ${props.y}px`,\n            filter: styles?.filter ? styles.filter : 'none',\n          }}\n          width=\"20px\"\n        />\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;AA8BA,IAAa,IAAA,CAAyC,MAAU;AAC9D,QAAM,IAAQ,EAAS,GACjB,IAAY,EAAM,WAClB,IAAS,EAAM,OACf,IAAkB,GAAQ,iBAC1B,IAAU,OAAO,EAAM,CAAC,GACxB,IAAU,OAAO,EAAM,CAAC,GAExB,IAAkB,EAAM,UAAU,aAClC,IAAmB,EAAM,UAAU,cACnC,IAAmB,EAAM,UAAU,cAEnC,IAAkB,EAAc,EAAM,YAAY,GAAG,IAAI,CAAC,GAG1D,IAAiB,EAAM,uBACzB,EAAe,EAAM,MAAM,EAAM,SAAA,GAAY,EAAM,oBAAoB,IACvE,OAAO,EAAM,MAAM,EAAM,SAAA,CAAU,GACjC,IAAW,IACb,EAAM,WAAW,OAAO,WACxB,EAAM,WAAW,SAAS,UACxB,IAAY,IACZ,IAAa,IAGb,IAAQ,IAAU,IAAY,GAC9B,IAAQ,IAAU;AACxB,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,KACC,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,EAAM,wBACL,gBAAA,EAAC,QAAD;AAAA,IACE,MAAM,EAAM;AAAA,IACZ,QAAQ;AAAA,IACR,IAAG;AAAA,IACH,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,EACJ,CAAA,GAGH,gBAAA,EAAC,QAAD;AAAA,IACE,WAAU;AAAA,IACV,kBAAiB;AAAA,IACjB,MAAM,EAAM,iBAAiB,EAAM,iBAAiB,EAAM,QAAQ,KAAK;AAAA,IACvE,OAAO;AAAA,MACL,UAAU,EAAM,gBAAgB,EAAM,gBAAgB;AAAA,MACtD,GAAG;AAAA,IACL;AAAA,IACA,YAAW;AAAA,IACX,GAAG;AAAA,IACH,GAAG,IAAU,KAAK,IAAa;AAAA,IAE9B,UAAA;AAAA,EACG,CAAA,CACN,EAAA,CAAA,GAEH,EAAM,YACL,gBAAA,EAAC,QAAD;AAAA,IACE,QAAQ,IAAkB,YAAY;AAAA,IACtC,GAAG,EAAmB,EAAM,SAAS,QAAA;AAAA,IACrC,QAAO;AAAA,IACP,SAAA,CAAU,MAAU;AAClB,MAAA,IAAkB,GAAO,EAAM,SAAS;AAAA,IAC1C;AAAA,IACA,cAAA,MAAoB;AAClB,MAAA,IAAmB,EAAM,SAAS;AAAA,IACpC;AAAA,IACA,cAAA,MAAoB;AAClB,MAAA,IAAmB;AAAA,IACrB;AAAA,IACA,OAAO;AAAA,MACL,MAAM,GAAQ,OAAO,EAAO,OAAO,EAAM,QAAQ,WAAW;AAAA,MAC5D,QAAQ,GAAQ,SAAS,EAAO,SAAS,EAAM,QAAQ,QAAQ;AAAA,MAC/D,aAAa;AAAA,MACb,WAAW,aAAa,EAAM,CAAA,OAAQ,EAAM,CAAA;AAAA,MAC5C,iBAAiB,GAAG,EAAM,CAAA,OAAQ,EAAM,CAAA;AAAA,MACxC,QAAQ,GAAQ,SAAS,EAAO,SAAS;AAAA,IAC3C;AAAA,IACA,OAAM;AAAA,EACP,CAAA,CAEH,EAAA,CAAA;AAEN"}

package/dist/common/components/charts/linechart/CustomTooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomTooltip.es.js","names":[],"sources":["../../../../../src/common/components/charts/linechart/CustomTooltip.tsx"],"sourcesContent":["import { Box, Stack } from '@mui/material'\nimport { useTheme } from '@mui/material/styles'\n\nimport { useAxesTooltip } from '@mui/x-charts/ChartsTooltip'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { LineChartLabel, TooltipLabel } from '../LineChart'\nimport { getMarkerShape, MARKER_SHAPE_PATHS } from './utils/markerShapes'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface CustomTooltipProps {\n  customLabels?: TooltipLabel[][]\n  isCurrency?: boolean\n  labels?: LineChartLabel[]\n  series: Array<{ id?: string; data: number[]; color?: string }>\n  valueFormatterString?: string\n}\n\nexport function CustomTooltip({\n  customLabels,\n  isCurrency = true,\n  labels = [],\n  series,\n  valueFormatterString = '0,0',\n}: CustomTooltipProps) {\n  const tooltipData = useAxesTooltip()\n  const theme = useTheme()\n\n  const firstAxisData = tooltipData?.[0]\n\n  if (!firstAxisData) return null\n\n  const { axisValue, dataIndex = 0 } = firstAxisData\n\n  if (customLabels) {\n    const headerText = customLabels[dataIndex]?.[0]?.header || String(axisValue)\n\n    return (\n      <Stack\n        sx={{\n          backgroundColor: theme.palette.background.paper,\n          boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n          flexDirection: 'column',\n          alignItems: 'flex-start',\n          borderRadius: '4px',\n          width: 250,\n          gap: 8,\n          px: 16,\n          py: 12,\n        }}\n      >\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            alignSelf: 'stretch',\n            gap: 8,\n            marginTop: 4,\n          }}\n        >\n          <Text variant=\"h3\">{headerText}</Text>\n          <Text bold={true} variant=\"h3\">\n            {formatCurrency(series[0]?.data[dataIndex] as number, valueFormatterString)}\n          </Text>\n        </Stack>\n        {customLabels[dataIndex]?.some((labelItem) => {\n          const amount = typeof labelItem === 'string' ? 0 : labelItem.amount\n          return amount !== 0\n        }) ? (\n          customLabels[dataIndex]?.map((labelItem) => {\n            const label = typeof labelItem === 'string' ? labelItem : labelItem.label\n            const amount = typeof labelItem === 'string' ? 0 : labelItem.amount\n\n            if (amount === 0) return null\n            return (\n              <Stack\n                key={label}\n                sx={{\n                  flexDirection: 'row',\n                  justifyContent: 'space-between',\n                  alignItems: 'center',\n                  alignSelf: 'stretch',\n                  gap: 8,\n                  marginTop: 4,\n                }}\n              >\n                <Stack\n                  sx={{\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                    gap: 8,\n                    flex: 1,\n                    minWidth: 0,\n                  }}\n                >\n                  <Box\n                    sx={{\n                      width: '12px',\n                      height: '12px',\n                      backgroundColor: series[0]?.color,\n                      borderRadius: '4px',\n                    }}\n                  />\n                  <Text variant=\"body1\">{label}</Text>\n                </Stack>\n                <Text bold={true} variant=\"body1\">\n                  {formatCurrency(Math.abs(amount), valueFormatterString)}\n                </Text>\n              </Stack>\n            )\n          })\n        ) : (\n          <Text variant=\"body1\">No data</Text> //TODO: localize\n        )}\n      </Stack>\n    )\n  }\n  return (\n    <Stack\n      sx={{\n        backgroundColor: theme.palette.background.paper,\n        boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        borderRadius: '4px',\n        width: 225,\n        gap: 8,\n        px: 16,\n        py: 12,\n      }}\n    >\n      <Text variant=\"h3\">{String(axisValue)}</Text>\n      {series.map((s, sIndex) => (\n        <Stack\n          key={`${s.id}-${sIndex}`}\n          sx={{\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            alignSelf: 'stretch',\n            gap: 8,\n            marginTop: 4,\n          }}\n        >\n          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n            <svg aria-hidden=\"true\" height={12} viewBox=\"-6 -6 12 12\" width={12}>\n              <path d={MARKER_SHAPE_PATHS[getMarkerShape(sIndex)]} fill={s.color} />\n            </svg>\n            <Text variant=\"body1\">\n              {typeof labels[sIndex] === 'string' ? labels[sIndex] : labels[sIndex]?.label}\n            </Text>\n          </Stack>\n          <Text bold={true} variant=\"body1\">\n            {isCurrency\n              ? formatCurrency(s.data[dataIndex] as number, valueFormatterString)\n              : s.data[dataIndex]}\n          </Text>\n        </Stack>\n      ))}\n    </Stack>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"CustomTooltip.es.js","names":[],"sources":["../../../../../src/common/components/charts/linechart/CustomTooltip.tsx"],"sourcesContent":["import { Box, Stack } from '@mui/material'\nimport { useTheme } from '@mui/material/styles'\n\nimport { useAxesTooltip } from '@mui/x-charts/ChartsTooltip'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { LineChartLabel, TooltipLabel } from '../LineChart'\nimport { getMarkerShape, MARKER_SHAPE_PATHS } from './utils/markerShapes'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface CustomTooltipProps {\n  customLabels?: TooltipLabel[][]\n  isCurrency?: boolean\n  labels?: LineChartLabel[]\n  series: Array<{ id?: string; data: number[]; color?: string }>\n  valueFormatterString?: string\n}\n\nexport function CustomTooltip({\n  customLabels,\n  isCurrency = true,\n  labels = [],\n  series,\n  valueFormatterString = '0,0',\n}: CustomTooltipProps) {\n  const tooltipData = useAxesTooltip()\n  const theme = useTheme()\n\n  const firstAxisData = tooltipData?.[0]\n\n  if (!firstAxisData) return null\n\n  const { axisValue, dataIndex = 0 } = firstAxisData\n\n  if (customLabels) {\n    const headerText = customLabels[dataIndex]?.[0]?.header || String(axisValue)\n\n    return (\n      <Stack\n        sx={{\n          backgroundColor: theme.palette.background.paper,\n          boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n          flexDirection: 'column',\n          alignItems: 'flex-start',\n          borderRadius: '4px',\n          width: 250,\n          gap: 8,\n          px: 16,\n          py: 12,\n        }}\n      >\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            alignSelf: 'stretch',\n            gap: 8,\n            marginTop: 4,\n          }}\n        >\n          <Text variant=\"h3\">{headerText}</Text>\n          <Text bold={true} variant=\"h3\">\n            {formatCurrency(series[0]?.data[dataIndex] as number, valueFormatterString)}\n          </Text>\n        </Stack>\n        {customLabels[dataIndex]?.some((labelItem) => {\n          const amount = typeof labelItem === 'string' ? 0 : labelItem.amount\n          return amount !== 0\n        }) ? (\n          customLabels[dataIndex]?.map((labelItem) => {\n            const label = typeof labelItem === 'string' ? labelItem : labelItem.label\n            const amount = typeof labelItem === 'string' ? 0 : labelItem.amount\n\n            if (amount === 0) return null\n            return (\n              <Stack\n                key={label}\n                sx={{\n                  flexDirection: 'row',\n                  justifyContent: 'space-between',\n                  alignItems: 'center',\n                  alignSelf: 'stretch',\n                  gap: 8,\n                  marginTop: 4,\n                }}\n              >\n                <Stack\n                  sx={{\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                    gap: 8,\n                    flex: 1,\n                    minWidth: 0,\n                  }}\n                >\n                  <Box\n                    sx={{\n                      width: '12px',\n                      height: '12px',\n                      backgroundColor: series[0]?.color,\n                      borderRadius: '4px',\n                    }}\n                  />\n                  <Text variant=\"body1\">{label}</Text>\n                </Stack>\n                <Text bold={true} variant=\"body1\">\n                  {formatCurrency(Math.abs(amount), valueFormatterString)}\n                </Text>\n              </Stack>\n            )\n          })\n        ) : (\n          <Text variant=\"body1\">No data</Text> //TODO: localize\n        )}\n      </Stack>\n    )\n  }\n  return (\n    <Stack\n      sx={{\n        backgroundColor: theme.palette.background.paper,\n        boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        borderRadius: '4px',\n        width: 225,\n        gap: 8,\n        px: 16,\n        py: 12,\n      }}\n    >\n      <Text variant=\"h3\">{String(axisValue)}</Text>\n      {series.map((s, sIndex) => (\n        <Stack\n          key={`${s.id}-${sIndex}`}\n          sx={{\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            alignSelf: 'stretch',\n            gap: 8,\n            marginTop: 4,\n          }}\n        >\n          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n            <svg aria-hidden=\"true\" height={12} viewBox=\"-6 -6 12 12\" width={12}>\n              <path d={MARKER_SHAPE_PATHS[getMarkerShape(sIndex)]} fill={s.color} />\n            </svg>\n            <Text variant=\"body1\">\n              {typeof labels[sIndex] === 'string' ? labels[sIndex] : labels[sIndex]?.label}\n            </Text>\n          </Stack>\n          <Text bold={true} variant=\"body1\">\n            {isCurrency\n              ? formatCurrency(s.data[dataIndex] as number, valueFormatterString)\n              : s.data[dataIndex]}\n          </Text>\n        </Stack>\n      ))}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

package/dist/common/components/charts/stackedlinechart/CategoryIconLabel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryIconLabel.es.js","names":[],"sources":["../../../../../src/common/components/charts/stackedlinechart/CategoryIconLabel.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { useCategoryStore, useGlobalCopyStore } from '../../../context'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\n\nexport const CategoryIconLabel: React.FC<{\n  categoryGuid: string\n  topLevelCategoryGuid: string\n}> = ({ categoryGuid, topLevelCategoryGuid }) => {\n  const { categories: copy } = useGlobalCopyStore()\n  const { getCategoryName } = useCategoryStore()\n  const categoryName = getCategoryName(categoryGuid)\n\n  return (\n    <Stack alignItems=\"center\" direction=\"column\" gap=\"8\" justifyContent=\"center\" mb={4}>\n      <Box\n        aria-label={buildDynamicCopy(copy.category_icon_label_aria, categoryName) as string}\n        mb={4}\n        role=\"img\"\n      >\n        <CategoryIcon categoryGuid={topLevelCategoryGuid} />\n      </Box>\n      <Text variant=\"body1\">{categoryName}</Text>\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAa,IAAA,CAGP,EAAE,cAAA,GAAc,sBAAA,EAAA,MAA2B;AAC/C,QAAM,EAAE,YAAY,EAAA,IAAS,EAAmB,GAC1C,EAAE,iBAAA,EAAA,IAAoB,EAAiB,GACvC,IAAe,EAAgB,CAAY;AAEjD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,WAAU;AAAA,IAAS,KAAI;AAAA,IAAI,gBAAe;AAAA,IAAS,IAAI;AAAA,cAAlF,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAiB,EAAK,0BAA0B,CAAY;AAAA,MACxE,IAAI;AAAA,MACJ,MAAK;AAAA,gBAEL,gBAAA,EAAC,GAAD,EAAc,cAAc,EAAuB,CAAA;AAAA,IAChD,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,SAAQ;AAAA,gBAAS;AAAA,IAAmB,CAAA,CACrC;AAAA;AAEX"}
+{"version":3,"file":"CategoryIconLabel.es.js","names":[],"sources":["../../../../../src/common/components/charts/stackedlinechart/CategoryIconLabel.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { useCategoryStore, useGlobalCopyStore } from '../../../context'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\n\nexport const CategoryIconLabel: React.FC<{\n  categoryGuid: string\n  topLevelCategoryGuid: string\n}> = ({ categoryGuid, topLevelCategoryGuid }) => {\n  const { categories: copy } = useGlobalCopyStore()\n  const { getCategoryName } = useCategoryStore()\n  const categoryName = getCategoryName(categoryGuid)\n\n  return (\n    <Stack alignItems=\"center\" direction=\"column\" gap=\"8\" justifyContent=\"center\" mb={4}>\n      <Box\n        aria-label={buildDynamicCopy(copy.category_icon_label_aria, categoryName) as string}\n        mb={4}\n        role=\"img\"\n      >\n        <CategoryIcon categoryGuid={topLevelCategoryGuid} />\n      </Box>\n      <Text variant=\"body1\">{categoryName}</Text>\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAa,IAAA,CAGP,EAAE,cAAA,GAAc,sBAAA,EAAA,MAA2B;AAC/C,QAAM,EAAE,YAAY,EAAA,IAAS,EAAmB,GAC1C,EAAE,iBAAA,EAAA,IAAoB,EAAiB,GACvC,IAAe,EAAgB,CAAY;AAEjD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,WAAU;AAAA,IAAS,KAAI;AAAA,IAAI,gBAAe;AAAA,IAAS,IAAI;AAAA,IAAlF,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAiB,EAAK,0BAA0B,CAAY;AAAA,MACxE,IAAI;AAAA,MACJ,MAAK;AAAA,MAEL,UAAA,gBAAA,EAAC,GAAD,EAAc,cAAc,EAAuB,CAAA;AAAA,IAChD,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,SAAQ;AAAA,MAAS,UAAA;AAAA,IAAmB,CAAA,CACrC;AAAA;AAEX"}

package/dist/common/components/charts/stackedlinechart/CustomAreaTooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomAreaTooltip.es.js","names":[],"sources":["../../../../../src/common/components/charts/stackedlinechart/CustomAreaTooltip.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport Divider from '@mui/material/Divider'\nimport Grid from '@mui/material/Grid'\nimport { Text } from '@mxenabled/mxui'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIconLabel } from './CategoryIconLabel'\nimport { CurrencyText } from '../../CurrencyText'\n\ntype DataPoint = { x: string | number; y: number }\n\nconst CustomAreaTooltip: React.FC<{\n  categoryGuids: { guid: string; topLevelGuid: string }\n  hoveredAreaData: DataPoint[]\n  cursorPosition: { x: number; y: number }\n  chartContainerRef: React.RefObject<HTMLDivElement | null>\n}> = ({\n  categoryGuids: { guid, topLevelGuid },\n  hoveredAreaData,\n  cursorPosition,\n  chartContainerRef,\n}) => {\n  const theme = useTheme()\n  const tooltipRef = useRef<HTMLDivElement>(null)\n  const [adjustedPos, setAdjustedPos] = useState({ x: cursorPosition.x, y: cursorPosition.y })\n\n  useEffect(() => {\n    const adjustTooltipPosition = () => {\n      const tooltipEl = tooltipRef.current\n      const chartEl = chartContainerRef.current\n\n      if (!tooltipEl || !chartEl) return\n\n      const tooltipRect = tooltipEl.getBoundingClientRect()\n      const containerRect = chartEl.getBoundingClientRect()\n\n      let newX = cursorPosition.x\n      let newY = cursorPosition.y\n\n      // If the tooltip overflows the right or left edge\n      if (newX + tooltipRect.width * 2 > containerRect.right) {\n        // Move the tooltip to the left of the cursor\n        newX = cursorPosition.x - tooltipRect.width\n      } else if (newX - tooltipRect.width < containerRect.left) {\n        // Move the tooltip to the right of the cursor\n        newX = cursorPosition.x\n      }\n\n      // If the tooltip overflows the bottom edge\n      if (newY + tooltipRect.height * 2 > containerRect.bottom) {\n        // Move the tooltip to the top of the cursor\n        newY = cursorPosition.y - tooltipRect.height\n      }\n\n      setAdjustedPos({ x: newX, y: newY })\n    }\n\n    adjustTooltipPosition()\n  }, [cursorPosition, chartContainerRef])\n\n  if (!hoveredAreaData) return null\n\n  const seriesSum = hoveredAreaData.reduce((sum, dataPoint) => sum + dataPoint.y, 0)\n\n  return (\n    <Card\n      ref={tooltipRef}\n      sx={{\n        position: 'absolute',\n        top: adjustedPos.y,\n        left: adjustedPos.x,\n        width: 250,\n        pointerEvents: 'none',\n      }}\n    >\n      <CardContent>\n        <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />\n          <Text variant=\"body2\">{`${hoveredAreaData.length}-month total`}</Text>\n          <CurrencyText amount={seriesSum} bold={true} formatString=\"0,0\" variant=\"body2\" />\n        </Box>\n\n        <Divider sx={{ my: 16, width: '100%' }} />\n\n        <Grid container={true}>\n          {hoveredAreaData.map((dataPoint, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && index % 3 === 0 && <Divider sx={{ my: 16, width: '100%' }} />}\n              <Grid size={4}>\n                <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n                  <Text color={theme.palette.text.secondary} variant=\"caption\">\n                    {dataPoint.x}\n                  </Text>\n                  <CurrencyText\n                    amount={dataPoint.y}\n                    bold={true}\n                    formatString=\"0,0\"\n                    variant=\"body1\"\n                  />\n                </Box>\n              </Grid>\n            </React.Fragment>\n          ))}\n        </Grid>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default observer(CustomAreaTooltip)\n"],"mappings":"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"}
+{"version":3,"file":"CustomAreaTooltip.es.js","names":[],"sources":["../../../../../src/common/components/charts/stackedlinechart/CustomAreaTooltip.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport Divider from '@mui/material/Divider'\nimport Grid from '@mui/material/Grid'\nimport { Text } from '@mxenabled/mxui'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIconLabel } from './CategoryIconLabel'\nimport { CurrencyText } from '../../CurrencyText'\n\ntype DataPoint = { x: string | number; y: number }\n\nconst CustomAreaTooltip: React.FC<{\n  categoryGuids: { guid: string; topLevelGuid: string }\n  hoveredAreaData: DataPoint[]\n  cursorPosition: { x: number; y: number }\n  chartContainerRef: React.RefObject<HTMLDivElement | null>\n}> = ({\n  categoryGuids: { guid, topLevelGuid },\n  hoveredAreaData,\n  cursorPosition,\n  chartContainerRef,\n}) => {\n  const theme = useTheme()\n  const tooltipRef = useRef<HTMLDivElement>(null)\n  const [adjustedPos, setAdjustedPos] = useState({ x: cursorPosition.x, y: cursorPosition.y })\n\n  useEffect(() => {\n    const adjustTooltipPosition = () => {\n      const tooltipEl = tooltipRef.current\n      const chartEl = chartContainerRef.current\n\n      if (!tooltipEl || !chartEl) return\n\n      const tooltipRect = tooltipEl.getBoundingClientRect()\n      const containerRect = chartEl.getBoundingClientRect()\n\n      let newX = cursorPosition.x\n      let newY = cursorPosition.y\n\n      // If the tooltip overflows the right or left edge\n      if (newX + tooltipRect.width * 2 > containerRect.right) {\n        // Move the tooltip to the left of the cursor\n        newX = cursorPosition.x - tooltipRect.width\n      } else if (newX - tooltipRect.width < containerRect.left) {\n        // Move the tooltip to the right of the cursor\n        newX = cursorPosition.x\n      }\n\n      // If the tooltip overflows the bottom edge\n      if (newY + tooltipRect.height * 2 > containerRect.bottom) {\n        // Move the tooltip to the top of the cursor\n        newY = cursorPosition.y - tooltipRect.height\n      }\n\n      setAdjustedPos({ x: newX, y: newY })\n    }\n\n    adjustTooltipPosition()\n  }, [cursorPosition, chartContainerRef])\n\n  if (!hoveredAreaData) return null\n\n  const seriesSum = hoveredAreaData.reduce((sum, dataPoint) => sum + dataPoint.y, 0)\n\n  return (\n    <Card\n      ref={tooltipRef}\n      sx={{\n        position: 'absolute',\n        top: adjustedPos.y,\n        left: adjustedPos.x,\n        width: 250,\n        pointerEvents: 'none',\n      }}\n    >\n      <CardContent>\n        <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />\n          <Text variant=\"body2\">{`${hoveredAreaData.length}-month total`}</Text>\n          <CurrencyText amount={seriesSum} bold={true} formatString=\"0,0\" variant=\"body2\" />\n        </Box>\n\n        <Divider sx={{ my: 16, width: '100%' }} />\n\n        <Grid container={true}>\n          {hoveredAreaData.map((dataPoint, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && index % 3 === 0 && <Divider sx={{ my: 16, width: '100%' }} />}\n              <Grid size={4}>\n                <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n                  <Text color={theme.palette.text.secondary} variant=\"caption\">\n                    {dataPoint.x}\n                  </Text>\n                  <CurrencyText\n                    amount={dataPoint.y}\n                    bold={true}\n                    formatString=\"0,0\"\n                    variant=\"body1\"\n                  />\n                </Box>\n              </Grid>\n            </React.Fragment>\n          ))}\n        </Grid>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default observer(CustomAreaTooltip)\n"],"mappings":"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"}

package/dist/common/components/charts/stackedlinechart/CustomLegend.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomLegend.es.js","names":[],"sources":["../../../../../src/common/components/charts/stackedlinechart/CustomLegend.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { Text } from '@mxenabled/mxui'\n\nimport { useScreenSize } from '../../../hooks'\nimport { CategoryColors } from '../../../../core/constants'\nimport { useCategoryStore } from '../../../context'\n\ninterface CustomLegendProps {\n  sx?: object\n  categoryGuids: { guid: string; top_level_guid: string }[]\n  hoveredLegend: string | null\n  legendRef?: (instance: HTMLElement | null) => void\n  onHoverLegend: (label: string | null) => void\n  onClickLegend: (label: string | null) => void\n}\n\nexport const CustomLegend: React.FC<CustomLegendProps> = ({\n  sx,\n  categoryGuids,\n  hoveredLegend,\n  legendRef,\n  onHoverLegend,\n  onClickLegend,\n}) => {\n  const { isMobile } = useScreenSize()\n  const { getCategoryName } = useCategoryStore()\n\n  return (\n    <Stack\n      direction=\"row\"\n      flexWrap=\"wrap\"\n      gap={isMobile ? 2 : 6}\n      justifyContent=\"start\"\n      ref={legendRef}\n      sx={sx}\n    >\n      {categoryGuids.map(({ guid, top_level_guid }) => {\n        const isHovered = hoveredLegend === guid\n        const categoryColor = CategoryColors[guid]\n        const topLevelCategoryColor = CategoryColors[top_level_guid]\n        const baseBackground = categoryColor ?? topLevelCategoryColor ?? CategoryColors.default\n        const transparentBackground = baseBackground + '33'\n        const hoveredBackground = isHovered ? baseBackground : transparentBackground\n        const backgroundColor = hoveredLegend ? hoveredBackground : baseBackground\n\n        return (\n          <Button\n            key={guid}\n            onClick={() => onClickLegend(guid)}\n            onMouseEnter={() => onHoverLegend(guid)}\n            onMouseLeave={() => onHoverLegend(null)}\n            sx={{\n              color: 'text.primary',\n              fontWeight: 'normal',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              paddingX: 8,\n              paddingY: 4,\n              borderRadius: 1,\n              opacity: isHovered ? 1 : 0.7,\n            }}\n          >\n            <Box\n              sx={{\n                width: 16,\n                height: 16,\n                marginRight: isMobile ? 5 : 10,\n                borderRadius: '2px',\n                backgroundColor,\n              }}\n            />\n            <Text variant=\"body1\">{getCategoryName(guid)}</Text>\n          </Button>\n        )\n      })}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;AAmBA,IAAa,IAAA,CAA6C,EACxD,IAAA,GACA,eAAA,GACA,eAAA,GACA,WAAA,GACA,eAAA,GACA,eAAA,EAAA,MACI;AACJ,QAAM,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,EAAE,iBAAA,EAAA,IAAoB,EAAiB;AAE7C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,UAAS;AAAA,IACT,KAAK,IAAW,IAAI;AAAA,IACpB,gBAAe;AAAA,IACf,KAAK;AAAA,IACD,IAAA;AAAA,cAEH,EAAc,IAAA,CAAK,EAAE,MAAA,GAAM,gBAAA,EAAA,MAAqB;AAC/C,YAAM,IAAY,MAAkB,GAC9B,IAAgB,EAAe,CAAA,GAC/B,IAAwB,EAAe,CAAA,GACvC,IAAiB,KAAiB,KAAyB,EAAe,SAC1E,IAAwB,IAAiB;AAI/C,aACE,gBAAA,EAAC,GAAD;AAAA,QAEE,SAAA,MAAe,EAAc,CAAI;AAAA,QACjC,cAAA,MAAoB,EAAc,CAAI;AAAA,QACtC,cAAA,MAAoB,EAAc,IAAI;AAAA,QACtC,IAAI;AAAA,UACF,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AAAA,UACd,SAAS,IAAY,IAAI;AAAA,QAC3B;AAAA,kBAfF,CAiBE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,aAAa,IAAW,IAAI;AAAA,UAC5B,cAAc;AAAA,UACd,iBA1BgB,IADE,IAAY,IAAiB,IACK;AAAA,QA2BtD,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBAAS,EAAgB,CAAI;AAAA,QAAQ,CAAA,CAC7C;AAAA,SA1BD,CA0BC;AAAA,IAEZ,CAAC;AAAA,EACI,CAAA;AAEX"}
+{"version":3,"file":"CustomLegend.es.js","names":[],"sources":["../../../../../src/common/components/charts/stackedlinechart/CustomLegend.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { Text } from '@mxenabled/mxui'\n\nimport { useScreenSize } from '../../../hooks'\nimport { CategoryColors } from '../../../../core/constants'\nimport { useCategoryStore } from '../../../context'\n\ninterface CustomLegendProps {\n  sx?: object\n  categoryGuids: { guid: string; top_level_guid: string }[]\n  hoveredLegend: string | null\n  legendRef?: (instance: HTMLElement | null) => void\n  onHoverLegend: (label: string | null) => void\n  onClickLegend: (label: string | null) => void\n}\n\nexport const CustomLegend: React.FC<CustomLegendProps> = ({\n  sx,\n  categoryGuids,\n  hoveredLegend,\n  legendRef,\n  onHoverLegend,\n  onClickLegend,\n}) => {\n  const { isMobile } = useScreenSize()\n  const { getCategoryName } = useCategoryStore()\n\n  return (\n    <Stack\n      direction=\"row\"\n      flexWrap=\"wrap\"\n      gap={isMobile ? 2 : 6}\n      justifyContent=\"start\"\n      ref={legendRef}\n      sx={sx}\n    >\n      {categoryGuids.map(({ guid, top_level_guid }) => {\n        const isHovered = hoveredLegend === guid\n        const categoryColor = CategoryColors[guid]\n        const topLevelCategoryColor = CategoryColors[top_level_guid]\n        const baseBackground = categoryColor ?? topLevelCategoryColor ?? CategoryColors.default\n        const transparentBackground = baseBackground + '33'\n        const hoveredBackground = isHovered ? baseBackground : transparentBackground\n        const backgroundColor = hoveredLegend ? hoveredBackground : baseBackground\n\n        return (\n          <Button\n            key={guid}\n            onClick={() => onClickLegend(guid)}\n            onMouseEnter={() => onHoverLegend(guid)}\n            onMouseLeave={() => onHoverLegend(null)}\n            sx={{\n              color: 'text.primary',\n              fontWeight: 'normal',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              paddingX: 8,\n              paddingY: 4,\n              borderRadius: 1,\n              opacity: isHovered ? 1 : 0.7,\n            }}\n          >\n            <Box\n              sx={{\n                width: 16,\n                height: 16,\n                marginRight: isMobile ? 5 : 10,\n                borderRadius: '2px',\n                backgroundColor,\n              }}\n            />\n            <Text variant=\"body1\">{getCategoryName(guid)}</Text>\n          </Button>\n        )\n      })}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;AAmBA,IAAa,IAAA,CAA6C,EACxD,IAAA,GACA,eAAA,GACA,eAAA,GACA,WAAA,GACA,eAAA,GACA,eAAA,EAAA,MACI;AACJ,QAAM,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,EAAE,iBAAA,EAAA,IAAoB,EAAiB;AAE7C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,UAAS;AAAA,IACT,KAAK,IAAW,IAAI;AAAA,IACpB,gBAAe;AAAA,IACf,KAAK;AAAA,IACD,IAAA;AAAA,IAEH,UAAA,EAAc,IAAA,CAAK,EAAE,MAAA,GAAM,gBAAA,EAAA,MAAqB;AAC/C,YAAM,IAAY,MAAkB,GAC9B,IAAgB,EAAe,CAAA,GAC/B,IAAwB,EAAe,CAAA,GACvC,IAAiB,KAAiB,KAAyB,EAAe,SAC1E,IAAwB,IAAiB;AAI/C,aACE,gBAAA,EAAC,GAAD;AAAA,QAEE,SAAA,MAAe,EAAc,CAAI;AAAA,QACjC,cAAA,MAAoB,EAAc,CAAI;AAAA,QACtC,cAAA,MAAoB,EAAc,IAAI;AAAA,QACtC,IAAI;AAAA,UACF,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AAAA,UACd,SAAS,IAAY,IAAI;AAAA,QAC3B;AAAA,QAfF,UAAA,CAiBE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,aAAa,IAAW,IAAI;AAAA,UAC5B,cAAc;AAAA,UACd,iBA1BgB,IADE,IAAY,IAAiB,IACK;AAAA,QA2BtD,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,UAAS,UAAA,EAAgB,CAAI;AAAA,QAAQ,CAAA,CAC7C;AAAA,MA1BD,GAAA,CA0BC;AAAA,IAEZ,CAAC;AAAA,EACI,CAAA;AAEX"}

package/dist/common/components/charts/stackedlinechart/CustomPointTooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomPointTooltip.es.js","names":[],"sources":["../../../../../src/common/components/charts/stackedlinechart/CustomPointTooltip.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport { useTheme } from '@mui/material/styles'\n\nimport { useItemTooltip } from '@mui/x-charts/ChartsTooltip'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { CategoryIconLabel } from './CategoryIconLabel'\nimport { CurrencyText } from '../../CurrencyText'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\n\ninterface CustomPointTooltipProps {\n  categoryGuids: { guid: string; topLevelGuid: string }\n  series: Array<{ id: string; data: number[] }>\n  xData: Date[]\n}\n\n// Custom tooltip for hovering on line points\nexport const CustomPointTooltip: React.FC<CustomPointTooltipProps> = ({\n  categoryGuids: { guid, topLevelGuid },\n  series: allSeries,\n  xData,\n}) => {\n  const tooltip = useItemTooltip()\n  const theme = useTheme()\n\n  if (!tooltip?.identifier) return null\n\n  const { dataIndex, seriesId } = tooltip.identifier\n  if (dataIndex == null || !seriesId) return null\n\n  const seriesData = allSeries.find((s) => s.id === seriesId)\n  const dataValue = seriesData?.data?.[dataIndex]\n  const dataDate = xData?.[dataIndex]\n\n  if (dataValue === undefined || !dataDate) return null\n\n  return (\n    <Card sx={{ pt: 4, px: 8 }}>\n      <CardContent>\n        <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />\n          <Text color={theme.palette.text.secondary} variant=\"body2\">\n            {formatDate(dataDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR)}\n          </Text>\n          <CurrencyText amount={String(dataValue)} bold={true} formatString=\"0,0\" variant=\"body1\" />\n        </Box>\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,IAAA,CAAyD,EACpE,eAAe,EAAE,MAAA,GAAM,cAAA,EAAA,GACvB,QAAQ,GACR,OAAA,EAAA,MACI;AACJ,QAAM,IAAU,EAAe,GACzB,IAAQ,EAAS;AAEvB,MAAI,CAAC,GAAS,WAAY,QAAO;AAEjC,QAAM,EAAE,WAAA,GAAW,UAAA,EAAA,IAAa,EAAQ;AACxC,MAAI,KAAa,QAAQ,CAAC,EAAU,QAAO;AAG3C,QAAM,IADa,EAAU,KAAA,CAAM,MAAM,EAAE,OAAO,CAChC,GAAY,OAAO,CAAA,GAC/B,IAAW,IAAQ,CAAA;AAEzB,SAAI,MAAc,UAAa,CAAC,IAAiB,OAG/C,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI;AAAA,MAAE,IAAI;AAAA,MAAG,IAAI;AAAA,IAAE;AAAA,cACvB,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MAAK,YAAW;AAAA,MAAS,SAAQ;AAAA,MAAO,eAAc;AAAA,gBAAtD;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAmB,cAAc;AAAA,UAAM,sBAAsB;AAAA,QAAe,CAAA;AAAA,QAC5E,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAO,EAAM,QAAQ,KAAK;AAAA,UAAW,SAAQ;AAAA,oBAChD,EAAW,GAAU,EAAkB,gBAAgB;AAAA,QACpD,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAc,QAAQ,OAAO,CAAS;AAAA,UAAG,MAAM;AAAA,UAAM,cAAa;AAAA,UAAM,SAAQ;AAAA,QAAS,CAAA;AAAA,MACtF;AAAA,OACM,CAAA;AAAA,EACT,CAAA;AAEV"}
+{"version":3,"file":"CustomPointTooltip.es.js","names":[],"sources":["../../../../../src/common/components/charts/stackedlinechart/CustomPointTooltip.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport { useTheme } from '@mui/material/styles'\n\nimport { useItemTooltip } from '@mui/x-charts/ChartsTooltip'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { CategoryIconLabel } from './CategoryIconLabel'\nimport { CurrencyText } from '../../CurrencyText'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\n\ninterface CustomPointTooltipProps {\n  categoryGuids: { guid: string; topLevelGuid: string }\n  series: Array<{ id: string; data: number[] }>\n  xData: Date[]\n}\n\n// Custom tooltip for hovering on line points\nexport const CustomPointTooltip: React.FC<CustomPointTooltipProps> = ({\n  categoryGuids: { guid, topLevelGuid },\n  series: allSeries,\n  xData,\n}) => {\n  const tooltip = useItemTooltip()\n  const theme = useTheme()\n\n  if (!tooltip?.identifier) return null\n\n  const { dataIndex, seriesId } = tooltip.identifier\n  if (dataIndex == null || !seriesId) return null\n\n  const seriesData = allSeries.find((s) => s.id === seriesId)\n  const dataValue = seriesData?.data?.[dataIndex]\n  const dataDate = xData?.[dataIndex]\n\n  if (dataValue === undefined || !dataDate) return null\n\n  return (\n    <Card sx={{ pt: 4, px: 8 }}>\n      <CardContent>\n        <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />\n          <Text color={theme.palette.text.secondary} variant=\"body2\">\n            {formatDate(dataDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR)}\n          </Text>\n          <CurrencyText amount={String(dataValue)} bold={true} formatString=\"0,0\" variant=\"body1\" />\n        </Box>\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,IAAA,CAAyD,EACpE,eAAe,EAAE,MAAA,GAAM,cAAA,EAAA,GACvB,QAAQ,GACR,OAAA,EAAA,MACI;AACJ,QAAM,IAAU,EAAe,GACzB,IAAQ,EAAS;AAEvB,MAAI,CAAC,GAAS,WAAY,QAAO;AAEjC,QAAM,EAAE,WAAA,GAAW,UAAA,EAAA,IAAa,EAAQ;AACxC,MAAI,KAAa,QAAQ,CAAC,EAAU,QAAO;AAG3C,QAAM,IADa,EAAU,KAAA,CAAM,MAAM,EAAE,OAAO,CAChC,GAAY,OAAO,CAAA,GAC/B,IAAW,IAAQ,CAAA;AAEzB,SAAI,MAAc,UAAa,CAAC,IAAiB,OAG/C,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI;AAAA,MAAE,IAAI;AAAA,MAAG,IAAI;AAAA,IAAE;AAAA,IACvB,UAAA,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MAAK,YAAW;AAAA,MAAS,SAAQ;AAAA,MAAO,eAAc;AAAA,MAAtD,UAAA;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAmB,cAAc;AAAA,UAAM,sBAAsB;AAAA,QAAe,CAAA;AAAA,QAC5E,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAO,EAAM,QAAQ,KAAK;AAAA,UAAW,SAAQ;AAAA,UAChD,UAAA,EAAW,GAAU,EAAkB,gBAAgB;AAAA,QACpD,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAc,QAAQ,OAAO,CAAS;AAAA,UAAG,MAAM;AAAA,UAAM,cAAa;AAAA,UAAM,SAAQ;AAAA,QAAS,CAAA;AAAA,MACtF;AAAA,IACM,CAAA,EAAA,CAAA;AAAA,EACT,CAAA;AAEV"}

package/dist/common/components/daterangeselector/DateRangeSelector.d.ts

@@ -33,5 +33,19 @@ export type Timeframe = {
     label: string;
     value: number;
 };
+export declare const DEFAULT_TIMEFRAME = 6;
+/**
+ * Derive the timeframe button/tab that matches a caller-supplied range.
+ *
+ * The timeframe variants own a `timeframe` state that drives the mount effect.
+ * Seeding it from the incoming range keeps the control in sync with the
+ * caller's stored selection, so remounting doesn't reset it to the default
+ * and clobber that selection via onRangeChanged. (MEW-3911)
+ *
+ * Returns DEFAULT_TIMEFRAME when the range doesn't correspond to a button
+ * (e.g. NetWorth, which renders the timeframe variants without passing a
+ * range and relies on the mount emit to seed its own 6M default).
+ */
+export declare const getTimeframeFromRange: (range: DateRange<Date>) => number;
 declare const DateRangeSelector: React.FC<DateRangeSelectorProps>;
 export default DateRangeSelector;