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

package/dist/investments/components/Allocation/InvestementAllocationList/index.es.js

@@ -0,0 +1,126 @@
+import { jsxs as e, jsx as o, Fragment as w } from "react/jsx-runtime";
+import S from "react";
+import _ from "@mui/material/Box";
+import D from "@mui/material/Collapse";
+import p from "@mui/material/Divider";
+import h from "@mui/material/List";
+import g from "@mui/material/ListItem";
+import L from "@mui/material/ListItemButton";
+import s from "@mui/material/Stack";
+import j from "@mui/material/ToggleButton";
+import k from "@mui/material/ToggleButtonGroup";
+import { Text as i } from "@mxenabled/mxui";
+import { EmptyStateFooterComponent as A } from "../../EmptyStateFooterComponent/index.es.js";
+import { currencyDisplay as c, percentageDisplay as u } from "../util/createInvestementsAllocationData/index.es.js";
+import { useScreenSize as x } from "../../../../common/hooks/useScreenSize/index.es.js";
+import { useGlobalCopyStore as E } from "../../../../common/context/hooks/index.es.js";
+const U = ({
+  data: d,
+  onSelected: f,
+  selectedId: n,
+  selectedTabs: l,
+  setSelectedTabs: y
+}) => {
+  const b = (r, t) => {
+    t !== null && y(t);
+  }, { isMobile: v } = x(), {
+    investments: { allocation: a }
+  } = E(), C = [
+    { label: a.tabs_label_dollar, value: 0 },
+    { label: a.tabs_label_percent, value: 1 }
+  ], m = !d?.investmentsData.length, { isSmallMobile: B } = x();
+  return /* @__PURE__ */ e(s, { sx: { mt: 15, gap: 12, width: v ? 250 : 412 }, children: [
+    /* @__PURE__ */ o(
+      k,
+      {
+        exclusive: !0,
+        fullWidth: !0,
+        onChange: b,
+        value: m ? -1 : l,
+        children: C.map(({ label: r, value: t }) => /* @__PURE__ */ o(j, { color: "primary", value: t, children: /* @__PURE__ */ o(i, { bold: !0, textTransform: "capitalize", variant: "Body", children: r }) }, r))
+      }
+    ),
+    /* @__PURE__ */ o(h, { sx: { px: 12 }, children: d.investmentsData.map((r) => /* @__PURE__ */ e(S.Fragment, { children: [
+      /* @__PURE__ */ o(
+        g,
+        {
+          disableGutters: !0,
+          disablePadding: !0,
+          sx: {
+            minHeight: 44
+          },
+          children: /* @__PURE__ */ e(
+            L,
+            {
+              "aria-expanded": n === r.guid,
+              onClick: () => f(r.guid),
+              sx: { minHeight: 44, px: 12, py: 0 },
+              children: [
+                /* @__PURE__ */ o(
+                  _,
+                  {
+                    borderRadius: 4,
+                    flexShrink: 0,
+                    height: 8,
+                    sx: { backgroundColor: r.color, mr: 8 },
+                    width: 8
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    alignItems: "center",
+                    direction: "row",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    children: [
+                      /* @__PURE__ */ o(i, { bold: n === r.guid, children: r.displayName }),
+                      /* @__PURE__ */ o(i, { bold: n === r.guid, variant: "Body", children: l === 0 ? c(r.value) : u(r.percentage) })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ o(p, {}),
+      r.holdings && r.holdings.length > 0 && /* @__PURE__ */ o(D, { in: n === r.guid, unmountOnExit: !0, children: /* @__PURE__ */ e(h, { children: [
+        r?.holdings?.map((t) => /* @__PURE__ */ o(
+          g,
+          {
+            sx: {
+              pl: 24,
+              pr: 8,
+              py: 0
+            },
+            children: /* @__PURE__ */ e(s, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+              /* @__PURE__ */ e(i, { children: [
+                t.displayName,
+                " "
+              ] }),
+              /* @__PURE__ */ o(i, { children: l === 0 ? c(t.value) : u(t.percentage) })
+            ] })
+          },
+          t.displayName
+        )),
+        /* @__PURE__ */ o(p, {})
+      ] }) })
+    ] }, r.guid)) }),
+    m ? /* @__PURE__ */ e(w, { children: [
+      /* @__PURE__ */ o(i, { sx: { color: "secondary.main", p: 8, textAlign: "center" }, children: a.empty_data }),
+      /* @__PURE__ */ o(p, { sx: { borderColor: "border.light" } }),
+      /* @__PURE__ */ o(
+        A,
+        {
+          sx: {
+            ".inner-container": { width: B ? "100%" : 364 }
+          }
+        }
+      )
+    ] }) : l === 0 && /* @__PURE__ */ o(i, { bold: !0, sx: { textAlign: "right", pr: 24 }, children: `${a.total_label_text} ${c(d.totalAmount)}` })
+  ] });
+};
+export {
+  U as InvestementAllocationList
+};

package/dist/investments/components/Allocation/InvestmentsAllocationChart/index.es.js

@@ -0,0 +1,67 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import m from "react";
+import r from "@mui/material/Stack";
+import L from "@mui/material/styles/useTheme";
+import { Text as p, H1 as j } from "@mxenabled/mxui";
+import { Icon as I } from "@mxenabled/mx-icons";
+import { currencyDisplay as u, percentageDisplay as M } from "../util/createInvestementsAllocationData/index.es.js";
+import b from "../../../../common/components/charts/Donut/index.es.js";
+import { useGlobalCopyStore as w } from "../../../../common/context/hooks/index.es.js";
+const V = ({
+  data: t,
+  hoveredId: g,
+  isPercentage: h,
+  onMouseEnter: f,
+  onMouseLeave: y,
+  onSelected: d,
+  selectedId: o,
+  size: i = 150,
+  totalLabel: x
+}) => {
+  const s = L(), l = s.palette.mode === "dark", n = m.useMemo(
+    () => o ? t.investmentsData.find(({ guid: G }) => G === o) : void 0,
+    [o]
+  ), {
+    investments: { allocation: D }
+  } = w(), C = m.useMemo(() => t.donutData.length > 0 ? t.donutData : [{ id: "0", color: s.palette.border.light, value: 100 }], [t, s]), v = l ? "#0AC295" : "#09A57F", _ = l ? "grey.300" : "grey.700", k = () => n ? D.pie_chart_centered_click_for_details : h ? M(t.totalGainLossPercentage) : u(t.totalGainLoss), a = t.totalGainLoss >= 0 ? v : _;
+  return /* @__PURE__ */ e(
+    b,
+    {
+      data: C,
+      hoveredId: g,
+      onClick: d,
+      onMouseEnter: f,
+      onMouseLeave: y,
+      selectedId: o,
+      size: i,
+      children: /* @__PURE__ */ e(r, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ e(r, { alignItems: "center", justifyContent: "center", minHeight: i, minWidth: i, children: /* @__PURE__ */ c(r, { alignItems: "center", sx: { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } }, children: [
+        /* @__PURE__ */ e(p, { color: "text.secondary", noWrap: !0, children: n?.displayName ?? x }),
+        /* @__PURE__ */ e(j, { color: "text.primary", children: u(n?.value ?? t.totalMarketValue) }),
+        /* @__PURE__ */ c(r, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+          !n && /* @__PURE__ */ e(
+            I,
+            {
+              name: t.totalGainLoss >= 0 ? "trending_up" : "trending_down",
+              size: 20,
+              sx: { color: a }
+            }
+          ),
+          /* @__PURE__ */ e(
+            p,
+            {
+              sx: {
+                color: a,
+                fontWeight: 700
+              },
+              variant: "Small",
+              children: k()
+            }
+          )
+        ] })
+      ] }) }) })
+    }
+  );
+};
+export {
+  V as InvestementsAllocationChart
+};

package/dist/investments/components/Allocation/index.es.js

@@ -0,0 +1,67 @@
+import { jsxs as b, jsx as m } from "react/jsx-runtime";
+import s from "react";
+import x from "@mui/material/Stack";
+import A from "@mui/material/useMediaQuery";
+import { observer as I } from "mobx-react-lite";
+import { InvestementAllocationList as g } from "../allocation/InvestementAllocationList/index.es.js";
+import { InvestementsAllocationChart as h } from "../allocation/InvestmentsAllocationChart/index.es.js";
+import { createInvestmentsAllocationData as y } from "../allocation/util/createInvestementsAllocationData/index.es.js";
+import { useGlobalUiStore as H, useHoldingStore as M, useAccountStore as j, useGlobalCopyStore as w } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as C } from "../../../common/hooks/useScreenSize/index.es.js";
+const D = () => {
+  const [n, d] = s.useState(0), [t, c] = s.useState(""), [u, o] = s.useState(""), i = (e) => {
+    t !== e ? c(e) : (c(""), o(""));
+  }, { selectedAccountGuids: f } = H(), { visibleHoldings: p } = M(), { visibleInvestmentAccounts: S } = j(), {
+    investments: { allocation: r }
+  } = w(), l = y(
+    S.filter(({ guid: e }) => f.includes(e)),
+    r,
+    p
+  ), { isMobile: v } = C(), a = A("(max-width:768px)");
+  return /* @__PURE__ */ b(
+    x,
+    {
+      alignItems: a ? "center" : "flex-start",
+      direction: a ? "column" : "row",
+      gap: { xs: 16, md: 64, xl: 100 },
+      sx: {
+        justifyContent: "center",
+        mt: 50,
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ m(
+          h,
+          {
+            data: l,
+            hoveredId: u,
+            isPercentage: n === 1,
+            onMouseEnter: (e) => {
+              t === e ? o("") : t || o(e);
+            },
+            onMouseLeave: () => {
+              o("");
+            },
+            onSelected: i,
+            selectedId: t,
+            size: v ? 280 : 400,
+            totalLabel: r.pie_chart_centered_text
+          }
+        ),
+        /* @__PURE__ */ m(
+          g,
+          {
+            data: l,
+            onSelected: i,
+            selectedId: t,
+            selectedTabs: n,
+            setSelectedTabs: d
+          }
+        )
+      ]
+    }
+  );
+}, U = I(D);
+export {
+  U as default
+};

package/dist/investments/components/Allocation/util/createInvestementsAllocationData/index.es.js

@@ -0,0 +1,134 @@
+import { formatPercentage as L, formatCurrency as v } from "../../../../../common/utils/NumberFormatting/index.es.js";
+const y = {
+  allocations_cash: "#AEDCCC",
+  allocations_convertible: "#80CAD0",
+  allocations_foreign_bond: "#51B9D4",
+  allocations_foreign_stock: "#3DA0C9",
+  allocations_other: "#3583B8",
+  allocations_preferred: "#2D66A7",
+  allocations_unknown: "#161D6A",
+  allocations_us_bond: "#254995",
+  allocations_us_stock: "#1E2D84"
+}, C = [
+  {
+    name: "allocations_cash"
+  },
+  {
+    name: "allocations_convertible"
+  },
+  {
+    name: "allocations_foreign_bond"
+  },
+  {
+    name: "allocations_foreign_stock"
+  },
+  {
+    name: "allocations_other"
+  },
+  {
+    name: "allocations_preferred"
+  },
+  {
+    name: "allocations_us_bond"
+  },
+  {
+    name: "allocations_us_stock"
+  },
+  {
+    name: "allocations_unknown"
+  }
+], h = (t, l, r) => {
+  const c = l, e = r;
+  return t >= Math.min(c, e) && t < Math.max(c, e);
+}, V = (t, l, r) => {
+  const c = [
+    ...new Set(t.map((i) => i.name.toLowerCase()))
+  ];
+  let e;
+  return c.map((i) => {
+    const m = t.reduce((o, u) => {
+      const d = u.name;
+      return d.toLowerCase() === i ? (e = d, b(u) * u[l] / 100 + o) : o;
+    }, 0);
+    return {
+      displayName: e,
+      name: e,
+      value: m,
+      percentage: m / r
+    };
+  });
+}, b = (t) => t.calculated_market_value ? t.calculated_market_value : t.market_value, w = (t, l, r) => {
+  const c = Object.values(l.allocations_list), e = [];
+  let p = 0;
+  const i = t.map(({ guid: a }) => a), m = r.filter(({ account_guid: a }) => i.includes(a)).map((a) => ({
+    ...a,
+    name: a.symbol || a.description,
+    gainLoss: a.cost_basis || a.cost_basis === 0 ? b(a) - a.cost_basis : 0
+  })), { cashBalance: o, totalAccountBalance: u } = t.reduce(
+    (a, n) => ({
+      cashBalance: a.cashBalance + (n.cash_balance || 0),
+      totalAccountBalance: a.totalAccountBalance + (n.balance || 0)
+    }),
+    { cashBalance: 0, totalAccountBalance: 0 }
+  ), { marketValue: d, totalGainLoss: A } = m.reduce(
+    (a, n) => ({
+      marketValue: a.marketValue + b(n),
+      totalGainLoss: a.totalGainLoss + n.gainLoss
+    }),
+    { marketValue: 0, totalGainLoss: 0 }
+  ), g = d + o;
+  C.forEach((a, n) => {
+    const f = m.filter(
+      (_) => !!_[a.name]
+    );
+    let s = f.reduce(
+      (_, k) => _ + b(k) * k[a.name] / 100,
+      0
+    );
+    const D = V(
+      f,
+      a.name,
+      s
+    );
+    if (a.name === "allocations_cash" && o > 0) {
+      s += o;
+      const _ = {
+        displayName: l.cash_balance_display_name,
+        name: "allocations_name",
+        value: o,
+        percentage: o / g
+      };
+      D.push(_);
+    }
+    s > 0 && (e.push({
+      name: a.name,
+      displayName: c[n],
+      guid: `${a.name}-${n}`,
+      holdings: D,
+      percentage: s / g,
+      value: s,
+      color: y[a.name]
+    }), p += s);
+  });
+  const B = e.map(
+    ({ displayName: a, guid: n, color: f, value: s }) => ({
+      id: n,
+      color: f,
+      label: a,
+      value: s / p * 100
+    })
+  );
+  return {
+    investmentsData: e,
+    donutData: B,
+    totalAmount: p,
+    totalGainLoss: A,
+    totalMarketValue: g,
+    totalGainLossPercentage: A / u
+  };
+}, T = (t) => t < 1e-3 ? "< 0.1%" : L(t), E = (t) => t === 0 ? v(t, "0,0.00") : h(t, -0.01, 0.01) ? "< $0.01" : v(t, "0,0.00");
+export {
+  w as createInvestmentsAllocationData,
+  E as currencyDisplay,
+  T as percentageDisplay
+};

package/dist/investments/components/Analysis/index.es.js

@@ -0,0 +1,169 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import T from "react";
+import { observer as A } from "mobx-react-lite";
+import r from "@mui/material/Stack";
+import { useTheme as M } from "@mui/material/styles";
+import B from "@mui/material/useMediaQuery";
+import { P as L, Text as l } from "@mxenabled/mxui";
+import { AnalysisType as g } from "../../constants/index/index.es.js";
+import O from "../AnalysisDetails/index.es.js";
+import V from "../InfoToolTip/index.es.js";
+import { useGlobalCopyStore as q, useHoldingStore as H } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as z } from "../../../common/hooks/useScreenSize/index.es.js";
+const F = () => {
+  const {
+    investments: { analysis: t }
+  } = q(), { analysisChartData: v, analysisDetails: D, analysisType: n, setAnalysisType: S } = H(), R = B("(min-width:320px) and (max-width:375px)"), { isMobile: o } = z(), j = M().palette.mode === "dark", { cellDimension: p, columns: k, rows: C, textVariant: c } = T.useMemo(() => {
+    const i = n === g.Stocks, s = Object.values(i ? t.stock_column_labels : t.bond_column_labels), y = Object.values(i ? t.stock_row_labels : t.bond_row_labels);
+    return { cellDimension: o ? 72 : 100, columns: s, rows: y, textVariant: o ? "XSmall" : "Body" };
+  }, [t, o, n]);
+  return /* @__PURE__ */ a(
+    r,
+    {
+      sx: {
+        flexDirection: { md: "row" },
+        gap: o ? 48 : 64,
+        justifyContent: "center",
+        pt: 48,
+        px: 16
+      },
+      children: [
+        /* @__PURE__ */ a(
+          r,
+          {
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              justifyContent: "center",
+              pr: { lg: 72 }
+            },
+            children: [
+              /* @__PURE__ */ a(
+                r,
+                {
+                  sx: {
+                    alignItems: "center",
+                    bottom: o ? 10 : 24,
+                    gap: o ? 0 : 24,
+                    position: "relative",
+                    transform: "rotate(-180deg)",
+                    writingMode: "vertical-rl"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(L, { bold: !0, color: "secondary.main", variant: c, children: n === g.Stocks ? t.market_capitalization : t.credit_quality }),
+                    /* @__PURE__ */ e(
+                      r,
+                      {
+                        sx: {
+                          flexDirection: "row",
+                          height: o ? 224 : 308,
+                          justifyContent: "space-around"
+                        },
+                        children: k.map((i) => /* @__PURE__ */ e(
+                          l,
+                          {
+                            sx: {
+                              color: "secondary.main",
+                              pl: 12,
+                              pr: o ? 4 : 0
+                            },
+                            variant: c,
+                            children: i
+                          },
+                          i
+                        ))
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ a(r, { sx: { gap: 4 }, children: [
+                /* @__PURE__ */ a(
+                  r,
+                  {
+                    sx: {
+                      alignSelf: R ? "start" : "center",
+                      flexDirection: "row",
+                      gap: 8,
+                      pb: 12
+                    },
+                    children: [
+                      /* @__PURE__ */ e(l, { bold: !0, children: t.invest_analysis }),
+                      /* @__PURE__ */ e(
+                        V,
+                        {
+                          tooltip_info_body: t.tooltip_info_body,
+                          tooltip_info_title: t.tooltip_info_title
+                        }
+                      )
+                    ]
+                  }
+                ),
+                v.map((i, s, y) => /* @__PURE__ */ e(r, { sx: { flexDirection: "row", gap: 4 }, children: i.map((u, m) => {
+                  const b = s === 0, x = s === y.length - 1, _ = m === 0, w = m === i.length - 1, d = Number(u.replace("%", "")) >= 25;
+                  let h = "grey.200", f = "grey.900";
+                  return j ? (h = d ? "grey.200" : "grey.700", f = d ? "grey.900" : "common.white") : (h = d ? "grey.700" : "grey.200", f = d ? "common.white" : "grey.900"), /* @__PURE__ */ e(
+                    r,
+                    {
+                      sx: {
+                        ...{
+                          borderBottomLeftRadius: x && _ ? 4 : 0,
+                          borderBottomRightRadius: x && w ? 4 : 0,
+                          borderTopLeftRadius: b && _ ? 4 : 0,
+                          borderTopRightRadius: b && w ? 4 : 0
+                        },
+                        alignItems: "center",
+                        bgcolor: h,
+                        height: p,
+                        justifyContent: "center",
+                        width: p
+                      },
+                      children: /* @__PURE__ */ e(
+                        l,
+                        {
+                          sx: {
+                            color: f,
+                            fontWeight: o ? 600 : 700
+                          },
+                          variant: o ? "Body" : "H3",
+                          children: u
+                        }
+                      )
+                    },
+                    m
+                  );
+                }) }, s)),
+                /* @__PURE__ */ e(r, { sx: { alignSelf: "center", flexDirection: "row", pt: 12 }, children: C.map((i) => /* @__PURE__ */ e(r, { sx: { alignItems: "center", width: p }, children: /* @__PURE__ */ e(l, { color: "secondary.main", variant: c, children: i }) }, i)) }),
+                /* @__PURE__ */ e(
+                  l,
+                  {
+                    bold: !0,
+                    sx: { color: "secondary.main", pt: o ? 4 : 24, textAlign: "center" },
+                    variant: c,
+                    children: n === g.Stocks ? t.valuation : t.duration
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          O,
+          {
+            analysisDetails: D,
+            analysisType: n,
+            copy: {
+              empty_data: t.empty_data,
+              equities: t.equities,
+              bonds: t.bonds
+            },
+            setAnalysisType: S
+          }
+        )
+      ]
+    }
+  );
+}, tt = A(F);
+export {
+  tt as default
+};

package/dist/investments/components/AnalysisDetails/index.es.js

@@ -0,0 +1,81 @@
+import { jsxs as n, jsx as t, Fragment as f } from "react/jsx-runtime";
+import u from "react";
+import h from "@mui/material/Divider";
+import g from "@mui/material/List";
+import x from "@mui/material/ListItem";
+import y from "@mui/material/ListItemText";
+import b from "@mui/material/Stack";
+import S from "@mui/material/ToggleButton";
+import T from "@mui/material/ToggleButtonGroup";
+import { Text as l } from "@mxenabled/mxui";
+import { AnalysisType as s } from "../../constants/index/index.es.js";
+import { formatKey as v } from "../../util/InvestmentUtil/index.es.js";
+import { EmptyStateFooterComponent as I } from "../EmptyStateFooterComponent/index.es.js";
+import { useScreenSize as L } from "../../../common/hooks/useScreenSize/index.es.js";
+import { formatCurrency as M } from "../../../common/utils/NumberFormatting/index.es.js";
+const P = ({
+  analysisDetails: e,
+  analysisType: p,
+  copy: i,
+  setAnalysisType: d
+}) => {
+  const { isSmallMobile: a } = L(), m = u.useMemo(() => Object.keys(e).filter((r) => e[r] >= 1).map((r) => ({
+    key: r,
+    value: M(e[r], "0,0"),
+    formattedKey: v(r)
+  })), [e]), c = [
+    { label: i.equities, value: s.Stocks },
+    { label: i.bonds, value: s.Bonds }
+  ];
+  return /* @__PURE__ */ n(b, { sx: { gap: 12, width: { md: 412 } }, children: [
+    /* @__PURE__ */ t(
+      T,
+      {
+        color: "primary",
+        exclusive: !0,
+        onChange: (r, o) => o && d(o),
+        sx: {
+          width: "100%",
+          "& .MuiToggleButton-root": {
+            color: "secondary.main",
+            fontWeight: 600,
+            textTransform: "capitalize"
+          }
+        },
+        value: m.length ? p : -1,
+        children: c.map(({ label: r, value: o }) => /* @__PURE__ */ t(S, { sx: { width: "100%" }, value: o, children: r }, o))
+      }
+    ),
+    m.length ? /* @__PURE__ */ t(
+      g,
+      {
+        sx: {
+          "& .MuiListItemSecondaryAction-root": { pr: 12 },
+          "& .MuiListItem-divider": { borderColor: "border.light" },
+          "& .MuiListItem-root": { minHeight: 44, px: 12 }
+        },
+        children: m.map(({ value: r, formattedKey: o }) => /* @__PURE__ */ t(x, { divider: !0, secondaryAction: /* @__PURE__ */ t(l, { children: r }), children: /* @__PURE__ */ t(
+          y,
+          {
+            primary: o,
+            primaryTypographyProps: { fontStyle: "normal" }
+          }
+        ) }, o))
+      }
+    ) : /* @__PURE__ */ n(f, { children: [
+      /* @__PURE__ */ t(l, { sx: { color: "secondary.main", p: 8, textAlign: "center" }, children: i.empty_data }),
+      /* @__PURE__ */ t(h, { sx: { borderColor: "border.light" } }),
+      /* @__PURE__ */ t(
+        I,
+        {
+          sx: {
+            ".inner-container": { width: a ? "100%" : 364 }
+          }
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  P as default
+};