@mx-cartographer/experiences 6.26.33-alpha.mm0 → 7.0.0-alpha.mega1

package/dist/TrendsStore-BHJUapXF.mjs

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