@mx-cartographer/experiences 9.2.4-alpha.al4 → 9.3.0-alph.bb2

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

@@ -0,0 +1,95 @@
+import { useGlobalCopyStore as y } from "../../../context/hooks.es.js";
+import { formatCurrency as s } from "../../../../core/utils/NumberFormatting.es.js";
+import { MARKER_SHAPE_PATHS as v, getMarkerShape as b } from "./utils/markerShapes.es.js";
+import { observer as w } from "mobx-react-lite";
+import d from "@mui/material/Stack";
+import { Text as e } from "@mxenabled/mxui";
+import { Fragment as C, jsx as o, jsxs as i } from "react/jsx-runtime";
+import k from "@mui/material/Box";
+var A = ({ label: r, customLegendVariant: n }) => {
+  const t = n || "body2";
+  return typeof r == "string" ? /* @__PURE__ */ o(e, {
+    variant: t,
+    children: r
+  }) : typeof r == "object" && r.amount !== void 0 && r.label ? /* @__PURE__ */ i(C, { children: [/* @__PURE__ */ o(e, {
+    variant: t,
+    children: r.label
+  }), /* @__PURE__ */ o(e, {
+    bold: !0,
+    sx: { marginLeft: 8 },
+    variant: t,
+    children: s(r.amount, "0,0")
+  })] }) : null;
+}, R = ({ average: r, customLegendVariant: n, customLegendBoxSx: t, labels: p = [], series: u, style: g, title: h, valueFormatterString: a }) => {
+  const { common: x } = y(), l = n || "body2";
+  return /* @__PURE__ */ i(d, {
+    style: {
+      flexDirection: "row",
+      gap: 24,
+      ...g
+    },
+    children: [u.map((m, c) => {
+      const f = p[c];
+      return f ? /* @__PURE__ */ i(d, {
+        style: {
+          alignItems: "center",
+          flexDirection: "row",
+          flexWrap: "wrap"
+        },
+        children: [t !== void 0 ? /* @__PURE__ */ o(k, { sx: {
+          width: 10,
+          height: 10,
+          backgroundColor: m.color,
+          marginRight: 8,
+          ...t
+        } }) : /* @__PURE__ */ o("svg", {
+          "aria-hidden": "true",
+          height: 14,
+          style: {
+            marginRight: 8,
+            flexShrink: 0
+          },
+          viewBox: "-6 -6 12 12",
+          width: 14,
+          children: /* @__PURE__ */ o("path", {
+            d: v[b(c)],
+            fill: m.color,
+            stroke: m.color,
+            strokeWidth: 1
+          })
+        }), /* @__PURE__ */ o(A, {
+          customLegendVariant: n,
+          label: f
+        })]
+      }, c) : null;
+    }), r !== void 0 && /* @__PURE__ */ i(d, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row"
+      },
+      children: [
+        /* @__PURE__ */ o(e, {
+          bold: !0,
+          sx: { marginRight: 8 },
+          variant: l,
+          children: "– –"
+        }),
+        /* @__PURE__ */ i(e, {
+          variant: l,
+          children: [h || x.average, "  "]
+        }),
+        /* @__PURE__ */ o(e, {
+          bold: !0,
+          variant: l,
+          children: a ? s(r, a) : r
+        })
+      ]
+    })]
+  });
+}, M = w(R);
+export {
+  A as CustomLegendLabel,
+  M as default
+};
+
+//# sourceMappingURL=CustomLegend.es.js.map

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

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

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

@@ -0,0 +1,27 @@
+import "react";
+import { Fragment as i, jsx as t, jsxs as n } from "react/jsx-runtime";
+var d = (e) => /* @__PURE__ */ n(i, { children: [/* @__PURE__ */ t("clipPath", {
+  id: e.id,
+  children: /* @__PURE__ */ t("rect", {
+    height: e.height,
+    width: e.width,
+    x: "0",
+    y: "0"
+  })
+}), /* @__PURE__ */ t("g", { children: /* @__PURE__ */ t("path", {
+  cursor: "unset",
+  d: e.d,
+  style: {
+    strokeWidth: 2,
+    strokeLinejoin: "round",
+    fill: "none",
+    stroke: e.lineColor ? e.lineColor : e.stroke,
+    transition: "opacity 0.2s ease-in, stroke 0.2s ease-in",
+    opacity: 1
+  }
+}) })] });
+export {
+  d as CustomLine
+};
+
+//# sourceMappingURL=CustomLine.es.js.map

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

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

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

