@mx-cartographer/experiences 9.2.4-alpha.al5 → 9.3.0-alph.bb2

package/dist/trends/TrendsFullWidget.es.js

@@ -0,0 +1,154 @@
+import { useAccountStore as te, useCategoryStore as oe, useEvent as ae, useGlobalCopyStore as re, useGlobalUiStore as ne, useTransactionStore as se, useTrendsStore as ie } from "../common/context/hooks.es.js";
+import { useScreenSize as ce } from "../common/hooks/useScreenSize.es.js";
+import { useWidgetLoadTimer as de } from "../common/hooks/useWidgetLoadTimer.es.js";
+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 { 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 s from "react";
+import { observer as Ee } from "mobx-react-lite";
+import D from "@mui/material/Stack";
+import { Icon as Le } from "@mxenabled/mxui";
+import E 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);
+  de({
+    widgetName: "TrendsFullWidget",
+    isLoaded: u
+  }), s.useEffect(() => {
+    const e = () => $(window.innerHeight);
+    return window.addEventListener("resize", e), N || A().finally(), b || x().finally(), G || M().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, {
+        ...pe,
+        time_period: `${R(t.end, t.start)}M`
+      });
+    });
+  }, [
+    f,
+    g,
+    t
+  ]);
+  const _ = s.useMemo(() => {
+    if (!u) 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)
+    };
+  }, [
+    C,
+    r,
+    t
+  ]), P = (e, i) => {
+    K(i ?? l), a(n.TRENDS_CLICK_TOGGLE_VIEW);
+  }, Y = (e) => {
+    const i = Re(e?.[0], 1), d = e?.[1], ee = R(d, i);
+    V({
+      start: i,
+      end: d
+    }), a(n.TRENDS_CLICK_TIME_WINDOW, { time_period: ee + "M" });
+  }, U = () => {
+    a(n.TRENDS_CLICK_FILTER);
+  }, q = (e) => {
+    p(e);
+  }, J = (e) => {
+    p(e), a(n.TRENDS_CLICK_LEGEND, { category: h(e) });
+  }, Q = (e) => {
+    a(n.TRENDS_HOVER_LEGEND, { category: h(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, {
+    calendarActions: { onRangeChanged: Y },
+    dateRange: t,
+    dateRangeVariant: "timeframebuttons",
+    onAccountsFilterClick: U,
+    onBackClick: w,
+    onMenuClick: y,
+    sx: I,
+    title: T.title,
+    children: [/* @__PURE__ */ c(D, {
+      sx: { px: k ? 48 : v ? 24 : 12 },
+      children: [
+        /* @__PURE__ */ c(D, {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          sx: {
+            pb: m ? 12 : 24,
+            pt: m ? 24 : 48
+          },
+          children: [/* @__PURE__ */ o(he, {
+            selectedCategoryGuid: r,
+            selectedDateRange: t
+          }), /* @__PURE__ */ o(Ce, {
+            onTabChange: P,
+            selectedTab: l
+          })]
+        }),
+        /* @__PURE__ */ c(D, {
+          alignItems: "center",
+          flexDirection: "row",
+          width: "100%",
+          children: [/* @__PURE__ */ o(L, {
+            flexGrow: 1,
+            children: r && /* @__PURE__ */ c(E, {
+              onClick: () => p(""),
+              sx: {
+                p: 0,
+                pr: 5
+              },
+              children: [/* @__PURE__ */ o(Le, { name: "arrow_back" }), T.all_categories]
+            })
+          }), /* @__PURE__ */ o(E, {
+            onClick: () => S(!0),
+            sx: { px: 5 },
+            children: `${T.view_transactions} (${O.length})`
+          })]
+        }),
+        /* @__PURE__ */ c(L, { children: [l === "Chart" && /* @__PURE__ */ o(De, {
+          availableHeight: B,
+          onClickLegend: J,
+          onHoverArea: X,
+          onHoverLegend: Q,
+          onHoverPoint: Z,
+          stackedDatasets: _.stackedDatasets,
+          unstackedDatasets: _.unstackedDatasets
+        }), l === "Table" && /* @__PURE__ */ o(Se, {
+          onClickRow: q,
+          selectedCategory: r,
+          selectedDateRange: t
+        })] })
+      ]
+    }), /* @__PURE__ */ o(_e, {
+      categoryGuid: r,
+      dateRange: t,
+      isOpen: F,
+      onClose: () => S(!1)
+    })]
+  });
+}, qe = Ee(we);
+export {
+  qe as default
+};
+
+//# sourceMappingURL=TrendsFullWidget.es.js.map

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

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;;;;;;AAsCA,IAAM,KAAA,CAA2C,EAAE,aAAA,GAAa,aAAA,GAAa,IAAA,EAAA,MAAS;AACpF,QAAM,EAAE,SAAA,EAAA,IAAY,GAAS,GACvB,EAAE,WAAA,GAAW,UAAA,GAAU,UAAA,EAAA,IAAa,GAAc,GAClD,EAAE,qBAAA,GAAqB,iBAAA,EAAA,IAAoB,GAAgB,GAC3D,EACJ,kBAAA,GACA,gBAAA,GACA,6BAAA,GACA,2BAAA,GACA,uBAAA,GACA,iBAAA,EAAA,IACE,GAAiB,GACf,EACJ,yBAAA,GACA,qBAAA,GACA,oBAAoB,EAAA,IAClB,GAAoB,GAClB,EAAE,mBAAA,GAAmB,sBAAA,EAAA,IAAyB,GAAe,GAC7D,EAAE,eAAA,GAAe,kBAAA,EAAA,IAAqB,GAAiB,GACvD,EAAE,QAAQ,EAAA,IAAS,GAAmB,GAEtC,CAAC,GAAqB,CAAA,IAA0B,EAAM,SAAS,EAAK,GACpE,CAAC,GAAkB,CAAA,IAAuB,EAAM,SAAS,EAAK,GAC9D,CAAC,GAAa,CAAA,IAAkB,EAAM,SAAyB,OAAO,GACtE,CAAC,GAAkB,CAAA,IAAuB,EAAM,SAAS,EAAE,GAG3D,CAAC,GAAgB,CAAA,IAAqB,EAAM,SAAS,OAAO,WAAW,GAEvE,IAAuB,KADE,IAAW,MAAM;AAGhD,EAAA,GAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAA,MAAqB,EAAkB,OAAO,WAAW;AAC/D,kBAAO,iBAAiB,UAAU,CAAY,GAEzC,KACH,EAAgB,EAAE,QAAQ,GAEvB,KACH,EAAe,EAAE,QAAQ,GAEtB,KACH,EAAoB,EAAE,QAAQ,GAGhC,MAAa,OAAO,oBAAoB,UAAU,CAAY;AAAA,EAChE,GAAG,CAAC,CAAC,GAGL,EAAM,UAAA,MAAgB;AACpB,IAAI,KACF,EAA4B,GAAkB,EAAkB,OAAO,EAAkB,GAAG,EACzF,KAAA,MAAW;AACV,MAAA,EACE,GACA,EAAkB,OAClB,EAAkB,GACpB;AAAA,IACF,CAAC,EACA,QAAA,MAAc;AACb,MAAA,EAAuB,EAAI,GAC3B,EAAQ,EAAiB,oBAAoB;AAAA,QAC3C,GAAG;AAAA,QACH,aAAa,GAAG,EAA2B,EAAkB,KAAK,EAAkB,KAAK,CAAA;AAAA,MAC3F,CAAC;AAAA,IACH,CAAC;AAAA,EAEP,GAAG;AAAA,IAAC;AAAA,IAAe;AAAA,IAAkB;AAAA,EAAiB,CAAC;AAGvD,QAAM,IAAY,EAAM,QAAA,MAAc;AACpC,QAAI,CAAC,EAAqB,QAAO;AAAA,MAAE,iBAAiB,CAAC;AAAA,MAAG,mBAAmB,CAAC;AAAA,IAAE;AAE9E,UAAM,IAAO,GACX,GACA,EAAkB,OAClB,EAAkB,GACpB,GAEM,IAAe,EAAiB,SAClC,EAAK,OAAA,CACF,MACC,EAAE,4BAA4B,KAAoB,EAAE,kBAAkB,CAC1E,IACA,GAA0B,CAAI;AAElC,WAAO;AAAA,MACL,iBAAiB,EAAa,OAAO,EAAS;AAAA,MAC9C,mBAAmB,EAAa,OAAO,EAAQ;AAAA,IACjD;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAuB;AAAA,IAAkB;AAAA,EAAiB,CAAC,GAEzD,IAAA,CAAe,GAA8B,MAA6B;AAC9E,IAAA,EAAe,KAAY,CAAW,GACtC,EAAQ,EAAiB,wBAAwB;AAAA,EACnD,GAEM,IAAA,CAAkB,MAA+B;AACrD,UAAM,IAAY,GAAW,IAAY,CAAA,GAAY,CAAC,GAChD,IAAU,IAAY,CAAA,GACtB,KAAS,EAA2B,GAAS,CAAS;AAE5D,IAAA,EAAqB;AAAA,MAAE,OAAO;AAAA,MAAW,KAAK;AAAA,IAAQ,CAAC,GACvD,EAAQ,EAAiB,0BAA0B,EACjD,aAAa,KAAS,IACxB,CAAC;AAAA,EACH,GAEM,IAAA,MAA8B;AAClC,IAAA,EAAQ,EAAiB,mBAAmB;AAAA,EAC9C,GACM,IAAA,CAAc,MAAiB;AACnC,IAAA,EAAoB,CAAI;AAAA,EAC1B,GACM,IAAA,CAAiB,MAAiB;AACtC,IAAA,EAAoB,CAAI,GACxB,EAAQ,EAAiB,qBAAqB,EAAE,UAAU,EAAgB,CAAI,EAAE,CAAC;AAAA,EACnF,GACM,IAAA,CAAiB,MAAiB;AACtC,IAAA,EAAQ,EAAiB,qBAAqB,EAAE,UAAU,EAAgB,CAAI,EAAE,CAAC;AAAA,EACnF,GACM,IAAA,CAAe,MAAqB;AACxC,IAAA,EAAQ,EAAiB,mBAAmB,EAAE,UAAA,EAAS,CAAC;AAAA,EAC1D,GACM,IAAA,CAAgB,MAAqB;AACzC,IAAA,EAAQ,EAAiB,oBAAoB,EAAE,UAAA,EAAS,CAAC;AAAA,EAC3D;AAEA,SAAI,CAAC,KAAiB,CAAC,IAA4B,gBAAA,EAAC,IAAD,CAAS,CAAA,IAG1D,gBAAA,EAAC,IAAD;AAAA,IACE,iBAAiB,EAAE,gBAAA,EAAe;AAAA,IAClC,WAAW;AAAA,IACX,kBAAiB;AAAA,IACM,uBAAA;AAAA,IACV,aAAA;AAAA,IACA,aAAA;AAAA,IACT,IAAA;AAAA,IACJ,OAAO,EAAK;AAAA,cARd,CAUE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI,EAEF,IAAI,IAAY,KAAK,IAAW,KAAK,GACvC;AAAA,gBAJF;AAAA,QAME,gBAAA,EAAC,GAAD;AAAA,UACE,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,IAAI;AAAA,YAAE,IAAI,IAAW,KAAK;AAAA,YAAI,IAAI,IAAW,KAAK;AAAA,UAAG;AAAA,oBAHvD,CAKE,gBAAA,EAAC,IAAD;AAAA,YACE,sBAAsB;AAAA,YACH,mBAAA;AAAA,UACpB,CAAA,GACD,gBAAA,EAAC,IAAD;AAAA,YAA+B,aAAA;AAAA,YAA0B,aAAA;AAAA,UAAc,CAAA,CAClE;AAAA;QACP,gBAAA,EAAC,GAAD;AAAA,UAAO,YAAW;AAAA,UAAS,eAAc;AAAA,UAAM,OAAM;AAAA,oBAArD,CACE,gBAAA,EAAC,GAAD;AAAA,YAAK,UAAU;AAAA,sBACZ,KACC,gBAAA,EAAC,GAAD;AAAA,cAAQ,SAAA,MAAe,EAAoB,EAAE;AAAA,cAAG,IAAI;AAAA,gBAAE,GAAG;AAAA,gBAAG,IAAI;AAAA,cAAE;AAAA,wBAAlE,CACE,gBAAA,EAAC,IAAD,EAAM,MAAK,aAAc,CAAA,GACxB,EAAK,cACA;AAAA;UAEP,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,YAAQ,SAAA,MAAe,EAAoB,EAAI;AAAA,YAAG,IAAI,EAAE,IAAI,EAAE;AAAA,sBAC3D,GAAG,EAAK,iBAAA,KAAsB,EAAa,MAAA;AAAA,UACtC,CAAA,CACH;AAAA;QACP,gBAAA,EAAC,GAAD,EAAA,UAAA,CACG,MAAgB,WACf,gBAAA,EAAC,IAAD;AAAA,UACE,iBAAiB;AAAA,UACF,eAAA;AAAA,UACF,aAAA;AAAA,UACE,eAAA;AAAA,UACD,cAAA;AAAA,UACd,iBAAiB,EAAU;AAAA,UAC3B,mBAAmB,EAAU;AAAA,QAC9B,CAAA,GAEF,MAAgB,WACf,gBAAA,EAAC,IAAD;AAAA,UACc,YAAA;AAAA,UACM,kBAAA;AAAA,UACC,mBAAA;AAAA,QACpB,CAAA,CAEA,EAAA,CAAA;AAAA,MACA;AAAA,QACP,gBAAA,EAAC,IAAD;AAAA,MACE,cAAc;AAAA,MACd,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,SAAA,MAAe,EAAoB,EAAK;AAAA,IACzC,CAAA,CACc;AAAA;AAErB,GAEA,KAAe,GAAS,EAAgB"}

package/dist/trends/TrendsMicroWidget.es.js

@@ -0,0 +1,72 @@
+import { useAccountStore as L, useCategoryStore as I, useEvent as R, useGlobalCopyStore as v, useGlobalUiStore as x } from "../common/context/hooks.es.js";
+import { useWidgetLoadTimer as N } from "../common/hooks/useWidgetLoadTimer.es.js";
+import { ANALYTICS_EVENTS as c } from "../common/constants/Analytics.es.js";
+import W from "../common/components/MicroWidgetContainer.es.js";
+import w from "../common/components/Loader.es.js";
+import { calculateRelativeChange as f } from "./utils/shared.es.js";
+import { getIncomeTotals as G, getSpendingTotals as P } from "./utils/SpendingData.es.js";
+import { TrendsMicroSpendingIncomeBox as h } from "./components/TrendsMicroSpendingIncomeBox.es.js";
+import { ZeroStateMicroWidget as k } from "./ZeroStateMicroWidget.es.js";
+import l from "react";
+import { observer as j } from "mobx-react-lite";
+import z from "@mui/material/Stack";
+import { jsx as t, jsxs as K } from "react/jsx-runtime";
+import { subMonths as O } from "date-fns";
+var oe = j(({ onCtaClick: T }) => {
+  const { isAccountDataLoaded: _, loadAccountData: S, visibleAccounts: m } = L();
+  l.useEffect(() => {
+    _ || S().finally();
+  }, []);
+  const { onEvent: d } = R(), { monthlyCategoryTotals: a, loadMonthlyCategoryTotals: D, monthlyTotalsLoaded: p } = I(), o = {
+    start: O(/* @__PURE__ */ new Date(), 1),
+    end: /* @__PURE__ */ new Date()
+  }, { trends: e } = v(), { selectedAccounts: g, isInitialized: n } = x();
+  N({
+    widgetName: "TrendsMicroWidget",
+    isLoaded: p
+  }), l.useEffect(() => {
+    n && D(g, o.start).then(() => {
+      d(c.TRENDS_LOAD_WIDGET, { state: m?.length ? "default" : "zeroState" });
+    });
+  }, [n, g]);
+  const { spendingData: C, incomeData: b } = l.useMemo(() => ({
+    spendingData: P(a, o),
+    incomeData: G(a, o)
+  }), [a, o]), [y, r] = C, [u, i] = b, E = f(r.y, y.y), M = f(i.y, u.y), s = n && !m?.length, A = () => {
+    d(s ? c.TRENDS_CLICK_GET_STARTED : c.TRENDS_CLICK_VIEW_MORE), T();
+  };
+  return !p || !n ? /* @__PURE__ */ t(w, {}) : /* @__PURE__ */ t(W, {
+    className: "mx-trends-microwidget",
+    ctaLabel: e.micro_primary_cta_label,
+    onCTAClick: A,
+    subHeader: s ? void 0 : e.micro_subheader,
+    title: e.title,
+    children: s ? /* @__PURE__ */ t(k, {}) : /* @__PURE__ */ K(z, {
+      sx: {
+        alignItems: "stretch",
+        flexDirection: "row",
+        gap: 12
+      },
+      children: [/* @__PURE__ */ t(h, {
+        percentage: E,
+        secondaryLabel: e.micro_secondary_label,
+        shouldDisplayPercentage: r.y !== 0 && y.y !== 0,
+        title: e.spending_label,
+        totalAmount: r.y,
+        transactionType: "spending"
+      }), /* @__PURE__ */ t(h, {
+        percentage: M,
+        secondaryLabel: e.micro_secondary_label,
+        shouldDisplayPercentage: i.y !== 0 && u.y !== 0,
+        title: e.income_label,
+        totalAmount: i.y,
+        transactionType: "income"
+      })]
+    })
+  });
+});
+export {
+  oe as TrendsMicroWidget
+};
+
+//# sourceMappingURL=TrendsMicroWidget.es.js.map

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

@@ -0,0 +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"}

package/dist/trends/TrendsMiniWidget.es.js

@@ -0,0 +1,43 @@
+import { useAccountStore as m, useCategoryStore as f, useGlobalCopyStore as u, useGlobalStore as p, useGlobalUiStore as g } from "../common/context/hooks.es.js";
+import { useWidgetLoadTimer as y } from "../common/hooks/useWidgetLoadTimer.es.js";
+import h from "../common/components/MiniWidgetContainer.es.js";
+import b from "../common/components/Loader.es.js";
+import C from "./components/SpendingChart.es.js";
+import n from "react";
+import { observer as S } from "mobx-react-lite";
+import { jsx as i } from "react/jsx-runtime";
+var T = ({ onPrimaryCtaClick: s, sx: l }) => {
+  const { isAccountDataLoaded: t, loadAccountData: d } = m(), { loadMonthlyCategoryTotals: c, monthlyTotalsLoaded: r } = f(), { isInitialized: e } = p(), { trends: o } = u(), { selectedAccounts: a } = g();
+  return n.useEffect(() => {
+    t || d().finally();
+  }, []), y({
+    widgetName: "TrendsMiniWidget",
+    isLoaded: r
+  }), n.useEffect(() => {
+    e && t && c(a).finally();
+  }, [
+    t,
+    e,
+    a
+  ]), !t || !e || !r ? /* @__PURE__ */ i(b, {}) : /* @__PURE__ */ i(h, {
+    contentStyles: {
+      height: "calc(100% - 72px)",
+      minHeight: 300,
+      ":last-child": { pb: 0 }
+    },
+    onPrimaryCtaClick: s,
+    primaryCtaLabel: o.primary_cta,
+    subTitle: o.sub_title,
+    sx: {
+      height: "100%",
+      ...l
+    },
+    title: o.mini_title,
+    children: /* @__PURE__ */ i(C, {})
+  });
+}, D = S(T);
+export {
+  D as default
+};
+
+//# sourceMappingURL=TrendsMiniWidget.es.js.map

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

@@ -0,0 +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"}

package/dist/trends/TrendsWidget.es.js

@@ -0,0 +1,207 @@
+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 { 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 i from "react";
+import { observer as Pe } 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 { 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({
+    widgetName: "TrendsWidget",
+    isLoaded: I
+  });
+  const B = i.useMemo(() => y ? A.getFilteredBeats({ templates: Ve }) : [], [y]);
+  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);
+  }, []), 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, {
+        ...c,
+        time_period: `${k(o.end, o.start)}M`
+      });
+    }));
+  }, [
+    T,
+    h,
+    S,
+    o
+  ]), i.useEffect(() => {
+    if (d.length !== 0) {
+      const t = {
+        accounts: Z,
+        dateRange: {
+          start: o.start,
+          end: o.end
+        }
+      };
+      Q({
+        ...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);
+  }, 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, {
+      ...c,
+      toggleView: n
+    });
+  }, fe = (t) => {
+    const n = $e(t?.[0], 1), g = t?.[1], Ce = k(g, n);
+    X({
+      start: n,
+      end: g
+    }), a(r.TRENDS_CLICK_TIME_WINDOW, {
+      ...c,
+      time_period: Ce + "M"
+    });
+  }, he = (t) => {
+    a(r.TRENDS_CLICK_FILTER, {
+      ...c,
+      filterValue: t
+    });
+  }, pe = (t) => {
+    x(t);
+  }, ue = () => {
+    x(""), a(r.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 },
+    dateRange: o,
+    dateRangeVariant: C ? "timeframetabs" : "timeframebuttons",
+    onAccountsFilterClick: he,
+    onBackClick: H,
+    onMenuClick: G,
+    sx: O,
+    title: l.title,
+    children: [/* @__PURE__ */ s(f, {
+      sx: { px: C ? 0 : 48 },
+      children: [
+        /* @__PURE__ */ s(f, {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          sx: {
+            px: C ? 16 : 0,
+            py: 16
+          },
+          children: [/* @__PURE__ */ e(He, {
+            selectedCategoryGuid: w,
+            selectedDateRange: o
+          }), /* @__PURE__ */ e(ke, {
+            onTabChange: ge,
+            selectedTab: p
+          })]
+        }),
+        /* @__PURE__ */ e(f, {
+          alignItems: "center",
+          flexDirection: "row",
+          sx: { pb: 8 },
+          width: "100%",
+          children: /* @__PURE__ */ e(D, {
+            flexGrow: 1,
+            children: w && /* @__PURE__ */ s(je, {
+              onClick: ue,
+              sx: {
+                p: 0,
+                pr: 5
+              },
+              children: [/* @__PURE__ */ e(Ue, {}), l.all_categories]
+            })
+          })
+        }),
+        W && /* @__PURE__ */ e(We, {
+          header: u.header,
+          icon: "multiline_chart",
+          onClick: u.onClickHandler,
+          primaryButton: u.primaryButton,
+          subText: u.description,
+          sx: {
+            height: v,
+            maxWidth: 432
+          }
+        }),
+        !W && /* @__PURE__ */ s(f, {
+          flexDirection: m ? "row" : "column",
+          gap: m ? 48 : 16,
+          children: [p === "Chart" && /* @__PURE__ */ s(Ye, { children: [/* @__PURE__ */ e(D, {
+            sx: { width: m ? "68%" : "100%" },
+            children: /* @__PURE__ */ e(Ke, {
+              availableHeight: v,
+              minHeight: 450,
+              selectedDateRange: o,
+              totals: d
+            })
+          }), /* @__PURE__ */ s(f, {
+            gap: 16,
+            sx: { width: m ? "32%" : "100%" },
+            children: [b && y && B.length > 0 && /* @__PURE__ */ e(Oe, {
+              beats: B,
+              onInsightCardClick: M
+            }), /* @__PURE__ */ e(Me, {
+              availableHeight: re,
+              onCategoryClick: ce
+            })]
+          })] }), p === "Table" && /* @__PURE__ */ e(D, {
+            sx: { width: "100%" },
+            children: /* @__PURE__ */ e(Ge, {
+              height: "unset",
+              onClickRow: pe,
+              selectedCategory: w,
+              selectedDateRange: o
+            })
+          })]
+        }),
+        /* @__PURE__ */ e(Re, {
+          ariaLabelClose: l.close_category_details,
+          isOpen: !!_,
+          onClose: de,
+          shouldShowHeaderShadow: !0,
+          title: _?.is_income ? l.category_income : l.category_spending,
+          children: _ && /* @__PURE__ */ e(ze, {})
+        })
+      ]
+    }), /* @__PURE__ */ e(Be, {
+      onClose: () => N(!1),
+      showConnectWidget: se,
+      title: ee.mini_title
+    })]
+  });
+}, Lt = Pe(qe);
+export {
+  Lt as default
+};
+
+//# sourceMappingURL=TrendsWidget.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrendsWidget.es.js","names":[],"sources":["../../src/trends/TrendsWidget.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\n\nimport { DateRange } from '@mui/x-date-pickers-pro'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { ArrowBack } from '@mxenabled/mx-icons'\n\nimport {\n  ANALYTICS_EVENTS,\n  ConnectDrawer,\n  Drawer,\n  EmptyState,\n  Loader,\n  WidgetContainer,\n  useAccountStore,\n  useAppConfig,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalStore,\n  useGlobalUiStore,\n  useInsightsEnabled,\n  useScreenSize,\n  useTransactionStore,\n  useTrendsStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { type Beat, type DetailedCategoryWithTransactions, Transaction, WidgetProps } from '../core'\n\nimport DateRangeText from './components/DateRangeText'\nimport TrendsViewToggle, { type TrendsTabValue } from './components/TrendsViewToggle'\nimport TrendsTableContainer from './components/TrendsTableContainer'\nimport CategoriesList from './components/CategoriesList'\nimport InsightsCarousel from './components/TrendsInsights'\nimport { CategoryDetails } from './components/CategoryDetails'\nimport TrendsChartTotals from './components/TrendsChartTotals'\nimport { TRENDS_ANALYTICS_METADATA } from './constants/TrendsWidget'\nimport { TRENDS_BEAT_TEMPLATES } from './constants/TrendsInsights'\nimport { buildEmptyStateProps } from './utils/TrendsWidget'\n\ninterface TrendsWidgetProps extends WidgetProps {\n  onInsightCardClick?: (beat?: Beat) => void\n}\n\nconst TrendsWidget: React.FC<TrendsWidgetProps> = ({\n  onBackClick,\n  onMenuClick,\n  onInsightCardClick,\n  sx,\n}) => {\n  const { onEvent } = useEvent()\n  const { config } = useAppConfig()\n  const { isDesktop, isLargeDesktop, isMobile } = useScreenSize()\n  const { isAccountDataLoaded, loadAccountData, visibleAccounts: accounts } = useAccountStore()\n  const {\n    categoriesLoaded,\n    loadCategories,\n    loadDateRangeCategoryTotals,\n    loadMonthlyCategoryTotals,\n    monthlyCategoryTotals,\n    monthlyTotalsLoaded,\n  } = useCategoryStore()\n  const { isTransactionDataLoaded, loadTransactionData, setFilter } = useTransactionStore()\n  const { selectedCategoryData, selectedDateRange, setSelectedCategoryData, setSelectedDateRange } =\n    useTrendsStore()\n  const { isInitialized, selectedAccounts, selectedAccountGuids } = useGlobalUiStore()\n  const { trends: copy, connect: connectCopy } = useGlobalCopyStore()\n  const { beatStore } = useGlobalStore()\n  const insightsEnabled = useInsightsEnabled()\n\n  // allows clients to disable insights in trends while still enabling insights\n  const showInsights = insightsEnabled && config.show_insights_widget_in_master\n  const isLargeLayout = isDesktop || isLargeDesktop\n\n  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)\n  const [isBeatsLoaded, setIsBeatsLoaded] = 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 insightsPadding = isLargeLayout ? 56 : 0\n  const availableChartHeight = viewportHeight - 208 // unavailable height on desktop\n  const availableListHeight = viewportHeight - (showInsights ? 550 + insightsPadding : 266)\n\n  const [showConnectWidget, setShowConnectWidget] = React.useState(false)\n  const hasAggregation = config.show_connections_widget_in_master\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsWidget',\n    isLoaded: isWidgetInitialized,\n  })\n  const filteredBeats = React.useMemo(() => {\n    if (!isBeatsLoaded) return []\n    return beatStore.getFilteredBeats({ templates: TRENDS_BEAT_TEMPLATES })\n  }, [isBeatsLoaded])\n\n  React.useEffect(() => {\n    // Setup resize listener for responsive chart and list heights\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 && isAccountDataLoaded) {\n      beatStore.loadBeats().finally(() => setIsBeatsLoaded(true))\n      loadDateRangeCategoryTotals(selectedAccounts, selectedDateRange.start, selectedDateRange.end)\n        .then(() => {\n          loadMonthlyCategoryTotals(\n            selectedAccounts,\n            selectedDateRange.start,\n            selectedDateRange.end,\n          ).finally()\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, isAccountDataLoaded, selectedAccounts, selectedDateRange])\n\n  React.useEffect(() => {\n    // if monthlyCategoryTotals has data, filter transactions\n    if (monthlyCategoryTotals.length !== 0) {\n      const transactionFilter = {\n        accounts: selectedAccountGuids,\n        dateRange: { start: selectedDateRange.start, end: selectedDateRange.end },\n      }\n\n      // this filter sets sortedTransactions in the transaction store\n      setFilter({\n        ...transactionFilter,\n        custom: (t: Transaction) =>\n          Boolean(\n            monthlyCategoryTotals.find(\n              (cat) =>\n                cat.top_level_category_guid === t.top_level_category_guid ||\n                cat.category_guid === t.category_guid,\n            ),\n          ),\n      })\n    }\n  }, [monthlyCategoryTotals])\n\n  const handleDetailOpen = (selected: DetailedCategoryWithTransactions) => {\n    setSelectedCategoryData(selected)\n  }\n\n  const handleDetailClose = () => {\n    setSelectedCategoryData(null)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_BACK, TRENDS_ANALYTICS_METADATA)\n  }\n\n  const handleEmptyStateClick = () => {\n    setShowConnectWidget(true)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CONNECT_ACCOUNTS)\n  }\n\n  const onTabChange = (_event: React.SyntheticEvent, newValue: TrendsTabValue) => {\n    setSelectedTab(newValue ?? selectedTab)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TOGGLE_VIEW, {\n      ...TRENDS_ANALYTICS_METADATA,\n      toggleView: newValue,\n    })\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      ...TRENDS_ANALYTICS_METADATA,\n      time_period: months + 'M',\n    })\n  }\n\n  const onAccountsFilterClick = (selectedAccountGuids?: string[]) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_FILTER, {\n      ...TRENDS_ANALYTICS_METADATA,\n      filterValue: selectedAccountGuids,\n    })\n  }\n\n  const onClickRow = (guid: string) => {\n    setSelectedCategory(guid)\n  }\n\n  const onViewAllCategories = () => {\n    setSelectedCategory('')\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_ALL_CATEGORIES, TRENDS_ANALYTICS_METADATA)\n  }\n\n  if (!isInitialized || !isAccountDataLoaded || !isWidgetInitialized || !monthlyTotalsLoaded)\n    return <Loader />\n\n  const isEmptyTrendsState = accounts.length === 0 || monthlyCategoryTotals.length === 0\n\n  const emptyStateProps = buildEmptyStateProps(copy, hasAggregation, handleEmptyStateClick)\n\n  return (\n    <WidgetContainer\n      calendarActions={{ onRangeChanged }}\n      dateRange={selectedDateRange}\n      dateRangeVariant={isMobile ? 'timeframetabs' : 'timeframebuttons'}\n      onAccountsFilterClick={onAccountsFilterClick}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={copy.title}\n    >\n      <Stack\n        sx={{\n          px: isMobile ? 0 : 48,\n        }}\n      >\n        <Stack\n          flexDirection=\"row\"\n          justifyContent=\"space-between\"\n          sx={{ px: isMobile ? 16 : 0, py: 16 }}\n        >\n          <DateRangeText\n            selectedCategoryGuid={selectedCategory}\n            selectedDateRange={selectedDateRange}\n          />\n          <TrendsViewToggle onTabChange={onTabChange} selectedTab={selectedTab} />\n        </Stack>\n        <Stack alignItems=\"center\" flexDirection=\"row\" sx={{ pb: 8 }} width=\"100%\">\n          <Box flexGrow={1}>\n            {selectedCategory && (\n              <Button onClick={onViewAllCategories} sx={{ p: 0, pr: 5 }}>\n                <ArrowBack />\n                {copy.all_categories}\n              </Button>\n            )}\n          </Box>\n        </Stack>\n\n        {isEmptyTrendsState && (\n          <EmptyState\n            header={emptyStateProps.header}\n            icon=\"multiline_chart\"\n            onClick={emptyStateProps.onClickHandler}\n            primaryButton={emptyStateProps.primaryButton}\n            subText={emptyStateProps.description}\n            sx={{ height: availableChartHeight, maxWidth: 432 }}\n          />\n        )}\n        {!isEmptyTrendsState && (\n          <Stack flexDirection={isLargeLayout ? 'row' : 'column'} gap={isLargeLayout ? 48 : 16}>\n            {selectedTab === 'Chart' && (\n              <>\n                <Box sx={{ width: isLargeLayout ? '68%' : '100%' }}>\n                  <TrendsChartTotals\n                    availableHeight={availableChartHeight}\n                    minHeight={450}\n                    selectedDateRange={selectedDateRange}\n                    totals={monthlyCategoryTotals}\n                  />\n                </Box>\n                <Stack gap={16} sx={{ width: isLargeLayout ? '32%' : '100%' }}>\n                  {/* Only show insights enabled and there are beats to show */}\n                  {showInsights && isBeatsLoaded && filteredBeats.length > 0 && (\n                    <InsightsCarousel\n                      beats={filteredBeats}\n                      onInsightCardClick={onInsightCardClick}\n                    />\n                  )}\n                  <CategoriesList\n                    availableHeight={availableListHeight}\n                    onCategoryClick={handleDetailOpen}\n                  />\n                </Stack>\n              </>\n            )}\n            {selectedTab === 'Table' && (\n              <Box sx={{ width: '100%' }}>\n                <TrendsTableContainer\n                  height=\"unset\"\n                  onClickRow={onClickRow}\n                  selectedCategory={selectedCategory}\n                  selectedDateRange={selectedDateRange}\n                />\n              </Box>\n            )}\n          </Stack>\n        )}\n        <Drawer\n          ariaLabelClose={copy.close_category_details}\n          isOpen={Boolean(selectedCategoryData)}\n          onClose={handleDetailClose}\n          shouldShowHeaderShadow={true}\n          title={selectedCategoryData?.is_income ? copy.category_income : copy.category_spending}\n        >\n          {selectedCategoryData && <CategoryDetails />}\n        </Drawer>\n      </Stack>\n\n      <ConnectDrawer\n        onClose={() => setShowConnectWidget(false)}\n        showConnectWidget={showConnectWidget}\n        title={connectCopy.mini_title}\n      />\n    </WidgetContainer>\n  )\n}\n\nexport default observer(TrendsWidget)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAM,KAAA,CAA6C,EACjD,aAAA,GACA,aAAA,GACA,oBAAA,GACA,IAAA,EAAA,MACI;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,GAAS,GACvB,EAAE,QAAA,EAAA,IAAW,GAAa,GAC1B,EAAE,WAAA,GAAW,gBAAA,GAAgB,UAAA,EAAA,IAAa,GAAc,GACxD,EAAE,qBAAA,GAAqB,iBAAA,GAAiB,iBAAiB,EAAA,IAAa,GAAgB,GACtF,EACJ,kBAAA,GACA,gBAAA,GACA,6BAAA,GACA,2BAAA,GACA,uBAAA,GACA,qBAAA,EAAA,IACE,GAAiB,GACf,EAAE,yBAAA,GAAyB,qBAAA,GAAqB,WAAA,EAAA,IAAc,GAAoB,GAClF,EAAE,sBAAA,GAAsB,mBAAA,GAAmB,yBAAA,GAAyB,sBAAA,EAAA,IACxE,GAAe,GACX,EAAE,eAAA,GAAe,kBAAA,GAAkB,sBAAA,EAAA,IAAyB,GAAiB,GAC7E,EAAE,QAAQ,GAAM,SAAS,GAAA,IAAgB,GAAmB,GAC5D,EAAE,WAAA,EAAA,IAAc,GAAe,GAI/B,IAHkB,GAGH,KAAmB,EAAO,gCACzC,IAAgB,KAAa,GAE7B,CAAC,GAAqB,EAAA,IAA0B,EAAM,SAAS,EAAK,GACpE,CAAC,GAAe,EAAA,IAAoB,EAAM,SAAS,EAAK,GACxD,CAAC,GAAa,EAAA,IAAkB,EAAM,SAAyB,OAAO,GACtE,CAAC,GAAkB,CAAA,IAAuB,EAAM,SAAS,EAAE,GAG3D,CAAC,GAAgB,EAAA,IAAqB,EAAM,SAAS,OAAO,WAAW,GACvE,KAAkB,IAAgB,KAAK,GACvC,IAAuB,IAAiB,KACxC,KAAsB,KAAkB,IAAe,MAAM,KAAkB,MAE/E,CAAC,IAAmB,CAAA,IAAwB,EAAM,SAAS,EAAK,GAChE,KAAiB,EAAO;AAE9B,EAAA,GAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,IAAgB,EAAM,QAAA,MACrB,IACE,EAAU,iBAAiB,EAAE,WAAW,GAAsB,CAAC,IAD3C,CAAC,GAE3B,CAAC,CAAa,CAAC;AAElB,EAAA,EAAM,UAAA,MAAgB;AAEpB,UAAM,IAAA,MAAqB,GAAkB,OAAO,WAAW;AAC/D,kBAAO,iBAAiB,UAAU,CAAY,GAEzC,KACH,EAAgB,EAAE,QAAQ,GAEvB,KACH,EAAe,EAAE,QAAQ,GAEtB,KACH,EAAoB,EAAE,QAAQ,GAGhC,MAAa,OAAO,oBAAoB,UAAU,CAAY;AAAA,EAChE,GAAG,CAAC,CAAC,GAGL,EAAM,UAAA,MAAgB;AACpB,IAAI,KAAiB,MACnB,EAAU,UAAU,EAAE,QAAA,MAAc,GAAiB,EAAI,CAAC,GAC1D,EAA4B,GAAkB,EAAkB,OAAO,EAAkB,GAAG,EACzF,KAAA,MAAW;AACV,MAAA,EACE,GACA,EAAkB,OAClB,EAAkB,GACpB,EAAE,QAAQ;AAAA,IACZ,CAAC,EACA,QAAA,MAAc;AACb,MAAA,GAAuB,EAAI,GAC3B,EAAQ,EAAiB,oBAAoB;AAAA,QAC3C,GAAG;AAAA,QACH,aAAa,GAAG,EAA2B,EAAkB,KAAK,EAAkB,KAAK,CAAA;AAAA,MAC3F,CAAC;AAAA,IACH,CAAC;AAAA,EAEP,GAAG;AAAA,IAAC;AAAA,IAAe;AAAA,IAAqB;AAAA,IAAkB;AAAA,EAAiB,CAAC,GAE5E,EAAM,UAAA,MAAgB;AAEpB,QAAI,EAAsB,WAAW,GAAG;AACtC,YAAM,IAAoB;AAAA,QACxB,UAAU;AAAA,QACV,WAAW;AAAA,UAAE,OAAO,EAAkB;AAAA,UAAO,KAAK,EAAkB;AAAA,QAAI;AAAA,MAC1E;AAGA,MAAA,EAAU;AAAA,QACR,GAAG;AAAA,QACH,QAAA,CAAS,MACP,EACE,EAAsB,KAAA,CACnB,MACC,EAAI,4BAA4B,EAAE,2BAClC,EAAI,kBAAkB,EAAE,aAC5B;AAAA,MAEN,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAqB,CAAC;AAE1B,QAAM,KAAA,CAAoB,MAA+C;AACvE,IAAA,EAAwB,CAAQ;AAAA,EAClC,GAEM,KAAA,MAA0B;AAC9B,IAAA,EAAwB,IAAI,GAC5B,EAAQ,EAAiB,mBAAmB,CAAyB;AAAA,EACvE,GAEM,KAAA,MAA8B;AAClC,IAAA,EAAqB,EAAI,GACzB,EAAQ,EAAiB,6BAA6B;AAAA,EACxD,GAEM,KAAA,CAAe,GAA8B,MAA6B;AAC9E,IAAA,GAAe,KAAY,CAAW,GACtC,EAAQ,EAAiB,0BAA0B;AAAA,MACjD,GAAG;AAAA,MACH,YAAY;AAAA,IACd,CAAC;AAAA,EACH,GAEM,KAAA,CAAkB,MAA+B;AACrD,UAAM,IAAY,GAAW,IAAY,CAAA,GAAY,CAAC,GAChD,IAAU,IAAY,CAAA,GACtB,KAAS,EAA2B,GAAS,CAAS;AAE5D,IAAA,EAAqB;AAAA,MAAE,OAAO;AAAA,MAAW,KAAK;AAAA,IAAQ,CAAC,GACvD,EAAQ,EAAiB,0BAA0B;AAAA,MACjD,GAAG;AAAA,MACH,aAAa,KAAS;AAAA,IACxB,CAAC;AAAA,EACH,GAEM,KAAA,CAAyB,MAAoC;AACjE,IAAA,EAAQ,EAAiB,qBAAqB;AAAA,MAC5C,GAAG;AAAA,MACH,aAAa;AAAA,IACf,CAAC;AAAA,EACH,GAEM,KAAA,CAAc,MAAiB;AACnC,IAAA,EAAoB,CAAI;AAAA,EAC1B,GAEM,KAAA,MAA4B;AAChC,IAAA,EAAoB,EAAE,GACtB,EAAQ,EAAiB,6BAA6B,CAAyB;AAAA,EACjF;AAEA,MAAI,CAAC,KAAiB,CAAC,KAAuB,CAAC,KAAuB,CAAC,EACrE,QAAO,gBAAA,EAAC,IAAD,CAAS,CAAA;AAElB,QAAM,IAAqB,EAAS,WAAW,KAAK,EAAsB,WAAW,GAE/E,IAAkB,GAAqB,GAAM,IAAgB,EAAqB;AAExF,SACE,gBAAA,EAAC,IAAD;AAAA,IACE,iBAAiB,EAAE,gBAAA,GAAe;AAAA,IAClC,WAAW;AAAA,IACX,kBAAkB,IAAW,kBAAkB;AAAA,IACxB,uBAAA;AAAA,IACV,aAAA;AAAA,IACA,aAAA;AAAA,IACT,IAAA;AAAA,IACJ,OAAO,EAAK;AAAA,cARd,CAUE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI,EACF,IAAI,IAAW,IAAI,GACrB;AAAA,gBAHF;AAAA,QAKE,gBAAA,EAAC,GAAD;AAAA,UACE,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,IAAI;AAAA,YAAE,IAAI,IAAW,KAAK;AAAA,YAAG,IAAI;AAAA,UAAG;AAAA,oBAHtC,CAKE,gBAAA,EAAC,IAAD;AAAA,YACE,sBAAsB;AAAA,YACH,mBAAA;AAAA,UACpB,CAAA,GACD,gBAAA,EAAC,IAAD;AAAA,YAA+B,aAAA;AAAA,YAA0B,aAAA;AAAA,UAAc,CAAA,CAClE;AAAA;QACP,gBAAA,EAAC,GAAD;AAAA,UAAO,YAAW;AAAA,UAAS,eAAc;AAAA,UAAM,IAAI,EAAE,IAAI,EAAE;AAAA,UAAG,OAAM;AAAA,oBAClE,gBAAA,EAAC,GAAD;AAAA,YAAK,UAAU;AAAA,sBACZ,KACC,gBAAA,EAAC,IAAD;AAAA,cAAQ,SAAS;AAAA,cAAqB,IAAI;AAAA,gBAAE,GAAG;AAAA,gBAAG,IAAI;AAAA,cAAE;AAAA,wBAAxD,CACE,gBAAA,EAAC,IAAD,CAAY,CAAA,GACX,EAAK,cACA;AAAA;UAEP,CAAA;AAAA,QACA,CAAA;AAAA,QAEN,KACC,gBAAA,EAAC,IAAD;AAAA,UACE,QAAQ,EAAgB;AAAA,UACxB,MAAK;AAAA,UACL,SAAS,EAAgB;AAAA,UACzB,eAAe,EAAgB;AAAA,UAC/B,SAAS,EAAgB;AAAA,UACzB,IAAI;AAAA,YAAE,QAAQ;AAAA,YAAsB,UAAU;AAAA,UAAI;AAAA,QACnD,CAAA;AAAA,QAEF,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,UAAO,eAAe,IAAgB,QAAQ;AAAA,UAAU,KAAK,IAAgB,KAAK;AAAA,oBAAlF,CACG,MAAgB,WACf,gBAAA,EAAA,IAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YAAK,IAAI,EAAE,OAAO,IAAgB,QAAQ,OAAO;AAAA,sBAC/C,gBAAA,EAAC,IAAD;AAAA,cACE,iBAAiB;AAAA,cACjB,WAAW;AAAA,cACQ,mBAAA;AAAA,cACnB,QAAQ;AAAA,YACT,CAAA;AAAA,UACE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,YAAO,KAAK;AAAA,YAAI,IAAI,EAAE,OAAO,IAAgB,QAAQ,OAAO;AAAA,sBAA5D,CAEG,KAAgB,KAAiB,EAAc,SAAS,KACvD,gBAAA,EAAC,IAAD;AAAA,cACE,OAAO;AAAA,cACa,oBAAA;AAAA,YACrB,CAAA,GAEH,gBAAA,EAAC,IAAD;AAAA,cACE,iBAAiB;AAAA,cACjB,iBAAiB;AAAA,YAClB,CAAA,CACI;AAAA,YACP,EAAA,CAAA,GAEH,MAAgB,WACf,gBAAA,EAAC,GAAD;AAAA,YAAK,IAAI,EAAE,OAAO,OAAO;AAAA,sBACvB,gBAAA,EAAC,IAAD;AAAA,cACE,QAAO;AAAA,cACK,YAAA;AAAA,cACM,kBAAA;AAAA,cACC,mBAAA;AAAA,YACpB,CAAA;AAAA,UACE,CAAA,CAEF;AAAA;QAET,gBAAA,EAAC,IAAD;AAAA,UACE,gBAAgB,EAAK;AAAA,UACrB,QAAQ,EAAQ;AAAA,UAChB,SAAS;AAAA,UACT,wBAAwB;AAAA,UACxB,OAAO,GAAsB,YAAY,EAAK,kBAAkB,EAAK;AAAA,oBAEpE,KAAwB,gBAAA,EAAC,IAAD,CAAkB,CAAA;AAAA,QACrC,CAAA;AAAA,MACH;AAAA,QAEP,gBAAA,EAAC,IAAD;AAAA,MACE,SAAA,MAAe,EAAqB,EAAK;AAAA,MACtB,mBAAA;AAAA,MACnB,OAAO,GAAY;AAAA,IACpB,CAAA,CACc;AAAA;AAErB,GAEA,KAAe,GAAS,EAAY"}

