@mx-cartographer/experiences 7.0.23-alpha.al10 → 7.0.23-alpha.al12

package/dist/TrendsStore-WrHxzdbQ.mjs

@@ -0,0 +1,565 @@
+import M, { useState as J, useEffect as K, useRef as vt } from "react";
+import { l as St, u as _t, k as Q } from "./hooks-DkUqN6JE.mjs";
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import L from "@mui/material/Box";
+import T from "@mui/material/Stack";
+import { useTheme as U } from "@mui/material/styles";
+import { LineChart as Mt } from "@mui/x-charts";
+import { u as Z } from "./useScreenSize-B6JyS_Lj.mjs";
+import { u as Tt } from "./useDimensions-27p2evRx.mjs";
+import { observer as Dt } from "mobx-react-lite";
+import At from "@mui/material/Card";
+import Lt from "@mui/material/CardContent";
+import P from "@mui/material/Divider";
+import X from "@mui/material/Grid";
+import { CategoryIcon as Rt, Text as S } from "@mxenabled/mxui";
+import { b as It } from "./Localization-2MODESHW.mjs";
+import { C as O } from "./CurrencyText-YUhH2caW.mjs";
+import { useTheme as wt, Card as Ht, CardContent as Et, Box as kt } from "@mui/material";
+import { f as R, D as I } from "./Dialog-CWW597AF.mjs";
+import Gt from "@mui/material/Button";
+import { C as A, b as Nt, c as Bt } from "./Category-CevNQ03n.mjs";
+import { f as z } from "./NumberFormatting-CtWHhyBX.mjs";
+import Ot from "@mui/material/ListItem";
+import $t from "@mui/material/ListItemButton";
+import V from "@mui/material/ListItemIcon";
+import Wt from "@mui/material/ListItemText";
+import { makeAutoObservable as jt } from "mobx";
+import { addSeconds as Ft } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as Yt } from "date-fns/differenceInCalendarMonths";
+import { endOfMonth as q } from "date-fns/endOfMonth";
+import { subMonths as Pt } from "date-fns/subMonths";
+const Ee = () => {
+  const { isInitialized: o, appDataStore: e } = St(), [r, n] = J(!1);
+  return K(() => {
+    o && e.clientInsightProfile?.is_enabled && n(!0);
+  }, [o, e.clientInsightProfile]), r;
+}, tt = ({ categoryGuid: o, topLevelCategoryGuid: e }) => {
+  const { categories: r } = _t(), { getCategoryName: n } = Q(), a = n(o);
+  return /* @__PURE__ */ f(T, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
+    /* @__PURE__ */ s(
+      L,
+      {
+        "aria-label": It(r.category_icon_label_aria, a),
+        mb: 4,
+        role: "img",
+        children: /* @__PURE__ */ s(Rt, { categoryGuid: e })
+      }
+    ),
+    /* @__PURE__ */ s(S, { variant: "Body", children: a })
+  ] });
+}, Xt = ({
+  categoryGuids: { guid: o, topLevelGuid: e },
+  hoveredAreaData: r,
+  cursorPosition: n,
+  chartContainerRef: a
+}) => {
+  const i = U(), c = vt(null), [h, g] = J({ x: n.x, y: n.y });
+  if (K(() => {
+    (() => {
+      const u = c.current, x = a.current;
+      if (!u || !x) return;
+      const y = u.getBoundingClientRect(), C = x.getBoundingClientRect();
+      let p = n.x, v = n.y;
+      p + y.width * 2 > C.right ? p = n.x - y.width : p - y.width < C.left && (p = n.x), v + y.height * 2 > C.bottom && (v = n.y - y.height), g({ x: p, y: v });
+    })();
+  }, [n, a]), !r) return null;
+  const b = r.reduce((d, u) => d + u.y, 0);
+  return /* @__PURE__ */ s(
+    At,
+    {
+      ref: c,
+      sx: {
+        position: "absolute",
+        top: h.y,
+        left: h.x,
+        width: 250,
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ f(Lt, { children: [
+        /* @__PURE__ */ f(L, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+          /* @__PURE__ */ s(tt, { categoryGuid: o, topLevelCategoryGuid: e }),
+          /* @__PURE__ */ s(S, { variant: "Small", children: `${r.length}-month total` }),
+          /* @__PURE__ */ s(O, { amount: b, bold: !0, formatString: "0,0", variant: "body2" })
+        ] }),
+        /* @__PURE__ */ s(P, { sx: { my: 16, width: "100%" } }),
+        /* @__PURE__ */ s(X, { container: !0, children: r.map((d, u) => /* @__PURE__ */ f(M.Fragment, { children: [
+          u > 0 && u % 3 === 0 && /* @__PURE__ */ s(P, { sx: { my: 16, width: "100%" } }),
+          /* @__PURE__ */ s(X, { item: !0, xs: 4, children: /* @__PURE__ */ f(L, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ s(S, { color: i.palette.text.secondary, variant: "XSmall", children: d.x }),
+            /* @__PURE__ */ s(
+              O,
+              {
+                amount: d.y,
+                bold: !0,
+                formatString: "0,0",
+                variant: "Body"
+              }
+            )
+          ] }) })
+        ] }, u)) })
+      ] })
+    }
+  );
+}, zt = Dt(Xt), Vt = ({
+  categoryGuids: { guid: o, topLevelGuid: e },
+  itemData: { dataIndex: r },
+  series: n,
+  xData: a
+}) => {
+  const i = wt(), c = n.data[r], h = a[r];
+  return c === void 0 || !h ? null : /* @__PURE__ */ s(Ht, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ s(Et, { children: /* @__PURE__ */ f(kt, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ s(tt, { categoryGuid: o, topLevelCategoryGuid: e }),
+    /* @__PURE__ */ s(S, { color: i.palette.text.secondary, variant: "Small", children: R(h, I.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ s(O, { amount: String(c), bold: !0, formatString: "0,0", variant: "Body" })
+  ] }) }) });
+}, qt = ({
+  sx: o,
+  categoryGuids: e,
+  hoveredLegend: r,
+  legendRef: n,
+  onHoverLegend: a,
+  onClickLegend: i
+}) => {
+  const { isMobile: c } = Z(), { getCategoryName: h } = Q();
+  return /* @__PURE__ */ s(
+    T,
+    {
+      direction: "row",
+      flexWrap: "wrap",
+      gap: c ? 2 : 6,
+      justifyContent: "start",
+      ref: n,
+      sx: o,
+      children: e.map(({ guid: g, top_level_guid: b }) => {
+        const d = r === g, u = A[g], x = A[b], y = u ?? x ?? A.default, C = y + "33";
+        return /* @__PURE__ */ f(
+          Gt,
+          {
+            onClick: () => i(g),
+            onMouseEnter: () => a(g),
+            onMouseLeave: () => a(null),
+            sx: {
+              color: "text.primary",
+              fontWeight: "normal",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingX: 8,
+              paddingY: 4,
+              borderRadius: 1,
+              opacity: d ? 1 : 0.7
+            },
+            children: [
+              /* @__PURE__ */ s(
+                L,
+                {
+                  sx: {
+                    width: 16,
+                    height: 16,
+                    marginRight: c ? 5 : 10,
+                    borderRadius: "2px",
+                    backgroundColor: r ? d ? y : C : y
+                  }
+                }
+              ),
+              /* @__PURE__ */ s(S, { variant: "Body", children: h(g) })
+            ]
+          },
+          g
+        );
+      })
+    }
+  );
+}, ke = ({
+  onHoverArea: o,
+  onHoverPoint: e,
+  onHoverLegend: r,
+  onClickLegend: n,
+  stackedDatasets: a,
+  unstackedDatasets: i = [],
+  availableHeight: c = 0,
+  minimumHeight: h = 350
+}) => {
+  const g = U(), { isMobile: b } = Z(), [d, { height: u }] = Tt(), x = M.useRef(null), [y, C] = M.useState(0);
+  M.useEffect(() => {
+    const t = Math.max(c - u, h);
+    C(t);
+  }, [c, u]);
+  const [p, v] = M.useState(null), [et, w] = M.useState({
+    hoveredSeriesId: null,
+    hoveredAreaData: null,
+    isAreaHovered: !1,
+    cursorPos: { x: 0, y: 0 }
+  }), { hoveredSeriesId: D, hoveredAreaData: $, isAreaHovered: ot, cursorPos: H } = et, W = ot && D && $, j = !W, G = [...a, ...i], rt = G[0]?.dataset.length ?? 0, N = G.flatMap((t) => t.dataset.map((l) => l.x)), nt = G.flatMap((t) => t.dataset.map((l) => l.y)), at = a[0]?.dataset?.map(
+    (t, l) => a.reduce((m, _) => m + _.dataset[l]?.y || 0, 0)
+  ) ?? [0], st = Math.max(...at), it = Math.max(
+    ...i.flatMap((t) => t.dataset.map((l) => l.y))
+  ), lt = Math.floor(Math.min(...nt) / 100) * 100, ct = Math.ceil(Math.max(st, it) / 100) * 100, E = a.map((t, l) => ({
+    id: `stacked-${l}`,
+    guid: t.category_guid,
+    top_level_guid: t.top_level_category_guid,
+    area: !0,
+    color: a[l].category_color ?? g.palette.primary.main,
+    data: t.dataset.map((m) => m.y),
+    label: a[l].category_name,
+    stack: "total",
+    type: "line",
+    highlightScope: { highlight: "item" },
+    valueFormatter: (m) => z(m, "0,0")
+  })), F = i.map((t, l) => ({
+    id: `unstacked-${l}`,
+    guid: t.category_guid,
+    top_level_guid: t.top_level_category_guid,
+    area: !1,
+    color: t.category_color,
+    data: t.dataset.map((m) => m.y),
+    label: t.category_name,
+    type: "line",
+    valueFormatter: (m) => z(m, "0,0")
+  })), Y = [...E, ...F], dt = [
+    ...E.map(({ guid: t, top_level_guid: l }) => ({
+      guid: t,
+      top_level_guid: l
+    })),
+    ...F.map(({ guid: t, top_level_guid: l }) => ({
+      guid: t,
+      top_level_guid: l
+    }))
+  ], k = (t) => {
+    const m = t.startsWith("stacked-") ? a[parseInt(t.split("-")[1])] : i[parseInt(t.split("-")[1])];
+    return {
+      guid: m?.category_guid,
+      topLevelGuid: m?.top_level_category_guid
+    };
+  }, ut = (t) => {
+    v(t), r?.(t ?? "");
+  }, mt = (t) => {
+    n?.(t ?? "");
+  }, gt = () => {
+    const t = k(String(D)).guid;
+    t && n?.(t);
+  }, ht = (t) => {
+    const l = String(t?.seriesId), m = k(l).guid, _ = Y.find((B) => B.id === l), ft = _ && t?.dataIndex !== void 0, xt = _ && t?.dataIndex === void 0;
+    if (ft)
+      w({
+        hoveredSeriesId: l,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: H
+      }), e?.(m);
+    else if (xt) {
+      const B = _?.data.map((bt, Ct) => ({
+        x: N[Ct],
+        y: bt
+      })) ?? [];
+      w({
+        hoveredSeriesId: l,
+        hoveredAreaData: B,
+        isAreaHovered: !0,
+        cursorPos: H
+      }), o?.(m);
+    } else
+      w({
+        hoveredSeriesId: null,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: H
+      });
+  }, pt = (t) => {
+    const l = t.currentTarget.getBoundingClientRect();
+    w((m) => ({
+      ...m,
+      cursorPos: {
+        x: t.clientX - l.left,
+        y: t.clientY - l.top
+      }
+    }));
+  }, yt = {
+    p: 4,
+    "& .MuiBarLabel-root": {
+      fontSize: 10,
+      fontWeight: 600
+    },
+    "& .MuiAreaElement-root": {
+      opacity: 0.4,
+      transition: "opacity 0.3s ease"
+    },
+    "& .MuiAreaElement-root:hover": {
+      opacity: 1
+    },
+    '& [class*="MuiLineElement-series-unstacked-"]': {
+      strokeWidth: 3
+    },
+    ...p && E.reduce((t, l, m) => {
+      const _ = `.MuiAreaElement-series-stacked-${m}`;
+      return t[_] = {
+        opacity: E[m].guid === p ? 0.9 : 0.2
+      }, t;
+    }, {})
+  };
+  return /* @__PURE__ */ s(
+    L,
+    {
+      onMouseMove: pt,
+      ref: x,
+      sx: {
+        position: "relative",
+        touchAction: "pan-y",
+        "& svg": {
+          touchAction: "pan-y",
+          userSelect: "none"
+        },
+        "& .recharts-wrapper": {
+          touchAction: "pan-y"
+        }
+      },
+      children: /* @__PURE__ */ f(
+        T,
+        {
+          direction: { xs: "column", md: "column" },
+          spacing: { xs: 0, md: 4 },
+          sx: { width: "100%", position: "relative" },
+          children: [
+            /* @__PURE__ */ s(
+              Mt,
+              {
+                height: y,
+                margin: { bottom: 50 },
+                onAreaClick: gt,
+                onHighlightChange: ht,
+                series: Y,
+                skipAnimation: !0,
+                slotProps: {
+                  legend: {
+                    hidden: !0
+                  }
+                },
+                slots: {
+                  itemContent: (t) => j && D ? /* @__PURE__ */ s(
+                    Vt,
+                    {
+                      categoryGuids: k(D),
+                      xData: N,
+                      ...t
+                    }
+                  ) : null
+                },
+                sx: yt,
+                tooltip: {
+                  trigger: j ? "item" : "none"
+                },
+                xAxis: [
+                  {
+                    data: N,
+                    scaleType: "time",
+                    valueFormatter: (t) => R(t, I.MONTH_SHORT_YEAR),
+                    tickNumber: rt
+                    // How many ticks to show on the x-axis
+                  }
+                ],
+                yAxis: [
+                  {
+                    min: lt,
+                    max: ct || 100
+                  }
+                ]
+              }
+            ),
+            /* @__PURE__ */ s(
+              qt,
+              {
+                categoryGuids: dt,
+                hoveredLegend: p,
+                legendRef: d,
+                onClickLegend: mt,
+                onHoverLegend: ut,
+                sx: { px: b ? 0 : 24 }
+              }
+            ),
+            W && /* @__PURE__ */ s(
+              zt,
+              {
+                categoryGuids: k(D),
+                chartContainerRef: x,
+                cursorPosition: H,
+                hoveredAreaData: $.map((t) => ({
+                  ...t,
+                  x: R(t.x, I.MONTH_SHORT_YEAR)
+                }))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, Ge = ({
+  onClick: o,
+  leftIcon: e,
+  rightIcon: r,
+  title: n,
+  subtitle: a,
+  rightContent: i,
+  titleBold: c = !0,
+  rightContentBold: h = !0
+}) => {
+  const g = /* @__PURE__ */ f(M.Fragment, { children: [
+    e && /* @__PURE__ */ s(V, { sx: { ml: 0 }, children: e }),
+    /* @__PURE__ */ s(Wt, { children: /* @__PURE__ */ f(
+      T,
+      {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          marginLeft: 12
+        },
+        children: [
+          /* @__PURE__ */ f(T, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ s(S, { bold: c, variant: "body1", children: n }),
+            a && /* @__PURE__ */ s(S, { variant: "caption", children: a })
+          ] }),
+          /* @__PURE__ */ f(T, { sx: { flexDirection: "row", alignItems: "center", gap: 1 }, children: [
+            i && /* @__PURE__ */ s(S, { bold: h, display: "flex", variant: "body1", children: i }),
+            r && /* @__PURE__ */ s(V, { children: r })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ s(Ot, { sx: { bgcolor: "background.paper" }, children: o ? /* @__PURE__ */ s(
+    $t,
+    {
+      onClick: o,
+      sx: {
+        py: 14
+      },
+      children: g
+    }
+  ) : /* @__PURE__ */ s(
+    T,
+    {
+      sx: {
+        py: 14,
+        px: 24,
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      children: g
+    }
+  ) });
+}, Jt = (o) => A[o] ?? A.default, Kt = (o) => Bt[o];
+function Qt(o, e) {
+  const r = [], n = new Date(o);
+  for (; n <= e; ) {
+    const a = n.getFullYear(), i = String(n.getMonth() + 1).padStart(2, "0");
+    r.push(+`${a}${i}`), n.setMonth(n.getMonth() + 1);
+  }
+  return r;
+}
+const Ut = (o) => o.reduce((r, n) => {
+  const a = {
+    top_level_category_guid: n.top_level_category_guid,
+    category_guid: n.category_guid,
+    amount: n.total,
+    year_month: n.year_month
+  }, { top_level_category_guid: i, category_guid: c } = a;
+  return r[c] || (r[c] = []), r[c].push(a), i !== c && (r[i] || (r[i] = []), r[i].push(a)), r;
+}, {}), Ne = (o, e, r) => {
+  const n = Ut(o), a = Qt(e, r);
+  return Object.entries(n).map(([c, h]) => {
+    const g = h[0].top_level_category_guid, b = a.map((d) => {
+      const u = h.filter((p) => p.year_month === d).reduce((p, v) => p + Math.abs(v.amount), 0), x = Number(String(d).slice(0, 4)), y = Number(String(d).slice(4));
+      return { x: new Date(x, y - 1), y: u };
+    }).sort((d, u) => d.x.getTime() - u.x.getTime());
+    return {
+      top_level_category_guid: g,
+      category_guid: c,
+      category_name: Kt(c),
+      category_color: Jt(g),
+      dataset: b
+    };
+  });
+}, Be = (o, e) => {
+  const r = typeof o == "string" ? parseFloat(o.replace(/[^0-9.-]+/g, "")) : o, n = typeof e == "string" ? parseFloat(e.replace(/[^0-9.-]+/g, "")) : e;
+  return (r || 0) - (n || 0);
+}, Zt = (o, e) => {
+  const r = o.subCategories.filter((i) => i.currentAmount !== 0), n = o.totalMonthlyAmounts.slice(-e), a = (i) => i.substring(0, 3) + " " + i.slice(-4);
+  return n.map((i) => {
+    const c = a(i.label), h = r.map((d) => {
+      const u = d.monthlyAmounts.slice(-e).find((x) => a(x.label) === c);
+      return {
+        label: d.name,
+        amount: Math.abs(u?.amount || 0),
+        header: c
+      };
+    }), g = o.monthlyAmounts.slice(-e).find((d) => a(d.label) === c);
+    return [{
+      label: o.name,
+      amount: Math.abs(g?.amount || 0),
+      header: c
+    }, ...h].sort((d, u) => u.amount - d.amount);
+  });
+}, te = (o, e) => {
+  const r = o ? o.totalMonthlyAmounts.slice(-e).map((a) => ({
+    x: a.label.substring(0, 3),
+    y: Math.abs(a.amount)
+  })) : [], n = o ? Zt(o, e) : [];
+  return { monthlyAmounts: r, tooltipLabels: n };
+}, ee = (o) => o.slice().filter(
+  (e) => e.totalAmount !== 0 && e.isTransfer === !1 && e.guid !== Nt.INVESTMENTS
+).sort((e, r) => Math.abs(r.totalAmount) - Math.abs(e.totalAmount));
+class Oe {
+  globalStore;
+  selectedCategoryData = null;
+  selectedDateRange;
+  visibleListLength = 5;
+  constructor(e) {
+    this.globalStore = e, this.selectedDateRange = {
+      start: Ft(q(Pt(/* @__PURE__ */ new Date(), 6)), 1),
+      end: q(/* @__PURE__ */ new Date())
+    }, jt(this);
+  }
+  setSelectedCategoryData = (e) => {
+    this.selectedCategoryData = e;
+  };
+  setSelectedDateRange = (e) => {
+    this.selectedDateRange = e;
+  };
+  setVisibleListLength = (e) => {
+    this.visibleListLength = e;
+  };
+  get sortedDetailedCategoriesWithTransactions() {
+    return ee(
+      this.globalStore.categoryStore.detailedCategoriesWithTransactions
+    );
+  }
+  get selectedDateRangeMonthCount() {
+    return Yt(this.selectedDateRange.end, this.selectedDateRange.start) + 1;
+  }
+  get selectedDateRangeMonthRange() {
+    const e = R(this.selectedDateRange.start, I.MONTH_LONG), r = R(this.selectedDateRange.end, I.MONTH_LONG);
+    return `${e} - ${r}`;
+  }
+  get visibleCategories() {
+    return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength);
+  }
+  get collapsedCategories() {
+    return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength);
+  }
+  get categoryDetailsChartData() {
+    return te(
+      this.selectedCategoryData,
+      this.selectedDateRangeMonthCount
+    );
+  }
+}
+export {
+  Ge as L,
+  ke as S,
+  Oe as T,
+  Be as a,
+  Ne as g,
+  Ee as u
+};

package/dist/{User-DtwqVm3K.mjs → User-Dq9Qj764.mjs}

@@ -22,7 +22,7 @@ import { isWithinInterval as Q } from "date-fns/isWithinInterval";
 import nn from "@mui/material/styles/useTheme";
 import k from "@mui/material/ListItem";
 import an from "@mui/material/ListItemButton";
-import { g as tn } from "./hooks-DUeXom8C.mjs";
+import { e as tn } from "./hooks-DkUqN6JE.mjs";
 const on = ({ copy: n, date: a, onNextClick: o, onPreviousClick: r }) => {
   const c = v(), l = en(c);
   return /* @__PURE__ */ h("div", { className: `mx-cmn-calendar-header ${l}`, children: [