@mx-cartographer/experiences 7.0.0-alpha.mega1 → 7.0.1-alpha.al0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.0.0-alpha.mega1",
+  "version": "7.0.1-alpha.al0",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",

package/dist/RecurringSettings-D_HnMYZP.mjs

@@ -1,57 +0,0 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import p from "react";
-import { observer as d } from "mobx-react-lite";
-import _ from "@mui/material/Box";
-import g from "@mui/material/Tab";
-import R from "@mui/material/Tabs";
-import T from "@mui/material/Divider";
-import b from "@mui/material/List";
-import { R as f, A as h, M as C } from "./ManageIncome-ndMuhJMG.mjs";
-import { u as l, f as E, g as u } from "./hooks-30y_BLwc.mjs";
-import { R as S, F as A } from "./RepeatingTransaction-BPWfaB3f.mjs";
-import { A as m } from "./WidgetContainer-DWCusxYI.mjs";
-const v = d(() => {
-  const { recurring: n } = l(), { repeatingTransactions: a } = E(), { onEvent: o } = u(), t = (e) => {
-    o(m.RECURRING_TRANSACTIONS_CLICK_EXPENSE, {
-      repeating_transaction_guid: e.guid
-    });
-  }, c = () => {
-    o(m.RECURRING_TRANSACTIONS_CLICK_ADD_EXPENSE);
-  };
-  return /* @__PURE__ */ s(b, { sx: { bgcolor: "background.paper" }, children: [
-    a.filter(
-      (e) => e.repeating_transaction_type !== S.Income && (e.transactions.length > 0 || e.recurrence_type === A.EveryYear)
-    ).map((e, i) => /* @__PURE__ */ s(p.Fragment, { children: [
-      /* @__PURE__ */ r(f, { onClick: t, repeatingTransaction: e }),
-      /* @__PURE__ */ r(T, { variant: i < a.length - 1 ? "inset" : "fullWidth" })
-    ] }, e.guid)),
-    /* @__PURE__ */ r(h, { label: n.add_expense, onAddRecurringTransaction: c })
-  ] });
-}), K = d(() => {
-  const [n, a] = p.useState(0), { onEvent: o } = u(), { recurring: t } = l();
-  return /* @__PURE__ */ s(_, { bgcolor: "background.default", height: "100%", children: [
-    /* @__PURE__ */ s(
-      R,
-      {
-        onChange: (e, i) => {
-          a(i), o(
-            i === 0 ? "recurring_transactions_widget_manage_expenses" : "recurring_transactions_widget_edit_income"
-          );
-        },
-        sx: { bgcolor: "background.paper" },
-        value: n,
-        variant: "fullWidth",
-        children: [
-          /* @__PURE__ */ r(g, { label: t.manage_expenses }),
-          /* @__PURE__ */ r(g, { label: t.manage_income })
-        ]
-      }
-    ),
-    n === 0 && /* @__PURE__ */ r(v, {}),
-    n === 1 && /* @__PURE__ */ r(C, {})
-  ] });
-});
-export {
-  v as M,
-  K as R
-};

package/dist/TrendsStore-BHJUapXF.mjs

@@ -1,487 +0,0 @@
-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
-};

package/dist/trends/components/TransactionsList.d.ts

@@ -1,7 +0,0 @@
-import { default as React } from 'react';
-import { Transaction } from '../../common';
-interface TransactionsListProps {
-    transactions: Transaction[];
-}
-declare const TransactionsList: React.FC<TransactionsListProps>;
-export default TransactionsList;