@@ -0,0 +1,56 @@
+import { formatCurrency as M } from "../../../../core/utils/NumberFormatting.es.js";
+import { MARKER_SHAPE_PATHS as C } from "./utils/markerShapes.es.js";
+import "react";
+import { Fragment as m, jsx as n, jsxs as d } from "react/jsx-runtime";
+import { useTheme as L } from "@mui/material/styles";
+import F from "@mui/material/useMediaQuery";
+var $ = (e) => {
+  const a = L(), s = e.showLabel, t = e.style, h = t?.markLabelStyles, l = Number(e.x), r = Number(e.y), o = e.handlers?.onMarkClick, u = e.handlers?.onMouseEnter, x = e.handlers?.onMouseLeave, y = F(a.breakpoints.up("sm")), f = e.valueFormatterString ? M(e.yData[e.dataIndex], e.valueFormatterString) : String(e.yData[e.dataIndex]), b = y ? a.typography.body2?.fontSize : a.typography.caption?.fontSize, i = 30, c = 24, k = l - i / 2, S = r - 30;
+  return /* @__PURE__ */ d(m, { children: [s && /* @__PURE__ */ d(m, { children: [e.labelBackgroundColor && /* @__PURE__ */ n("rect", {
+    fill: e.labelBackgroundColor,
+    height: c,
+    rx: "3",
+    width: i,
+    x: k,
+    y: S
+  }), /* @__PURE__ */ n("text", {
+    className: "MuiLineChart-markLabel",
+    dominantBaseline: "middle",
+    fill: e.labelFontColor ? e.labelFontColor : a.palette.text.primary,
+    style: {
+      fontSize: e.labelFontSize ? e.labelFontSize : b,
+      ...h
+    },
+    textAnchor: "middle",
+    x: l,
+    y: r - 28 + c / 2,
+    children: f
+  })] }), e.showMark && /* @__PURE__ */ n("path", {
+    cursor: o ? "pointer" : "unset",
+    d: C[e.shape ?? "circle"],
+    height: "20px",
+    onClick: (g) => {
+      o?.(g, e.dataIndex);
+    },
+    onMouseEnter: () => {
+      u?.(e.dataIndex);
+    },
+    onMouseLeave: () => {
+      x?.();
+    },
+    style: {
+      fill: t?.fill ? t.fill : a.palette.background.paper,
+      stroke: t?.stroke ? t.stroke : a.palette.primary.main,
+      strokeWidth: 2,
+      transform: `translate(${e.x}px, ${e.y}px)`,
+      transformOrigin: `${e.x}px, ${e.y}px`,
+      filter: t?.filter ? t.filter : "none"
+    },
+    width: "20px"
+  })] });
+};
+export {
+  $ as CustomMark
+};
+
+//# sourceMappingURL=CustomMark.es.js.map

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

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

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

