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

package/dist/common/components/charts/StackedLineChart.js

@@ -0,0 +1,363 @@
+import { jsx as p, jsxs as ot } from "react/jsx-runtime";
+import v from "react";
+import rt from "@mui/material/Box";
+import it from "@mui/material/Stack";
+import { useTheme as et } from "@mui/material/styles";
+import { LineChart as mt } from "@mui/x-charts";
+import { formatDate as H, DATE_FORMATS_INTL as C } from "../../constants/DateFormats.js";
+import "../../constants/Account.js";
+import "../../constants/Category.js";
+import "date-fns/getUnixTime";
+import "bowser";
+import "@mui/material/Button";
+import "@mxenabled/mxui";
+import "@mui/material/Tooltip";
+import "@mui/material/IconButton";
+import "../accountfilter/AccountFilterOptions.js";
+import "../../context/GlobalDataProvider.js";
+import "../../context/WidgetContainerProvider.js";
+import { useScreenSize as pt } from "../../hooks/useScreenSize.js";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/addMonths";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isBefore";
+import "date-fns/isSameMonth";
+import "date-fns/startOfMonth";
+import "date-fns/startOfToday";
+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/useMediaQuery";
+import "./linechart/CustomLegend.js";
+import "@mui/material";
+import "@mui/x-charts/ChartsTooltip";
+import at from "./stackedlinechart/CustomAreaTooltip.js";
+import { CustomPointTooltip as st } from "./stackedlinechart/CustomPointTooltip.js";
+import { CustomLegend as nt } from "./stackedlinechart/CustomLegend.js";
+import "date-fns/addYears";
+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 "../ErrorBoundary.js";
+import "@mui/material/Card";
+import "@mui/material/CardContent";
+import "@mui/material/CardHeader";
+import "../WidgetContainer.js";
+import "../ConnectDrawer.js";
+import "uuid";
+import { formatCurrency as T } from "../../utils/NumberFormatting.js";
+import "@mui/material/CircularProgress";
+import "../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 "../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 "../../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 "../../../finstrong/components/FinancialStrengthGraph.js";
+import "../../../finstrong/components/CreditScoreGraph.js";
+import "date-fns/fromUnixTime";
+import "../../../finstrong/FinstrongWidget.js";
+import "../../../goals/GoalsWidget.js";
+import "../../../goals/GoalsMicroWidget.js";
+import "../../../investments/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/addQuarters";
+import "date-fns/nextDay";
+import "date-fns/parseISO";
+import "date-fns/setDate";
+import "date-fns/subQuarters";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "date-fns/addWeeks";
+import "date-fns/getDay";
+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";
+const ai = ({
+  onHoverArea: k,
+  onHoverPoint: L,
+  onHoverLegend: P,
+  onClickLegend: y,
+  stackedDatasets: i,
+  unstackedDatasets: a = [],
+  height: R,
+  width: I
+}) => {
+  const E = et(), { isMobile: G } = pt(), f = v.useRef(null), [d, b] = v.useState(null), [O, s] = v.useState({
+    hoveredSeriesId: null,
+    hoveredAreaData: null,
+    isAreaHovered: !1,
+    cursorPos: { x: 0, y: 0 }
+  }), { hoveredSeriesId: m, hoveredAreaData: S, isAreaHovered: F, cursorPos: n } = O, _ = F && m && S, x = !_, u = [...i, ...a], N = u[0]?.dataset.length ?? 0, g = u.flatMap((t) => t.dataset.map((o) => o.x)), w = u.flatMap((t) => t.dataset.map((o) => o.y)), B = i[0]?.dataset?.map(
+    (t, o) => i.reduce((r, e) => r + e.dataset[o]?.y || 0, 0)
+  ) ?? [0], W = Math.max(...B), Y = Math.max(
+    ...a.flatMap((t) => t.dataset.map((o) => o.y))
+  ), $ = Math.floor(Math.min(...w) / 100) * 100, j = Math.ceil(Math.max(W, Y) / 100) * 100, c = i.map((t, o) => ({
+    id: `stacked-${o}`,
+    guid: t.category_guid,
+    top_level_guid: t.top_level_category_guid,
+    area: !0,
+    color: i[o].category_color ?? E.palette.primary.main,
+    data: t.dataset.map((r) => r.y),
+    label: i[o].category_name,
+    stack: "total",
+    type: "line",
+    highlightScope: { highlight: "item" },
+    valueFormatter: (r) => T(r, "0,0")
+  })), A = a.map((t, o) => ({
+    id: `unstacked-${o}`,
+    guid: t.category_guid,
+    top_level_guid: t.top_level_category_guid,
+    area: !1,
+    color: t.category_color,
+    data: t.dataset.map((r) => r.y),
+    label: t.category_name,
+    type: "line",
+    valueFormatter: (r) => T(r, "0,0")
+  })), M = [...c, ...A], z = [
+    ...c.map(({ guid: t, top_level_guid: o }) => ({
+      guid: t,
+      top_level_guid: o
+    })),
+    ...A.map(({ guid: t, top_level_guid: o }) => ({
+      guid: t,
+      top_level_guid: o
+    }))
+  ], l = (t) => {
+    const r = t.startsWith("stacked-") ? i[parseInt(t.split("-")[1])] : a[parseInt(t.split("-")[1])];
+    return {
+      guid: r?.category_guid,
+      topLevelGuid: r?.top_level_category_guid
+    };
+  }, D = (t) => {
+    b(t), P?.(t ?? "");
+  }, X = (t) => {
+    y?.(t ?? "");
+  }, q = () => {
+    const t = l(String(m)).guid;
+    t && y?.(t);
+  }, J = (t) => {
+    const o = String(t?.seriesId), r = l(o).guid, e = M.find((h) => h.id === o), U = e && t?.dataIndex !== void 0, V = e && t?.dataIndex === void 0;
+    if (U)
+      s({
+        hoveredSeriesId: o,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: n
+      }), L?.(r);
+    else if (V) {
+      const h = e?.data.map((Z, tt) => ({
+        x: g[tt],
+        y: Z
+      })) ?? [];
+      s({
+        hoveredSeriesId: o,
+        hoveredAreaData: h,
+        isAreaHovered: !0,
+        cursorPos: n
+      }), k?.(r);
+    } else
+      s({
+        hoveredSeriesId: null,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: n
+      });
+  }, K = (t) => {
+    const o = t.currentTarget.getBoundingClientRect();
+    s((r) => ({
+      ...r,
+      cursorPos: {
+        x: t.clientX - o.left,
+        y: t.clientY - o.top
+      }
+    }));
+  }, Q = {
+    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
+    },
+    ...d && c.reduce((t, o, r) => {
+      const e = `.MuiAreaElement-series-stacked-${r}`;
+      return t[e] = {
+        opacity: c[r].guid === d ? 0.9 : 0.2
+      }, t;
+    }, {})
+  };
+  return /* @__PURE__ */ p(rt, { onMouseMove: K, ref: f, style: { position: "relative" }, children: /* @__PURE__ */ ot(
+    it,
+    {
+      direction: { xs: "column", md: "column" },
+      spacing: { xs: 0, md: 4 },
+      sx: { width: "100%", position: "relative" },
+      children: [
+        /* @__PURE__ */ p(
+          mt,
+          {
+            height: R || 400,
+            margin: { bottom: 50 },
+            onAreaClick: q,
+            onHighlightChange: J,
+            series: M,
+            skipAnimation: !0,
+            slotProps: {
+              legend: {
+                hidden: !0
+              }
+            },
+            slots: {
+              itemContent: (t) => x && m ? /* @__PURE__ */ p(
+                st,
+                {
+                  categoryGuids: l(m),
+                  xData: g,
+                  ...t
+                }
+              ) : null
+            },
+            sx: Q,
+            tooltip: {
+              trigger: x ? "item" : "none"
+            },
+            width: I,
+            xAxis: [
+              {
+                data: g,
+                scaleType: "time",
+                valueFormatter: (t) => H(t, C.MONTH_SHORT_YEAR),
+                tickNumber: N
+                // How many ticks to show on the x-axis
+              }
+            ],
+            yAxis: [
+              {
+                min: $,
+                max: j || 100
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ p(
+          nt,
+          {
+            categoryGuids: z,
+            hoveredLegend: d,
+            onClickLegend: X,
+            onHoverLegend: D,
+            sx: { px: G ? 0 : 24 }
+          }
+        ),
+        _ && /* @__PURE__ */ p(
+          at,
+          {
+            categoryGuids: l(m),
+            chartContainerRef: f,
+            cursorPosition: n,
+            hoveredAreaData: S.map((t) => ({
+              ...t,
+              x: H(t.x, C.MONTH_SHORT_YEAR)
+            }))
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  ai as StackedLineChart
+};
+//# sourceMappingURL=StackedLineChart.js.map

package/dist/common/components/charts/StackedLineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedLineChart.js","sources":["../../../../src/common/components/charts/StackedLineChart.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { LineSeriesType, LineChart, HighlightItemData } from '@mui/x-charts'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../constants'\nimport { formatCurrency } from '../../utils'\nimport { useScreenSize } from '../../hooks'\n\nimport CustomAreaTooltip from './stackedlinechart/CustomAreaTooltip'\nimport { CustomPointTooltip } from './stackedlinechart/CustomPointTooltip'\nimport { CustomLegend } from './stackedlinechart/CustomLegend'\n\ntype DataPoint = { x: Date; y: number }\ntype Dataset = DataPoint[]\n\ninterface StackedLineChartData {\n  top_level_category_guid: string\n  category_guid: string\n  category_name: string\n  category_color: string\n  dataset: Dataset\n}\n\ninterface StackedLineChartProps {\n  stackedDatasets: StackedLineChartData[]\n  unstackedDatasets?: StackedLineChartData[]\n  onHoverArea?: (category: string) => void\n  onHoverPoint?: (category: string) => void\n  onHoverLegend?: (category: string) => void\n  onClickLegend?: (category: string) => void\n  height?: number\n  width?: number\n}\n\nexport const StackedLineChart: React.FC<StackedLineChartProps> = ({\n  onHoverArea,\n  onHoverPoint,\n  onHoverLegend,\n  onClickLegend,\n  stackedDatasets,\n  unstackedDatasets = [],\n  height,\n  width,\n}) => {\n  const theme = useTheme()\n  const { isMobile } = useScreenSize()\n  const chartContainerRef = React.useRef<HTMLDivElement>(null)\n\n  const [hoveredLegend, setHoveredLegend] = React.useState<string | null>(null)\n  const [hoverState, setHoverState] = React.useState({\n    hoveredSeriesId: null as string | null,\n    hoveredAreaData: null as DataPoint[] | null,\n    isAreaHovered: false,\n    cursorPos: { x: 0, y: 0 },\n  })\n\n  const { hoveredSeriesId, hoveredAreaData, isAreaHovered, cursorPos } = hoverState\n  const showAreaTooltip = isAreaHovered && hoveredSeriesId && hoveredAreaData\n  const showPointTooltip = !showAreaTooltip\n\n  const datasets = [...stackedDatasets, ...unstackedDatasets]\n  const xTicks = datasets[0]?.dataset.length ?? 0\n  const xData = datasets.flatMap((data) => data.dataset.map((d) => d.x))\n  const yData = datasets.flatMap((data) => data.dataset.map((d) => d.y))\n\n  // Calculate max cumulative heights for stacked datasets\n  const cumulativeHeights = stackedDatasets[0]?.dataset?.map((_, i) =>\n    stackedDatasets.reduce((sum, dataset) => sum + dataset.dataset[i]?.y || 0, 0),\n  ) ?? [0]\n  const stackedMax = Math.max(...cumulativeHeights)\n  const unstackedMax = Math.max(\n    ...unstackedDatasets.flatMap((data) => data.dataset.map((d) => d.y)),\n  )\n\n  const yMin = Math.floor(Math.min(...yData) / 100) * 100\n  const yMax = Math.ceil(Math.max(stackedMax, unstackedMax) / 100) * 100\n\n  const stackedSeries = stackedDatasets.map((data, index) => ({\n    id: `stacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: true,\n    color: stackedDatasets[index].category_color ?? theme.palette.primary.main,\n    data: data.dataset.map((d) => d.y),\n    label: stackedDatasets[index].category_name,\n    stack: 'total',\n    type: 'line',\n    highlightScope: { highlight: 'item' },\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const unstackedSeries = unstackedDatasets.map((data, index) => ({\n    id: `unstacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: false,\n    color: data.category_color,\n    data: data.dataset.map((d) => d.y),\n    label: data.category_name,\n    type: 'line',\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const series = [...stackedSeries, ...unstackedSeries]\n  const guids = [\n    ...stackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n    ...unstackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n  ]\n\n  const getSeriesCategoryGuids = (seriesId: string) => {\n    const isStacked = seriesId.startsWith('stacked-')\n    const dataset = isStacked\n      ? stackedDatasets[parseInt(seriesId.split('-')[1])]\n      : unstackedDatasets[parseInt(seriesId.split('-')[1])]\n    return {\n      guid: dataset?.category_guid,\n      topLevelGuid: dataset?.top_level_category_guid,\n    }\n  }\n\n  const handleHoverLegend = (guid: string | null) => {\n    setHoveredLegend(guid)\n    onHoverLegend?.(guid ?? '')\n  }\n\n  const handleClickLegend = (guid: string | null) => {\n    onClickLegend?.(guid ?? '')\n  }\n\n  const handleClickArea = () => {\n    const clickedSeriesGuid = getSeriesCategoryGuids(String(hoveredSeriesId)).guid\n    if (clickedSeriesGuid) onClickLegend?.(clickedSeriesGuid)\n  }\n\n  const handleHighlightChange = (highlightedItem: HighlightItemData | null) => {\n    const hoveredSeriesId = String(highlightedItem?.seriesId)\n    const hoveredSeriesGuid = getSeriesCategoryGuids(hoveredSeriesId).guid\n    const hoveredSeries = series.find((s) => s.id === hoveredSeriesId)\n    const isPointHovered = hoveredSeries && highlightedItem?.dataIndex !== undefined\n    const isAreaHovered = hoveredSeries && highlightedItem?.dataIndex === undefined\n\n    if (isPointHovered) {\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n      onHoverPoint?.(hoveredSeriesGuid)\n    } else if (isAreaHovered) {\n      const hoveredDataPoints =\n        hoveredSeries?.data.map((yValue, index) => ({\n          x: xData[index],\n          y: yValue,\n        })) ?? []\n\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: hoveredDataPoints,\n        isAreaHovered: true,\n        cursorPos,\n      })\n      onHoverArea?.(hoveredSeriesGuid)\n    } else {\n      setHoverState({\n        hoveredSeriesId: null,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n    }\n  }\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect()\n    setHoverState((prev) => ({\n      ...prev,\n      cursorPos: {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n      },\n    }))\n  }\n\n  const customStyles = {\n    p: 4,\n    '& .MuiBarLabel-root': {\n      fontSize: 10,\n      fontWeight: 600,\n    },\n    '& .MuiAreaElement-root': {\n      opacity: 0.4,\n      transition: 'opacity 0.3s ease',\n    },\n    '& .MuiAreaElement-root:hover': {\n      opacity: 1,\n    },\n    '& [class*=\"MuiLineElement-series-unstacked-\"]': {\n      strokeWidth: 3,\n    },\n    ...(hoveredLegend &&\n      stackedSeries.reduce<Record<string, any>>((acc, _, index) => {\n        const selector = `.MuiAreaElement-series-stacked-${index}`\n        acc[selector] = {\n          opacity: stackedSeries[index].guid === hoveredLegend ? 0.9 : 0.2,\n        }\n        return acc\n      }, {})),\n  }\n\n  return (\n    <Box onMouseMove={handleMouseMove} ref={chartContainerRef} style={{ position: 'relative' }}>\n      <Stack\n        direction={{ xs: 'column', md: 'column' }}\n        spacing={{ xs: 0, md: 4 }}\n        sx={{ width: '100%', position: 'relative' }}\n      >\n        <LineChart\n          height={height || 400}\n          margin={{ bottom: 50 }}\n          onAreaClick={handleClickArea}\n          onHighlightChange={handleHighlightChange}\n          series={series as LineSeriesType[]}\n          skipAnimation={true}\n          slotProps={{\n            legend: {\n              hidden: true,\n            },\n          }}\n          slots={{\n            itemContent: (props) => {\n              return showPointTooltip && hoveredSeriesId ? (\n                <CustomPointTooltip\n                  categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n                  xData={xData}\n                  {...props}\n                />\n              ) : null\n            },\n          }}\n          sx={customStyles}\n          tooltip={{\n            trigger: showPointTooltip ? 'item' : 'none',\n          }}\n          width={width}\n          xAxis={[\n            {\n              data: xData,\n              scaleType: 'time',\n              valueFormatter: (value: Date) =>\n                formatDate(value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n              tickNumber: xTicks, // How many ticks to show on the x-axis\n            },\n          ]}\n          yAxis={[\n            {\n              min: yMin,\n              max: yMax || 100,\n            },\n          ]}\n        />\n        <CustomLegend\n          categoryGuids={guids}\n          hoveredLegend={hoveredLegend}\n          onClickLegend={handleClickLegend}\n          onHoverLegend={handleHoverLegend}\n          sx={{ px: isMobile ? 0 : 24 }}\n        />\n\n        {showAreaTooltip && (\n          <CustomAreaTooltip\n            categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n            chartContainerRef={chartContainerRef}\n            cursorPosition={cursorPos}\n            hoveredAreaData={hoveredAreaData.map((point) => ({\n              ...point,\n              x: formatDate(point.x, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n            }))}\n          />\n        )}\n      </Stack>\n    </Box>\n  )\n}\n"],"names":["StackedLineChart","onHoverArea","onHoverPoint","onHoverLegend","onClickLegend","stackedDatasets","unstackedDatasets","height","width","theme","useTheme","isMobile","useScreenSize","chartContainerRef","React","hoveredLegend","setHoveredLegend","hoverState","setHoverState","hoveredSeriesId","hoveredAreaData","isAreaHovered","cursorPos","showAreaTooltip","showPointTooltip","datasets","xTicks","xData","data","d","yData","cumulativeHeights","_","i","sum","dataset","stackedMax","unstackedMax","yMin","yMax","stackedSeries","index","value","formatCurrency","unstackedSeries","series","guids","guid","top_level_guid","getSeriesCategoryGuids","seriesId","handleHoverLegend","handleClickLegend","handleClickArea","clickedSeriesGuid","handleHighlightChange","highlightedItem","hoveredSeriesGuid","hoveredSeries","s","isPointHovered","hoveredDataPoints","yValue","handleMouseMove","event","rect","prev","customStyles","acc","selector","jsx","Box","jsxs","Stack","LineChart","props","CustomPointTooltip","formatDate","DATE_FORMATS_INTL","CustomLegend","CustomAreaTooltip","point"],"mappings":"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"}

package/dist/common/components/charts/StatusBar.js

@@ -0,0 +1,31 @@
+import { jsx as a } from "react/jsx-runtime";
+import i from "@mui/material/Box";
+import p from "@mui/material/Stack";
+const s = ({ data: c, height: r = 8 }) => {
+  const o = `${r / 4}px`;
+  return /* @__PURE__ */ a(
+    p,
+    {
+      bgcolor: "divider",
+      borderRadius: o,
+      direction: "row",
+      gap: 2,
+      height: r,
+      width: "100%",
+      children: c.map((t, d) => /* @__PURE__ */ a(
+        i,
+        {
+          bgcolor: t.color,
+          borderRadius: o,
+          height: r,
+          width: t.percentage
+        },
+        d
+      ))
+    }
+  );
+};
+export {
+  s as default
+};
+//# sourceMappingURL=StatusBar.js.map

package/dist/common/components/charts/StatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.js","sources":["../../../../src/common/components/charts/StatusBar.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nexport type StatusBarData = {\n  color: string\n  percentage: string\n}\n\ninterface StatusBarProps {\n  data: StatusBarData[]\n  height?: number\n}\n\nconst StatusBar = ({ data, height = 8 }: StatusBarProps) => {\n  const borderRadius = `${height / 4}px`\n\n  return (\n    <Stack\n      bgcolor=\"divider\"\n      borderRadius={borderRadius}\n      direction=\"row\"\n      gap={2}\n      height={height}\n      width=\"100%\"\n    >\n      {data.map((item, index) => (\n        <Box\n          bgcolor={item.color}\n          borderRadius={borderRadius}\n          height={height}\n          key={index}\n          width={item.percentage}\n        />\n      ))}\n    </Stack>\n  )\n}\n\nexport default StatusBar\n"],"names":["StatusBar","data","height","borderRadius","jsx","Stack","item","index","Box"],"mappings":";;;AAaA,MAAMA,IAAY,CAAC,EAAE,MAAAC,GAAM,QAAAC,IAAS,QAAwB;AACpD,QAAAC,IAAe,GAAGD,IAAS,CAAC;AAGhC,SAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,cAAAF;AAAA,MACA,WAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAAD;AAAA,MACA,OAAM;AAAA,MAEL,UAAKD,EAAA,IAAI,CAACK,GAAMC,MACf,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAASF,EAAK;AAAA,UACd,cAAAH;AAAA,UACA,QAAAD;AAAA,UAEA,OAAOI,EAAK;AAAA,QAAA;AAAA,QADPC;AAAA,MAAA,CAGR;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/common/components/charts/linechart/CustomLegend.js

@@ -0,0 +1,208 @@
+import { jsxs as i, jsx as o, Fragment as h } from "react/jsx-runtime";
+import { observer as g } from "mobx-react-lite";
+import { Stack as m, Box as x } from "@mui/material";
+import { Text as t } from "@mxenabled/mxui";
+import "date-fns/getUnixTime";
+import "bowser";
+import "date-fns/intlFormat";
+import "../../../constants/Account.js";
+import "../../../constants/Category.js";
+import "react";
+import "@mui/material/Button";
+import "@mui/material/Tooltip";
+import "@mui/material/Box";
+import "@mui/material/IconButton";
+import "../../accountfilter/AccountFilterOptions.js";
+import { useGlobalCopyStore as y } from "../../../context/hooks.js";
+import "../../../context/GlobalDataProvider.js";
+import "../../../context/WidgetContainerProvider.js";
+import "@mui/material/styles/useTheme";
+import "@mui/material/useMediaQuery";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/addMonths";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isBefore";
+import "date-fns/isSameMonth";
+import "date-fns/startOfMonth";
+import "date-fns/startOfToday";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mxenabled/mx-icons";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "d3";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import "@mui/x-charts/ChartsTooltip";
+import "@mui/material/Stack";
+import "../stackedlinechart/CustomAreaTooltip.js";
+import "date-fns/addYears";
+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 "../../ErrorBoundary.js";
+import "@mui/material/Card";
+import "@mui/material/CardContent";
+import "@mui/material/CardHeader";
+import "../../WidgetContainer.js";
+import "../../ConnectDrawer.js";
+import "uuid";
+import { formatCurrency as a } from "../../../utils/NumberFormatting.js";
+import "@mui/material/CircularProgress";
+import "../../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 "../../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 "../../../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 "../../../../finstrong/components/FinancialStrengthGraph.js";
+import "../../../../finstrong/components/CreditScoreGraph.js";
+import "date-fns/fromUnixTime";
+import "../../../../finstrong/FinstrongWidget.js";
+import "../../../../goals/GoalsWidget.js";
+import "../../../../goals/GoalsMicroWidget.js";
+import "../../../../investments/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/addQuarters";
+import "date-fns/nextDay";
+import "date-fns/parseISO";
+import "date-fns/setDate";
+import "date-fns/subQuarters";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "date-fns/addWeeks";
+import "date-fns/getDay";
+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";
+const C = ({ label: r }) => typeof r == "string" ? /* @__PURE__ */ o(t, { variant: "Small", children: r }) : typeof r == "object" && r.amount && r.label ? /* @__PURE__ */ i(h, { children: [
+  /* @__PURE__ */ o(t, { variant: "Small", children: r.label }),
+  /* @__PURE__ */ o(t, { bold: !0, sx: { marginLeft: 8 }, variant: "Small", children: a(r.amount, "0,0") })
+] }) : null, S = ({
+  average: r,
+  labels: c = [],
+  series: s,
+  style: d,
+  title: p,
+  valueFormatterString: n
+}) => {
+  const { common: u } = y();
+  return /* @__PURE__ */ i(m, { style: { flexDirection: "row", gap: 24, ...d }, children: [
+    s.map((f, e) => {
+      const l = c[e];
+      return l ? /* @__PURE__ */ i(
+        m,
+        {
+          style: { alignItems: "center", flexDirection: "row", flexWrap: "wrap" },
+          children: [
+            /* @__PURE__ */ o(
+              x,
+              {
+                sx: {
+                  width: 10,
+                  height: 10,
+                  backgroundColor: f.color,
+                  marginRight: 8
+                }
+              }
+            ),
+            /* @__PURE__ */ o(C, { label: l })
+          ]
+        },
+        e
+      ) : null;
+    }),
+    r && /* @__PURE__ */ i(m, { sx: { alignItems: "center", flexDirection: "row" }, children: [
+      /* @__PURE__ */ o(t, { bold: !0, sx: { marginRight: 8 }, variant: "Small", children: "– –" }),
+      /* @__PURE__ */ i(t, { variant: "Small", children: [
+        p || u.average,
+        "  "
+      ] }),
+      /* @__PURE__ */ o(t, { bold: !0, variant: "Small", children: n ? a(r, n) : r })
+    ] })
+  ] });
+}, gt = g(S);
+export {
+  C as CustomLegendLabel,
+  gt as default
+};
+//# sourceMappingURL=CustomLegend.js.map

package/dist/common/components/charts/linechart/CustomLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomLegend.js","sources":["../../../../../src/common/components/charts/linechart/CustomLegend.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport { Box, Stack } from '@mui/material'\nimport { Text } from '@mxenabled/mxui'\n\nimport { formatCurrency } from '../../../utils'\nimport { useGlobalCopyStore } from '../../../../common'\nimport { LineChartLabel } from '../LineChart'\n\nexport const CustomLegendLabel = ({ label }: { label: LineChartLabel }) => {\n  if (typeof label === 'string') {\n    return <Text variant=\"Small\">{label}</Text>\n  }\n  if (typeof label === 'object' && label.amount && label.label) {\n    return (\n      <>\n        <Text variant=\"Small\">{label.label}</Text>\n        <Text bold={true} sx={{ marginLeft: 8 }} variant=\"Small\">\n          {formatCurrency(label.amount, '0,0')}\n        </Text>\n      </>\n    )\n  }\n  return null\n}\n\nconst CustomLegend = ({\n  average,\n  labels = [],\n  series,\n  style,\n  title,\n  valueFormatterString,\n}: {\n  average?: number\n  labels?: LineChartLabel[]\n  series: any[]\n  title?: string\n  style: any\n  valueFormatterString?: string\n}) => {\n  const { common: commonCopy } = useGlobalCopyStore()\n  return (\n    <Stack style={{ flexDirection: 'row', gap: 24, ...style }}>\n      {series.map((s, index) => {\n        const label = labels[index]\n        // Skip series without a label\n        return label ? (\n          <Stack\n            key={index}\n            style={{ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap' }}\n          >\n            <Box\n              sx={{\n                width: 10,\n                height: 10,\n                backgroundColor: s.color,\n                marginRight: 8,\n              }}\n            />\n            <CustomLegendLabel label={label} />\n          </Stack>\n        ) : null\n      })}\n      {average && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n          <Text bold={true} sx={{ marginRight: 8 }} variant=\"Small\">\n            – –\n          </Text>\n          <Text variant=\"Small\">{title ? title : commonCopy.average}&nbsp;&nbsp;</Text>\n          <Text bold={true} variant=\"Small\">\n            {valueFormatterString ? formatCurrency(average, valueFormatterString) : average}\n          </Text>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n\nexport default observer(CustomLegend)\n"],"names":["CustomLegendLabel","label","jsx","Text","jsxs","Fragment","formatCurrency","CustomLegend","average","labels","series","style","title","valueFormatterString","commonCopy","useGlobalCopyStore","Stack","s","index","Box","CustomLegend$1","observer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAMA,IAAoB,CAAC,EAAE,OAAAC,QAC9B,OAAOA,KAAU,WACX,gBAAAC,EAAAC,GAAA,EAAK,SAAQ,SAAS,UAAMF,EAAA,CAAA,IAElC,OAAOA,KAAU,YAAYA,EAAM,UAAUA,EAAM,QAGjD,gBAAAG,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAH,EAACC,GAAK,EAAA,SAAQ,SAAS,UAAAF,EAAM,OAAM;AAAA,EAClC,gBAAAC,EAAAC,GAAA,EAAK,MAAM,IAAM,IAAI,EAAE,YAAY,EAAE,GAAG,SAAQ,SAC9C,UAAAG,EAAeL,EAAM,QAAQ,KAAK,GACrC;AACF,EAAA,CAAA,IAGG,MAGHM,IAAe,CAAC;AAAA,EACpB,SAAAC;AAAA,EACA,QAAAC,IAAS,CAAC;AAAA,EACV,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,sBAAAC;AACF,MAOM;AACJ,QAAM,EAAE,QAAQC,EAAW,IAAIC,EAAmB;AAEhD,SAAA,gBAAAX,EAACY,GAAM,EAAA,OAAO,EAAE,eAAe,OAAO,KAAK,IAAI,GAAGL,EAAA,GAC/C,UAAA;AAAA,IAAOD,EAAA,IAAI,CAACO,GAAGC,MAAU;AAClB,YAAAjB,IAAQQ,EAAOS,CAAK;AAE1B,aAAOjB,IACL,gBAAAG;AAAA,QAACY;AAAA,QAAA;AAAA,UAEC,OAAO,EAAE,YAAY,UAAU,eAAe,OAAO,UAAU,OAAO;AAAA,UAEtE,UAAA;AAAA,YAAA,gBAAAd;AAAA,cAACiB;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,iBAAiBF,EAAE;AAAA,kBACnB,aAAa;AAAA,gBACf;AAAA,cAAA;AAAA,YACF;AAAA,YACA,gBAAAf,EAACF,KAAkB,OAAAC,GAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAX5BiB;AAAA,MAaL,IAAA;AAAA,IAAA,CACL;AAAA,IACAV,uBACEQ,GAAM,EAAA,IAAI,EAAE,YAAY,UAAU,eAAe,MAChD,GAAA,UAAA;AAAA,MAAC,gBAAAd,EAAAC,GAAA,EAAK,MAAM,IAAM,IAAI,EAAE,aAAa,EAAE,GAAG,SAAQ,SAAQ,UAE1D,MAAA,CAAA;AAAA,MACA,gBAAAC,EAACD,GAAK,EAAA,SAAQ,SAAS,UAAA;AAAA,QAAAS,KAAgBE,EAAW;AAAA,QAAQ;AAAA,MAAA,GAAY;AAAA,MACtE,gBAAAZ,EAACC,GAAK,EAAA,MAAM,IAAM,SAAQ,SACvB,UAAAU,IAAuBP,EAAeE,GAASK,CAAoB,IAAIL,EAC1E,CAAA;AAAA,IAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEeY,KAAAC,EAASd,CAAY;"}