@mx-cartographer/experiences 6.25.3-alpha.al2 → 6.25.3-alpha.mega2

package/dist/investments/components/TabTitle.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Text as t } from "@mxenabled/mxui";
+const m = ({ title: o }) => /* @__PURE__ */ r(t, { bold: !0, variant: "Body", children: o });
+export {
+  m as TabTitle
+};
+//# sourceMappingURL=TabTitle.js.map

package/dist/investments/components/TabTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabTitle.js","sources":["../../../src/investments/components/TabTitle.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\ninterface TabTitleProps {\n  title: string\n}\n\nexport const TabTitle = ({ title }: TabTitleProps) => (\n  <Text bold={true} variant=\"Body\">\n    {title}\n  </Text>\n)\n"],"names":["TabTitle","title","jsx","Text"],"mappings":";;AAMa,MAAAA,IAAW,CAAC,EAAE,OAAAC,EAAM,MAC9B,gBAAAC,EAAAC,GAAA,EAAK,MAAM,IAAM,SAAQ,QACvB,UACHF,EAAA,CAAA;"}

package/dist/investments/components/allocation/InvestementAllocationList.js

@@ -0,0 +1,271 @@
+import { jsxs as i, 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 a from "@mui/material/Divider";
+import h from "@mui/material/List";
+import g from "@mui/material/ListItem";
+import L from "@mui/material/ListItemButton";
+import d from "@mui/material/Stack";
+import j from "@mui/material/ToggleButton";
+import k from "@mui/material/ToggleButtonGroup";
+import { Text as p } from "@mxenabled/mxui";
+import "bowser";
+import "date-fns/getUnixTime";
+import "date-fns/intlFormat";
+import "../../../common/constants/Account.js";
+import "../../../common/constants/Category.js";
+import "date-fns/addMonths";
+import "date-fns/addQuarters";
+import "date-fns/addWeeks";
+import "date-fns/addYears";
+import "date-fns/getDay";
+import "date-fns/isBefore";
+import "date-fns/nextDay";
+import "date-fns/setDate";
+import "date-fns/startOfToday";
+import "date-fns/fromUnixTime";
+import "numeral";
+import "@mui/material";
+import "@mui/material/Button";
+import "@mui/material/Tooltip";
+import "@mui/material/IconButton";
+import "../../../common/components/accountfilter/AccountFilterOptions.js";
+import { useGlobalCopyStore as A } from "../../../common/context/hooks.js";
+import "../../../common/context/GlobalDataProvider.js";
+import "../../../common/context/WidgetContainerProvider.js";
+import { useScreenSize as u } from "../../../common/hooks/useScreenSize.js";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isSameMonth";
+import "date-fns/startOfMonth";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mxenabled/mx-icons";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "@mui/material/styles/useTheme";
+import "d3";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import "@mui/material/useMediaQuery";
+import "../../../common/components/charts/linechart/CustomLegend.js";
+import "@mui/x-charts/ChartsTooltip";
+import "../../../common/components/charts/stackedlinechart/CustomAreaTooltip.js";
+import "date-fns/differenceInCalendarDays";
+import "date-fns/endOfToday";
+import "date-fns/endOfYear";
+import "date-fns/startOfYear";
+import "date-fns/subDays";
+import "date-fns/subYears";
+import "@mui/material/ButtonGroup";
+import "@mui/material/Tab";
+import "@mui/material/Tabs";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import "../../../common/components/ErrorBoundary.js";
+import "@mui/material/Card";
+import "@mui/material/CardContent";
+import "@mui/material/CardHeader";
+import "../../../common/components/WidgetContainer.js";
+import "../../../common/components/ConnectDrawer.js";
+import "uuid";
+import "@mui/material/CircularProgress";
+import "../../../common/components/SearchBox.js";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import "@mui/material/ListItemAvatar";
+import "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "../../../common/components/ListItemAction.js";
+import "@mui/material/MenuItem";
+import "@mui/material/TextField";
+import "@mui/material/Switch";
+import "mobx";
+import "../../../accounts/AccountsWidget.js";
+import "../../../accounts/AccountsMiniWidget.js";
+import "../../../accounts/ConnectMiniWidget.js";
+import "../../../accounts/components/detailsdrawer/Accounts/AccountDetailsHeader.js";
+import "../../../accounts/components/detailsdrawer/Accounts/AccountDetailsContent.js";
+import "../../../common/types/Account.js";
+import "posthog-js";
+import "../../../cashflow/CashflowMiniWidget.js";
+import "../../../cashflow/CashflowWidget.js";
+import "../../../cashflow/CashflowOnboarding.js";
+import "date-fns/differenceInDays";
+import "../../../categories/components/CategorySelector.js";
+import "../../../categories/components/CategorySelectorDrawer.js";
+import "../../../categories/components/CategoryRow.js";
+import "../../../debts/DebtsWidget.js";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "../../../finstrong/components/FinancialStrengthGraph.js";
+import "../../../finstrong/components/CreditScoreGraph.js";
+import "../../../finstrong/FinstrongWidget.js";
+import "../../../goals/GoalsWidget.js";
+import "../../../goals/GoalsMicroWidget.js";
+import "../../util/InvestmentUtil.js";
+import "../../../merchants/components/MerchantLookup.js";
+import "../../../networth/components/NetWorthChart.js";
+import "../../../networth/components/NetWorthList.js";
+import "../../../networth/components/NetWorthSummary.js";
+import "../../../networth/NetWorthMicroWidget.js";
+import "../../../networth/NetWorthWidget.js";
+import "../../../notifications/components/NotificationList.js";
+import "../../../notifications/components/NotificationDrawer.js";
+import "date-fns/formatISO";
+import "../../../transactions/constants/Analytics.js";
+import "../../../transactions/constants/Transaction.js";
+import "../../../transactions/components/shared/transactionlist/TransactionRow.js";
+import "../../../transactions/components/shared/TransactionList.js";
+import "../../../transactions/components/shared/TransactionTable.js";
+import "../../../transactions/components/shared/TransactionDetails.js";
+import "../../../transactions/components/transactionwidget/AddAccountModal.js";
+import "../../../transactions/TransactionWidget.js";
+import "../../../settings/SettingsWidget.js";
+import "../../../settings/components/SettingsWidgetContents.js";
+import "../../../settings/components/profile/ProfileTab.js";
+import "../../../settings/components/devices/DeviceTab.js";
+import "../../../settings/NotificationSettingsWidget.js";
+import "../../../settings/components/notifications/NotificationSettings.js";
+import "../../../settings/components/notifications/AccountNotificationProfiles.js";
+import "../../../settings/components/notifications/BudgetNotificationProfiles.js";
+import "../../../settings/components/notifications/InsightsNotificationProfiles.js";
+import "../../../settings/components/transactionrules/TransactionRulesTab.js";
+import "../../../recurringtransactions/RecurringTransactionsWidget.js";
+import "../../../recurringtransactions/RecurringTransactionsMiniWidget.js";
+import "../../../recurringtransactions/RecurringTransactionsMicroWidget.js";
+import "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subQuarters";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "../../../recurringtransactions/components/shared/RecurringSettings.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/ManageIncome.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/ManageExpenses.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/SelectTransaction.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/AddRecurringTransactionDetails.js";
+import "../../../trends/TrendsFullWidget.js";
+import "../../../trends/TrendsMiniWidget.js";
+import "../../../trends/TrendsMicroWidget.js";
+import "../../../trends/TrendsWidget.js";
+import "date-fns/addSeconds";
+import "date-fns/getMonth";
+import { EmptyStateFooterComponent as E } from "../EmptyStateFooterComponent.js";
+import { currencyDisplay as s, percentageDisplay as x } from "./util/createInvestementsAllocationData.js";
+const Et = ({
+  data: l,
+  onSelected: f,
+  selectedId: m,
+  selectedTabs: e,
+  setSelectedTabs: y
+}) => {
+  const b = (r, t) => {
+    t !== null && y(t);
+  }, { isMobile: v } = u(), {
+    investments: { allocation: n }
+  } = A(), C = [
+    { label: n.tabs_label_dollar, value: 0 },
+    { label: n.tabs_label_percent, value: 1 }
+  ], c = !l?.investmentsData.length, { isSmallMobile: B } = u();
+  return /* @__PURE__ */ i(d, { sx: { mt: 15, gap: 12, width: v ? 250 : 412 }, children: [
+    /* @__PURE__ */ o(
+      k,
+      {
+        exclusive: !0,
+        fullWidth: !0,
+        onChange: b,
+        value: c ? -1 : e,
+        children: C.map(({ label: r, value: t }) => /* @__PURE__ */ o(j, { color: "primary", value: t, children: /* @__PURE__ */ o(p, { bold: !0, textTransform: "capitalize", variant: "Body", children: r }) }, r))
+      }
+    ),
+    /* @__PURE__ */ o(h, { sx: { px: 12 }, children: l.investmentsData.map((r) => /* @__PURE__ */ i(S.Fragment, { children: [
+      /* @__PURE__ */ o(
+        g,
+        {
+          disableGutters: !0,
+          disablePadding: !0,
+          sx: {
+            minHeight: 44
+          },
+          children: /* @__PURE__ */ i(
+            L,
+            {
+              "aria-expanded": m === 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__ */ i(
+                  d,
+                  {
+                    alignItems: "center",
+                    direction: "row",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    children: [
+                      /* @__PURE__ */ o(p, { bold: m === r.guid, children: r.displayName }),
+                      /* @__PURE__ */ o(p, { bold: m === r.guid, variant: "Body", children: e === 0 ? s(r.value) : x(r.percentage) })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ o(a, {}),
+      r.holdings && r.holdings.length > 0 && /* @__PURE__ */ o(D, { in: m === r.guid, unmountOnExit: !0, children: /* @__PURE__ */ i(h, { children: [
+        r?.holdings?.map((t) => /* @__PURE__ */ o(
+          g,
+          {
+            sx: {
+              pl: 24,
+              pr: 8,
+              py: 0
+            },
+            children: /* @__PURE__ */ i(d, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+              /* @__PURE__ */ i(p, { children: [
+                t.displayName,
+                " "
+              ] }),
+              /* @__PURE__ */ o(p, { children: e === 0 ? s(t.value) : x(t.percentage) })
+            ] })
+          },
+          t.displayName
+        )),
+        /* @__PURE__ */ o(a, {})
+      ] }) })
+    ] }, r.guid)) }),
+    c ? /* @__PURE__ */ i(w, { children: [
+      /* @__PURE__ */ o(p, { sx: { color: "secondary.main", p: 8, textAlign: "center" }, children: n.empty_data }),
+      /* @__PURE__ */ o(a, { sx: { borderColor: "border.light" } }),
+      /* @__PURE__ */ o(
+        E,
+        {
+          sx: {
+            ".inner-container": { width: B ? "100%" : 364 }
+          }
+        }
+      )
+    ] }) : e === 0 && /* @__PURE__ */ o(p, { bold: !0, sx: { textAlign: "right", pr: 24 }, children: `${n.total_label_text} ${s(l.totalAmount)}` })
+  ] });
+};
+export {
+  Et as InvestementAllocationList
+};
+//# sourceMappingURL=InvestementAllocationList.js.map

package/dist/investments/components/allocation/InvestementAllocationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvestementAllocationList.js","sources":["../../../../src/investments/components/allocation/InvestementAllocationList.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Collapse from '@mui/material/Collapse'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport Stack from '@mui/material/Stack'\nimport ToggleButton from '@mui/material/ToggleButton'\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore, useScreenSize } from '../../../common'\nimport { EmptyStateFooterComponent } from '../EmptyStateFooterComponent'\nimport { InvestmentsData } from './InvestmentsAllocationChart'\nimport { currencyDisplay, percentageDisplay } from './util/createInvestementsAllocationData'\n\ninterface InvestmentAllocationListProps {\n  data: InvestmentsData\n  onSelected: (id: string) => void\n  selectedId?: string\n  selectedTabs: number\n  setSelectedTabs: (value: number) => void\n}\n\nexport const InvestementAllocationList = ({\n  data,\n  onSelected,\n  selectedId,\n  selectedTabs,\n  setSelectedTabs,\n}: InvestmentAllocationListProps) => {\n  const handleChange = (_: React.SyntheticEvent, newValue: number) => {\n    if (newValue !== null) {\n      setSelectedTabs(newValue)\n    }\n  }\n  const { isMobile } = useScreenSize()\n  const {\n    investments: { allocation: copy },\n  } = useGlobalCopyStore()\n\n  const toggleButtonsList = [\n    { label: copy.tabs_label_dollar, value: 0 },\n    { label: copy.tabs_label_percent, value: 1 },\n  ]\n  const isEmptyState = !data?.investmentsData.length\n  const { isSmallMobile } = useScreenSize()\n\n  return (\n    <Stack sx={{ mt: 15, gap: 12, width: isMobile ? 250 : 412 }}>\n      <ToggleButtonGroup\n        exclusive={true}\n        fullWidth={true}\n        onChange={handleChange}\n        value={isEmptyState ? -1 : selectedTabs}\n      >\n        {toggleButtonsList.map(({ label, value }) => (\n          <ToggleButton color=\"primary\" key={label} value={value}>\n            <Text bold={true} textTransform={'capitalize'} variant=\"Body\">\n              {label}\n            </Text>\n          </ToggleButton>\n        ))}\n      </ToggleButtonGroup>\n\n      <List sx={{ px: 12 }}>\n        {data.investmentsData.map((item) => (\n          <React.Fragment key={item.guid}>\n            <ListItem\n              disableGutters={true}\n              disablePadding={true}\n              sx={{\n                minHeight: 44,\n              }}\n            >\n              <ListItemButton\n                aria-expanded={Boolean(selectedId === item.guid)}\n                onClick={() => onSelected(item.guid)}\n                sx={{ minHeight: 44, px: 12, py: 0 }}\n              >\n                <Box\n                  borderRadius={4}\n                  flexShrink={0}\n                  height={8}\n                  sx={{ backgroundColor: item.color, mr: 8 }}\n                  width={8}\n                />\n                <Stack\n                  alignItems=\"center\"\n                  direction=\"row\"\n                  justifyContent=\"space-between\"\n                  width=\"100%\"\n                >\n                  <Text bold={selectedId === item.guid}>{item.displayName}</Text>\n                  <Text bold={selectedId === item.guid} variant=\"Body\">\n                    {selectedTabs === 0\n                      ? currencyDisplay(item.value)\n                      : percentageDisplay(item.percentage)}\n                  </Text>\n                </Stack>\n              </ListItemButton>\n            </ListItem>\n\n            <Divider />\n\n            {item.holdings && item.holdings.length > 0 && (\n              <Collapse in={Boolean(selectedId === item.guid)} unmountOnExit={true}>\n                <List>\n                  {item?.holdings?.map((subItem) => (\n                    <ListItem\n                      key={subItem.displayName}\n                      sx={{\n                        pl: 24,\n                        pr: 8,\n                        py: 0,\n                      }}\n                    >\n                      <Stack direction=\"row\" justifyContent=\"space-between\" width=\"100%\">\n                        <Text>{subItem.displayName} </Text>\n                        <Text>\n                          {selectedTabs === 0\n                            ? currencyDisplay(subItem.value)\n                            : percentageDisplay(subItem.percentage)}\n                        </Text>\n                      </Stack>\n                    </ListItem>\n                  ))}\n                  <Divider />\n                </List>\n              </Collapse>\n            )}\n          </React.Fragment>\n        ))}\n      </List>\n      {isEmptyState ? (\n        <>\n          <Text sx={{ color: 'secondary.main', p: 8, textAlign: 'center' }}>{copy.empty_data}</Text>\n          <Divider sx={{ borderColor: 'border.light' }} />\n          <EmptyStateFooterComponent\n            sx={{\n              '.inner-container': { width: isSmallMobile ? '100%' : 364 },\n            }}\n          />\n        </>\n      ) : (\n        selectedTabs === 0 && (\n          <Text bold={true} sx={{ textAlign: 'right', pr: 24 }}>\n            {`${copy.total_label_text} ${currencyDisplay(data.totalAmount)}`}\n          </Text>\n        )\n      )}\n    </Stack>\n  )\n}\n"],"names":["InvestementAllocationList","data","onSelected","selectedId","selectedTabs","setSelectedTabs","handleChange","_","newValue","isMobile","useScreenSize","copy","useGlobalCopyStore","toggleButtonsList","isEmptyState","isSmallMobile","jsxs","Stack","jsx","ToggleButtonGroup","label","value","ToggleButton","Text","List","item","React","ListItem","ListItemButton","Box","currencyDisplay","percentageDisplay","Divider","Collapse","subItem","Fragment","EmptyStateFooterComponent"],"mappings":"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"}

package/dist/investments/components/allocation/InvestmentsAllocationChart.js

@@ -0,0 +1,217 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import a from "react";
+import m from "@mui/material/Stack";
+import L from "@mui/material/styles/useTheme";
+import { Text as c, H1 as j } from "@mxenabled/mxui";
+import { Icon as I } from "@mxenabled/mx-icons";
+import "bowser";
+import "date-fns/getUnixTime";
+import "date-fns/intlFormat";
+import "../../../common/constants/Account.js";
+import "../../../common/constants/Category.js";
+import "date-fns/addMonths";
+import "date-fns/addQuarters";
+import "date-fns/addWeeks";
+import "date-fns/addYears";
+import "date-fns/getDay";
+import "date-fns/isBefore";
+import "date-fns/nextDay";
+import "date-fns/setDate";
+import "date-fns/startOfToday";
+import "date-fns/fromUnixTime";
+import "numeral";
+import "@mui/material";
+import "@mui/material/Button";
+import "@mui/material/Tooltip";
+import "@mui/material/Box";
+import "@mui/material/IconButton";
+import "../../../common/components/accountfilter/AccountFilterOptions.js";
+import { useGlobalCopyStore as M } from "../../../common/context/hooks.js";
+import "../../../common/context/GlobalDataProvider.js";
+import "../../../common/context/WidgetContainerProvider.js";
+import "@mui/material/useMediaQuery";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isSameMonth";
+import "date-fns/startOfMonth";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import b from "../../../common/components/charts/Donut.js";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import "../../../common/components/charts/linechart/CustomLegend.js";
+import "@mui/x-charts/ChartsTooltip";
+import "../../../common/components/charts/stackedlinechart/CustomAreaTooltip.js";
+import "date-fns/differenceInCalendarDays";
+import "date-fns/endOfToday";
+import "date-fns/endOfYear";
+import "date-fns/startOfYear";
+import "date-fns/subDays";
+import "date-fns/subYears";
+import "@mui/material/ButtonGroup";
+import "@mui/material/Tab";
+import "@mui/material/Tabs";
+import "@mui/material/ToggleButton";
+import "@mui/material/ToggleButtonGroup";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import "../../../common/components/ErrorBoundary.js";
+import "@mui/material/Card";
+import "@mui/material/CardContent";
+import "@mui/material/CardHeader";
+import "../../../common/components/WidgetContainer.js";
+import "../../../common/components/ConnectDrawer.js";
+import "uuid";
+import "@mui/material/CircularProgress";
+import "../../../common/components/SearchBox.js";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import "@mui/material/ListItem";
+import "@mui/material/ListItemAvatar";
+import "@mui/material/ListItemButton";
+import "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "../../../common/components/ListItemAction.js";
+import "@mui/material/MenuItem";
+import "@mui/material/TextField";
+import "@mui/material/Switch";
+import "mobx";
+import "../../../accounts/AccountsWidget.js";
+import "../../../accounts/AccountsMiniWidget.js";
+import "../../../accounts/ConnectMiniWidget.js";
+import "../../../accounts/components/detailsdrawer/Accounts/AccountDetailsHeader.js";
+import "../../../accounts/components/detailsdrawer/Accounts/AccountDetailsContent.js";
+import "../../../common/types/Account.js";
+import "posthog-js";
+import "../../../cashflow/CashflowMiniWidget.js";
+import "../../../cashflow/CashflowWidget.js";
+import "../../../cashflow/CashflowOnboarding.js";
+import "date-fns/differenceInDays";
+import "../../../categories/components/CategorySelector.js";
+import "../../../categories/components/CategorySelectorDrawer.js";
+import "../../../categories/components/CategoryRow.js";
+import "../../../debts/DebtsWidget.js";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "@mui/material/Divider";
+import "@mui/material/List";
+import "d3";
+import "../../../finstrong/components/FinancialStrengthGraph.js";
+import "../../../finstrong/components/CreditScoreGraph.js";
+import "../../../finstrong/FinstrongWidget.js";
+import "../../../goals/GoalsWidget.js";
+import "../../../goals/GoalsMicroWidget.js";
+import "../../util/InvestmentUtil.js";
+import "../../../merchants/components/MerchantLookup.js";
+import "../../../networth/components/NetWorthChart.js";
+import "../../../networth/components/NetWorthList.js";
+import "../../../networth/components/NetWorthSummary.js";
+import "../../../networth/NetWorthMicroWidget.js";
+import "../../../networth/NetWorthWidget.js";
+import "../../../notifications/components/NotificationList.js";
+import "../../../notifications/components/NotificationDrawer.js";
+import "date-fns/formatISO";
+import "../../../transactions/constants/Analytics.js";
+import "../../../transactions/constants/Transaction.js";
+import "../../../transactions/components/shared/transactionlist/TransactionRow.js";
+import "../../../transactions/components/shared/TransactionList.js";
+import "../../../transactions/components/shared/TransactionTable.js";
+import "../../../transactions/components/shared/TransactionDetails.js";
+import "../../../transactions/components/transactionwidget/AddAccountModal.js";
+import "../../../transactions/TransactionWidget.js";
+import "../../../settings/SettingsWidget.js";
+import "../../../settings/components/SettingsWidgetContents.js";
+import "../../../settings/components/profile/ProfileTab.js";
+import "../../../settings/components/devices/DeviceTab.js";
+import "../../../settings/NotificationSettingsWidget.js";
+import "../../../settings/components/notifications/NotificationSettings.js";
+import "../../../settings/components/notifications/AccountNotificationProfiles.js";
+import "../../../settings/components/notifications/BudgetNotificationProfiles.js";
+import "../../../settings/components/notifications/InsightsNotificationProfiles.js";
+import "../../../settings/components/transactionrules/TransactionRulesTab.js";
+import "../../../recurringtransactions/RecurringTransactionsWidget.js";
+import "../../../recurringtransactions/RecurringTransactionsMiniWidget.js";
+import "../../../recurringtransactions/RecurringTransactionsMicroWidget.js";
+import "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subQuarters";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "../../../recurringtransactions/components/shared/RecurringSettings.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/ManageIncome.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/ManageExpenses.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/SelectTransaction.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/AddRecurringTransactionDetails.js";
+import "../../../trends/TrendsFullWidget.js";
+import "../../../trends/TrendsMiniWidget.js";
+import "../../../trends/TrendsMicroWidget.js";
+import "../../../trends/TrendsWidget.js";
+import "date-fns/addSeconds";
+import "date-fns/getMonth";
+import { currencyDisplay as u, percentageDisplay as w } from "./util/createInvestementsAllocationData.js";
+const Mr = ({
+  data: t,
+  hoveredId: g,
+  isPercentage: h,
+  onMouseEnter: f,
+  onMouseLeave: y,
+  onSelected: d,
+  selectedId: r,
+  size: p = 150,
+  totalLabel: x
+}) => {
+  const e = L(), n = e.palette.mode === "dark", i = a.useMemo(
+    () => r ? t.investmentsData.find(({ guid: G }) => G === r) : void 0,
+    [r]
+  ), {
+    investments: { allocation: D }
+  } = M(), C = a.useMemo(() => t.donutData.length > 0 ? t.donutData : [{ id: "0", color: e.palette.border.light, value: 100 }], [t, e]), v = n ? "#0AC295" : "#09A57F", _ = n ? "grey.300" : "grey.700", k = () => i ? D.pie_chart_centered_click_for_details : h ? w(t.totalGainLossPercentage) : u(t.totalGainLoss), s = t.totalGainLoss >= 0 ? v : _;
+  return /* @__PURE__ */ o(
+    b,
+    {
+      data: C,
+      hoveredId: g,
+      onClick: d,
+      onMouseEnter: f,
+      onMouseLeave: y,
+      selectedId: r,
+      size: p,
+      children: /* @__PURE__ */ o(m, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ o(m, { alignItems: "center", justifyContent: "center", minHeight: p, minWidth: p, children: /* @__PURE__ */ l(m, { alignItems: "center", sx: { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } }, children: [
+        /* @__PURE__ */ o(c, { color: "text.secondary", noWrap: !0, children: i?.displayName ?? x }),
+        /* @__PURE__ */ o(j, { color: "text.primary", children: u(i?.value ?? t.totalMarketValue) }),
+        /* @__PURE__ */ l(m, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+          !i && /* @__PURE__ */ o(
+            I,
+            {
+              name: t.totalGainLoss >= 0 ? "trending_up" : "trending_down",
+              size: 20,
+              sx: { color: s }
+            }
+          ),
+          /* @__PURE__ */ o(
+            c,
+            {
+              sx: {
+                color: s,
+                fontWeight: 700
+              },
+              variant: "Small",
+              children: k()
+            }
+          )
+        ] })
+      ] }) }) })
+    }
+  );
+};
+export {
+  Mr as InvestementsAllocationChart
+};
+//# sourceMappingURL=InvestmentsAllocationChart.js.map

package/dist/investments/components/allocation/InvestmentsAllocationChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvestmentsAllocationChart.js","sources":["../../../../src/investments/components/allocation/InvestmentsAllocationChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport useTheme from '@mui/material/styles/useTheme'\n\nimport { H1, Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Donut, useGlobalCopyStore } from '../../../common'\nimport {\n  currencyDisplay,\n  InvestmentsAllocationData,\n  percentageDisplay,\n} from './util/createInvestementsAllocationData'\n\nexport interface DonutData {\n  id: string\n  label?: string\n  color: string\n  value: number\n}\nexport interface InvestmentsData {\n  investmentsData: InvestmentsAllocationData[]\n  donutData: DonutData[]\n  totalAmount: number\n  totalGainLoss: number\n  totalMarketValue: number\n  totalGainLossPercentage: number\n}\ninterface InvestementAllocationProps {\n  data: InvestmentsData\n  hoveredId?: string\n  isPercentage?: boolean\n  onSelected: (id: string) => void\n  onMouseEnter: (id: string) => void\n  onMouseLeave: (id: string) => void\n  selectedId?: string\n  size?: number\n  totalLabel: string\n}\n\nexport const InvestementsAllocationChart: React.FC<InvestementAllocationProps> = ({\n  data,\n  hoveredId,\n  isPercentage,\n  onMouseEnter,\n  onMouseLeave,\n  onSelected,\n  selectedId,\n  size = 150,\n  totalLabel,\n}) => {\n  const theme = useTheme()\n  const isDarkMode = theme.palette.mode === 'dark'\n\n  const selectedInvestments = React.useMemo(\n    () =>\n      selectedId\n        ? data.investmentsData.find(({ guid }: InvestmentsAllocationData) => guid === selectedId)\n        : undefined,\n    [selectedId],\n  )\n  const {\n    investments: { allocation: copy },\n  } = useGlobalCopyStore()\n  const donutData = React.useMemo(() => {\n    if (data.donutData.length > 0) return data.donutData\n\n    // Empty Donut zero state\n    return [{ id: '0', color: theme.palette.border.light, value: 100 }]\n  }, [data, theme])\n\n  const gainDisplayColor = isDarkMode ? '#0AC295' : '#09A57F'\n  const lossDisplayColor = isDarkMode ? 'grey.300' : 'grey.700'\n\n  const getGainLossDisplay = () => {\n    if (selectedInvestments) return copy.pie_chart_centered_click_for_details\n    if (isPercentage) return percentageDisplay(data.totalGainLossPercentage)\n    return currencyDisplay(data.totalGainLoss)\n  }\n\n  const gainLossDisplayColor = data.totalGainLoss >= 0 ? gainDisplayColor : lossDisplayColor\n\n  return (\n    <Donut\n      data={donutData}\n      hoveredId={hoveredId}\n      onClick={onSelected}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      selectedId={selectedId}\n      size={size}\n    >\n      <Stack alignItems=\"center\" height=\"100%\" justifyContent=\"center\" width=\"100%\">\n        <Stack alignItems=\"center\" justifyContent=\"center\" minHeight={size} minWidth={size}>\n          <Stack alignItems=\"center\" sx={{ gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } }}>\n            <Text color=\"text.secondary\" noWrap={true}>\n              {selectedInvestments?.displayName ?? totalLabel}\n            </Text>\n            <H1 color=\"text.primary\">\n              {currencyDisplay(selectedInvestments?.value ?? data.totalMarketValue)}\n            </H1>\n\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n              {!selectedInvestments && (\n                <Icon\n                  name={data.totalGainLoss >= 0 ? 'trending_up' : 'trending_down'}\n                  size={20}\n                  sx={{ color: gainLossDisplayColor }}\n                />\n              )}\n              <Text\n                sx={{\n                  color: gainLossDisplayColor,\n                  fontWeight: 700,\n                }}\n                variant=\"Small\"\n              >\n                {getGainLossDisplay()}\n              </Text>\n            </Stack>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Donut>\n  )\n}\n"],"names":["InvestementsAllocationChart","data","hoveredId","isPercentage","onMouseEnter","onMouseLeave","onSelected","selectedId","size","totalLabel","theme","useTheme","isDarkMode","selectedInvestments","React","guid","copy","useGlobalCopyStore","donutData","gainDisplayColor","lossDisplayColor","getGainLossDisplay","percentageDisplay","currencyDisplay","gainLossDisplayColor","jsx","Donut","Stack","jsxs","Text","H1","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCO,MAAMA,KAAoE,CAAC;AAAA,EAChF,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,YAAAC;AACF,MAAM;AACJ,QAAMC,IAAQC,KACRC,IAAaF,EAAM,QAAQ,SAAS,QAEpCG,IAAsBC,EAAM;AAAA,IAChC,MACEP,IACIN,EAAK,gBAAgB,KAAK,CAAC,EAAE,MAAAc,EAAK,MAAiCA,MAASR,CAAU,IACtF;AAAA,IACN,CAACA,CAAU;AAAA,EAAA,GAEP;AAAA,IACJ,aAAa,EAAE,YAAYS,EAAK;AAAA,MAC9BC,EAAmB,GACjBC,IAAYJ,EAAM,QAAQ,MAC1Bb,EAAK,UAAU,SAAS,IAAUA,EAAK,YAGpC,CAAC,EAAE,IAAI,KAAK,OAAOS,EAAM,QAAQ,OAAO,OAAO,OAAO,IAAK,CAAA,GACjE,CAACT,GAAMS,CAAK,CAAC,GAEVS,IAAmBP,IAAa,YAAY,WAC5CQ,IAAmBR,IAAa,aAAa,YAE7CS,IAAqB,MACrBR,IAA4BG,EAAK,uCACjCb,IAAqBmB,EAAkBrB,EAAK,uBAAuB,IAChEsB,EAAgBtB,EAAK,aAAa,GAGrCuB,IAAuBvB,EAAK,iBAAiB,IAAIkB,IAAmBC;AAGxE,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMR;AAAA,MACN,WAAAhB;AAAA,MACA,SAASI;AAAA,MACT,cAAAF;AAAA,MACA,cAAAC;AAAA,MACA,YAAAE;AAAA,MACA,MAAAC;AAAA,MAEA,4BAACmB,GAAM,EAAA,YAAW,UAAS,QAAO,QAAO,gBAAe,UAAS,OAAM,QACrE,UAAA,gBAAAF,EAACE,KAAM,YAAW,UAAS,gBAAe,UAAS,WAAWnB,GAAM,UAAUA,GAC5E,UAAC,gBAAAoB,EAAAD,GAAA,EAAM,YAAW,UAAS,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,EAAE,IAAI,GAAG,IAAI,IACvE,GAAA,UAAA;AAAA,QAAA,gBAAAF,EAACI,KAAK,OAAM,kBAAiB,QAAQ,IAClC,UAAAhB,GAAqB,eAAeJ,EACvC,CAAA;AAAA,QACA,gBAAAgB,EAACK,KAAG,OAAM,gBACP,YAAgBjB,GAAqB,SAASZ,EAAK,gBAAgB,EACtE,CAAA;AAAA,QAEA,gBAAA2B,EAACD,GAAM,EAAA,IAAI,EAAE,YAAY,UAAU,eAAe,OAAO,KAAK,EAAA,GAC3D,UAAA;AAAA,UAAA,CAACd,KACA,gBAAAY;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,MAAM9B,EAAK,iBAAiB,IAAI,gBAAgB;AAAA,cAChD,MAAM;AAAA,cACN,IAAI,EAAE,OAAOuB,EAAqB;AAAA,YAAA;AAAA,UACpC;AAAA,UAEF,gBAAAC;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,OAAOL;AAAA,gBACP,YAAY;AAAA,cACd;AAAA,cACA,SAAQ;AAAA,cAEP,UAAmBH,EAAA;AAAA,YAAA;AAAA,UACtB;AAAA,QAAA,GACF;AAAA,MAAA,EACF,CAAA,EACF,CAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}