@@ -0,0 +1,138 @@
+import { formatCurrency as h } from "../../../../core/utils/NumberFormatting.es.js";
+import { MARKER_SHAPE_PATHS as w, getMarkerShape as y } from "./utils/markerShapes.es.js";
+import { Text as e } from "@mxenabled/mxui";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { useTheme as D } from "@mui/material/styles";
+import { Box as S, Stack as n } from "@mui/material";
+import { useAxesTooltip as T } from "@mui/x-charts/ChartsTooltip";
+function B({ customLabels: p, isCurrency: m = !0, labels: c = [], series: d, valueFormatterString: l = "0,0" }) {
+  const b = T(), x = D(), g = b?.[0];
+  if (!g) return null;
+  const { axisValue: f, dataIndex: o = 0 } = g;
+  if (p) {
+    const a = p[o]?.[0]?.header || String(f);
+    return /* @__PURE__ */ i(n, {
+      sx: {
+        backgroundColor: x.palette.background.paper,
+        boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        borderRadius: "4px",
+        width: 250,
+        gap: 8,
+        px: 16,
+        py: 12
+      },
+      children: [/* @__PURE__ */ i(n, {
+        sx: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          alignSelf: "stretch",
+          gap: 8,
+          marginTop: 4
+        },
+        children: [/* @__PURE__ */ t(e, {
+          variant: "h3",
+          children: a
+        }), /* @__PURE__ */ t(e, {
+          bold: !0,
+          variant: "h3",
+          children: h(d[0]?.data[o], l)
+        })]
+      }), p[o]?.some((r) => (typeof r == "string" ? 0 : r.amount) !== 0) ? p[o]?.map((r) => {
+        const s = typeof r == "string" ? r : r.label, u = typeof r == "string" ? 0 : r.amount;
+        return u === 0 ? null : /* @__PURE__ */ i(n, {
+          sx: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            alignSelf: "stretch",
+            gap: 8,
+            marginTop: 4
+          },
+          children: [/* @__PURE__ */ i(n, {
+            sx: {
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 8,
+              flex: 1,
+              minWidth: 0
+            },
+            children: [/* @__PURE__ */ t(S, { sx: {
+              width: "12px",
+              height: "12px",
+              backgroundColor: d[0]?.color,
+              borderRadius: "4px"
+            } }), /* @__PURE__ */ t(e, {
+              variant: "body1",
+              children: s
+            })]
+          }), /* @__PURE__ */ t(e, {
+            bold: !0,
+            variant: "body1",
+            children: h(Math.abs(u), l)
+          })]
+        }, s);
+      }) : /* @__PURE__ */ t(e, {
+        variant: "body1",
+        children: "No data"
+      })]
+    });
+  }
+  return /* @__PURE__ */ i(n, {
+    sx: {
+      backgroundColor: x.palette.background.paper,
+      boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      borderRadius: "4px",
+      width: 225,
+      gap: 8,
+      px: 16,
+      py: 12
+    },
+    children: [/* @__PURE__ */ t(e, {
+      variant: "h3",
+      children: String(f)
+    }), d.map((a, r) => /* @__PURE__ */ i(n, {
+      sx: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        alignSelf: "stretch",
+        gap: 8,
+        marginTop: 4
+      },
+      children: [/* @__PURE__ */ i(n, {
+        sx: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8
+        },
+        children: [/* @__PURE__ */ t("svg", {
+          "aria-hidden": "true",
+          height: 12,
+          viewBox: "-6 -6 12 12",
+          width: 12,
+          children: /* @__PURE__ */ t("path", {
+            d: w[y(r)],
+            fill: a.color
+          })
+        }), /* @__PURE__ */ t(e, {
+          variant: "body1",
+          children: typeof c[r] == "string" ? c[r] : c[r]?.label
+        })]
+      }), /* @__PURE__ */ t(e, {
+        bold: !0,
+        variant: "body1",
+        children: m ? h(a.data[o], l) : a.data[o]
+      })]
+    }, `${a.id}-${r}`))]
+  });
+}
+export {
+  B as CustomTooltip
+};
+
+//# sourceMappingURL=CustomTooltip.es.js.map

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

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

package/dist/common/components/charts/linechart/utils/markerShapes.es.js

@@ -0,0 +1,26 @@
+var e = {
+  circle: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+  square: "M-4,-4L4,-4L4,4L-4,4Z",
+  wye: "M0.6,0.6L0.6,4.5L-0.6,4.5L-0.6,0.6L-4,2.6L-3.4,1.5L-0.6,-0.1L-3.4,-1.5L-4,-2.6L-0.6,-0.6L-0.6,-4.5L0.6,-4.5L0.6,-0.6L4,-2.6L3.4,-1.5L0.6,-0.1L3.4,1.5L4,2.6L0.6,0.6Z",
+  star: "M0,-5L1.1,-1.5L4.8,-1.5L1.8,0.9L2.9,4.5L0,2.2L-2.9,4.5L-1.8,0.9L-4.8,-1.5L-1.1,-1.5Z",
+  cross: "M-1.5,-5L1.5,-5L1.5,-1.5L5,-1.5L5,1.5L1.5,1.5L1.5,5L-1.5,5L-1.5,1.5L-5,1.5L-5,-1.5L-1.5,-1.5Z",
+  triangle: "M0,-5L4.33,3.5L-4.33,3.5Z",
+  diamond: "M0,-5.5L3.9,0L0,5.5L-3.9,0Z"
+}, L = [
+  "circle",
+  "square",
+  "wye",
+  "star",
+  "cross",
+  "triangle",
+  "diamond"
+];
+function a(r) {
+  return L[r % L.length];
+}
+export {
+  e as MARKER_SHAPE_PATHS,
+  a as getMarkerShape
+};
+
+//# sourceMappingURL=markerShapes.es.js.map

