@mx-cartographer/experiences 9.3.0-alpha.bb2 → 9.3.0

package/dist/trends/TrendsFullWidget.es.js

@@ -5,63 +5,63 @@ import { ANALYTICS_EVENTS as n } from "../common/constants/Analytics.es.js";
 import { getStackedLineChartData as le } from "../core/utils/TrendsUtil.es.js";
 import me from "../common/components/Loader.es.js";
 import { WidgetContainer as fe } from "../common/components/WidgetContainer.es.js";
-import { getTopLevelCategoryTotals as ge, isExpense as Te, isIncome as ue } from "./utils/shared.es.js";
+import { getTopLevelCategoryTotals as ge, isExpense as ue, isIncome as Te } from "./utils/shared.es.js";
 import { TRENDS_ANALYTICS_METADATA as pe } from "./constants/TrendsWidget.es.js";
 import { StackedLineChart as De } from "../common/components/charts/StackedLineChart.es.js";
 import Ce from "./components/TrendsViewToggle.es.js";
-import he from "./components/DateRangeText.es.js";
-import Se from "./components/TrendsTableContainer.es.js";
-import _e from "./components/TrendsDrawer.es.js";
+import Se from "./components/DateRangeText.es.js";
+import _e from "./components/TrendsTableContainer.es.js";
+import Ee from "./components/TrendsDrawer.es.js";
 import s from "react";
-import { observer as Ee } from "mobx-react-lite";
+import { observer as he } from "mobx-react-lite";
 import D from "@mui/material/Stack";
 import { Icon as Le } from "@mxenabled/mxui";
-import E from "@mui/material/Button";
+import h from "@mui/material/Button";
 import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import L from "@mui/material/Box";