package/dist/trends/ZeroStateMicroWidget.es.js

@@ -0,0 +1,30 @@
+import { useGlobalCopyStore as n } from "../common/context/hooks.es.js";
+import { observer as a } from "mobx-react-lite";
+import o from "@mui/material/Stack";
+import { P as e } from "@mxenabled/mxui";
+import { MultilineChart as s } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+var h = a(() => {
+  const { trends: t } = n();
+  return /* @__PURE__ */ i(o, {
+    sx: {
+      alignItems: "start",
+      flexDirection: "row",
+      gap: 12
+    },
+    children: [/* @__PURE__ */ r(s, { size: 32 }), /* @__PURE__ */ i(o, { children: [/* @__PURE__ */ r(e, {
+      fontWeight: 600,
+      variant: "body1",
+      children: t.zero_state_content_header
+    }), /* @__PURE__ */ r(e, {
+      color: "text.secondary",
+      variant: "subtitle2",
+      children: t.zero_state_content_description
+    })] })]
+  });
+});
+export {
+  h as ZeroStateMicroWidget
+};
+
+//# sourceMappingURL=ZeroStateMicroWidget.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ZeroStateMicroWidget.es.js","names":[],"sources":["../../src/trends/ZeroStateMicroWidget.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { MultilineChart } from '@mxenabled/mx-icons'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { useGlobalCopyStore } from '../common'\n\nexport const ZeroStateMicroWidget = observer(() => {\n  const { trends: copy } = useGlobalCopyStore()\n\n  return (\n    <Stack sx={{ alignItems: 'start', flexDirection: 'row', gap: 12 }}>\n      <MultilineChart size={32} />\n      <Stack>\n        <P fontWeight={600} variant=\"body1\">\n          {copy.zero_state_content_header}\n        </P>\n        <P color=\"text.secondary\" variant=\"subtitle2\">\n          {copy.zero_state_content_description}\n        </P>\n      </Stack>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;AAUA,IAAa,IAAuB,EAAA,MAAe;AACjD,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB;AAE5C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAS,eAAe;AAAA,MAAO,KAAK;AAAA,IAAG;AAAA,cAAhE,CACE,gBAAA,EAAC,GAAD,EAAgB,MAAM,GAAK,CAAA,GAC3B,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAG,YAAY;AAAA,MAAK,SAAQ;AAAA,gBACzB,EAAK;AAAA,IACL,CAAA,GACH,gBAAA,EAAC,GAAD;AAAA,MAAG,OAAM;AAAA,MAAiB,SAAQ;AAAA,gBAC/B,EAAK;AAAA,IACL,CAAA,CACE,EAAA,CAAA,CACF;AAAA;AAEX,CAAC"}