package/dist/common/components/charts/linechart/utils/markerShapes.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markerShapes.es.js","names":[],"sources":["../../../../../../src/common/components/charts/linechart/utils/markerShapes.ts"],"sourcesContent":["export type MarkerShape = 'circle' | 'square' | 'wye' | 'star' | 'cross' | 'triangle' | 'diamond'\n\n// SVG path data for each shape, centered at origin, sized to match current ~9px circle\nexport const MARKER_SHAPE_PATHS: Record<MarkerShape, string> = {\n  circle: 'M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0',\n  square: 'M-4,-4L4,-4L4,4L-4,4Z',\n  wye: 'M0.6,0.6L0.6,4.5L-0.6,4.5L-0.6,0.6L-4,2.6L-3.4,1.5L-0.6,-0.1L-3.4,-1.5L-4,-2.6L-0.6,-0.6L-0.6,-4.5L0.6,-4.5L0.6,-0.6L4,-2.6L3.4,-1.5L0.6,-0.1L3.4,1.5L4,2.6L0.6,0.6Z',\n  star: 'M0,-5L1.1,-1.5L4.8,-1.5L1.8,0.9L2.9,4.5L0,2.2L-2.9,4.5L-1.8,0.9L-4.8,-1.5L-1.1,-1.5Z',\n  cross:\n    'M-1.5,-5L1.5,-5L1.5,-1.5L5,-1.5L5,1.5L1.5,1.5L1.5,5L-1.5,5L-1.5,1.5L-5,1.5L-5,-1.5L-1.5,-1.5Z',\n  triangle: 'M0,-5L4.33,3.5L-4.33,3.5Z',\n  diamond: 'M0,-5.5L3.9,0L0,5.5L-3.9,0Z',\n}\n\n// Default shape sequence assigned to series by index\nconst DEFAULT_SHAPES: MarkerShape[] = [\n  'circle',\n  'square',\n  'wye',\n  'star',\n  'cross',\n  'triangle',\n  'diamond',\n]\n\nexport function getMarkerShape(seriesIndex: number): MarkerShape {\n  return DEFAULT_SHAPES[seriesIndex % DEFAULT_SHAPES.length]\n}\n"],"mappings":"AAGA,IAAa,IAAkD;AAAA,EAC7D,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OACE;AAAA,EACF,UAAU;AAAA,EACV,SAAS;AACX,GAGM,IAAgC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAgB,EAAe,GAAkC;AAC/D,SAAO,EAAe,IAAc,EAAe,MAAA;AACrD"}

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

@@ -0,0 +1,31 @@
+import { buildDynamicCopy as m } from "../../../../core/utils/Localization.es.js";
+import { useCategoryStore as c, useGlobalCopyStore as n } from "../../../context/hooks.es.js";
+import "react";
+import l from "@mui/material/Stack";
+import { CategoryIcon as y, Text as g } from "@mxenabled/mxui";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import s from "@mui/material/Box";
+var I = ({ categoryGuid: e, topLevelCategoryGuid: t }) => {
+  const { categories: a } = n(), { getCategoryName: i } = c(), r = i(e);
+  return /* @__PURE__ */ p(l, {
+    alignItems: "center",
+    direction: "column",
+    gap: "8",
+    justifyContent: "center",
+    mb: 4,
+    children: [/* @__PURE__ */ o(s, {
+      "aria-label": m(a.category_icon_label_aria, r),
+      mb: 4,
+      role: "img",
+      children: /* @__PURE__ */ o(y, { categoryGuid: t })
+    }), /* @__PURE__ */ o(g, {
+      variant: "body1",
+      children: r
+    })]
+  });
+};
+export {
+  I as CategoryIconLabel
+};
+
+//# sourceMappingURL=CategoryIconLabel.es.js.map

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

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

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