-import { addSeconds as Re } from "date-fns/addSeconds";
-import { differenceInCalendarMonths as R } from "date-fns/differenceInCalendarMonths";
-var we = ({ onBackClick: w, onMenuClick: y, sx: I }) => {
-  const { onEvent: a } = ae(), { isDesktop: k, isTablet: v, isMobile: m } = ce(), { isAccountDataLoaded: N, loadAccountData: A } = te(), { categoriesLoaded: b, loadCategories: x, loadDateRangeCategoryTotals: H, loadMonthlyCategoryTotals: W, monthlyCategoryTotals: C, getCategoryName: h } = oe(), { isTransactionDataLoaded: G, loadTransactionData: M, sortedTransactions: O } = se(), { selectedDateRange: t, setSelectedDateRange: V } = ie(), { isInitialized: f, selectedAccounts: g } = ne(), { trends: T } = re(), [u, z] = s.useState(!1), [F, S] = s.useState(!1), [l, K] = s.useState("Chart"), [r, p] = s.useState(""), [j, $] = s.useState(window.innerHeight), B = j - (m ? 315 : 345);
+import { differenceInCalendarMonths as w } from "date-fns/differenceInCalendarMonths";
+import { addSeconds as we } from "date-fns/addSeconds";
+var Re = ({ onBackClick: R, onMenuClick: y, sx: I }) => {
+  const { onEvent: a } = ae(), { isDesktop: k, isTablet: v, isMobile: f } = ce(), { isAccountDataLoaded: l, loadAccountData: A } = te(), { categoriesLoaded: N, loadCategories: b, monthlyCategoryTotals: C, getCategoryName: S, reloadCategoryTotals: x } = oe(), { isTransactionDataLoaded: H, loadTransactionData: G, sortedTransactions: W } = se(), { selectedDateRange: t, setSelectedDateRange: O } = ie(), { isInitialized: g, selectedAccounts: V, selectedAccountGuids: z } = ne(), { trends: u } = re(), [T, M] = s.useState(!1), [F, _] = s.useState(!1), [m, j] = s.useState("Chart"), [r, p] = s.useState(""), [K, $] = s.useState(window.innerHeight), B = K - (f ? 315 : 345);
   de({
     widgetName: "TrendsFullWidget",
-    isLoaded: u
+    isLoaded: T
   }), s.useEffect(() => {
     const e = () => $(window.innerHeight);
-    return window.addEventListener("resize", e), N || A().finally(), b || x().finally(), G || M().finally(), () => window.removeEventListener("resize", e);
+    return window.addEventListener("resize", e), l || A().finally(), N || b().finally(), H || G().finally(), () => window.removeEventListener("resize", e);
   }, []), s.useEffect(() => {
-    f && H(g, t.start, t.end).then(() => {
-      W(g, t.start, t.end);
-    }).finally(() => {
-      z(!0), a(n.TRENDS_LOAD_WIDGET, {
+    g && l && x(V, t.start, t.end).finally(() => {
+      M(!0), a(n.TRENDS_LOAD_WIDGET, {
         ...pe,
-        time_period: `${R(t.end, t.start)}M`
+        time_period: `${w(t.end, t.start)}M`
       });
     });
   }, [
-    f,
     g,
-    t
+    l,
+    z.join(","),
+    t.start.getTime(),
+    t.end.getTime()
   ]);
-  const _ = s.useMemo(() => {
-    if (!u) return {
+  const E = s.useMemo(() => {
+    if (!T) return {
       stackedDatasets: [],
       unstackedDatasets: []
     };
     const e = le(C, t.start, t.end), i = r.length ? e.filter((d) => d.top_level_category_guid === r || d.category_guid === r) : ge(e);
     return {
-      stackedDatasets: i.filter(Te),
-      unstackedDatasets: i.filter(ue)
+      stackedDatasets: i.filter(ue),
+      unstackedDatasets: i.filter(Te)
     };
   }, [
     C,
     r,
     t
   ]), P = (e, i) => {
-    K(i ?? l), a(n.TRENDS_CLICK_TOGGLE_VIEW);
+    j(i ?? m), a(n.TRENDS_CLICK_TOGGLE_VIEW);
   }, Y = (e) => {
-    const i = Re(e?.[0], 1), d = e?.[1], ee = R(d, i);
-    V({
+    const i = we(e?.[0], 1), d = e?.[1], ee = w(d, i);
+    O({
       start: i,
       end: d
     }), a(n.TRENDS_CLICK_TIME_WINDOW, { time_period: ee + "M" });
@@ -70,23 +70,23 @@ var we = ({ onBackClick: w, onMenuClick: y, sx: I }) => {
   }, q = (e) => {
     p(e);
   }, J = (e) => {
-    p(e), a(n.TRENDS_CLICK_LEGEND, { category: h(e) });
+    p(e), a(n.TRENDS_CLICK_LEGEND, { category: S(e) });
   }, Q = (e) => {
-    a(n.TRENDS_HOVER_LEGEND, { category: h(e) });
+    a(n.TRENDS_HOVER_LEGEND, { category: S(e) });
   }, X = (e) => {
     a(n.TRENDS_HOVER_AREA, { category: e });
   }, Z = (e) => {
     a(n.TRENDS_HOVER_POINT, { category: e });
   };
-  return !f || !u ? /* @__PURE__ */ o(me, {}) : /* @__PURE__ */ c(fe, {
+  return !g || !l || !T ? /* @__PURE__ */ o(me, {}) : /* @__PURE__ */ c(fe, {
     calendarActions: { onRangeChanged: Y },
     dateRange: t,
     dateRangeVariant: "timeframebuttons",
     onAccountsFilterClick: U,
-    onBackClick: w,
+    onBackClick: R,
     onMenuClick: y,
     sx: I,
-    title: T.title,
+    title: u.title,
     children: [/* @__PURE__ */ c(D, {
       sx: { px: k ? 48 : v ? 24 : 12 },
       children: [
@@ -94,15 +94,15 @@ var we = ({ onBackClick: w, onMenuClick: y, sx: I }) => {
           flexDirection: "row",
           justifyContent: "space-between",
           sx: {
-            pb: m ? 12 : 24,
-            pt: m ? 24 : 48
+            pb: f ? 12 : 24,
+            pt: f ? 24 : 48
           },
-          children: [/* @__PURE__ */ o(he, {
+          children: [/* @__PURE__ */ o(Se, {
             selectedCategoryGuid: r,
             selectedDateRange: t
           }), /* @__PURE__ */ o(Ce, {
             onTabChange: P,
-            selectedTab: l
+            selectedTab: m
           })]
         }),
         /* @__PURE__ */ c(D, {
@@ -111,42 +111,42 @@ var we = ({ onBackClick: w, onMenuClick: y, sx: I }) => {
           width: "100%",
           children: [/* @__PURE__ */ o(L, {
             flexGrow: 1,
-            children: r && /* @__PURE__ */ c(E, {
+            children: r && /* @__PURE__ */ c(h, {
               onClick: () => p(""),
               sx: {
                 p: 0,
                 pr: 5
               },
-              children: [/* @__PURE__ */ o(Le, { name: "arrow_back" }), T.all_categories]
+              children: [/* @__PURE__ */ o(Le, { name: "arrow_back" }), u.all_categories]
             })
-          }), /* @__PURE__ */ o(E, {
-            onClick: () => S(!0),
+          }), /* @__PURE__ */ o(h, {
+            onClick: () => _(!0),
             sx: { px: 5 },
-            children: `${T.view_transactions} (${O.length})`
+            children: `${u.view_transactions} (${W.length})`
           })]
         }),
-        /* @__PURE__ */ c(L, { children: [l === "Chart" && /* @__PURE__ */ o(De, {
+        /* @__PURE__ */ c(L, { children: [m === "Chart" && /* @__PURE__ */ o(De, {
           availableHeight: B,
           onClickLegend: J,
           onHoverArea: X,
           onHoverLegend: Q,
           onHoverPoint: Z,
-          stackedDatasets: _.stackedDatasets,
-          unstackedDatasets: _.unstackedDatasets
-        }), l === "Table" && /* @__PURE__ */ o(Se, {
+          stackedDatasets: E.stackedDatasets,
+          unstackedDatasets: E.unstackedDatasets
+        }), m === "Table" && /* @__PURE__ */ o(_e, {
           onClickRow: q,
           selectedCategory: r,
           selectedDateRange: t
         })] })
       ]
-    }), /* @__PURE__ */ o(_e, {
+    }), /* @__PURE__ */ o(Ee, {
       categoryGuid: r,
       dateRange: t,
       isOpen: F,
-      onClose: () => S(!1)
+      onClose: () => _(!1)
     })]
   });
-}, qe = Ee(we);
+}, qe = he(Re);
 export {
   qe as default
 };

package/dist/trends/TrendsFullWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsFullWidget.es.js","names":[],"sources":["../../src/trends/TrendsFullWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { DateRange } from '@mui/x-date-pickers-pro'\nimport { Icon } from '@mxenabled/mxui'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport Button from '@mui/material/Button'\n\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\n\nimport {\n  ANALYTICS_EVENTS,\n  Loader,\n  WidgetContainer,\n  useAccountStore,\n  useEvent,\n  useCategoryStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useScreenSize,\n  useTransactionStore,\n  useTrendsStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { WidgetProps } from '../core'\nimport { StackedLineChart } from '../common/components/charts/StackedLineChart'\n\nimport { getStackedLineChartData, StackedLineChartData } from '../core/utils/TrendsUtil'\nimport { getTopLevelCategoryTotals, isExpense, isIncome } from './utils/shared'\n\nimport TrendsViewToggle, { type TrendsTabValue } from './components/TrendsViewToggle'\nimport DateRangeText from './components/DateRangeText'\nimport TrendsTableContainer from './components/TrendsTableContainer'\nimport TrendsDrawer from './components/TrendsDrawer'\nimport { TRENDS_ANALYTICS_METADATA } from './constants/TrendsWidget'\n\nconst TrendsFullWidget: React.FC<WidgetProps> = ({ onBackClick, onMenuClick, sx }) => {\n  const { onEvent } = useEvent()\n  const { isDesktop, isTablet, isMobile } = useScreenSize()\n  const { isAccountDataLoaded, loadAccountData } = useAccountStore()\n  const {\n    categoriesLoaded,\n    loadCategories,\n    loadDateRangeCategoryTotals,\n    loadMonthlyCategoryTotals,\n    monthlyCategoryTotals,\n    getCategoryName,\n  } = useCategoryStore()\n  const {\n    isTransactionDataLoaded,\n    loadTransactionData,\n    sortedTransactions: transactions,\n  } = useTransactionStore()\n  const { selectedDateRange, setSelectedDateRange } = useTrendsStore()\n  const { isInitialized, selectedAccounts } = useGlobalUiStore()\n  const { trends: copy } = useGlobalCopyStore()\n\n  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)\n  const [showTransactions, setShowTransactions] = React.useState(false)\n  const [selectedTab, setSelectedTab] = React.useState<TrendsTabValue>('Chart')\n  const [selectedCategory, setSelectedCategory] = React.useState('')\n\n  // Control responsive chart height based on available widget iframe viewport height\n  const [viewportHeight, setViewportHeight] = React.useState(window.innerHeight)\n  const unavailableChartHeight = isMobile ? 315 : 345\n  const availableChartHeight = viewportHeight - unavailableChartHeight\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsFullWidget',\n    isLoaded: isWidgetInitialized,\n  })\n\n  React.useEffect(() => {\n    const handleResize = () => setViewportHeight(window.innerHeight)\n    window.addEventListener('resize', handleResize)\n\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n    if (!categoriesLoaded) {\n      loadCategories().finally()\n    }\n    if (!isTransactionDataLoaded) {\n      loadTransactionData().finally()\n    }\n\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  // Initialize monthlyCategoryTotals, and reload on account or date range change\n  React.useEffect(() => {\n    if (isInitialized) {\n      loadDateRangeCategoryTotals(selectedAccounts, selectedDateRange.start, selectedDateRange.end)\n        .then(() => {\n          loadMonthlyCategoryTotals(\n            selectedAccounts,\n            selectedDateRange.start,\n            selectedDateRange.end,\n          )\n        })\n        .finally(() => {\n          setIsWidgetInitialized(true)\n          onEvent(ANALYTICS_EVENTS.TRENDS_LOAD_WIDGET, {\n            ...TRENDS_ANALYTICS_METADATA,\n            time_period: `${differenceInCalendarMonths(selectedDateRange.end, selectedDateRange.start)}M`,\n          })\n        })\n    }\n  }, [isInitialized, selectedAccounts, selectedDateRange])\n\n  // Cache a full year of StackedLineChart data\n  const chartData = React.useMemo(() => {\n    if (!isWidgetInitialized) return { stackedDatasets: [], unstackedDatasets: [] }\n\n    const data = getStackedLineChartData(\n      monthlyCategoryTotals,\n      selectedDateRange.start,\n      selectedDateRange.end,\n    )\n\n    const filteredData = selectedCategory.length\n      ? data.filter(\n          (d) =>\n            d.top_level_category_guid === selectedCategory || d.category_guid === selectedCategory,\n        )\n      : getTopLevelCategoryTotals(data)\n\n    return {\n      stackedDatasets: filteredData.filter(isExpense) as StackedLineChartData[],\n      unstackedDatasets: filteredData.filter(isIncome) as StackedLineChartData[],\n    }\n  }, [monthlyCategoryTotals, selectedCategory, selectedDateRange])\n\n  const onTabChange = (_event: React.SyntheticEvent, newValue: TrendsTabValue) => {\n    setSelectedTab(newValue ?? selectedTab)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TOGGLE_VIEW)\n  }\n\n  const onRangeChanged = (dateRange: DateRange<Date>) => {\n    const startDate = addSeconds(dateRange?.[0] as Date, 1)\n    const endDate = dateRange?.[1] as Date\n    const months = differenceInCalendarMonths(endDate, startDate)\n\n    setSelectedDateRange({ start: startDate, end: endDate })\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TIME_WINDOW, {\n      time_period: months + 'M',\n    })\n  }\n\n  const onAccountsFilterClick = () => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_FILTER)\n  }\n  const onClickRow = (guid: string) => {\n    setSelectedCategory(guid)\n  }\n  const onClickLegend = (guid: string) => {\n    setSelectedCategory(guid)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_LEGEND, { category: getCategoryName(guid) })\n  }\n  const onHoverLegend = (guid: string) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_HOVER_LEGEND, { category: getCategoryName(guid) })\n  }\n  const onHoverArea = (category: string) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_HOVER_AREA, { category })\n  }\n  const onHoverPoint = (category: string) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_HOVER_POINT, { category })\n  }\n\n  if (!isInitialized || !isWidgetInitialized) return <Loader />\n\n  return (\n    <WidgetContainer\n      calendarActions={{ onRangeChanged }}\n      dateRange={selectedDateRange}\n      dateRangeVariant=\"timeframebuttons\"\n      onAccountsFilterClick={onAccountsFilterClick}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={copy.title}\n    >\n      <Stack\n        sx={{\n          // eslint-disable-next-line no-nested-ternary\n          px: isDesktop ? 48 : isTablet ? 24 : 12,\n        }}\n      >\n        <Stack\n          flexDirection=\"row\"\n          justifyContent=\"space-between\"\n          sx={{ pb: isMobile ? 12 : 24, pt: isMobile ? 24 : 48 }}\n        >\n          <DateRangeText\n            selectedCategoryGuid={selectedCategory}\n            selectedDateRange={selectedDateRange}\n          />\n          <TrendsViewToggle onTabChange={onTabChange} selectedTab={selectedTab} />\n        </Stack>\n        <Stack alignItems=\"center\" flexDirection=\"row\" width=\"100%\">\n          <Box flexGrow={1}>\n            {selectedCategory && (\n              <Button onClick={() => setSelectedCategory('')} sx={{ p: 0, pr: 5 }}>\n                <Icon name=\"arrow_back\" />\n                {copy.all_categories}\n              </Button>\n            )}\n          </Box>\n          <Button onClick={() => setShowTransactions(true)} sx={{ px: 5 }}>\n            {`${copy.view_transactions} (${transactions.length})`}\n          </Button>\n        </Stack>\n        <Box>\n          {selectedTab === 'Chart' && (\n            <StackedLineChart\n              availableHeight={availableChartHeight}\n              onClickLegend={onClickLegend}\n              onHoverArea={onHoverArea}\n              onHoverLegend={onHoverLegend}\n              onHoverPoint={onHoverPoint}\n              stackedDatasets={chartData.stackedDatasets}\n              unstackedDatasets={chartData.unstackedDatasets}\n            />\n          )}\n          {selectedTab === 'Table' && (\n            <TrendsTableContainer\n              onClickRow={onClickRow}\n              selectedCategory={selectedCategory}\n              selectedDateRange={selectedDateRange}\n            />\n          )}\n        </Box>\n      </Stack>\n      <TrendsDrawer\n        categoryGuid={selectedCategory}\n        dateRange={selectedDateRange}\n        isOpen={showTransactions}\n        onClose={() => setShowTransactions(false)}\n      />\n    </WidgetContainer>\n  )\n}\n\nexport default observer(TrendsFullWidget)\n"],"mappings":"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"}
+{"version":3,"file":"TrendsFullWidget.es.js","names":[],"sources":["../../src/trends/TrendsFullWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { DateRange } from '@mui/x-date-pickers-pro'\nimport { Icon } from '@mxenabled/mxui'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport Button from '@mui/material/Button'\n\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\n\nimport {\n  ANALYTICS_EVENTS,\n  Loader,\n  WidgetContainer,\n  useAccountStore,\n  useEvent,\n  useCategoryStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useScreenSize,\n  useTransactionStore,\n  useTrendsStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { WidgetProps } from '../core'\nimport { StackedLineChart } from '../common/components/charts/StackedLineChart'\n\nimport { getStackedLineChartData, StackedLineChartData } from '../core/utils/TrendsUtil'\nimport { getTopLevelCategoryTotals, isExpense, isIncome } from './utils/shared'\n\nimport TrendsViewToggle, { type TrendsTabValue } from './components/TrendsViewToggle'\nimport DateRangeText from './components/DateRangeText'\nimport TrendsTableContainer from './components/TrendsTableContainer'\nimport TrendsDrawer from './components/TrendsDrawer'\nimport { TRENDS_ANALYTICS_METADATA } from './constants/TrendsWidget'\n\nconst TrendsFullWidget: React.FC<WidgetProps> = ({ onBackClick, onMenuClick, sx }) => {\n  const { onEvent } = useEvent()\n  const { isDesktop, isTablet, isMobile } = useScreenSize()\n  const { isAccountDataLoaded, loadAccountData } = useAccountStore()\n  const {\n    categoriesLoaded,\n    loadCategories,\n    monthlyCategoryTotals,\n    getCategoryName,\n    reloadCategoryTotals,\n  } = useCategoryStore()\n  const {\n    isTransactionDataLoaded,\n    loadTransactionData,\n    sortedTransactions: transactions,\n  } = useTransactionStore()\n  const { selectedDateRange, setSelectedDateRange } = useTrendsStore()\n  const { isInitialized, selectedAccounts, selectedAccountGuids } = useGlobalUiStore()\n  const { trends: copy } = useGlobalCopyStore()\n\n  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)\n  const [showTransactions, setShowTransactions] = React.useState(false)\n  const [selectedTab, setSelectedTab] = React.useState<TrendsTabValue>('Chart')\n  const [selectedCategory, setSelectedCategory] = React.useState('')\n\n  // Control responsive chart height based on available widget iframe viewport height\n  const [viewportHeight, setViewportHeight] = React.useState(window.innerHeight)\n  const unavailableChartHeight = isMobile ? 315 : 345\n  const availableChartHeight = viewportHeight - unavailableChartHeight\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsFullWidget',\n    isLoaded: isWidgetInitialized,\n  })\n\n  React.useEffect(() => {\n    const handleResize = () => setViewportHeight(window.innerHeight)\n    window.addEventListener('resize', handleResize)\n\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n    if (!categoriesLoaded) {\n      loadCategories().finally()\n    }\n    if (!isTransactionDataLoaded) {\n      loadTransactionData().finally()\n    }\n\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  // Initialize monthlyCategoryTotals, and reload on account or date range change.\n  // Depends on primitives rather than `selectedAccounts` / `selectedDateRange`,\n  // whose object identities change even when the values do not. (MEW-3910)\n  //\n  // Loads both totals in parallel; see TrendsWidget for why chaining the monthly\n  // request behind the date-range one reintroduces the stale-write race.\n  // Also waits for account data so the first request isn't fired with an empty\n  // account list and immediately superseded. (MEW-3910)\n  React.useEffect(() => {\n    if (isInitialized && isAccountDataLoaded) {\n      reloadCategoryTotals(\n        selectedAccounts,\n        selectedDateRange.start,\n        selectedDateRange.end,\n      ).finally(() => {\n        setIsWidgetInitialized(true)\n        onEvent(ANALYTICS_EVENTS.TRENDS_LOAD_WIDGET, {\n          ...TRENDS_ANALYTICS_METADATA,\n          time_period: `${differenceInCalendarMonths(selectedDateRange.end, selectedDateRange.start)}M`,\n        })\n      })\n    }\n  }, [\n    isInitialized,\n    isAccountDataLoaded,\n    selectedAccountGuids.join(','),\n    selectedDateRange.start.getTime(),\n    selectedDateRange.end.getTime(),\n  ])\n\n  // Cache a full year of StackedLineChart data\n  const chartData = React.useMemo(() => {\n    if (!isWidgetInitialized) return { stackedDatasets: [], unstackedDatasets: [] }\n\n    const data = getStackedLineChartData(\n      monthlyCategoryTotals,\n      selectedDateRange.start,\n      selectedDateRange.end,\n    )\n\n    const filteredData = selectedCategory.length\n      ? data.filter(\n          (d) =>\n            d.top_level_category_guid === selectedCategory || d.category_guid === selectedCategory,\n        )\n      : getTopLevelCategoryTotals(data)\n\n    return {\n      stackedDatasets: filteredData.filter(isExpense) as StackedLineChartData[],\n      unstackedDatasets: filteredData.filter(isIncome) as StackedLineChartData[],\n    }\n  }, [monthlyCategoryTotals, selectedCategory, selectedDateRange])\n\n  const onTabChange = (_event: React.SyntheticEvent, newValue: TrendsTabValue) => {\n    setSelectedTab(newValue ?? selectedTab)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TOGGLE_VIEW)\n  }\n\n  const onRangeChanged = (dateRange: DateRange<Date>) => {\n    const startDate = addSeconds(dateRange?.[0] as Date, 1)\n    const endDate = dateRange?.[1] as Date\n    const months = differenceInCalendarMonths(endDate, startDate)\n\n    setSelectedDateRange({ start: startDate, end: endDate })\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TIME_WINDOW, {\n      time_period: months + 'M',\n    })\n  }\n\n  const onAccountsFilterClick = () => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_FILTER)\n  }\n  const onClickRow = (guid: string) => {\n    setSelectedCategory(guid)\n  }\n  const onClickLegend = (guid: string) => {\n    setSelectedCategory(guid)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_LEGEND, { category: getCategoryName(guid) })\n  }\n  const onHoverLegend = (guid: string) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_HOVER_LEGEND, { category: getCategoryName(guid) })\n  }\n  const onHoverArea = (category: string) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_HOVER_AREA, { category })\n  }\n  const onHoverPoint = (category: string) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_HOVER_POINT, { category })\n  }\n\n  // Mirrors the effect's readiness condition. The effect now also waits for\n  // account data, so the render gate must too — otherwise a state where the\n  // effect never runs would leave a spinner with nothing to clear it. Matches\n  // TrendsWidget's gate. (MEW-3910)\n  if (!isInitialized || !isAccountDataLoaded || !isWidgetInitialized) return <Loader />\n\n  return (\n    <WidgetContainer\n      calendarActions={{ onRangeChanged }}\n      dateRange={selectedDateRange}\n      dateRangeVariant=\"timeframebuttons\"\n      onAccountsFilterClick={onAccountsFilterClick}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={copy.title}\n    >\n      <Stack\n        sx={{\n          // eslint-disable-next-line no-nested-ternary\n          px: isDesktop ? 48 : isTablet ? 24 : 12,\n        }}\n      >\n        <Stack\n          flexDirection=\"row\"\n          justifyContent=\"space-between\"\n          sx={{ pb: isMobile ? 12 : 24, pt: isMobile ? 24 : 48 }}\n        >\n          <DateRangeText\n            selectedCategoryGuid={selectedCategory}\n            selectedDateRange={selectedDateRange}\n          />\n          <TrendsViewToggle onTabChange={onTabChange} selectedTab={selectedTab} />\n        </Stack>\n        <Stack alignItems=\"center\" flexDirection=\"row\" width=\"100%\">\n          <Box flexGrow={1}>\n            {selectedCategory && (\n              <Button onClick={() => setSelectedCategory('')} sx={{ p: 0, pr: 5 }}>\n                <Icon name=\"arrow_back\" />\n                {copy.all_categories}\n              </Button>\n            )}\n          </Box>\n          <Button onClick={() => setShowTransactions(true)} sx={{ px: 5 }}>\n            {`${copy.view_transactions} (${transactions.length})`}\n          </Button>\n        </Stack>\n        <Box>\n          {selectedTab === 'Chart' && (\n            <StackedLineChart\n              availableHeight={availableChartHeight}\n              onClickLegend={onClickLegend}\n              onHoverArea={onHoverArea}\n              onHoverLegend={onHoverLegend}\n              onHoverPoint={onHoverPoint}\n              stackedDatasets={chartData.stackedDatasets}\n              unstackedDatasets={chartData.unstackedDatasets}\n            />\n          )}\n          {selectedTab === 'Table' && (\n            <TrendsTableContainer\n              onClickRow={onClickRow}\n              selectedCategory={selectedCategory}\n              selectedDateRange={selectedDateRange}\n            />\n          )}\n        </Box>\n      </Stack>\n      <TrendsDrawer\n        categoryGuid={selectedCategory}\n        dateRange={selectedDateRange}\n        isOpen={showTransactions}\n        onClose={() => setShowTransactions(false)}\n      />\n    </WidgetContainer>\n  )\n}\n\nexport default observer(TrendsFullWidget)\n"],"mappings":"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"}

package/dist/trends/TrendsMicroWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsMicroWidget.es.js","names":[],"sources":["../../src/trends/TrendsMicroWidget.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { subMonths } from 'date-fns'\n\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  ANALYTICS_EVENTS,\n  Loader,\n  MicroWidgetContainer,\n  useAccountStore,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useWidgetLoadTimer,\n} from '../common'\n\nimport { TrendsMicroSpendingIncomeBox } from './components/TrendsMicroSpendingIncomeBox'\nimport { calculateRelativeChange } from './utils/shared'\nimport { getIncomeTotals, getSpendingTotals } from './utils/SpendingData'\nimport { ZeroStateMicroWidget } from './ZeroStateMicroWidget'\n\ninterface TrendsMicroWidgetProps {\n  onCtaClick: () => void\n}\nexport const TrendsMicroWidget = observer(({ onCtaClick }: TrendsMicroWidgetProps) => {\n  const { isAccountDataLoaded, loadAccountData, visibleAccounts: accounts } = useAccountStore()\n\n  React.useEffect(() => {\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n  }, [])\n\n  const { onEvent } = useEvent()\n  const { monthlyCategoryTotals, loadMonthlyCategoryTotals, monthlyTotalsLoaded } =\n    useCategoryStore()\n\n  const dateRange = {\n    start: subMonths(new Date(), 1),\n    end: new Date(),\n  }\n\n  const { trends: trendsCopy } = useGlobalCopyStore()\n\n  const { selectedAccounts, isInitialized } = useGlobalUiStore()\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsMicroWidget',\n    isLoaded: monthlyTotalsLoaded,\n  })\n\n  React.useEffect(() => {\n    if (isInitialized) {\n      loadMonthlyCategoryTotals(selectedAccounts, dateRange.start).then(() => {\n        onEvent(ANALYTICS_EVENTS.TRENDS_LOAD_WIDGET, {\n          state: !accounts?.length ? 'zeroState' : 'default',\n        })\n      })\n    }\n  }, [isInitialized, selectedAccounts])\n\n  const { spendingData, incomeData } = React.useMemo(\n    () => ({\n      spendingData: getSpendingTotals(monthlyCategoryTotals, dateRange),\n      incomeData: getIncomeTotals(monthlyCategoryTotals, dateRange),\n    }),\n    [monthlyCategoryTotals, dateRange],\n  )\n\n  const [lastMonthSpending, thisMonthSpending] = spendingData\n  const [lastMonthIncome, thisMonthIncome] = incomeData\n\n  const spendingPercentage = calculateRelativeChange(thisMonthSpending.y, lastMonthSpending.y)\n  const incomePercentage = calculateRelativeChange(thisMonthIncome.y, lastMonthIncome.y)\n\n  const showZeroState = isInitialized && !accounts?.length\n\n  const handleCtaClick = () => {\n    onEvent(\n      showZeroState\n        ? ANALYTICS_EVENTS.TRENDS_CLICK_GET_STARTED\n        : ANALYTICS_EVENTS.TRENDS_CLICK_VIEW_MORE,\n    )\n    onCtaClick()\n  }\n\n  if (!monthlyTotalsLoaded || !isInitialized) return <Loader />\n\n  return (\n    <MicroWidgetContainer\n      className=\"mx-trends-microwidget\"\n      ctaLabel={trendsCopy.micro_primary_cta_label}\n      onCTAClick={handleCtaClick}\n      subHeader={!showZeroState ? trendsCopy.micro_subheader : undefined}\n      title={trendsCopy.title}\n    >\n      {!showZeroState ? (\n        <Stack\n          sx={{\n            alignItems: 'stretch',\n            flexDirection: 'row',\n            gap: 12,\n          }}\n        >\n          <TrendsMicroSpendingIncomeBox\n            percentage={spendingPercentage}\n            secondaryLabel={trendsCopy.micro_secondary_label}\n            shouldDisplayPercentage={thisMonthSpending.y !== 0 && lastMonthSpending.y !== 0}\n            title={trendsCopy.spending_label}\n            totalAmount={thisMonthSpending.y}\n            transactionType={'spending'}\n          />\n          <TrendsMicroSpendingIncomeBox\n            percentage={incomePercentage}\n            secondaryLabel={trendsCopy.micro_secondary_label}\n            shouldDisplayPercentage={thisMonthIncome.y !== 0 && lastMonthIncome.y !== 0}\n            title={trendsCopy.income_label}\n            totalAmount={thisMonthIncome.y}\n            transactionType={'income'}\n          />\n        </Stack>\n      ) : (\n        <ZeroStateMicroWidget />\n      )}\n    </MicroWidgetContainer>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;AA4BA,IAAa,KAAoB,EAAA,CAAU,EAAE,YAAA,EAAA,MAAyC;AACpF,QAAM,EAAE,qBAAA,GAAqB,iBAAA,GAAiB,iBAAiB,EAAA,IAAa,EAAgB;AAE5F,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAgB,EAAE,QAAQ;AAAA,EAE9B,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,uBAAA,GAAuB,2BAAA,GAA2B,qBAAA,EAAA,IACxD,EAAiB,GAEb,IAAY;AAAA,IAChB,OAAO,EAAU,oBAAI,KAAK,GAAG,CAAC;AAAA,IAC9B,KAAK,oBAAI,KAAK;AAAA,EAChB,GAEM,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAE5C,EAAE,kBAAA,GAAkB,eAAA,EAAA,IAAkB,EAAiB;AAE7D,EAAA,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,IAAI,KACF,EAA0B,GAAkB,EAAU,KAAK,EAAE,KAAA,MAAW;AACtE,MAAA,EAAQ,EAAiB,oBAAoB,EAC3C,OAAQ,GAAU,SAAuB,YAAd,YAC7B,CAAC;AAAA,IACH,CAAC;AAAA,EAEL,GAAG,CAAC,GAAe,CAAgB,CAAC;AAEpC,QAAM,EAAE,cAAA,GAAc,YAAA,EAAA,IAAe,EAAM,QAAA,OAClC;AAAA,IACL,cAAc,EAAkB,GAAuB,CAAS;AAAA,IAChE,YAAY,EAAgB,GAAuB,CAAS;AAAA,EAC9D,IACA,CAAC,GAAuB,CAAS,CACnC,GAEM,CAAC,GAAmB,CAAA,IAAqB,GACzC,CAAC,GAAiB,CAAA,IAAmB,GAErC,IAAqB,EAAwB,EAAkB,GAAG,EAAkB,CAAC,GACrF,IAAmB,EAAwB,EAAgB,GAAG,EAAgB,CAAC,GAE/E,IAAgB,KAAiB,CAAC,GAAU,QAE5C,IAAA,MAAuB;AAC3B,IAAA,EACE,IACI,EAAiB,2BACjB,EAAiB,sBACvB,GACA,EAAW;AAAA,EACb;AAEA,SAAI,CAAC,KAAuB,CAAC,IAAsB,gBAAA,EAAC,GAAD,CAAS,CAAA,IAG1D,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,UAAU,EAAW;AAAA,IACrB,YAAY;AAAA,IACZ,WAAY,IAA6C,SAA7B,EAAW;AAAA,IACvC,OAAO,EAAW;AAAA,cAEhB,IA0BA,gBAAA,EAAC,GAAD,CAAuB,CAAA,IAzBvB,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,KAAK;AAAA,MACP;AAAA,gBALF,CAOE,gBAAA,EAAC,GAAD;AAAA,QACE,YAAY;AAAA,QACZ,gBAAgB,EAAW;AAAA,QAC3B,yBAAyB,EAAkB,MAAM,KAAK,EAAkB,MAAM;AAAA,QAC9E,OAAO,EAAW;AAAA,QAClB,aAAa,EAAkB;AAAA,QAC/B,iBAAiB;AAAA,MAClB,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,QACE,YAAY;AAAA,QACZ,gBAAgB,EAAW;AAAA,QAC3B,yBAAyB,EAAgB,MAAM,KAAK,EAAgB,MAAM;AAAA,QAC1E,OAAO,EAAW;AAAA,QAClB,aAAa,EAAgB;AAAA,QAC7B,iBAAiB;AAAA,MAClB,CAAA,CACI;AAAA;EAIW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"TrendsMicroWidget.es.js","names":[],"sources":["../../src/trends/TrendsMicroWidget.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { subMonths } from 'date-fns'\n\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  ANALYTICS_EVENTS,\n  Loader,\n  MicroWidgetContainer,\n  useAccountStore,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useWidgetLoadTimer,\n} from '../common'\n\nimport { TrendsMicroSpendingIncomeBox } from './components/TrendsMicroSpendingIncomeBox'\nimport { calculateRelativeChange } from './utils/shared'\nimport { getIncomeTotals, getSpendingTotals } from './utils/SpendingData'\nimport { ZeroStateMicroWidget } from './ZeroStateMicroWidget'\n\ninterface TrendsMicroWidgetProps {\n  onCtaClick: () => void\n}\nexport const TrendsMicroWidget = observer(({ onCtaClick }: TrendsMicroWidgetProps) => {\n  const { isAccountDataLoaded, loadAccountData, visibleAccounts: accounts } = useAccountStore()\n\n  React.useEffect(() => {\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n  }, [])\n\n  const { onEvent } = useEvent()\n  const { monthlyCategoryTotals, loadMonthlyCategoryTotals, monthlyTotalsLoaded } =\n    useCategoryStore()\n\n  const dateRange = {\n    start: subMonths(new Date(), 1),\n    end: new Date(),\n  }\n\n  const { trends: trendsCopy } = useGlobalCopyStore()\n\n  const { selectedAccounts, isInitialized } = useGlobalUiStore()\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsMicroWidget',\n    isLoaded: monthlyTotalsLoaded,\n  })\n\n  React.useEffect(() => {\n    if (isInitialized) {\n      loadMonthlyCategoryTotals(selectedAccounts, dateRange.start).then(() => {\n        onEvent(ANALYTICS_EVENTS.TRENDS_LOAD_WIDGET, {\n          state: !accounts?.length ? 'zeroState' : 'default',\n        })\n      })\n    }\n  }, [isInitialized, selectedAccounts])\n\n  const { spendingData, incomeData } = React.useMemo(\n    () => ({\n      spendingData: getSpendingTotals(monthlyCategoryTotals, dateRange),\n      incomeData: getIncomeTotals(monthlyCategoryTotals, dateRange),\n    }),\n    [monthlyCategoryTotals, dateRange],\n  )\n\n  const [lastMonthSpending, thisMonthSpending] = spendingData\n  const [lastMonthIncome, thisMonthIncome] = incomeData\n\n  const spendingPercentage = calculateRelativeChange(thisMonthSpending.y, lastMonthSpending.y)\n  const incomePercentage = calculateRelativeChange(thisMonthIncome.y, lastMonthIncome.y)\n\n  const showZeroState = isInitialized && !accounts?.length\n\n  const handleCtaClick = () => {\n    onEvent(\n      showZeroState\n        ? ANALYTICS_EVENTS.TRENDS_CLICK_GET_STARTED\n        : ANALYTICS_EVENTS.TRENDS_CLICK_VIEW_MORE,\n    )\n    onCtaClick()\n  }\n\n  if (!monthlyTotalsLoaded || !isInitialized) return <Loader />\n\n  return (\n    <MicroWidgetContainer\n      className=\"mx-trends-microwidget\"\n      ctaLabel={trendsCopy.micro_primary_cta_label}\n      onCTAClick={handleCtaClick}\n      subHeader={!showZeroState ? trendsCopy.micro_subheader : undefined}\n      title={trendsCopy.title}\n    >\n      {!showZeroState ? (\n        <Stack\n          sx={{\n            alignItems: 'stretch',\n            flexDirection: 'row',\n            gap: 12,\n          }}\n        >\n          <TrendsMicroSpendingIncomeBox\n            percentage={spendingPercentage}\n            secondaryLabel={trendsCopy.micro_secondary_label}\n            shouldDisplayPercentage={thisMonthSpending.y !== 0 && lastMonthSpending.y !== 0}\n            title={trendsCopy.spending_label}\n            totalAmount={thisMonthSpending.y}\n            transactionType={'spending'}\n          />\n          <TrendsMicroSpendingIncomeBox\n            percentage={incomePercentage}\n            secondaryLabel={trendsCopy.micro_secondary_label}\n            shouldDisplayPercentage={thisMonthIncome.y !== 0 && lastMonthIncome.y !== 0}\n            title={trendsCopy.income_label}\n            totalAmount={thisMonthIncome.y}\n            transactionType={'income'}\n          />\n        </Stack>\n      ) : (\n        <ZeroStateMicroWidget />\n      )}\n    </MicroWidgetContainer>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;AA4BA,IAAa,KAAoB,EAAA,CAAU,EAAE,YAAA,EAAA,MAAyC;AACpF,QAAM,EAAE,qBAAA,GAAqB,iBAAA,GAAiB,iBAAiB,EAAA,IAAa,EAAgB;AAE5F,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAgB,EAAE,QAAQ;AAAA,EAE9B,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,uBAAA,GAAuB,2BAAA,GAA2B,qBAAA,EAAA,IACxD,EAAiB,GAEb,IAAY;AAAA,IAChB,OAAO,EAAU,oBAAI,KAAK,GAAG,CAAC;AAAA,IAC9B,KAAK,oBAAI,KAAK;AAAA,EAChB,GAEM,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAE5C,EAAE,kBAAA,GAAkB,eAAA,EAAA,IAAkB,EAAiB;AAE7D,EAAA,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,IAAI,KACF,EAA0B,GAAkB,EAAU,KAAK,EAAE,KAAA,MAAW;AACtE,MAAA,EAAQ,EAAiB,oBAAoB,EAC3C,OAAQ,GAAU,SAAuB,YAAd,YAC7B,CAAC;AAAA,IACH,CAAC;AAAA,EAEL,GAAG,CAAC,GAAe,CAAgB,CAAC;AAEpC,QAAM,EAAE,cAAA,GAAc,YAAA,EAAA,IAAe,EAAM,QAAA,OAClC;AAAA,IACL,cAAc,EAAkB,GAAuB,CAAS;AAAA,IAChE,YAAY,EAAgB,GAAuB,CAAS;AAAA,EAC9D,IACA,CAAC,GAAuB,CAAS,CACnC,GAEM,CAAC,GAAmB,CAAA,IAAqB,GACzC,CAAC,GAAiB,CAAA,IAAmB,GAErC,IAAqB,EAAwB,EAAkB,GAAG,EAAkB,CAAC,GACrF,IAAmB,EAAwB,EAAgB,GAAG,EAAgB,CAAC,GAE/E,IAAgB,KAAiB,CAAC,GAAU,QAE5C,IAAA,MAAuB;AAC3B,IAAA,EACE,IACI,EAAiB,2BACjB,EAAiB,sBACvB,GACA,EAAW;AAAA,EACb;AAEA,SAAI,CAAC,KAAuB,CAAC,IAAsB,gBAAA,EAAC,GAAD,CAAS,CAAA,IAG1D,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,UAAU,EAAW;AAAA,IACrB,YAAY;AAAA,IACZ,WAAY,IAA6C,SAA7B,EAAW;AAAA,IACvC,OAAO,EAAW;AAAA,IAEjB,UAAC,IA0BA,gBAAA,EAAC,GAAD,CAAuB,CAAA,IAzBvB,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,KAAK;AAAA,MACP;AAAA,MALF,UAAA,CAOE,gBAAA,EAAC,GAAD;AAAA,QACE,YAAY;AAAA,QACZ,gBAAgB,EAAW;AAAA,QAC3B,yBAAyB,EAAkB,MAAM,KAAK,EAAkB,MAAM;AAAA,QAC9E,OAAO,EAAW;AAAA,QAClB,aAAa,EAAkB;AAAA,QAC/B,iBAAiB;AAAA,MAClB,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,QACE,YAAY;AAAA,QACZ,gBAAgB,EAAW;AAAA,QAC3B,yBAAyB,EAAgB,MAAM,KAAK,EAAgB,MAAM;AAAA,QAC1E,OAAO,EAAW;AAAA,QAClB,aAAa,EAAgB;AAAA,QAC7B,iBAAiB;AAAA,MAClB,CAAA,CACI;AAAA,IAEP,CAAA;AAAA,EAEkB,CAAA;AAE1B,CAAC"}

package/dist/trends/TrendsMiniWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsMiniWidget.es.js","names":[],"sources":["../../src/trends/TrendsMiniWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  Loader,\n  MiniWidgetContainer,\n  useAccountStore,\n  useCategoryStore,\n  useGlobalCopyStore,\n  useGlobalStore,\n  useGlobalUiStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { MiniWidgetProps } from '../core'\n\nimport SpendingChart from './components/SpendingChart'\n\nconst TrendsMiniWidget: React.FC<MiniWidgetProps> = ({ onPrimaryCtaClick, sx }) => {\n  const { isAccountDataLoaded, loadAccountData } = useAccountStore()\n  const { loadMonthlyCategoryTotals, monthlyTotalsLoaded } = useCategoryStore()\n  const { isInitialized } = useGlobalStore()\n  const { trends: trendsCopy } = useGlobalCopyStore()\n  const { selectedAccounts } = useGlobalUiStore()\n\n  React.useEffect(() => {\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n  }, [])\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsMiniWidget',\n    isLoaded: monthlyTotalsLoaded,\n  })\n\n  React.useEffect(() => {\n    if (isInitialized && isAccountDataLoaded) {\n      loadMonthlyCategoryTotals(selectedAccounts).finally()\n    }\n  }, [isAccountDataLoaded, isInitialized, selectedAccounts])\n\n  if (!isAccountDataLoaded || !isInitialized || !monthlyTotalsLoaded) {\n    return <Loader />\n  }\n\n  return (\n    <MiniWidgetContainer\n      contentStyles={{ height: 'calc(100% - 72px)', minHeight: 300, ':last-child': { pb: 0 } }}\n      onPrimaryCtaClick={onPrimaryCtaClick}\n      primaryCtaLabel={trendsCopy.primary_cta}\n      subTitle={trendsCopy.sub_title}\n      sx={{ height: '100%', ...sx }}\n      title={trendsCopy.mini_title}\n    >\n      <SpendingChart />\n    </MiniWidgetContainer>\n  )\n}\n\nexport default observer(TrendsMiniWidget)\n"],"mappings":";;;;;;;;AAiBA,IAAM,IAAA,CAA+C,EAAE,mBAAA,GAAmB,IAAA,EAAA,MAAS;AACjF,QAAM,EAAE,qBAAA,GAAqB,iBAAA,EAAA,IAAoB,EAAgB,GAC3D,EAAE,2BAAA,GAA2B,qBAAA,EAAA,IAAwB,EAAiB,GACtE,EAAE,eAAA,EAAA,IAAkB,EAAe,GACnC,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,kBAAA,EAAA,IAAqB,EAAiB;AAmB9C,SAjBA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAgB,EAAE,QAAQ;AAAA,EAE9B,GAAG,CAAC,CAAC,GAEL,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,IAAI,KAAiB,KACnB,EAA0B,CAAgB,EAAE,QAAQ;AAAA,EAExD,GAAG;AAAA,IAAC;AAAA,IAAqB;AAAA,IAAe;AAAA,EAAgB,CAAC,GAErD,CAAC,KAAuB,CAAC,KAAiB,CAAC,IACtC,gBAAA,EAAC,GAAD,CAAS,CAAA,IAIhB,gBAAA,EAAC,GAAD;AAAA,IACE,eAAe;AAAA,MAAE,QAAQ;AAAA,MAAqB,WAAW;AAAA,MAAK,eAAe,EAAE,IAAI,EAAE;AAAA,IAAE;AAAA,IACpE,mBAAA;AAAA,IACnB,iBAAiB,EAAW;AAAA,IAC5B,UAAU,EAAW;AAAA,IACrB,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAC5B,OAAO,EAAW;AAAA,cAElB,gBAAA,EAAC,GAAD,CAAgB,CAAA;AAAA,EACG,CAAA;AAEzB,GAEA,IAAe,EAAS,CAAgB"}
+{"version":3,"file":"TrendsMiniWidget.es.js","names":[],"sources":["../../src/trends/TrendsMiniWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  Loader,\n  MiniWidgetContainer,\n  useAccountStore,\n  useCategoryStore,\n  useGlobalCopyStore,\n  useGlobalStore,\n  useGlobalUiStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { MiniWidgetProps } from '../core'\n\nimport SpendingChart from './components/SpendingChart'\n\nconst TrendsMiniWidget: React.FC<MiniWidgetProps> = ({ onPrimaryCtaClick, sx }) => {\n  const { isAccountDataLoaded, loadAccountData } = useAccountStore()\n  const { loadMonthlyCategoryTotals, monthlyTotalsLoaded } = useCategoryStore()\n  const { isInitialized } = useGlobalStore()\n  const { trends: trendsCopy } = useGlobalCopyStore()\n  const { selectedAccounts } = useGlobalUiStore()\n\n  React.useEffect(() => {\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n  }, [])\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsMiniWidget',\n    isLoaded: monthlyTotalsLoaded,\n  })\n\n  React.useEffect(() => {\n    if (isInitialized && isAccountDataLoaded) {\n      loadMonthlyCategoryTotals(selectedAccounts).finally()\n    }\n  }, [isAccountDataLoaded, isInitialized, selectedAccounts])\n\n  if (!isAccountDataLoaded || !isInitialized || !monthlyTotalsLoaded) {\n    return <Loader />\n  }\n\n  return (\n    <MiniWidgetContainer\n      contentStyles={{ height: 'calc(100% - 72px)', minHeight: 300, ':last-child': { pb: 0 } }}\n      onPrimaryCtaClick={onPrimaryCtaClick}\n      primaryCtaLabel={trendsCopy.primary_cta}\n      subTitle={trendsCopy.sub_title}\n      sx={{ height: '100%', ...sx }}\n      title={trendsCopy.mini_title}\n    >\n      <SpendingChart />\n    </MiniWidgetContainer>\n  )\n}\n\nexport default observer(TrendsMiniWidget)\n"],"mappings":";;;;;;;;AAiBA,IAAM,IAAA,CAA+C,EAAE,mBAAA,GAAmB,IAAA,EAAA,MAAS;AACjF,QAAM,EAAE,qBAAA,GAAqB,iBAAA,EAAA,IAAoB,EAAgB,GAC3D,EAAE,2BAAA,GAA2B,qBAAA,EAAA,IAAwB,EAAiB,GACtE,EAAE,eAAA,EAAA,IAAkB,EAAe,GACnC,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,kBAAA,EAAA,IAAqB,EAAiB;AAmB9C,SAjBA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAgB,EAAE,QAAQ;AAAA,EAE9B,GAAG,CAAC,CAAC,GAEL,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,IAAI,KAAiB,KACnB,EAA0B,CAAgB,EAAE,QAAQ;AAAA,EAExD,GAAG;AAAA,IAAC;AAAA,IAAqB;AAAA,IAAe;AAAA,EAAgB,CAAC,GAErD,CAAC,KAAuB,CAAC,KAAiB,CAAC,IACtC,gBAAA,EAAC,GAAD,CAAS,CAAA,IAIhB,gBAAA,EAAC,GAAD;AAAA,IACE,eAAe;AAAA,MAAE,QAAQ;AAAA,MAAqB,WAAW;AAAA,MAAK,eAAe,EAAE,IAAI,EAAE;AAAA,IAAE;AAAA,IACpE,mBAAA;AAAA,IACnB,iBAAiB,EAAW;AAAA,IAC5B,UAAU,EAAW;AAAA,IACrB,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAC5B,OAAO,EAAW;AAAA,IAElB,UAAA,gBAAA,EAAC,GAAD,CAAgB,CAAA;AAAA,EACG,CAAA;AAEzB,GAEA,IAAe,EAAS,CAAgB"}

package/dist/trends/TrendsWidget.es.js

@@ -1,128 +1,127 @@
-import { useAccountStore as _e, useAppConfig as Te, useCategoryStore as Se, useEvent as ye, useGlobalCopyStore as we, useGlobalStore as De, useGlobalUiStore as Ee, useTransactionStore as Le, useTrendsStore as Ae } from "../common/context/hooks.es.js";
-import { useInsightsEnabled as be } from "../common/hooks/useInsightsEnabled.es.js";
-import { useScreenSize as Ie } from "../common/hooks/useScreenSize.es.js";
-import { useWidgetLoadTimer as xe } from "../common/hooks/useWidgetLoadTimer.es.js";
-import Re from "../common/components/drawer/Drawer.es.js";
-import { ANALYTICS_EVENTS as r } from "../common/constants/Analytics.es.js";
-import ve from "../common/components/Loader.es.js";
-import { WidgetContainer as Ne } from "../common/components/WidgetContainer.es.js";
-import Be from "../common/components/ConnectDrawer.es.js";
-import { EmptyState as We } from "../common/components/EmptyState.es.js";
+import { useAccountStore as Ce, useAppConfig as _e, useCategoryStore as Te, useEvent as Se, useGlobalCopyStore as ye, useGlobalStore as we, useGlobalUiStore as Ee, useTransactionStore as De, useTrendsStore as Le } from "../common/context/hooks.es.js";
+import { useInsightsEnabled as Ae } from "../common/hooks/useInsightsEnabled.es.js";
+import { useScreenSize as be } from "../common/hooks/useScreenSize.es.js";
+import { useWidgetLoadTimer as Ie } from "../common/hooks/useWidgetLoadTimer.es.js";
+import xe from "../common/components/drawer/Drawer.es.js";
+import { ANALYTICS_EVENTS as s } from "../common/constants/Analytics.es.js";
+import Re from "../common/components/Loader.es.js";
+import { WidgetContainer as ve } from "../common/components/WidgetContainer.es.js";
+import Ne from "../common/components/ConnectDrawer.es.js";
+import { EmptyState as Be } from "../common/components/EmptyState.es.js";
 import { TRENDS_ANALYTICS_METADATA as c } from "./constants/TrendsWidget.es.js";
-import ke from "./components/TrendsViewToggle.es.js";
-import He from "./components/DateRangeText.es.js";
-import Ge from "./components/TrendsTableContainer.es.js";
-import Me from "./components/CategoriesList.es.js";
-import Oe from "./components/TrendsInsights.es.js";
-import { CategoryDetails as ze } from "./components/CategoryDetails.es.js";
-import Ke from "./components/TrendsChartTotals.es.js";
-import { TRENDS_BEAT_TEMPLATES as Ve } from "./constants/TrendsInsights.es.js";
-import { buildEmptyStateProps as Fe } from "./utils/TrendsWidget.es.js";
+import We from "./components/TrendsViewToggle.es.js";
+import ke from "./components/DateRangeText.es.js";
+import He from "./components/TrendsTableContainer.es.js";
+import Ge from "./components/CategoriesList.es.js";
+import Me from "./components/TrendsInsights.es.js";
+import { CategoryDetails as Oe } from "./components/CategoryDetails.es.js";
+import ze from "./components/TrendsChartTotals.es.js";
+import { TRENDS_BEAT_TEMPLATES as Ke } from "./constants/TrendsInsights.es.js";
+import { buildEmptyStateProps as Ve } from "./utils/TrendsWidget.es.js";
 import i from "react";
-import { observer as Pe } from "mobx-react-lite";
+import { observer as Fe } from "mobx-react-lite";
 import f from "@mui/material/Stack";
 import je from "@mui/material/Button";
-import { ArrowBack as Ue } from "@mxenabled/mx-icons";
-import { Fragment as Ye, jsx as e, jsxs as s } from "react/jsx-runtime";
-import D from "@mui/material/Box";
-import { addSeconds as $e } from "date-fns/addSeconds";
+import { ArrowBack as Pe } from "@mxenabled/mx-icons";
+import { Fragment as Ue, jsx as e, jsxs as a } from "react/jsx-runtime";
+import w from "@mui/material/Box";
 import { differenceInCalendarMonths as k } from "date-fns/differenceInCalendarMonths";
-var qe = ({ onBackClick: H, onMenuClick: G, onInsightCardClick: M, sx: O }) => {
-  const { onEvent: a } = ye(), { config: E } = Te(), { isDesktop: z, isLargeDesktop: K, isMobile: C } = Ie(), { isAccountDataLoaded: h, loadAccountData: V, visibleAccounts: F } = _e(), { categoriesLoaded: P, loadCategories: j, loadDateRangeCategoryTotals: U, loadMonthlyCategoryTotals: Y, monthlyCategoryTotals: d, monthlyTotalsLoaded: $ } = Se(), { isTransactionDataLoaded: q, loadTransactionData: J, setFilter: Q } = Le(), { selectedCategoryData: _, selectedDateRange: o, setSelectedCategoryData: L, setSelectedDateRange: X } = Ae(), { isInitialized: T, selectedAccounts: S, selectedAccountGuids: Z } = Ee(), { trends: l, connect: ee } = we(), { beatStore: A } = De(), b = be() && E.show_insights_widget_in_master, m = z || K, [I, te] = i.useState(!1), [y, oe] = i.useState(!1), [p, ie] = i.useState("Chart"), [w, x] = i.useState(""), [R, ne] = i.useState(window.innerHeight), ae = m ? 56 : 0, v = R - 208, re = R - (b ? 550 + ae : 266), [se, N] = i.useState(!1), le = E.show_connections_widget_in_master;
-  xe({
+import { addSeconds as Ye } from "date-fns/addSeconds";
+var $e = ({ onBackClick: H, onMenuClick: G, onInsightCardClick: M, sx: O }) => {
+  const { onEvent: r } = Se(), { config: E } = _e(), { isDesktop: z, isLargeDesktop: K, isMobile: C } = be(), { isAccountDataLoaded: p, loadAccountData: V, visibleAccounts: F } = Ce(), { categoriesLoaded: j, loadCategories: P, monthlyCategoryTotals: d, monthlyTotalsLoaded: U, reloadCategoryTotals: Y } = Te(), { isTransactionDataLoaded: $, loadTransactionData: q, setFilter: J } = De(), { selectedCategoryData: _, selectedDateRange: o, setSelectedCategoryData: D, setSelectedDateRange: Q } = Le(), { isInitialized: T, selectedAccounts: X, selectedAccountGuids: L } = Ee(), { trends: l, connect: Z } = ye(), { beatStore: A } = we(), b = Ae() && E.show_insights_widget_in_master, m = z || K, [I, ee] = i.useState(!1), [S, te] = i.useState(!1), [h, oe] = i.useState("Chart"), [y, x] = i.useState(""), [R, ie] = i.useState(window.innerHeight), ne = m ? 56 : 0, v = R - 208, re = R - (b ? 550 + ne : 266), [se, N] = i.useState(!1), ae = E.show_connections_widget_in_master;
+  Ie({
     widgetName: "TrendsWidget",
     isLoaded: I
   });
-  const B = i.useMemo(() => y ? A.getFilteredBeats({ templates: Ve }) : [], [y]);
+  const B = i.useMemo(() => S ? A.getFilteredBeats({ templates: Ke }) : [], [S]);
   i.useEffect(() => {
-    const t = () => ne(window.innerHeight);
-    return window.addEventListener("resize", t), h || V().finally(), P || j().finally(), q || J().finally(), () => window.removeEventListener("resize", t);
+    const t = () => ie(window.innerHeight);
+    return window.addEventListener("resize", t), p || V().finally(), j || P().finally(), $ || q().finally(), () => window.removeEventListener("resize", t);
   }, []), i.useEffect(() => {
-    T && h && (A.loadBeats().finally(() => oe(!0)), U(S, o.start, o.end).then(() => {
-      Y(S, o.start, o.end).finally();
-    }).finally(() => {
-      te(!0), a(r.TRENDS_LOAD_WIDGET, {
+    T && p && (A.loadBeats().finally(() => te(!0)), Y(X, o.start, o.end).finally(() => {
+      ee(!0), r(s.TRENDS_LOAD_WIDGET, {
         ...c,
         time_period: `${k(o.end, o.start)}M`
       });
     }));
   }, [
     T,
-    h,
-    S,
-    o
+    p,
+    L.join(","),
+    o.start.getTime(),
+    o.end.getTime()
   ]), i.useEffect(() => {
     if (d.length !== 0) {
       const t = {
-        accounts: Z,
+        accounts: L,
         dateRange: {
           start: o.start,
           end: o.end
         }
       };
-      Q({
+      J({
         ...t,
         custom: (n) => !!d.find((g) => g.top_level_category_guid === n.top_level_category_guid || g.category_guid === n.category_guid)
       });
     }
   }, [d]);
-  const ce = (t) => {
-    L(t);
+  const le = (t) => {
+    D(t);
+  }, ce = () => {
+    D(null), r(s.TRENDS_CLICK_BACK, c);
   }, de = () => {
-    L(null), a(r.TRENDS_CLICK_BACK, c);
-  }, me = () => {
-    N(!0), a(r.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, ge = (t, n) => {
-    ie(n ?? p), a(r.TRENDS_CLICK_TOGGLE_VIEW, {
+    N(!0), r(s.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, me = (t, n) => {
+    oe(n ?? h), r(s.TRENDS_CLICK_TOGGLE_VIEW, {
       ...c,
       toggleView: n
     });
-  }, fe = (t) => {
-    const n = $e(t?.[0], 1), g = t?.[1], Ce = k(g, n);
-    X({
+  }, ge = (t) => {
+    const n = Ye(t?.[0], 1), g = t?.[1], ue = k(g, n);
+    Q({
       start: n,
       end: g
-    }), a(r.TRENDS_CLICK_TIME_WINDOW, {
+    }), r(s.TRENDS_CLICK_TIME_WINDOW, {
       ...c,
-      time_period: Ce + "M"
+      time_period: ue + "M"
     });
-  }, he = (t) => {
-    a(r.TRENDS_CLICK_FILTER, {
+  }, fe = (t) => {
+    r(s.TRENDS_CLICK_FILTER, {
       ...c,
       filterValue: t
     });
   }, pe = (t) => {
     x(t);
-  }, ue = () => {
-    x(""), a(r.TRENDS_CLICK_ALL_CATEGORIES, c);
+  }, he = () => {
+    x(""), r(s.TRENDS_CLICK_ALL_CATEGORIES, c);
   };
-  if (!T || !h || !I || !$) return /* @__PURE__ */ e(ve, {});
-  const W = F.length === 0 || d.length === 0, u = Fe(l, le, me);
-  return /* @__PURE__ */ s(Ne, {
-    calendarActions: { onRangeChanged: fe },
+  if (!T || !p || !I || !U) return /* @__PURE__ */ e(Re, {});
+  const W = F.length === 0 || d.length === 0, u = Ve(l, ae, de);
+  return /* @__PURE__ */ a(ve, {
+    calendarActions: { onRangeChanged: ge },
     dateRange: o,
     dateRangeVariant: C ? "timeframetabs" : "timeframebuttons",
-    onAccountsFilterClick: he,
+    onAccountsFilterClick: fe,
     onBackClick: H,
     onMenuClick: G,
     sx: O,
     title: l.title,
-    children: [/* @__PURE__ */ s(f, {
+    children: [/* @__PURE__ */ a(f, {
       sx: { px: C ? 0 : 48 },
       children: [
-        /* @__PURE__ */ s(f, {
+        /* @__PURE__ */ a(f, {
           flexDirection: "row",
           justifyContent: "space-between",
           sx: {
             px: C ? 16 : 0,
             py: 16
           },
-          children: [/* @__PURE__ */ e(He, {
-            selectedCategoryGuid: w,
+          children: [/* @__PURE__ */ e(ke, {
+            selectedCategoryGuid: y,
             selectedDateRange: o
-          }), /* @__PURE__ */ e(ke, {
-            onTabChange: ge,
-            selectedTab: p
+          }), /* @__PURE__ */ e(We, {
+            onTabChange: me,
+            selectedTab: h
           })]
         }),
         /* @__PURE__ */ e(f, {
@@ -130,19 +129,19 @@ var qe = ({ onBackClick: H, onMenuClick: G, onInsightCardClick: M, sx: O }) => {
           flexDirection: "row",
           sx: { pb: 8 },
           width: "100%",
-          children: /* @__PURE__ */ e(D, {
+          children: /* @__PURE__ */ e(w, {
             flexGrow: 1,
-            children: w && /* @__PURE__ */ s(je, {
-              onClick: ue,
+            children: y && /* @__PURE__ */ a(je, {
+              onClick: he,
               sx: {
                 p: 0,
                 pr: 5
               },
-              children: [/* @__PURE__ */ e(Ue, {}), l.all_categories]
+              children: [/* @__PURE__ */ e(Pe, {}), l.all_categories]
             })
           })
         }),
-        W && /* @__PURE__ */ e(We, {
+        W && /* @__PURE__ */ e(Be, {
           header: u.header,
           icon: "multiline_chart",
           onClick: u.onClickHandler,
@@ -153,55 +152,55 @@ var qe = ({ onBackClick: H, onMenuClick: G, onInsightCardClick: M, sx: O }) => {
             maxWidth: 432
           }
         }),
-        !W && /* @__PURE__ */ s(f, {
+        !W && /* @__PURE__ */ a(f, {
           flexDirection: m ? "row" : "column",
           gap: m ? 48 : 16,
-          children: [p === "Chart" && /* @__PURE__ */ s(Ye, { children: [/* @__PURE__ */ e(D, {
+          children: [h === "Chart" && /* @__PURE__ */ a(Ue, { children: [/* @__PURE__ */ e(w, {
             sx: { width: m ? "68%" : "100%" },
-            children: /* @__PURE__ */ e(Ke, {
+            children: /* @__PURE__ */ e(ze, {
               availableHeight: v,
               minHeight: 450,
               selectedDateRange: o,
               totals: d
             })
-          }), /* @__PURE__ */ s(f, {
+          }), /* @__PURE__ */ a(f, {
             gap: 16,
             sx: { width: m ? "32%" : "100%" },
-            children: [b && y && B.length > 0 && /* @__PURE__ */ e(Oe, {
+            children: [b && S && B.length > 0 && /* @__PURE__ */ e(Me, {
               beats: B,
               onInsightCardClick: M
-            }), /* @__PURE__ */ e(Me, {
+            }), /* @__PURE__ */ e(Ge, {
               availableHeight: re,
-              onCategoryClick: ce
+              onCategoryClick: le
             })]
-          })] }), p === "Table" && /* @__PURE__ */ e(D, {
+          })] }), h === "Table" && /* @__PURE__ */ e(w, {
             sx: { width: "100%" },
-            children: /* @__PURE__ */ e(Ge, {
+            children: /* @__PURE__ */ e(He, {
               height: "unset",
               onClickRow: pe,
-              selectedCategory: w,
+              selectedCategory: y,
               selectedDateRange: o
             })
           })]
         }),
-        /* @__PURE__ */ e(Re, {
+        /* @__PURE__ */ e(xe, {
           ariaLabelClose: l.close_category_details,
           isOpen: !!_,
-          onClose: de,
+          onClose: ce,
           shouldShowHeaderShadow: !0,
           title: _?.is_income ? l.category_income : l.category_spending,
-          children: _ && /* @__PURE__ */ e(ze, {})
+          children: _ && /* @__PURE__ */ e(Oe, {})
         })
       ]
-    }), /* @__PURE__ */ e(Be, {
+    }), /* @__PURE__ */ e(Ne, {
       onClose: () => N(!1),
       showConnectWidget: se,
-      title: ee.mini_title
+      title: Z.mini_title
     })]
   });
-}, Lt = Pe(qe);
+}, Dt = Fe($e);
 export {
-  Lt as default
+  Dt as default
 };
 
 //# sourceMappingURL=TrendsWidget.es.js.map