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

package/dist/analytics/SurveyMiniWidget/index.es.js

@@ -0,0 +1,101 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import n from "react";
+import { observer as A } from "mobx-react-lite";
+import { SurveyQuestionType as h } from "posthog-js";
+import E from "@mui/material/Alert";
+import L from "@mui/material/Button";
+import r from "@mui/material/Stack";
+import T from "@mui/material/styles/useTheme";
+import { Text as l } from "@mxenabled/mxui";
+import q from "../../common/components/Loader/index.es.js";
+import F from "../../common/components/MiniWidgetContainer/index.es.js";
+import { useEvent as Q, useAnalyticsStore as R, useGlobalCopyStore as W, useGlobalUiStore as $ } from "../../common/context/hooks/index.es.js";
+import j from "../components/RatingScale/index.es.js";
+import z from "../components/OpenTextField/index.es.js";
+const B = () => {
+  const { onEvent: d } = Q(), s = T(), {
+    surveyId: u,
+    question: o,
+    isLastQuestion: a,
+    nextQuestion: b,
+    loadSurvey: x,
+    questionCount: v,
+    response: c,
+    responsePayload: C,
+    resetStore: p,
+    survey: S
+  } = R(), { analytics: t, common: g } = W(), { isCopyLoaded: _, isInitialized: m } = $(), [f, y] = n.useState(!1);
+  n.useEffect(() => {
+    m && x();
+  }, [m]), n.useEffect(() => {
+    d("survey shown", {
+      $survey_id: u
+    });
+  }, [S]);
+  const k = () => {
+    d("survey dismissed", {
+      $survey_id: u
+    }), p(), y(!1);
+  }, M = () => {
+    b();
+  }, w = () => {
+    d("survey sent", C), p(), y(!0);
+  };
+  return _ ? !o && !f ? null : /* @__PURE__ */ i(
+    F,
+    {
+      closeLabel: g.close_aria,
+      onClose: k,
+      sx: {
+        "& .MuiCardHeader-root": {
+          px: 24,
+          pb: 2
+        },
+        "& .MuiCardHeader-subheader": {
+          fontSize: 13
+        },
+        "& .MuiCardContent-root:last-child": {
+          pb: 0
+        }
+      },
+      title: t.your_feedback_matters,
+      children: [
+        /* @__PURE__ */ e(r, { sx: { pb: 8, px: 24 }, children: /* @__PURE__ */ e(l, { truncate: !1, variant: "subtitle2", children: t.let_us_know }) }),
+        o && /* @__PURE__ */ i(n.Fragment, { children: [
+          /* @__PURE__ */ i(r, { sx: { gap: 4, px: 24, py: 16 }, children: [
+            /* @__PURE__ */ e(l, { bold: !0, truncate: !1, children: o.question }),
+            /* @__PURE__ */ e(l, { variant: "XSmall", children: v })
+          ] }),
+          /* @__PURE__ */ i(r, { sx: { gap: 6, px: 24, pb: 8 }, children: [
+            o.type === h.Rating && /* @__PURE__ */ e(j, {}),
+            o.type === h.Open && /* @__PURE__ */ e(z, {})
+          ] }),
+          /* @__PURE__ */ e(r, { sx: { px: 24, py: 16 }, children: /* @__PURE__ */ e(
+            L,
+            {
+              disabled: !a && !c,
+              onClick: a ? w : M,
+              sx: {
+                borderColor: s.palette.border.light,
+                "&:hover": {
+                  // temp hardcoded dark mode color until design team decision
+                  backgroundColor: s.palette.mode === "dark" ? "#0749B240" : s.palette.primary.lighter,
+                  borderColor: s.palette.primary.main
+                }
+              },
+              variant: a && c ? "contained" : "outlined",
+              children: a ? t.submit_feedback : t.continue
+            }
+          ) })
+        ] }),
+        f && /* @__PURE__ */ i(n.Fragment, { children: [
+          /* @__PURE__ */ e(r, { sx: { px: 24, py: 24 }, children: /* @__PURE__ */ e(l, { bold: !0, truncate: !1, children: t.thank_you }) }),
+          /* @__PURE__ */ e(r, { sx: { px: 24, pb: 24 }, children: /* @__PURE__ */ e(E, { severity: "success", variant: "filled", children: t.feedback_sent_successfully }) })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ e(q, {});
+}, te = A(B);
+export {
+  te as default
+};

package/dist/analytics/components/OpenTextField/index.es.js

@@ -0,0 +1,23 @@
+import { jsx as s } from "react/jsx-runtime";
+import { observer as l } from "mobx-react-lite";
+import { TextField as n } from "@mxenabled/mxui";
+import { useAnalyticsStore as p, useGlobalCopyStore as a } from "../../../common/context/hooks/index.es.js";
+const i = () => {
+  const { response: o, setResponse: t } = p(), { analytics: e } = a();
+  return /* @__PURE__ */ s(
+    n,
+    {
+      label: e.feedback,
+      multiline: !0,
+      onChange: (r) => {
+        t(r.target.value);
+      },
+      placeholder: e.improve_experience,
+      rows: 4,
+      value: o
+    }
+  );
+}, f = l(i);
+export {
+  f as default
+};

package/dist/analytics/components/RatingScale/index.es.js

@@ -0,0 +1,68 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import d from "react";
+import { observer as u } from "mobx-react-lite";
+import g from "@mui/material/Stack";
+import h from "@mui/material/ToggleButton";
+import f from "@mui/material/ToggleButtonGroup";
+import y from "@mui/material/styles/useTheme";
+import { Text as n } from "@mxenabled/mxui";
+import { useAnalyticsStore as b, useGlobalCopyStore as x } from "../../../common/context/hooks/index.es.js";
+const v = () => {
+  const { question: i, response: s, setResponse: c } = b(), { analytics: o } = x(), e = y(), l = i, p = (m, t) => {
+    c(t);
+  };
+  return /* @__PURE__ */ a(d.Fragment, { children: [
+    /* @__PURE__ */ r(
+      f,
+      {
+        exclusive: !0,
+        onChange: p,
+        sx: {
+          display: "flex",
+          height: 44,
+          justifyContent: "space-between",
+          width: "100%"
+        },
+        value: s,
+        children: Array.from({ length: l.scale }, (m, t) => /* @__PURE__ */ r(
+          h,
+          {
+            sx: {
+              borderColor: e.palette.border.light,
+              fontWeight: "bold",
+              width: `${100 / l.scale}%`,
+              "&:hover": {
+                backgroundColor: e.palette.background.paper
+              },
+              "&.Mui-selected, &.Mui-selected:hover": {
+                backgroundColor: e.palette.mode === "dark" ? "#0749B240" : e.palette.primary.lighter,
+                border: `1px solid ${e.palette.primary.main}`,
+                color: e.palette.primary.main
+              }
+            },
+            value: t + 1,
+            children: t + 1
+          },
+          t + 1
+        ))
+      }
+    ),
+    /* @__PURE__ */ a(
+      g,
+      {
+        sx: {
+          color: e.palette.secondary.light,
+          flexDirection: "row",
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ r(n, { bold: !0, variant: "XSmall", children: o.strongly_disagree }),
+          /* @__PURE__ */ r(n, { bold: !0, variant: "XSmall", children: o.strongly_agree })
+        ]
+      }
+    )
+  ] });
+}, $ = u(v);
+export {
+  $ as default
+};

package/dist/analytics/index.es.js

@@ -0,0 +1,4 @@
+import { default as r } from "./SurveyMiniWidget/index.es.js";
+export {
+  r as SurveyMiniWidget
+};

package/dist/analytics/stores/AnalyticsStore/index.es.js

@@ -0,0 +1,54 @@
+import { makeAutoObservable as i, runInAction as r } from "mobx";
+import u from "posthog-js";
+class p {
+  globalStore;
+  survey = null;
+  currentQuestionIndex = 0;
+  question = null;
+  response = null;
+  responses = {};
+  constructor(s) {
+    this.globalStore = s, i(this);
+  }
+  get isLastQuestion() {
+    return this.currentQuestionIndex === this.surveyQuestions.length - 1;
+  }
+  get questionCount() {
+    return `${this.currentQuestionIndex + 1}/${this.surveyQuestions.length}`;
+  }
+  get responsePayload() {
+    return {
+      $survey_id: this.surveyId,
+      ...this.responses
+    };
+  }
+  // TODO hardcode elsewhere
+  get surveyId() {
+    return window.app?.postHogPublicKey === "phc_KclQGnOZEaYCttkpiVpuyOYeBlixGo6xNphYgWV4CXo" ? "0196caa6-9b37-0000-98a7-f04e8d56faf5" : "0196a6b0-ccde-0000-b980-0b84ea2fef4a";
+  }
+  get surveyQuestions() {
+    return this.survey ? this.survey.questions : [];
+  }
+  loadSurvey = (s = !1) => {
+    u.getActiveMatchingSurveys((t) => {
+      r(() => {
+        if (t.length > 0) {
+          const e = t.find((n) => n.id === this.surveyId);
+          e && (this.survey = e, this.currentQuestionIndex = 0, this.question = e.questions[0], this.response = null, this.responses = {});
+        }
+      });
+    }, s);
+  };
+  nextQuestion = () => {
+    this.currentQuestionIndex < this.surveyQuestions.length - 1 && (this.currentQuestionIndex += 1), this.response = null, this.question = this.surveyQuestions[this.currentQuestionIndex];
+  };
+  resetStore = () => {
+    this.survey = null, this.currentQuestionIndex = 0, this.question = null, this.response = null, this.responses = {};
+  };
+  setResponse = (s) => {
+    this.response = s, this.question && (this.responses[`$survey_response_${this.question.id}`] = s);
+  };
+}
+export {
+  p as AnalyticsStore
+};

package/dist/budgets/BubbleBudgetsMiniWidget/index.es.js

@@ -0,0 +1,71 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import n from "react";
+import { observer as A } from "mobx-react-lite";
+import { endOfMonth as E } from "date-fns/endOfMonth";
+import { startOfMonth as L } from "date-fns/startOfMonth";
+import M from "@mui/material/Box";
+import T from "@mui/material/Stack";
+import O from "@mui/material/styles/useTheme";
+import { Text as c } from "@mxenabled/mxui";
+import { useGetBudgetDifference as w } from "../utils/BudgetUtil/index.es.js";
+import { BubbleBudgets as x } from "../components/BubbleBudgets/index.es.js";
+import { AddBudgets as v } from "../components/AddBudgets/index.es.js";
+import { useEvent as G, useBudgetsStore as I, useGlobalCopyStore as W, useGlobalUiStore as k, useCategoryStore as R } from "../../common/context/hooks/index.es.js";
+import u from "../../common/components/Loader/index.es.js";
+import j from "../../common/components/MiniWidgetContainer/index.es.js";
+import { formatCurrency as N } from "../../common/utils/NumberFormatting/index.es.js";
+import U from "../../common/components/drawer/Drawer/index.es.js";
+import { ANALYTICS_EVENTS as z } from "../../common/constants/Analytics/index.es.js";
+const K = (f) => {
+  const d = O(), { onEvent: p } = G(), { detailedBudgets: g, isDataLoaded: a, loadBudgetData: h, setTheme: b } = I(), { budgets: t, common: B } = W(), { isCopyLoaded: C, isInitialized: l, selectedAccounts: m } = k(), { reloadCategoryTotals: _ } = R(), o = w(), r = g.length === 0, [S, i] = n.useState(!1), y = () => {
+    i(!0), p(z.BUDGETS_CLICK_ADD);
+  }, D = () => {
+    i(!1);
+  };
+  return n.useEffect(() => {
+    b(d);
+  }, [d]), n.useEffect(() => {
+    l && !a && _(m, L(/* @__PURE__ */ new Date()), E(/* @__PURE__ */ new Date())).then(
+      () => {
+        h().finally();
+      }
+    );
+  }, [l, m]), C ? /* @__PURE__ */ s(
+    j,
+    {
+      primaryCtaLabel: r ? t.get_started_cta : t.details_cta,
+      title: t.budgets_title,
+      ...f,
+      children: [
+        a ? /* @__PURE__ */ s(T, { height: 450, mt: 32, children: [
+          /* @__PURE__ */ e(
+            x,
+            {
+              createBudgetOnClick: y,
+              height: 370,
+              isMiniWidget: !0,
+              shouldShowZeroState: r
+            }
+          ),
+          !r && /* @__PURE__ */ s(M, { ml: 16, children: [
+            /* @__PURE__ */ e(c, { bold: !0, color: o < 0 ? "error.main" : "success.main", children: N(Math.abs(o), "0,0") }),
+            /* @__PURE__ */ e(c, { children: o < 0 ? t.overspent_in_budgets : t.left_in_budgets })
+          ] })
+        ] }) : /* @__PURE__ */ e(u, {}),
+        /* @__PURE__ */ e(
+          U,
+          {
+            ariaLabelClose: B.close_aria,
+            isOpen: S,
+            onClose: () => i(!1),
+            title: t.add_new_title,
+            children: /* @__PURE__ */ e(v, { onRecalculateBudgets: D })
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ e(u, {});
+}, de = A(K);
+export {
+  de as default
+};

package/dist/budgets/BubbleBudgetsWidget/index.es.js

@@ -0,0 +1,139 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import s from "react";
+import { observer as F } from "mobx-react-lite";
+import { isAfter as H } from "date-fns/isAfter";
+import { startOfMonth as K } from "date-fns/startOfMonth";
+import V from "@mui/material/Alert";
+import m from "@mui/material/Stack";
+import Y from "@mui/material/Snackbar";
+import Z from "@mui/material/styles/useTheme";
+import { AddBudgets as q } from "../components/AddBudgets/index.es.js";
+import { BubbleBudgets as J } from "../components/BubbleBudgets/index.es.js";
+import { BudgetDetailsDrawer as P } from "../components/BudgetDetailsDrawer/index.es.js";
+import { BudgetList as Q } from "../components/BudgetList/index.es.js";
+import { Overview as X } from "../components/Overview/index.es.js";
+import { useEvent as $, useAccountStore as ee, useGlobalCopyStore as te, useGlobalUiStore as oe, useBudgetsStore as re, useRecurringTransactionsStore as ie, useCategoryStore as ne } from "../../common/context/hooks/index.es.js";
+import { useScreenSize as se } from "../../common/hooks/useScreenSize/index.es.js";
+import { ANALYTICS_EVENTS as u } from "../../common/constants/Analytics/index.es.js";
+import b from "../../common/components/Loader/index.es.js";
+import ae from "../../common/components/WidgetContainer/index.es.js";
+import le from "../../common/components/drawer/Drawer/index.es.js";
+const B = 480, Re = F(({ onBackClick: A, sx: T }) => {
+  const E = Z(), { onEvent: a } = $(), { visibleAccounts: i } = ee(), { budgets: l, common: _ } = te(), { isCopyLoaded: y, isInitialized: o, selectedAccounts: f, setDisplayedDate: v, setSelectedAccounts: g } = oe(), {
+    alert: h,
+    dateRange: t,
+    isDataLoaded: n,
+    loadBudgetData: w,
+    setDateRange: R,
+    setAlert: p,
+    setTheme: L,
+    detailedBudgets: C
+  } = re(), { loadRepeatingTransactions: I, setDateRange: O } = ie(), { reloadCategoryTotals: k } = ne(), { isSmallTablet: x, isMobile: G, isSmallMobile: W } = se(), r = x || G || W, [U, c] = s.useState(!1);
+  s.useEffect(() => {
+    L(E), g(i), v(t.start, t.end), a(u.BUDGETS_VIEW);
+  }, []), s.useEffect(() => {
+    g(i);
+  }, [i]), s.useEffect(() => {
+    o && (k(f, t.start, t.end).finally(), O(t), n || (I().finally(), w().finally()));
+  }, [o, f, t]);
+  const M = (S) => {
+    R({ start: S[0] || /* @__PURE__ */ new Date(), end: S[1] || /* @__PURE__ */ new Date() });
+  }, N = () => {
+    a(u.BUDGETS_CLICK_FILTER);
+  }, D = () => {
+    c(!0), a(u.BUDGETS_CLICK_ADD);
+  }, j = () => {
+    c(!1);
+  }, z = H(t.end, K(/* @__PURE__ */ new Date()));
+  return !y || !o || !n ? /* @__PURE__ */ e(b, {}) : /* @__PURE__ */ d(
+    ae,
+    {
+      accountOptions: i,
+      actions: [
+        {
+          iconName: "add",
+          label: l.add_title,
+          onClick: D
+        }
+      ],
+      calendarActions: { onRangeChanged: M, shouldDisableNext: z },
+      onAccountsFilterClick: N,
+      onBackClick: A,
+      sx: T,
+      title: l.budgets_title,
+      children: [
+        (!o || !n) && /* @__PURE__ */ e(b, {}),
+        o && n && /* @__PURE__ */ d(
+          m,
+          {
+            direction: r ? "column" : "row",
+            height: "100%",
+            sx: { justifyContent: "center" },
+            width: "100%",
+            children: [
+              /* @__PURE__ */ e(m, { height: r ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
+                J,
+                {
+                  createBudgetOnClick: D,
+                  height: r ? 450 : 800,
+                  isDraggable: !0,
+                  shouldShowZeroState: C.length === 0,
+                  unavailableWidth: r ? 0 : B
+                }
+              ) }),
+              C.length !== 0 && /* @__PURE__ */ d(
+                m,
+                {
+                  gap: 24,
+                  height: "100%",
+                  sx: { mr: 24, mt: 48 },
+                  width: r ? "100%" : B,
+                  children: [
+                    /* @__PURE__ */ e(X, {}),
+                    /* @__PURE__ */ e(Q, {})
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(P, {}),
+        /* @__PURE__ */ e(
+          le,
+          {
+            ariaLabelClose: _.close_aria,
+            isOpen: U,
+            onClose: () => c(!1),
+            title: l.add_new_title,
+            children: /* @__PURE__ */ e(q, { onRecalculateBudgets: j })
+          }
+        ),
+        /* @__PURE__ */ e(
+          Y,
+          {
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            autoHideDuration: 3500,
+            onClose: () => {
+              p("");
+            },
+            open: !!h,
+            children: /* @__PURE__ */ e(
+              V,
+              {
+                onClose: () => {
+                  p("");
+                },
+                severity: "success",
+                variant: "filled",
+                children: h
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Re as BubbleBudgetsWidget
+};

package/dist/budgets/api/BudgetsApi/index.es.js

@@ -0,0 +1,26 @@
+import { Fetch as s } from "../../../common/utils/Fetch/index.es.js";
+import { ApiEndpoints as n } from "../../../common/constants/ApiEndpoints/index.es.js";
+class d {
+  fetchInstance;
+  constructor(t, e) {
+    this.fetchInstance = new s(t, e);
+  }
+  addBudget = async (t, e, h = null) => this.fetchInstance.post(n.BUDGETS, {
+    amount: e,
+    category_guid: t.guid,
+    category_name: t.name,
+    parent_guid: h
+  }).then((c) => c.budget).catch((c) => {
+    throw c;
+  });
+  deleteBudget = async (t) => this.fetchInstance.delete(`${n.BUDGETS}/${t}`).then((e) => e).catch((e) => {
+    throw e;
+  });
+  getBudgets = async () => this.fetchInstance.get(n.BUDGETS).then((t) => t.budgets).catch((t) => t);
+  updateBudget = async (t) => this.fetchInstance.put(`${n.BUDGETS}/${t.guid}`, t).then((e) => e.budget).catch((e) => {
+    throw e;
+  });
+}
+export {
+  d as BudgetsApi
+};

package/dist/budgets/components/AddBudgets/index.es.js

@@ -0,0 +1,30 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { observer as p } from "mobx-react-lite";
+import a from "@mui/material/Box";
+import c from "@mui/material/List";
+import g from "@mui/material/Stack";
+import { Header as l } from "../addbudget/Header/index.es.js";
+import { RecalculateBudgets as f } from "../addbudget/RecalculateBudgets/index.es.js";
+import { UnbudgetedRow as b } from "../addbudget/UnbudgetedRow/index.es.js";
+import { useGlobalCopyStore as B, useBudgetsStore as h } from "../../../common/context/hooks/index.es.js";
+import { buildDynamicCopy as x } from "../../../common/utils/Localization/index.es.js";
+const D = p(({ onRecalculateBudgets: e }) => {
+  const { budgets: t } = B(), { addBudget: d, setAlert: m, unbudgetedCategories: i } = h(), s = async (o, u) => {
+    await d(o, u), m(x(t.alert_budget_created, o.name));
+  };
+  return /* @__PURE__ */ n(g, { children: [
+    /* @__PURE__ */ r(l, {}),
+    /* @__PURE__ */ r(a, { bgcolor: "background.paper", children: /* @__PURE__ */ r(c, { children: i.map((o) => /* @__PURE__ */ r(
+      b,
+      {
+        category: o,
+        onAddBudget: s
+      },
+      o.guid
+    )) }) }),
+    /* @__PURE__ */ r(f, { onRecalculateBudgets: e })
+  ] });
+});
+export {
+  D as AddBudgets
+};

package/dist/budgets/components/BubbleBudgets/index.es.js

@@ -0,0 +1,61 @@
+import { jsx as e, jsxs as _ } from "react/jsx-runtime";
+import a from "react";
+import { observer as T } from "mobx-react-lite";
+import h from "@mui/material/Box";
+import k from "@mui/material/Stack";
+import v from "../../../accounts/components/ConnectionsDrawer/index.es.js";
+import x from "../BubbleChart/index.es.js";
+import { BudgetsEmptyState as A } from "../BudgetsEmptyState/index.es.js";
+import { useEvent as G, useBudgetsStore as I, useCategoryStore as L, useGlobalUiStore as N, useGlobalCopyStore as w, useWidgetContainerProvider as M } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as U } from "../../../common/hooks/useScreenSize/index.es.js";
+import W from "../../../common/components/Loader/index.es.js";
+import { ANALYTICS_EVENTS as l } from "../../../common/constants/Analytics/index.es.js";
+const J = T(
+  ({
+    createBudgetOnClick: m = () => {
+    },
+    height: t,
+    isDraggable: C = !1,
+    isMiniWidget: u = !1,
+    shouldShowZeroState: o,
+    unavailableWidth: f = 24
+  }) => {
+    const { onEvent: n } = G(), { setSelectedBudget: d } = I(), { isLoadingCategoryTotals: p } = L(), { isInitialized: b } = N(), { accounts: g } = w(), { availableWidth: r } = M(), { isMobile: S } = U(), [B, s] = a.useState(!1), i = a.useMemo(() => r - f, [r]), y = (c) => {
+      d(c), n(l.BUDGETS_CLICK_BUDGET_CATEGORY, {
+        budget_category: c.category.name,
+        click_type: "bubble"
+      });
+    }, E = () => {
+      s(!0), n(l.ACCOUNTS_CLICK_CONNECT);
+    };
+    return p ? /* @__PURE__ */ e(k, { alignItems: "center", height: t, justifyContent: "center", width: Math.abs(i), children: /* @__PURE__ */ e(W, {}) }) : /* @__PURE__ */ _(h, { ml: o || S ? 0 : 24, sx: { alignSelf: "center" }, children: [
+      o || !b ? /* @__PURE__ */ e(
+        A,
+        {
+          createBudgetOnClick: m,
+          isMiniWidget: u,
+          onConnectAccountsClick: E
+        }
+      ) : /* @__PURE__ */ e(
+        x,
+        {
+          height: t,
+          isDraggable: C,
+          onClick: y,
+          width: i
+        }
+      ),
+      /* @__PURE__ */ e(
+        v,
+        {
+          onClose: () => s(!1),
+          showConnectionsWidget: B,
+          title: g.manage_connections
+        }
+      )
+    ] });
+  }
+);
+export {
+  J as BubbleBudgets
+};

package/dist/budgets/components/BubbleChart/Bubble/index.es.js

@@ -0,0 +1,97 @@
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import E from "react";
+import M from "@mui/material/Tooltip";
+import { Icon as C, Text as c } from "@mxenabled/mxui";
+import { Mercury as H } from "../Mercury/index.es.js";
+const i = 75, d = 50;
+function j({ bubble: r, isDraggable: f, onClick: m = () => {
+} }) {
+  const [u, p] = E.useState(!1);
+  if (!r) return;
+  const {
+    budgetColors: { background: x, text: l },
+    category: { icon: g, name: y },
+    guid: e,
+    description: n,
+    radius: o,
+    x: h,
+    y: S
+  } = r;
+  let a = -12, s = -12;
+  o > i ? (a = -14, s = -45) : o > d && (s = -32);
+  const T = `${r.category.name}: ${n}`, $ = {
+    modifiers: [
+      {
+        name: "offset",
+        options: { offset: [0, 15] }
+      }
+    ]
+  };
+  return /* @__PURE__ */ v(
+    "g",
+    {
+      className: "bubble",
+      id: `bubble-${e}`,
+      onClick: () => m(r),
+      onMouseEnter: () => p(!0),
+      onMouseLeave: () => p(!1),
+      style: { cursor: f ? "pointer" : "default" },
+      textAnchor: "middle",
+      x: h,
+      y: S,
+      children: [
+        /* @__PURE__ */ t(
+          M,
+          {
+            followCursor: !0,
+            open: u,
+            slotProps: { popper: $ },
+            title: T,
+            children: /* @__PURE__ */ t("circle", { fill: x, id: `circle-${e}`, r: o })
+          }
+        ),
+        /* @__PURE__ */ t("svg", { x: a, y: s, children: /* @__PURE__ */ t(C, { name: g, size: o <= i ? 24 : 32, sx: { fill: l } }) }),
+        o > i && /* @__PURE__ */ t(
+          c,
+          {
+            bold: !0,
+            component: "text",
+            id: `budget-category-${e}`,
+            sx: { fill: l },
+            variant: "Small",
+            y: 4,
+            children: y
+          }
+        ),
+        o > d && /* @__PURE__ */ t(
+          c,
+          {
+            bold: !0,
+            component: "text",
+            id: `budget-description-${e}-1`,
+            sx: { fill: l },
+            variant: "Body",
+            y: o <= i ? 12 : 24,
+            children: o <= i ? n.split(" ")[0] : n
+          }
+        ),
+        o <= i && o > d && /* @__PURE__ */ t(
+          c,
+          {
+            component: "text",
+            id: `budget-description-${e}-2`,
+            sx: { fill: l },
+            variant: "XSmall",
+            y: 28,
+            children: n.split(" ")[1]
+          }
+        ),
+        /* @__PURE__ */ t(H, { bubble: r })
+      ]
+    },
+    e
+  );
+}
+export {
+  j as Bubble
+};