@@ -0,0 +1,97 @@
+import { CurrencyText as u } from "../../CurrencyText.es.js";
+import { CategoryIconLabel as j } from "./CategoryIconLabel.es.js";
+import R, { useEffect as E, useRef as G, useState as S } from "react";
+import { observer as B } from "mobx-react-lite";
+import { Text as h } from "@mxenabled/mxui";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { useTheme as I } from "@mui/material/styles";
+import y from "@mui/material/Box";
+import L from "@mui/material/Card";
+import z from "@mui/material/CardContent";
+import x from "@mui/material/Divider";
+import g from "@mui/material/Grid";
+var F = ({ categoryGuids: { guid: b, topLevelGuid: C }, hoveredAreaData: l, cursorPosition: e, chartContainerRef: a }) => {
+  const w = I(), f = G(null), [s, v] = S({
+    x: e.x,
+    y: e.y
+  });
+  if (E(() => {
+    (() => {
+      const o = f.current, p = a.current;
+      if (!o || !p) return;
+      const i = o.getBoundingClientRect(), c = p.getBoundingClientRect();
+      let n = e.x, d = e.y;
+      n + i.width * 2 > c.right ? n = e.x - i.width : n - i.width < c.left && (n = e.x), d + i.height * 2 > c.bottom && (d = e.y - i.height), v({
+        x: n,
+        y: d
+      });
+    })();
+  }, [e, a]), !l) return null;
+  const T = l.reduce((r, o) => r + o.y, 0);
+  return /* @__PURE__ */ t(L, {
+    ref: f,
+    sx: {
+      position: "absolute",
+      top: s.y,
+      left: s.x,
+      width: 250,
+      pointerEvents: "none"
+    },
+    children: /* @__PURE__ */ m(z, { children: [
+      /* @__PURE__ */ m(y, {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ t(j, {
+            categoryGuid: b,
+            topLevelCategoryGuid: C
+          }),
+          /* @__PURE__ */ t(h, {
+            variant: "body2",
+            children: `${l.length}-month total`
+          }),
+          /* @__PURE__ */ t(u, {
+            amount: T,
+            bold: !0,
+            formatString: "0,0",
+            variant: "body2"
+          })
+        ]
+      }),
+      /* @__PURE__ */ t(x, { sx: {
+        my: 16,
+        width: "100%"
+      } }),
+      /* @__PURE__ */ t(g, {
+        container: !0,
+        children: l.map((r, o) => /* @__PURE__ */ m(R.Fragment, { children: [o > 0 && o % 3 === 0 && /* @__PURE__ */ t(x, { sx: {
+          my: 16,
+          width: "100%"
+        } }), /* @__PURE__ */ t(g, {
+          size: 4,
+          children: /* @__PURE__ */ m(y, {
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "column",
+            children: [/* @__PURE__ */ t(h, {
+              color: w.palette.text.secondary,
+              variant: "caption",
+              children: r.x
+            }), /* @__PURE__ */ t(u, {
+              amount: r.y,
+              bold: !0,
+              formatString: "0,0",
+              variant: "body1"
+            })]
+          })
+        })] }, o))
+      })
+    ] })
+  });
+}, N = B(F);
+export {
+  N as default
+};
+
+//# sourceMappingURL=CustomAreaTooltip.es.js.map

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

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

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

@@ -0,0 +1,54 @@
+import { CategoryColors as t } from "../../../../core/constants/Category.es.js";
+import { useCategoryStore as x } from "../../../context/hooks.es.js";
+import { useScreenSize as y } from "../../../hooks/useScreenSize.es.js";
+import "react";
+import h from "@mui/material/Stack";
+import { Text as b } from "@mxenabled/mxui";
+import k from "@mui/material/Button";
+import { jsx as e, jsxs as j } from "react/jsx-runtime";
+import B from "@mui/material/Box";
+var N = ({ sx: m, categoryGuids: c, hoveredLegend: n, legendRef: p, onHoverLegend: a, onClickLegend: l }) => {
+  const { isMobile: i } = y(), { getCategoryName: f } = x();
+  return /* @__PURE__ */ e(h, {
+    direction: "row",
+    flexWrap: "wrap",
+    gap: i ? 2 : 6,
+    justifyContent: "start",
+    ref: p,
+    sx: m,
+    children: c.map(({ guid: o, top_level_guid: d }) => {
+      const s = n === o, u = t[o], C = t[d], r = u ?? C ?? t.default, g = r + "33";
+      return /* @__PURE__ */ j(k, {
+        onClick: () => l(o),
+        onMouseEnter: () => a(o),
+        onMouseLeave: () => a(null),
+        sx: {
+          color: "text.primary",
+          fontWeight: "normal",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          paddingX: 8,
+          paddingY: 4,
+          borderRadius: 1,
+          opacity: s ? 1 : 0.7
+        },
+        children: [/* @__PURE__ */ e(B, { sx: {
+          width: 16,
+          height: 16,
+          marginRight: i ? 5 : 10,
+          borderRadius: "2px",
+          backgroundColor: n ? s ? r : g : r
+        } }), /* @__PURE__ */ e(b, {
+          variant: "body1",
+          children: f(o)
+        })]
+      }, o);
+    })
+  });
+};
+export {
+  N as CustomLegend
+};
+
+//# sourceMappingURL=CustomLegend.es.js.map

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

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