@mx-cartographer/experiences 7.4.15 → 7.5.0-alpha.bb1

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [7.5.0] - 01-06-2025
+
+- **UPDATED** - Trends table with a new total column
+- **UPDATED** - Trends table style to match updated designs
+
+## [7.4.16] - 12-23-2025
+
+- **FIXED** - `MicroCardTemplate` LineHeight Fix
+
 ## [7.4.15] - 12-22-2025
 
 - **FIXED** - Spending Total Amount Discrepancies wrt legacy - Bug Fixed

package/dist/{CategoryStore-U7hOZAbP.mjs → CategoryStore-gILjk6Jj.mjs}

@@ -1,15 +1,15 @@
-import { makeAutoObservable as u, runInAction as l } from "mobx";
+import { makeAutoObservable as C, runInAction as l } from "mobx";
 import { getUnixTime as r } from "date-fns/getUnixTime";
-import { subMonths as g } from "date-fns/subMonths";
-import { startOfMonth as h } from "date-fns/startOfMonth";
-import { endOfMonth as d } from "date-fns/endOfMonth";
-import { a as T, g as m } from "./CategoryUtil-DUM8NuGO.mjs";
-import { F as p, A as i } from "./Fetch-DecPFeGU.mjs";
-import { b as f, c as w } from "./Category-CevNQ03n.mjs";
-class y {
+import { subMonths as h } from "date-fns/subMonths";
+import { startOfMonth as d } from "date-fns/startOfMonth";
+import { endOfMonth as y } from "date-fns/endOfMonth";
+import { a as m, g as p } from "./CategoryUtil-DUM8NuGO.mjs";
+import { F as f, A as i } from "./Fetch-DecPFeGU.mjs";
+import { b as g, c as S } from "./Category-CevNQ03n.mjs";
+class u {
   fetchInstance;
   constructor(t, e, o) {
-    this.fetchInstance = new p(t, e, void 0, o);
+    this.fetchInstance = new f(t, e, void 0, o);
   }
   addCategory = async (t) => this.fetchInstance.post(i.CATEGORIES, t).then((e) => e.category);
   getCategories = async () => this.fetchInstance.get(i.CATEGORIES).then((t) => t.categories);
@@ -20,7 +20,7 @@ class y {
     try {
       const a = `${i.MONTHLY_CATEGORY_TOTALS}/from/${t}/to/${e}`;
       if (o) {
-        const s = o.length === 0 ? [""] : o.map((C) => C.guid);
+        const s = o.length === 0 ? [""] : o.map((T) => T.guid);
         return (await this.fetchInstance.post(a, { account_guid: s })).monthly_category_totals;
       } else
         return (await this.fetchInstance.get(a)).monthly_category_totals;
@@ -31,7 +31,7 @@ class y {
   removeCategory = async (t) => this.fetchInstance.delete(`${i.CATEGORIES}/${t}`);
   updateCategory = async (t) => this.fetchInstance.put(`${i.CATEGORIES}/${t.guid}`, t).then((e) => e.category);
 }
-class S {
+class w {
   expandedGuid = null;
   selectedGuid = null;
   searchValue = "";
@@ -42,7 +42,7 @@ class S {
   savedOnSelect;
   // todo
   constructor() {
-    u(this);
+    C(this);
   }
   setExpandedGuid = (t) => this.expandedGuid = t;
   setSelectedGuid = (t) => this.selectedGuid = t;
@@ -57,7 +57,7 @@ class S {
 class G {
   globalStore;
   uiStore;
-  api = new y("/", "");
+  api = new u("/", "");
   categories = [];
   dateRangeCategoryTotals = [];
   monthlyCategoryTotals = [];
@@ -65,17 +65,17 @@ class G {
   isLoadingCategoryTotals = !1;
   monthlyTotalsLoaded = !1;
   constructor(t) {
-    this.globalStore = t, this.uiStore = new S(), this.api = new y(t.endpoint, t.sessionToken, t.onError), u(this);
+    this.globalStore = t, this.uiStore = new w(), this.api = new u(t.endpoint, t.sessionToken, t.onError), C(this);
   }
   get detailedCategories() {
-    return T(
+    return m(
       this.categories,
       this.dateRangeCategoryTotals,
       this.monthlyCategoryTotals
     );
   }
   get detailedCategoriesWithTransactions() {
-    return m(
+    return p(
       this.detailedCategories,
       this.globalStore.transactionStore.sortedTransactions
     );
@@ -85,12 +85,15 @@ class G {
   }
   get spendCategories() {
     return this.detailedCategories.filter(
-      (t) => !t.is_income && !t.isTransfer && t.guid !== f.INVESTMENTS
+      (t) => !t.is_income && !t.isTransfer && t.guid !== g.INVESTMENTS
     );
   }
   get transferCategories() {
     return this.detailedCategories.filter((t) => t.isTransfer);
   }
+  get trendsCategories() {
+    return this.detailedCategories.filter((t) => t.monthlyAmounts.some((e) => e.amount > 0)).filter((t) => t.guid !== g.INVESTMENTS && t.guid !== g.TRANSFER);
+  }
   addCategory = async (t, e) => {
     const o = { name: t, parent_guid: e };
     try {
@@ -128,7 +131,7 @@ class G {
     }
   };
   loadMonthlyCategoryTotals = async (t = this.globalStore.globalUiStore.selectedAccounts, e, o) => {
-    const a = r(h(e ?? g(/* @__PURE__ */ new Date(), 11))), s = r(d(o ?? /* @__PURE__ */ new Date()));
+    const a = r(d(e ?? h(/* @__PURE__ */ new Date(), 11))), s = r(y(o ?? /* @__PURE__ */ new Date()));
     try {
       const n = await this.api.getMonthlyCategoryTotals(a, s, t);
       l(() => {
@@ -146,8 +149,8 @@ class G {
         r(o),
         t
       ), s = await this.api.getMonthlyCategoryTotals(
-        r(h(g(o, 11))),
-        r(d(o)),
+        r(d(h(o, 11))),
+        r(y(o)),
         t
       );
       l(() => {
@@ -175,9 +178,9 @@ class G {
     }
   };
   // TODO: Remove this after refactoring Trends components to use detailedCategories
-  getCategoryName = (t) => this.categories.find((o) => o.guid === t)?.name ?? w[t];
+  getCategoryName = (t) => this.categories.find((o) => o.guid === t)?.name ?? S[t];
 }
 export {
   G as C,
-  y as a
+  u as a
 };

package/dist/SpendingData-DQ1b9uqq.mjs

@@ -0,0 +1,53 @@
+import { addMonths as u } from "date-fns/addMonths";
+import { isBefore as d } from "date-fns/isBefore";
+import { startOfMonth as _ } from "date-fns/startOfMonth";
+import { subMonths as y } from "date-fns/subMonths";
+import { endOfMonth as M } from "date-fns/endOfMonth";
+import { b as a, P as l } from "./Category-CevNQ03n.mjs";
+import { f as m, a as T } from "./Dialog-BPTr3qHE.mjs";
+const i = (e) => (e.top_level_category_guid === a.INCOME || e.category_guid === a.INCOME) && !h(e), C = (e) => !i(e) && !f(e), p = (e) => l.includes(e.top_level_category_guid) || l.includes(e.category_guid), f = (e) => e.top_level_category_guid === a.TRANSFER || e.category_guid === a.TRANSFER, h = (e) => e.top_level_category_guid === a.INVESTMENTS || e.category_guid === a.INVESTMENTS, N = (e) => !i(e) && !p(e) && !f(e) && !h(e), w = (e) => e.filter((r) => r.category_guid === r.top_level_category_guid), F = (e, r) => {
+  if (r === 0) return 0;
+  const o = (e - r) / r;
+  return isNaN(o) ? 0 : o;
+}, g = (e, r) => {
+  const o = [];
+  let t = _(r?.start ?? y(/* @__PURE__ */ new Date(), 5));
+  const s = r?.end ?? /* @__PURE__ */ new Date();
+  for (; d(t, s); )
+    o.push({
+      x: m(t, T.MONTH_SHORT),
+      y: e.filter((n) => n.year === t.getFullYear() && n.month === t.getMonth() + 1).reduce((n, c) => n + c.total, 0)
+    }), t = u(t, 1);
+  return o;
+}, b = (e, r) => {
+  const o = e.filter(i);
+  return g(o, r).map((t) => ({ ...t, y: Math.abs(t.y) }));
+}, A = (e, r) => {
+  const o = e.filter(p);
+  return g(o, r).map((t) => ({ ...t, y: Math.abs(t.y) }));
+}, x = (e, r) => {
+  const o = e.filter(N);
+  return g(o, r);
+}, H = (e) => {
+  const r = [], o = e.filter(
+    (n) => n.top_level_category_guid !== a.INCOME && n.top_level_category_guid !== a.TRANSFER && n.total > 0
+  );
+  let t = _(y(/* @__PURE__ */ new Date(), 5));
+  const s = M(/* @__PURE__ */ new Date());
+  for (; d(t, s); )
+    r.push({
+      x: m(t, T.MONTH_SHORT),
+      y: o.filter((n) => n.year === t.getFullYear() && n.month === t.getMonth() + 1).reduce((n, c) => n + c.total, 0)
+    }), t = u(t, 1);
+  return r;
+};
+export {
+  A as a,
+  x as b,
+  w as c,
+  i as d,
+  H as e,
+  F as f,
+  b as g,
+  C as i
+};

package/dist/TrendsStore-yO7qYv97.mjs

@@ -0,0 +1,186 @@
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import x from "react";
+import S from "@mui/material/ListItem";
+import R from "@mui/material/ListItemButton";
+import D from "@mui/material/ListItemIcon";
+import A from "@mui/material/ListItemText";
+import h from "@mui/material/Stack";
+import { Text as b } from "@mxenabled/mxui";
+import { makeAutoObservable as N } from "mobx";
+import { addSeconds as v } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as w } from "date-fns/differenceInCalendarMonths";
+import { endOfMonth as _ } from "date-fns/endOfMonth";
+import { subMonths as I } from "date-fns/subMonths";
+import { b as E, C, c as f } from "./Category-CevNQ03n.mjs";
+import { f as L, a as M } from "./Dialog-BPTr3qHE.mjs";
+const rt = ({
+  onClick: e,
+  leftIcon: t,
+  rightIcon: o,
+  title: r,
+  subtitle: n,
+  rightContent: a,
+  titleBold: i = !0,
+  rightContentBold: c = !0
+}) => {
+  const g = /* @__PURE__ */ u(x.Fragment, { children: [
+    t && /* @__PURE__ */ l(D, { sx: { ml: 0 }, children: t }),
+    /* @__PURE__ */ l(A, { children: /* @__PURE__ */ u(
+      h,
+      {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          marginLeft: 12
+        },
+        children: [
+          /* @__PURE__ */ u(h, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ l(b, { bold: i, variant: "body1", children: r }),
+            n && /* @__PURE__ */ l(b, { variant: "caption", children: n })
+          ] }),
+          /* @__PURE__ */ u(h, { sx: { flexDirection: "row", alignItems: "center", gap: 1 }, children: [
+            a && /* @__PURE__ */ l(b, { bold: c, display: "flex", variant: "body1", children: a }),
+            o && /* @__PURE__ */ l(D, { children: o })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ l(S, { sx: { bgcolor: "background.paper" }, children: e ? /* @__PURE__ */ l(
+    R,
+    {
+      onClick: e,
+      sx: {
+        py: 14
+      },
+      children: g
+    }
+  ) : /* @__PURE__ */ l(
+    h,
+    {
+      sx: {
+        py: 14,
+        px: 24,
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      children: g
+    }
+  ) });
+}, O = (e) => C[e] ?? C.default, W = (e) => f[e];
+function F(e, t) {
+  const o = [], r = new Date(e);
+  for (; r <= t; ) {
+    const n = r.getFullYear(), a = String(r.getMonth() + 1).padStart(2, "0");
+    o.push(+`${n}${a}`), r.setMonth(r.getMonth() + 1);
+  }
+  return o;
+}
+const G = (e) => e.reduce((t, o) => {
+  const r = {
+    top_level_category_guid: o.top_level_category_guid,
+    category_guid: o.category_guid,
+    amount: o.total,
+    year_month: o.year_month
+  }, { top_level_category_guid: n, category_guid: a } = r;
+  return t[a] || (t[a] = []), t[a].push(r), n !== a && (t[n] || (t[n] = []), t[n].push(r)), t;
+}, {}), at = (e, t, o) => {
+  const r = G(e), n = F(t, o);
+  return Object.entries(r).map(([a, i]) => {
+    const c = i[0].top_level_category_guid, g = n.map((m) => {
+      const s = i.filter((y) => y.year_month === m).reduce((y, T) => y + Math.abs(T.amount), 0), d = Number(String(m).slice(0, 4)), p = Number(String(m).slice(4));
+      return { x: new Date(d, p - 1), y: s };
+    }).sort((m, s) => m.x.getTime() - s.x.getTime());
+    return {
+      top_level_category_guid: c,
+      category_guid: a,
+      category_name: W(a),
+      category_color: O(c),
+      dataset: g
+    };
+  });
+}, nt = (e, t) => {
+  const o = typeof e == "string" ? parseFloat(e.replace(/[^0-9.-]+/g, "")) : e, r = typeof t == "string" ? parseFloat(t.replace(/[^0-9.-]+/g, "")) : t;
+  return (o || 0) - (r || 0);
+}, st = (e, t) => {
+  const o = f[e] || "", r = f[t] || "";
+  return o.localeCompare(r);
+}, $ = (e, t) => {
+  const o = e.subCategories.filter((a) => a.currentAmount !== 0), r = e.totalMonthlyAmounts.slice(-t), n = (a) => a.substring(0, 3) + " " + a.slice(-4);
+  return r.map((a) => {
+    const i = n(a.label), c = o.map((s) => {
+      const d = s.monthlyAmounts.slice(-t).find((p) => n(p.label) === i);
+      return {
+        label: s.name,
+        amount: Math.abs(d?.amount || 0),
+        header: i
+      };
+    }), g = e.monthlyAmounts.slice(-t).find((s) => n(s.label) === i);
+    return [{
+      label: e.name,
+      amount: Math.abs(g?.amount || 0),
+      header: i
+    }, ...c].sort((s, d) => d.amount - s.amount);
+  });
+}, j = (e, t) => {
+  const o = e ? e.totalMonthlyAmounts.slice(-t).map((n) => ({
+    x: n.label.substring(0, 3),
+    y: Math.abs(n.amount)
+  })) : [], r = e ? $(e, t) : [];
+  return { monthlyAmounts: o, tooltipLabels: r };
+}, k = (e) => e.slice().filter(
+  (t) => t.totalAmount !== 0 && !t.isTransfer && t.guid !== E.INVESTMENTS
+).sort((t, o) => Math.abs(o.totalAmount) - Math.abs(t.totalAmount));
+class it {
+  globalStore;
+  selectedCategoryData = null;
+  selectedDateRange;
+  visibleListLength = 5;
+  constructor(t) {
+    this.globalStore = t, this.selectedDateRange = {
+      start: v(_(I(/* @__PURE__ */ new Date(), 6)), 1),
+      end: _(/* @__PURE__ */ new Date())
+    }, N(this);
+  }
+  setSelectedCategoryData = (t) => {
+    this.selectedCategoryData = t;
+  };
+  setSelectedDateRange = (t) => {
+    this.selectedDateRange = t;
+  };
+  setVisibleListLength = (t) => {
+    this.visibleListLength = t;
+  };
+  get sortedDetailedCategoriesWithTransactions() {
+    return k(
+      this.globalStore.categoryStore.detailedCategoriesWithTransactions
+    );
+  }
+  get selectedDateRangeMonthCount() {
+    return w(this.selectedDateRange.end, this.selectedDateRange.start) + 1;
+  }
+  get selectedDateRangeMonthRange() {
+    const t = L(this.selectedDateRange.start, M.MONTH_LONG), o = L(this.selectedDateRange.end, M.MONTH_LONG);
+    return `${t} - ${o}`;
+  }
+  get visibleCategories() {
+    return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength);
+  }
+  get collapsedCategories() {
+    return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength);
+  }
+  get categoryDetailsChartData() {
+    return j(
+      this.selectedCategoryData,
+      this.selectedDateRangeMonthCount
+    );
+  }
+}
+export {
+  rt as L,
+  it as T,
+  nt as a,
+  st as c,
+  at as g
+};

package/dist/accounts/index.es.js

@@ -10,7 +10,7 @@ import { Text as g } from "@mxenabled/mxui";
 import { useTheme as Q } from "@mui/material/styles";
 import { u as U, A as X } from "../AccountDetailsHeader-BkG3MNYo.mjs";
 import { L as e1 } from "../LineChart-BQRxZF3p.mjs";
-import { g as t1, a as n1, b as l1 } from "../SpendingData-BuJ03S9d.mjs";
+import { g as t1, a as n1, b as l1 } from "../SpendingData-DQ1b9uqq.mjs";
 import { m as i1, u as M, b as S, d as W, g as P, a as o1 } from "../hooks-ZMp65DFz.mjs";
 import { A as I, l as G, m as C1 } from "../ConnectDrawer-BkvlItWx.mjs";
 import { F as C3, M as d3 } from "../ConnectDrawer-BkvlItWx.mjs";

package/dist/categories/index.es.js

@@ -1,5 +1,5 @@
 import { b as o, C as a, a as t, u as C } from "../CategorySelectorDrawer-B-I3kajA.mjs";
-import { C as g } from "../CategoryStore-U7hOZAbP.mjs";
+import { C as g } from "../CategoryStore-gILjk6Jj.mjs";
 export {
   o as CategoryRow,
   a as CategorySelector,

package/dist/categories/stores/CategoryStore.d.ts

@@ -16,6 +16,7 @@ export declare class CategoryStore {
     get incomeCategories(): DetailedCategory[];
     get spendCategories(): DetailedCategory[];
     get transferCategories(): DetailedCategory[];
+    get trendsCategories(): DetailedCategory[];
     addCategory: (name: string, parentGuid: string) => Promise<void>;
     loadCategories: (categoriesOverride?: Category[]) => Promise<void>;
     loadDateRangeCategoryTotals: (accounts: Account[], startDate: Date, endDate: Date) => Promise<void>;

package/dist/common/index.es.js

@@ -2,8 +2,8 @@ import { G as $ } from "../useCombineEvents-CRwX-qWE.mjs";
 import { A as rs, a as os, u as as, b as ns } from "../useCombineEvents-CRwX-qWE.mjs";
 import { F as S, A as h } from "../Fetch-DecPFeGU.mjs";
 import { B as cs } from "../BeatApi-De2IaqH2.mjs";
-import { C as et } from "../CategoryStore-U7hOZAbP.mjs";
-import { a as ls } from "../CategoryStore-U7hOZAbP.mjs";
+import { C as et } from "../CategoryStore-gILjk6Jj.mjs";
+import { a as ls } from "../CategoryStore-gILjk6Jj.mjs";
 import { N as st } from "../NotificationStore-CDX_kqHa.mjs";
 import { a as hs } from "../NotificationStore-CDX_kqHa.mjs";
 import { T as rt } from "../User-Cnlegl1N.mjs";
@@ -30,8 +30,8 @@ import { C as mr, G as _r, M as fr, T as yr } from "../GoalStore-1P19goZ7.mjs";
 import { C as br } from "../CurrencyText-Dr0EZ7bp.mjs";
 import { E as xr } from "../EmptyState-DoxNUae-.mjs";
 import { L as vr } from "../ListItemAction-BxTkF6Tz.mjs";
-import { T as ct } from "../TrendsStore-BW9FGQeE.mjs";
-import { L as Ar } from "../TrendsStore-BW9FGQeE.mjs";
+import { T as ct } from "../TrendsStore-yO7qYv97.mjs";
+import { L as Ar } from "../TrendsStore-yO7qYv97.mjs";
 import { A as Tr, B as Br, I as Ir, N as Nr, T as Mr, a as $r } from "../ToggleListItem-ciFTiqRS.mjs";
 import { jsxs as y, jsx as n } from "react/jsx-runtime";
 import dt, { useRef as lt, useEffect as ut } from "react";

package/dist/microinsights/index.es.js

@@ -59,7 +59,7 @@ const k = {
               }
             ),
             /* @__PURE__ */ r(t, { sx: { gap: 6 }, children: [
-              /* @__PURE__ */ e(t, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: /* @__PURE__ */ e(i, { bold: !0, sx: { lineHeight: 16 }, variant: "body1", children: b }) }),
+              /* @__PURE__ */ e(t, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: /* @__PURE__ */ e(i, { bold: !0, sx: { lineHeight: "16px" }, variant: "body1", children: b }) }),
               /* @__PURE__ */ e(
                 M,
                 {

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

@@ -1,9 +1,7 @@
 import { default as React } from 'react';
-import { MonthlyCategoryTotals } from '../../common';
 interface TrendsTableProps {
     sx?: any;
     height?: number | string;
-    monthlyCategoryTotals: MonthlyCategoryTotals[];
     selectedDateRange: {
         start: Date;
         end: Date;