@mx-cartographer/experiences 6.26.18-alpha.mega2 → 6.26.18-alpha.mega4

package/dist/TrendsStore-Borh98aN.mjs

@@ -0,0 +1,448 @@
+import b, { useState as U, useEffect as q, useRef as xe } from "react";
+import { l as Se, u as be, k as J } from "./hooks-ClhFlg78.mjs";
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import D from "@mui/material/Box";
+import N from "@mui/material/Stack";
+import { useTheme as K } from "@mui/material/styles";
+import { LineChart as Me } from "@mui/x-charts";
+import { u as Q } from "./useScreenSize-B6JyS_Lj.mjs";
+import { u as _e } from "./useDimensions-27p2evRx.mjs";
+import { observer as Le } from "mobx-react-lite";
+import Te from "@mui/material/Card";
+import De from "@mui/material/CardContent";
+import W from "@mui/material/Divider";
+import X from "@mui/material/Grid";
+import { CategoryIcon as Re, Text as R } from "@mxenabled/mxui";
+import { b as Ae } from "./Localization-2MODESHW.mjs";
+import { C as O } from "./CurrencyText-YUhH2caW.mjs";
+import { useTheme as He, Card as ke, CardContent as Ie, Box as Ge } from "@mui/material";
+import { f as M, D as _ } from "./Dialog-CWW597AF.mjs";
+import we from "@mui/material/Button";
+import { a as E } from "./Category-5S6uwuXz.mjs";
+import { f as z } from "./NumberFormatting-CtWHhyBX.mjs";
+import { makeAutoObservable as Be } from "mobx";
+import { endOfMonth as V } from "date-fns/endOfMonth";
+import { subMonths as Ee } from "date-fns/subMonths";
+import { addSeconds as Oe } from "date-fns/addSeconds";
+import { fromUnixTime as Ne } from "date-fns/fromUnixTime";
+import { startOfMonth as $e } from "date-fns/startOfMonth";
+import { addMonths as je } from "date-fns/addMonths";
+import { isBefore as Ye } from "date-fns/isBefore";
+const bt = () => {
+  const { isInitialized: d, appDataStore: t } = Se(), [o, i] = U(!1);
+  return q(() => {
+    d && t.clientInsightProfile?.is_enabled && i(!0);
+  }, [d, t.clientInsightProfile]), o;
+}, Z = ({ categoryGuid: d, topLevelCategoryGuid: t }) => {
+  const { categories: o } = be(), { getCategoryName: i } = J(), n = i(d);
+  return /* @__PURE__ */ y(N, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
+    /* @__PURE__ */ a(
+      D,
+      {
+        "aria-label": Ae(o.category_icon_label_aria, n),
+        mb: 4,
+        role: "img",
+        children: /* @__PURE__ */ a(Re, { categoryGuid: t })
+      }
+    ),
+    /* @__PURE__ */ a(R, { variant: "Body", children: n })
+  ] });
+}, Fe = ({
+  categoryGuids: { guid: d, topLevelGuid: t },
+  hoveredAreaData: o,
+  cursorPosition: i,
+  chartContainerRef: n
+}) => {
+  const c = K(), l = xe(null), [f, g] = U({ x: i.x, y: i.y });
+  if (q(() => {
+    (() => {
+      const m = l.current, C = n.current;
+      if (!m || !C) return;
+      const u = m.getBoundingClientRect(), v = C.getBoundingClientRect();
+      let p = i.x, S = i.y;
+      p + u.width * 2 > v.right ? p = i.x - u.width : p - u.width < v.left && (p = i.x), S + u.height * 2 > v.bottom && (S = i.y - u.height), g({ x: p, y: S });
+    })();
+  }, [i, n]), !o) return null;
+  const L = o.reduce((h, m) => h + m.y, 0);
+  return /* @__PURE__ */ a(
+    Te,
+    {
+      ref: l,
+      sx: {
+        position: "absolute",
+        top: f.y,
+        left: f.x,
+        width: 250,
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ y(De, { children: [
+        /* @__PURE__ */ y(D, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+          /* @__PURE__ */ a(Z, { categoryGuid: d, topLevelCategoryGuid: t }),
+          /* @__PURE__ */ a(R, { variant: "Small", children: `${o.length}-month total` }),
+          /* @__PURE__ */ a(O, { amount: L, bold: !0, formatString: "0,0", variant: "body2" })
+        ] }),
+        /* @__PURE__ */ a(W, { sx: { my: 16, width: "100%" } }),
+        /* @__PURE__ */ a(X, { container: !0, children: o.map((h, m) => /* @__PURE__ */ y(b.Fragment, { children: [
+          m > 0 && m % 3 === 0 && /* @__PURE__ */ a(W, { sx: { my: 16, width: "100%" } }),
+          /* @__PURE__ */ a(X, { item: !0, xs: 4, children: /* @__PURE__ */ y(D, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ a(R, { color: c.palette.text.secondary, variant: "XSmall", children: h.x }),
+            /* @__PURE__ */ a(
+              O,
+              {
+                amount: h.y,
+                bold: !0,
+                formatString: "0,0",
+                variant: "Body"
+              }
+            )
+          ] }) })
+        ] }, m)) })
+      ] })
+    }
+  );
+}, Pe = Le(Fe), We = ({
+  categoryGuids: { guid: d, topLevelGuid: t },
+  itemData: { dataIndex: o },
+  series: i,
+  xData: n
+}) => {
+  const c = He(), l = i.data[o], f = n[o];
+  return l === void 0 || !f ? null : /* @__PURE__ */ a(ke, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ a(Ie, { children: /* @__PURE__ */ y(Ge, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ a(Z, { categoryGuid: d, topLevelCategoryGuid: t }),
+    /* @__PURE__ */ a(R, { color: c.palette.text.secondary, variant: "Small", children: M(f, _.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ a(O, { amount: String(l), bold: !0, formatString: "0,0", variant: "Body" })
+  ] }) }) });
+}, Xe = ({
+  sx: d,
+  categoryGuids: t,
+  hoveredLegend: o,
+  legendRef: i,
+  onHoverLegend: n,
+  onClickLegend: c
+}) => {
+  const { isMobile: l } = Q(), { getCategoryName: f } = J();
+  return /* @__PURE__ */ a(
+    N,
+    {
+      direction: "row",
+      flexWrap: "wrap",
+      gap: l ? 2 : 6,
+      justifyContent: "start",
+      ref: i,
+      sx: d,
+      children: t.map(({ guid: g, top_level_guid: L }) => {
+        const h = o === g, m = E[g], C = E[L], u = m ?? C ?? E.default, v = u + "33";
+        return /* @__PURE__ */ y(
+          we,
+          {
+            onClick: () => c(g),
+            onMouseEnter: () => n(g),
+            onMouseLeave: () => n(null),
+            sx: {
+              color: "text.primary",
+              fontWeight: "normal",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingX: 8,
+              paddingY: 4,
+              borderRadius: 1,
+              opacity: h ? 1 : 0.7
+            },
+            children: [
+              /* @__PURE__ */ a(
+                D,
+                {
+                  sx: {
+                    width: 16,
+                    height: 16,
+                    marginRight: l ? 5 : 10,
+                    borderRadius: "2px",
+                    backgroundColor: o ? h ? u : v : u
+                  }
+                }
+              ),
+              /* @__PURE__ */ a(R, { variant: "Body", children: f(g) })
+            ]
+          },
+          g
+        );
+      })
+    }
+  );
+}, Mt = ({
+  onHoverArea: d,
+  onHoverPoint: t,
+  onHoverLegend: o,
+  onClickLegend: i,
+  stackedDatasets: n,
+  unstackedDatasets: c = [],
+  availableHeight: l = 0,
+  minimumHeight: f = 350
+}) => {
+  const g = K(), { isMobile: L } = Q(), [h, { height: m }] = _e(), C = b.useRef(null), [u, v] = b.useState(0);
+  b.useEffect(() => {
+    const e = Math.max(l - m, f);
+    v(e);
+  }, [l, m]);
+  const [p, S] = b.useState(null), [ee, A] = b.useState({
+    hoveredSeriesId: null,
+    hoveredAreaData: null,
+    isAreaHovered: !1,
+    cursorPos: { x: 0, y: 0 }
+  }), { hoveredSeriesId: T, hoveredAreaData: $, isAreaHovered: te, cursorPos: H } = ee, j = te && T && $, Y = !j, G = [...n, ...c], oe = G[0]?.dataset.length ?? 0, w = G.flatMap((e) => e.dataset.map((r) => r.x)), re = G.flatMap((e) => e.dataset.map((r) => r.y)), ae = n[0]?.dataset?.map(
+    (e, r) => n.reduce((s, x) => s + x.dataset[r]?.y || 0, 0)
+  ) ?? [0], ie = Math.max(...ae), ne = Math.max(
+    ...c.flatMap((e) => e.dataset.map((r) => r.y))
+  ), se = Math.floor(Math.min(...re) / 100) * 100, le = Math.ceil(Math.max(ie, ne) / 100) * 100, k = n.map((e, r) => ({
+    id: `stacked-${r}`,
+    guid: e.category_guid,
+    top_level_guid: e.top_level_category_guid,
+    area: !0,
+    color: n[r].category_color ?? g.palette.primary.main,
+    data: e.dataset.map((s) => s.y),
+    label: n[r].category_name,
+    stack: "total",
+    type: "line",
+    highlightScope: { highlight: "item" },
+    valueFormatter: (s) => z(s, "0,0")
+  })), F = c.map((e, r) => ({
+    id: `unstacked-${r}`,
+    guid: e.category_guid,
+    top_level_guid: e.top_level_category_guid,
+    area: !1,
+    color: e.category_color,
+    data: e.dataset.map((s) => s.y),
+    label: e.category_name,
+    type: "line",
+    valueFormatter: (s) => z(s, "0,0")
+  })), P = [...k, ...F], ce = [
+    ...k.map(({ guid: e, top_level_guid: r }) => ({
+      guid: e,
+      top_level_guid: r
+    })),
+    ...F.map(({ guid: e, top_level_guid: r }) => ({
+      guid: e,
+      top_level_guid: r
+    }))
+  ], I = (e) => {
+    const s = e.startsWith("stacked-") ? n[parseInt(e.split("-")[1])] : c[parseInt(e.split("-")[1])];
+    return {
+      guid: s?.category_guid,
+      topLevelGuid: s?.top_level_category_guid
+    };
+  }, de = (e) => {
+    S(e), o?.(e ?? "");
+  }, me = (e) => {
+    i?.(e ?? "");
+  }, ue = () => {
+    const e = I(String(T)).guid;
+    e && i?.(e);
+  }, ge = (e) => {
+    const r = String(e?.seriesId), s = I(r).guid, x = P.find((B) => B.id === r), fe = x && e?.dataIndex !== void 0, ye = x && e?.dataIndex === void 0;
+    if (fe)
+      A({
+        hoveredSeriesId: r,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: H
+      }), t?.(s);
+    else if (ye) {
+      const B = x?.data.map((Ce, ve) => ({
+        x: w[ve],
+        y: Ce
+      })) ?? [];
+      A({
+        hoveredSeriesId: r,
+        hoveredAreaData: B,
+        isAreaHovered: !0,
+        cursorPos: H
+      }), d?.(s);
+    } else
+      A({
+        hoveredSeriesId: null,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: H
+      });
+  }, he = (e) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    A((s) => ({
+      ...s,
+      cursorPos: {
+        x: e.clientX - r.left,
+        y: e.clientY - r.top
+      }
+    }));
+  }, pe = {
+    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((e, r, s) => {
+      const x = `.MuiAreaElement-series-stacked-${s}`;
+      return e[x] = {
+        opacity: k[s].guid === p ? 0.9 : 0.2
+      }, e;
+    }, {})
+  };
+  return /* @__PURE__ */ a(D, { onMouseMove: he, ref: C, style: { position: "relative" }, children: /* @__PURE__ */ y(
+    N,
+    {
+      direction: { xs: "column", md: "column" },
+      spacing: { xs: 0, md: 4 },
+      sx: { width: "100%", position: "relative" },
+      children: [
+        /* @__PURE__ */ a(
+          Me,
+          {
+            height: u,
+            margin: { bottom: 50 },
+            onAreaClick: ue,
+            onHighlightChange: ge,
+            series: P,
+            skipAnimation: !0,
+            slotProps: {
+              legend: {
+                hidden: !0
+              }
+            },
+            slots: {
+              itemContent: (e) => Y && T ? /* @__PURE__ */ a(
+                We,
+                {
+                  categoryGuids: I(T),
+                  xData: w,
+                  ...e
+                }
+              ) : null
+            },
+            sx: pe,
+            tooltip: {
+              trigger: Y ? "item" : "none"
+            },
+            xAxis: [
+              {
+                data: w,
+                scaleType: "time",
+                valueFormatter: (e) => M(e, _.MONTH_SHORT_YEAR),
+                tickNumber: oe
+                // How many ticks to show on the x-axis
+              }
+            ],
+            yAxis: [
+              {
+                min: se,
+                max: le || 100
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          Xe,
+          {
+            categoryGuids: ce,
+            hoveredLegend: p,
+            legendRef: h,
+            onClickLegend: me,
+            onHoverLegend: de,
+            sx: { px: L ? 0 : 24 }
+          }
+        ),
+        j && /* @__PURE__ */ a(
+          Pe,
+          {
+            categoryGuids: I(T),
+            chartContainerRef: C,
+            cursorPosition: H,
+            hoveredAreaData: $.map((e) => ({
+              ...e,
+              x: M(e.x, _.MONTH_SHORT_YEAR)
+            }))
+          }
+        )
+      ]
+    }
+  ) });
+};
+class _t {
+  globalStore;
+  selectedCategoryData = null;
+  selectedDateRange;
+  visibleListLength = 5;
+  constructor(t) {
+    this.globalStore = t, this.selectedDateRange = {
+      start: Oe(V(Ee(/* @__PURE__ */ new Date(), 6)), 1),
+      end: V(/* @__PURE__ */ new Date())
+    }, Be(this);
+  }
+  setSelectedCategoryData = (t) => {
+    this.selectedCategoryData = t;
+  };
+  setSelectedDateRange = (t) => {
+    this.selectedDateRange = t;
+  };
+  setVisibleListLength = (t) => {
+    this.visibleListLength = t;
+  };
+  sortCategoriesList = () => !this.detailedCategories || this.detailedCategories.length === 0 ? [] : this.detailedCategories.map((t) => ({
+    guid: t.guid,
+    name: t.name,
+    amount: Math.abs(
+      t.monthlyAmounts.reduce((o, i) => o + (i.amount || 0), 0)
+    )
+  })).filter((t) => t.amount !== 0).sort((t, o) => o.amount - t.amount);
+  get detailedCategories() {
+    return this.globalStore.categoryStore.detailedCategories;
+  }
+  get detailedCategoriesWithTransactions() {
+    return this.globalStore.categoryStore.detailedCategoriesWithTransactions;
+  }
+  get selectedDateRangeMonthRange() {
+    const t = M(this.selectedDateRange.start, _.MONTH_LONG), o = M(this.selectedDateRange.end, _.MONTH_LONG);
+    return `${t} - ${o}`;
+  }
+  get sortedCategoriesList() {
+    return this.sortCategoriesList();
+  }
+  get visibleListItems() {
+    return this.sortedCategoriesList.slice(0, this.visibleListLength);
+  }
+  get collapsedListItems() {
+    return this.sortedCategoriesList.slice(this.visibleListLength);
+  }
+  get categoryDetailsChartData() {
+    if (!this.selectedCategoryData?.transactions || this.selectedCategoryData.transactions.length === 0)
+      return [];
+    const t = [];
+    let o = $e(this.selectedDateRange.start);
+    const i = this.selectedDateRange.end;
+    for (; Ye(o, i); ) {
+      const n = this.selectedCategoryData.transactions.filter((c) => {
+        const l = Ne(c.date);
+        return l.getFullYear() === o.getFullYear() && l.getMonth() === o.getMonth();
+      }).reduce((c, l) => c + Math.abs(l.amount), 0);
+      t.push({
+        x: M(o, _.MONTH_SHORT),
+        y: n
+      }), o = je(o, 1);
+    }
+    return [t];
+  }
+}
+export {
+  Mt as S,
+  _t as T,
+  bt as u
+};