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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.0.23-alpha.al10",
+  "version": "7.0.23-alpha.al12",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",

package/dist/TrendsStore-DRuzsVVE.mjs

@@ -1,505 +0,0 @@
-import _, { useState as q, useEffect as J, useRef as vt } from "react";
-import { k as St, u as xt, j as K } from "./hooks-DUeXom8C.mjs";
-import { jsxs as S, jsx as i } from "react/jsx-runtime";
-import A 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 At from "@mui/material/Card";
-import Dt from "@mui/material/CardContent";
-import P from "@mui/material/Divider";
-import X from "@mui/material/Grid";
-import { CategoryIcon as Lt, Text as D } 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 wt from "@mui/material/Button";
-import { C as T, b as It, c as Nt } from "./Category-CevNQ03n.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(
-      A,
-      {
-        "aria-label": Rt(r.category_icon_label_aria, n),
-        mb: 4,
-        role: "img",
-        children: /* @__PURE__ */ i(Lt, { categoryGuid: e })
-      }
-    ),
-    /* @__PURE__ */ i(D, { 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(
-    At,
-    {
-      ref: c,
-      sx: {
-        position: "absolute",
-        top: h.y,
-        left: h.x,
-        width: 250,
-        pointerEvents: "none"
-      },
-      children: /* @__PURE__ */ S(Dt, { children: [
-        /* @__PURE__ */ S(A, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-          /* @__PURE__ */ i(Z, { categoryGuid: o, topLevelCategoryGuid: e }),
-          /* @__PURE__ */ i(D, { 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(A, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-            /* @__PURE__ */ i(D, { 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(D, { 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(
-          wt,
-          {
-            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(
-                A,
-                {
-                  sx: {
-                    width: 16,
-                    height: 16,
-                    marginRight: c ? 5 : 10,
-                    borderRadius: "2px",
-                    backgroundColor: r ? d ? y : b : y
-                  }
-                }
-              ),
-              /* @__PURE__ */ i(D, { variant: "Body", children: h(m) })
-            ]
-          },
-          m
-        );
-      })
-    }
-  );
-}, Ae = ({
-  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, w = [...n, ...l], ot = w[0]?.dataset.length ?? 0, I = w.flatMap((t) => t.dataset.map((s) => s.x)), rt = w.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: I[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(
-    A,
-    {
-      onMouseMove: ht,
-      ref: f,
-      sx: {
-        position: "relative",
-        touchAction: "pan-y",
-        "& svg": {
-          touchAction: "pan-y",
-          userSelect: "none"
-        },
-        "& .recharts-wrapper": {
-          touchAction: "pan-y"
-        }
-      },
-      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: I,
-                      ...t
-                    }
-                  ) : null
-                },
-                sx: pt,
-                tooltip: {
-                  trigger: W ? "item" : "none"
-                },
-                xAxis: [
-                  {
-                    data: I,
-                    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;
-}, {}), De = (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 !== It.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 {
-  Ae as S,
-  Re as T,
-  Le as a,
-  De as g,
-  Te as u
-};

package/dist/TrendsWidget-CRi8EO04.mjs

@@ -1,6 +0,0 @@
-const e = {
-  featureVersion: "spendVsIncomeTrends"
-};
-export {
-  e as T
-};