@mx-cartographer/experiences 7.0.22-alpha.san1 → 7.0.22-alpha.san2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/trends/index.es.js +175 -170
- package/package.json +1 -1
package/dist/trends/index.es.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
1
|
+
import { jsx as e, jsxs as C, Fragment as pe } from "react/jsx-runtime";
|
|
2
2
|
import i from "react";
|
|
3
3
|
import { observer as M } from "mobx-react-lite";
|
|
4
|
-
import { Icon as se, Text as X, CategoryIcon as
|
|
4
|
+
import { Icon as se, Text as X, CategoryIcon as ye, P as Y, H3 as Ie, ChevronRightIcon as Pe } from "@mxenabled/mxui";
|
|
5
5
|
import O from "@mui/material/Box";
|
|
6
6
|
import _ from "@mui/material/Stack";
|
|
7
|
-
import
|
|
8
|
-
import { addSeconds as
|
|
9
|
-
import { differenceInCalendarMonths as
|
|
10
|
-
import { a as Ke, g as $e, S as je, L as
|
|
7
|
+
import Ce from "@mui/material/Button";
|
|
8
|
+
import { addSeconds as Ee } from "date-fns/addSeconds";
|
|
9
|
+
import { differenceInCalendarMonths as fe } from "date-fns/differenceInCalendarMonths";
|
|
10
|
+
import { a as Ke, g as $e, S as je, L as Le, u as Ye } from "../TrendsStore-WrHxzdbQ.mjs";
|
|
11
11
|
import { T as eo } from "../TrendsStore-WrHxzdbQ.mjs";
|
|
12
|
-
import { i as Ue, c as Xe, d as Ze, e as Qe, f as qe, h as Je, b as
|
|
12
|
+
import { i as Ue, c as Xe, d as Ze, e as Qe, f as qe, h as Je, b as xe, g as ve, j as be } from "../SpendingData-D5vsfYKo.mjs";
|
|
13
13
|
import et from "@mui/material/ToggleButton";
|
|
14
14
|
import tt from "@mui/material/ToggleButtonGroup";
|
|
15
|
-
import { u as
|
|
15
|
+
import { u as k, k as F, e as H, a as P, f as re, c as ae, v as q, l as Me, p as nt, m as ot } from "../hooks-DkUqN6JE.mjs";
|
|
16
16
|
import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
|
|
17
17
|
import { f as Z, D as B } from "../Dialog-CWW597AF.mjs";
|
|
18
18
|
import { DataGridPro as st } from "@mui/x-data-grid-pro";
|
|
19
19
|
import { C as rt } from "../CurrencyText-YUhH2caW.mjs";
|
|
20
|
-
import { c as
|
|
20
|
+
import { c as Ae } from "../Category-CevNQ03n.mjs";
|
|
21
21
|
import { b as at } from "../Localization-2MODESHW.mjs";
|
|
22
|
-
import { H as
|
|
23
|
-
import { T as
|
|
24
|
-
import { A as y, W as
|
|
25
|
-
import { a as
|
|
26
|
-
import { D as
|
|
22
|
+
import { H as Se } from "../HeaderCell-DjuifqHJ.mjs";
|
|
23
|
+
import { T as R, b as it } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
|
|
24
|
+
import { A as y, W as Re } from "../WidgetContainer-CdBs9WOZ.mjs";
|
|
25
|
+
import { a as ke, T as He } from "../TransactionDetails-C-z3HGTT.mjs";
|
|
26
|
+
import { D as Te } from "../Drawer-kEE73B87.mjs";
|
|
27
27
|
import { L as Q } from "../Loader-DUaFpDGv.mjs";
|
|
28
|
-
import { useTheme as
|
|
29
|
-
import { L as
|
|
28
|
+
import { useTheme as Ne } from "@mui/material/styles";
|
|
29
|
+
import { L as _e } from "../LineChart-BWWmmJxV.mjs";
|
|
30
30
|
import { M as ct } from "../MiniWidgetContainer-CTyjmE1h.mjs";
|
|
31
31
|
import { subMonths as lt } from "date-fns";
|
|
32
32
|
import { TrendingUp as dt, TrendingDown as ht, MultilineChart as ut, ExpandLess as mt, ExpandMore as gt } from "@mxenabled/mx-icons";
|
|
@@ -38,14 +38,14 @@ import yt from "@mui/material/ListItem";
|
|
|
38
38
|
import _t from "@mui/material/ListItemButton";
|
|
39
39
|
import bt from "@mui/material/ListItemIcon";
|
|
40
40
|
import St from "@mui/material/ListItemText";
|
|
41
|
-
import
|
|
41
|
+
import We from "@mui/material/styles/useTheme";
|
|
42
42
|
import wt from "@mui/material/Divider";
|
|
43
43
|
import { useTheme as Dt, Stack as It } from "@mui/material";
|
|
44
44
|
import Et from "@mui/material/Paper";
|
|
45
45
|
import { b as Lt } from "../CategoryUtil-BR3H5i6n.mjs";
|
|
46
46
|
import { E as xt } from "../ExportCsvAction-CbMfQ2Wa.mjs";
|
|
47
47
|
import { E as vt } from "../EmptyState-C0lr9E5T.mjs";
|
|
48
|
-
const
|
|
48
|
+
const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
49
49
|
tt,
|
|
50
50
|
{
|
|
51
51
|
exclusive: !0,
|
|
@@ -54,8 +54,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
54
54
|
value: n,
|
|
55
55
|
children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(et, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(se, { name: "table_chart_view" }) : /* @__PURE__ */ e(se, { name: "format_list_bulleted" }) }, t))
|
|
56
56
|
}
|
|
57
|
-
),
|
|
58
|
-
const { trends: t } =
|
|
57
|
+
), Ve = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
|
|
58
|
+
const { trends: t } = k(), { isMobile: s, isDesktop: a } = K(), { getCategoryName: h } = F(), l = i.useMemo(() => {
|
|
59
59
|
const c = Z(
|
|
60
60
|
n.start,
|
|
61
61
|
s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
|
|
@@ -65,7 +65,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
65
65
|
);
|
|
66
66
|
return `${c} - ${d}`;
|
|
67
67
|
}, [n, s]);
|
|
68
|
-
return /* @__PURE__ */
|
|
68
|
+
return /* @__PURE__ */ C(O, { sx: { mr: 10, minWidth: "60%" }, children: [
|
|
69
69
|
/* @__PURE__ */ e(
|
|
70
70
|
X,
|
|
71
71
|
{
|
|
@@ -86,14 +86,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
86
86
|
const o = n.row[n.field];
|
|
87
87
|
return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(rt, { amount: o, variant: "Small" }) });
|
|
88
88
|
}, At = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
|
|
89
|
-
const { categories: t } =
|
|
90
|
-
return /* @__PURE__ */
|
|
89
|
+
const { categories: t } = k(), s = t.default_categories[n]?.replace(/&/g, "&") ?? Ae[n];
|
|
90
|
+
return /* @__PURE__ */ C(_, { alignItems: "center", direction: "row", justifyContent: "center", children: [
|
|
91
91
|
/* @__PURE__ */ e(
|
|
92
92
|
O,
|
|
93
93
|
{
|
|
94
94
|
"aria-label": at(t.category_icon_label_aria, s),
|
|
95
95
|
role: "img",
|
|
96
|
-
children: /* @__PURE__ */ e(
|
|
96
|
+
children: /* @__PURE__ */ e(ye, { categoryGuid: o })
|
|
97
97
|
}
|
|
98
98
|
),
|
|
99
99
|
/* @__PURE__ */ e(X, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
|
|
@@ -111,7 +111,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
111
111
|
t.push(a), s.setMonth(s.getMonth() + 1);
|
|
112
112
|
}
|
|
113
113
|
return t;
|
|
114
|
-
},
|
|
114
|
+
}, Ge = ({
|
|
115
115
|
monthlyCategoryTotals: n,
|
|
116
116
|
selectedDateRange: o,
|
|
117
117
|
selectedCategory: t,
|
|
@@ -121,24 +121,24 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
121
121
|
}) => {
|
|
122
122
|
const { onEvent: l } = H(), c = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [d, m] = i.useState([
|
|
123
123
|
{ field: c, sort: "desc" }
|
|
124
|
-
]),
|
|
124
|
+
]), f = i.useMemo(() => kt(o.start, o.end), [o]), u = [
|
|
125
125
|
{
|
|
126
126
|
field: "category",
|
|
127
127
|
flex: 1,
|
|
128
128
|
headerName: "Category",
|
|
129
129
|
minWidth: 175,
|
|
130
|
-
renderHeader:
|
|
130
|
+
renderHeader: Se,
|
|
131
131
|
renderCell: Rt,
|
|
132
132
|
sortable: !0,
|
|
133
133
|
type: "string"
|
|
134
134
|
},
|
|
135
|
-
...
|
|
135
|
+
...f.map(
|
|
136
136
|
(r) => ({
|
|
137
137
|
field: r,
|
|
138
138
|
flex: 1,
|
|
139
139
|
headerName: r,
|
|
140
140
|
minWidth: 100,
|
|
141
|
-
renderHeader:
|
|
141
|
+
renderHeader: Se,
|
|
142
142
|
renderCell: Mt,
|
|
143
143
|
align: "right",
|
|
144
144
|
headerAlign: "right",
|
|
@@ -155,14 +155,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
155
155
|
(p) => p.category_guid === t || p.top_level_category_guid === t
|
|
156
156
|
) : r).reduce(
|
|
157
157
|
(p, E) => {
|
|
158
|
-
const { category_guid: w, top_level_category_guid: I, month:
|
|
158
|
+
const { category_guid: w, top_level_category_guid: I, month: A, total: D, year: N } = E, x = t ? w : I;
|
|
159
159
|
p[x] || (p[x] = {
|
|
160
160
|
id: x,
|
|
161
161
|
category: x,
|
|
162
162
|
category_guid: w,
|
|
163
163
|
top_level_category_guid: I
|
|
164
164
|
});
|
|
165
|
-
const L = Z(new Date(N,
|
|
165
|
+
const L = Z(new Date(N, A - 1), B.MONTH_SHORT);
|
|
166
166
|
return p[x][L] || (p[x][L] = 0), p[x][L] = p[x][L] + Math.abs(D), p;
|
|
167
167
|
},
|
|
168
168
|
{}
|
|
@@ -179,12 +179,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
179
179
|
initialState: { sorting: { sortModel: d } },
|
|
180
180
|
onRowClick: (r) => {
|
|
181
181
|
s?.(r.row.category), l(y.TRENDS_CLICK_LIST_ITEM, {
|
|
182
|
-
...
|
|
183
|
-
listItem:
|
|
182
|
+
...R,
|
|
183
|
+
listItem: Ae[r.row.category]
|
|
184
184
|
});
|
|
185
185
|
},
|
|
186
186
|
onSortModelChange: (r) => {
|
|
187
|
-
m(r), l(y.TRENDS_CLICK_TABLE_SORT,
|
|
187
|
+
m(r), l(y.TRENDS_CLICK_TABLE_SORT, R);
|
|
188
188
|
},
|
|
189
189
|
rows: b,
|
|
190
190
|
slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
|
|
@@ -200,7 +200,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
200
200
|
isOpen: t,
|
|
201
201
|
onClose: s
|
|
202
202
|
}) => {
|
|
203
|
-
const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: l } =
|
|
203
|
+
const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: l } = k(), { setFilter: c, sortedTransactions: d } = re(), [m, f] = i.useState(""), u = i.useMemo(
|
|
204
204
|
() => d.find((r) => r.guid === m),
|
|
205
205
|
[m, d]
|
|
206
206
|
);
|
|
@@ -213,23 +213,23 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
213
213
|
});
|
|
214
214
|
}, [h, n, o]), i.useEffect(() => a(y.TRENDS_VIEW_TRANSACTIONS), []);
|
|
215
215
|
const b = () => {
|
|
216
|
-
|
|
216
|
+
f(""), s();
|
|
217
217
|
};
|
|
218
|
-
return /* @__PURE__ */
|
|
219
|
-
|
|
218
|
+
return /* @__PURE__ */ C(
|
|
219
|
+
Te,
|
|
220
220
|
{
|
|
221
221
|
ariaLabelClose: l.close_aria,
|
|
222
222
|
isOpen: t,
|
|
223
223
|
onClose: b,
|
|
224
224
|
title: Ht.title,
|
|
225
225
|
children: [
|
|
226
|
-
u && /* @__PURE__ */ e(
|
|
227
|
-
!u && /* @__PURE__ */ e(
|
|
226
|
+
u && /* @__PURE__ */ e(ke, { transaction: u }),
|
|
227
|
+
!u && /* @__PURE__ */ e(He, { onClick: f })
|
|
228
228
|
]
|
|
229
229
|
}
|
|
230
230
|
);
|
|
231
231
|
}, Wt = M(Nt), Ot = ({ onBackClick: n, sx: o }) => {
|
|
232
|
-
const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: l } = ae(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: d, getCategoryName: m } = F(), { sortedTransactions:
|
|
232
|
+
const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: l } = ae(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: d, getCategoryName: m } = F(), { sortedTransactions: f } = re(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = k(), [w, I] = i.useState(!1), [A, D] = i.useState(!1), [N, x] = i.useState("Chart"), [L, $] = i.useState(""), [z, ie] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
|
|
233
233
|
i.useEffect(() => {
|
|
234
234
|
const S = () => ie(window.innerHeight);
|
|
235
235
|
return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
|
|
@@ -260,7 +260,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
260
260
|
}, [d, L, u]), ne = (S, W) => {
|
|
261
261
|
x(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
|
|
262
262
|
}, oe = (S) => {
|
|
263
|
-
const W =
|
|
263
|
+
const W = Ee(S?.[0], 1), G = S?.[1], ge = fe(G, W);
|
|
264
264
|
b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
|
|
265
265
|
time_period: ge + "M"
|
|
266
266
|
});
|
|
@@ -277,8 +277,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
277
277
|
}, me = (S) => {
|
|
278
278
|
t(y.TRENDS_HOVER_POINT, { category: S });
|
|
279
279
|
};
|
|
280
|
-
return !r || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */
|
|
281
|
-
|
|
280
|
+
return !r || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ C(
|
|
281
|
+
Re,
|
|
282
282
|
{
|
|
283
283
|
accountOptions: l,
|
|
284
284
|
calendarActions: { onRangeChanged: oe },
|
|
@@ -289,7 +289,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
289
289
|
sx: o,
|
|
290
290
|
title: E.title,
|
|
291
291
|
children: [
|
|
292
|
-
/* @__PURE__ */
|
|
292
|
+
/* @__PURE__ */ C(
|
|
293
293
|
_,
|
|
294
294
|
{
|
|
295
295
|
sx: {
|
|
@@ -297,7 +297,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
297
297
|
px: s ? 48 : a ? 24 : 12
|
|
298
298
|
},
|
|
299
299
|
children: [
|
|
300
|
-
/* @__PURE__ */
|
|
300
|
+
/* @__PURE__ */ C(
|
|
301
301
|
_,
|
|
302
302
|
{
|
|
303
303
|
flexDirection: "row",
|
|
@@ -305,24 +305,24 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
305
305
|
sx: { pb: h ? 12 : 24, pt: h ? 24 : 48 },
|
|
306
306
|
children: [
|
|
307
307
|
/* @__PURE__ */ e(
|
|
308
|
-
|
|
308
|
+
Ve,
|
|
309
309
|
{
|
|
310
310
|
selectedCategoryGuid: L,
|
|
311
311
|
selectedDateRange: u
|
|
312
312
|
}
|
|
313
313
|
),
|
|
314
|
-
/* @__PURE__ */ e(
|
|
314
|
+
/* @__PURE__ */ e(Oe, { onTabChange: ne, selectedTab: N })
|
|
315
315
|
]
|
|
316
316
|
}
|
|
317
317
|
),
|
|
318
|
-
/* @__PURE__ */
|
|
319
|
-
/* @__PURE__ */ e(O, { flexGrow: 1, children: L && /* @__PURE__ */
|
|
318
|
+
/* @__PURE__ */ C(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
|
|
319
|
+
/* @__PURE__ */ e(O, { flexGrow: 1, children: L && /* @__PURE__ */ C(Ce, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
|
|
320
320
|
/* @__PURE__ */ e(se, { name: "arrow_back" }),
|
|
321
321
|
E.all_categories
|
|
322
322
|
] }) }),
|
|
323
|
-
/* @__PURE__ */ e(
|
|
323
|
+
/* @__PURE__ */ e(Ce, { onClick: () => D(!0), sx: { px: 5 }, children: `${E.view_transactions} (${f.length})` })
|
|
324
324
|
] }),
|
|
325
|
-
/* @__PURE__ */
|
|
325
|
+
/* @__PURE__ */ C(O, { children: [
|
|
326
326
|
N === "Chart" && /* @__PURE__ */ e(
|
|
327
327
|
je,
|
|
328
328
|
{
|
|
@@ -336,7 +336,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
336
336
|
}
|
|
337
337
|
),
|
|
338
338
|
N === "Table" && /* @__PURE__ */ e(
|
|
339
|
-
|
|
339
|
+
Ge,
|
|
340
340
|
{
|
|
341
341
|
monthlyCategoryTotals: d,
|
|
342
342
|
onClickRow: le,
|
|
@@ -353,7 +353,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
353
353
|
{
|
|
354
354
|
categoryGuid: L,
|
|
355
355
|
dateRange: u,
|
|
356
|
-
isOpen:
|
|
356
|
+
isOpen: A,
|
|
357
357
|
onClose: () => D(!1)
|
|
358
358
|
}
|
|
359
359
|
)
|
|
@@ -361,9 +361,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
361
361
|
}
|
|
362
362
|
);
|
|
363
363
|
}, Un = M(Ot), Vt = () => {
|
|
364
|
-
const n =
|
|
364
|
+
const n = Ne(), { monthlyCategoryTotals: o } = F(), { trends: t } = k(), s = Je(o);
|
|
365
365
|
return /* @__PURE__ */ e(
|
|
366
|
-
|
|
366
|
+
_e,
|
|
367
367
|
{
|
|
368
368
|
baseline: "min",
|
|
369
369
|
colors: [n.palette.primary.main],
|
|
@@ -379,7 +379,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
379
379
|
}
|
|
380
380
|
);
|
|
381
381
|
}, Gt = M(Vt), Bt = ({ onPrimaryCtaClick: n, sx: o }) => {
|
|
382
|
-
const { visibleAccounts: t } = ae(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } =
|
|
382
|
+
const { visibleAccounts: t } = ae(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = Me(), { trends: l } = k(), { isCopyLoaded: c, selectedAccounts: d, setSelectedAccounts: m } = P();
|
|
383
383
|
return i.useEffect(() => {
|
|
384
384
|
m(t);
|
|
385
385
|
}, [t]), i.useEffect(() => {
|
|
@@ -395,7 +395,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
395
395
|
children: a ? /* @__PURE__ */ e(Gt, {}) : /* @__PURE__ */ e(Q, {})
|
|
396
396
|
}
|
|
397
397
|
);
|
|
398
|
-
}, Xn = M(Bt), zt = 70,
|
|
398
|
+
}, Xn = M(Bt), zt = 70, we = ({
|
|
399
399
|
title: n,
|
|
400
400
|
totalAmount: o,
|
|
401
401
|
transactionType: t,
|
|
@@ -406,8 +406,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
406
406
|
const { availableWidth: l } = nt(), c = i.useRef(null), d = i.useRef(null), m = pt(Number(Math.abs(s)), {
|
|
407
407
|
style: "percent",
|
|
408
408
|
minimumIntegerDigits: 1
|
|
409
|
-
}),
|
|
410
|
-
return /* @__PURE__ */
|
|
409
|
+
}), f = l === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", r = t === "spending" ? "success.main" : "text.secondary", g = c?.current, T = d?.current, p = g && T ? g.scrollWidth > T.clientWidth - zt : !1;
|
|
410
|
+
return /* @__PURE__ */ C(
|
|
411
411
|
_,
|
|
412
412
|
{
|
|
413
413
|
sx: {
|
|
@@ -420,7 +420,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
420
420
|
py: 8
|
|
421
421
|
},
|
|
422
422
|
children: [
|
|
423
|
-
/* @__PURE__ */
|
|
423
|
+
/* @__PURE__ */ C(
|
|
424
424
|
_,
|
|
425
425
|
{
|
|
426
426
|
sx: {
|
|
@@ -430,7 +430,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
430
430
|
},
|
|
431
431
|
children: [
|
|
432
432
|
/* @__PURE__ */ e(Y, { color: "text.secondary", variant: "caption", children: n }),
|
|
433
|
-
h && /* @__PURE__ */
|
|
433
|
+
h && /* @__PURE__ */ C(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
|
|
434
434
|
u ? /* @__PURE__ */ e(dt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(ht, { size: 20, sx: { color: r } }),
|
|
435
435
|
/* @__PURE__ */ e(
|
|
436
436
|
Y,
|
|
@@ -447,7 +447,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
447
447
|
]
|
|
448
448
|
}
|
|
449
449
|
),
|
|
450
|
-
/* @__PURE__ */
|
|
450
|
+
/* @__PURE__ */ C(
|
|
451
451
|
_,
|
|
452
452
|
{
|
|
453
453
|
ref: d,
|
|
@@ -462,7 +462,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
462
462
|
{
|
|
463
463
|
ref: c,
|
|
464
464
|
sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
|
|
465
|
-
children: /* @__PURE__ */ e(
|
|
465
|
+
children: /* @__PURE__ */ e(Ie, { children: f })
|
|
466
466
|
}
|
|
467
467
|
),
|
|
468
468
|
h && l >= 450 && !p && /* @__PURE__ */ e(
|
|
@@ -480,10 +480,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
480
480
|
}
|
|
481
481
|
);
|
|
482
482
|
}, Ft = M(() => {
|
|
483
|
-
const { trends: n } =
|
|
484
|
-
return /* @__PURE__ */
|
|
483
|
+
const { trends: n } = k();
|
|
484
|
+
return /* @__PURE__ */ C(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
|
|
485
485
|
/* @__PURE__ */ e(ut, { size: 32 }),
|
|
486
|
-
/* @__PURE__ */
|
|
486
|
+
/* @__PURE__ */ C(_, { children: [
|
|
487
487
|
/* @__PURE__ */ e(Y, { fontWeight: 600, variant: "body1", children: n.zero_state_content_header }),
|
|
488
488
|
/* @__PURE__ */ e(Y, { color: "text.secondary", variant: "subtitle2", children: n.zero_state_content_description })
|
|
489
489
|
] })
|
|
@@ -492,36 +492,36 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
492
492
|
const { visibleAccounts: o } = ae(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), l = {
|
|
493
493
|
start: lt(/* @__PURE__ */ new Date(), 1),
|
|
494
494
|
end: /* @__PURE__ */ new Date()
|
|
495
|
-
}, { trends: c } =
|
|
495
|
+
}, { trends: c } = k(), { selectedAccounts: d, setSelectedAccounts: m, isInitialized: f } = P();
|
|
496
496
|
i.useEffect(() => {
|
|
497
497
|
m(o);
|
|
498
498
|
}, [o]), i.useEffect(() => {
|
|
499
|
-
|
|
499
|
+
f && a(d, l.start).then(() => {
|
|
500
500
|
t(y.TRENDS_LOAD_WIDGET, {
|
|
501
501
|
state: o?.length ? "default" : "zeroState"
|
|
502
502
|
});
|
|
503
503
|
});
|
|
504
|
-
}, [
|
|
504
|
+
}, [f, d]);
|
|
505
505
|
const { spendingData: u, incomeData: b } = i.useMemo(
|
|
506
506
|
() => ({
|
|
507
|
-
spendingData:
|
|
508
|
-
incomeData:
|
|
507
|
+
spendingData: xe(s, l),
|
|
508
|
+
incomeData: ve(s, l)
|
|
509
509
|
}),
|
|
510
510
|
[s, l]
|
|
511
|
-
), [r, g] = u, [T, p] = b, E =
|
|
511
|
+
), [r, g] = u, [T, p] = b, E = be(g.y, r.y), w = be(p.y, T.y), I = f && !o?.length, A = () => {
|
|
512
512
|
t(
|
|
513
513
|
I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
|
|
514
514
|
), n();
|
|
515
515
|
};
|
|
516
|
-
return !h || !
|
|
516
|
+
return !h || !f ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
|
|
517
517
|
Ct,
|
|
518
518
|
{
|
|
519
519
|
className: "mx-trends-microwidget",
|
|
520
520
|
ctaLabel: c.micro_primary_cta_label,
|
|
521
|
-
onCTAClick:
|
|
521
|
+
onCTAClick: A,
|
|
522
522
|
subHeader: I ? void 0 : c.micro_subheader,
|
|
523
523
|
title: c.title,
|
|
524
|
-
children: I ? /* @__PURE__ */ e(Ft, {}) : /* @__PURE__ */
|
|
524
|
+
children: I ? /* @__PURE__ */ e(Ft, {}) : /* @__PURE__ */ C(
|
|
525
525
|
_,
|
|
526
526
|
{
|
|
527
527
|
sx: {
|
|
@@ -531,7 +531,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
531
531
|
},
|
|
532
532
|
children: [
|
|
533
533
|
/* @__PURE__ */ e(
|
|
534
|
-
|
|
534
|
+
we,
|
|
535
535
|
{
|
|
536
536
|
percentage: E,
|
|
537
537
|
secondaryLabel: c.micro_secondary_label,
|
|
@@ -542,7 +542,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
542
542
|
}
|
|
543
543
|
),
|
|
544
544
|
/* @__PURE__ */ e(
|
|
545
|
-
|
|
545
|
+
we,
|
|
546
546
|
{
|
|
547
547
|
percentage: w,
|
|
548
548
|
secondaryLabel: c.micro_secondary_label,
|
|
@@ -559,8 +559,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
559
559
|
);
|
|
560
560
|
}), Pt = M(
|
|
561
561
|
({ isExpanded: n, onClick: o }) => {
|
|
562
|
-
const t =
|
|
563
|
-
return /* @__PURE__ */ e(yt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(_t, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */
|
|
562
|
+
const t = We();
|
|
563
|
+
return /* @__PURE__ */ e(yt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(_t, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
|
|
564
564
|
_,
|
|
565
565
|
{
|
|
566
566
|
sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
|
|
@@ -579,7 +579,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
579
579
|
}
|
|
580
580
|
) }) });
|
|
581
581
|
}
|
|
582
|
-
),
|
|
582
|
+
), De = M(
|
|
583
583
|
({
|
|
584
584
|
totalAmount: n,
|
|
585
585
|
guid: o,
|
|
@@ -589,18 +589,18 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
589
589
|
isLastItem: h = !1,
|
|
590
590
|
showDivider: l = !0
|
|
591
591
|
}) => {
|
|
592
|
-
const { trends: c } =
|
|
592
|
+
const { trends: c } = k(), { onEvent: d } = H(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, f = () => {
|
|
593
593
|
a?.(), d(y.TRENDS_CLICK_LIST_ITEM, {
|
|
594
|
-
...
|
|
594
|
+
...R,
|
|
595
595
|
listItem: t
|
|
596
596
|
});
|
|
597
597
|
};
|
|
598
|
-
return /* @__PURE__ */
|
|
598
|
+
return /* @__PURE__ */ C(i.Fragment, { children: [
|
|
599
599
|
/* @__PURE__ */ e(
|
|
600
|
-
|
|
600
|
+
Le,
|
|
601
601
|
{
|
|
602
|
-
leftIcon: o ? /* @__PURE__ */ e(
|
|
603
|
-
onClick:
|
|
602
|
+
leftIcon: o ? /* @__PURE__ */ e(ye, { categoryGuid: o }) : void 0,
|
|
603
|
+
onClick: f,
|
|
604
604
|
rightContent: U(Math.abs(n), "0,0.00"),
|
|
605
605
|
rightIcon: a ? /* @__PURE__ */ e(Pe, {}) : void 0,
|
|
606
606
|
subtitle: m,
|
|
@@ -612,20 +612,20 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
612
612
|
}
|
|
613
613
|
), Kt = M(
|
|
614
614
|
({ availableHeight: n = 0, onCategoryClick: o }) => {
|
|
615
|
-
const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: l } = K(), { trends: c } =
|
|
615
|
+
const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: l } = K(), { trends: c } = k(), { onEvent: d } = H(), [m, f] = i.useState(!1), u = l || h;
|
|
616
616
|
i.useEffect(() => {
|
|
617
617
|
const g = Math.floor(n / 64) - 1, T = s.length + t.length;
|
|
618
|
-
g !== s.length && (a(u ? Math.max(g, 5) : 5),
|
|
618
|
+
g !== s.length && (a(u ? Math.max(g, 5) : 5), f(g >= T));
|
|
619
619
|
}, [n]);
|
|
620
620
|
const b = () => {
|
|
621
|
-
|
|
622
|
-
...
|
|
621
|
+
f(!m), d(y.TRENDS_CLICK_VIEW_MORE, {
|
|
622
|
+
...R
|
|
623
623
|
});
|
|
624
624
|
}, r = s.length + (m ? t.length : 0);
|
|
625
|
-
return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */
|
|
626
|
-
/* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(
|
|
625
|
+
return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Tt, { children: [
|
|
626
|
+
/* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ie, { children: c.categories }) }),
|
|
627
627
|
s.map((g, T) => /* @__PURE__ */ e(
|
|
628
|
-
|
|
628
|
+
De,
|
|
629
629
|
{
|
|
630
630
|
...g,
|
|
631
631
|
isLastItem: T === r - 1,
|
|
@@ -642,7 +642,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
642
642
|
children: t.map((g, T) => {
|
|
643
643
|
const p = s.length + T;
|
|
644
644
|
return /* @__PURE__ */ e(
|
|
645
|
-
|
|
645
|
+
De,
|
|
646
646
|
{
|
|
647
647
|
...g,
|
|
648
648
|
isLastItem: p === r - 1,
|
|
@@ -692,14 +692,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
692
692
|
"WeeklyNoSpendDays",
|
|
693
693
|
"WeeklySmallPurchasesSummary"
|
|
694
694
|
], jt = ({ onInsightCardClick: n }) => {
|
|
695
|
-
const o = Dt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: l, endpoint: c, sessionToken: d } =
|
|
695
|
+
const o = Dt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: l, endpoint: c, sessionToken: d } = Me(), { isInitialized: m } = P(), [f, u] = i.useState(!1), b = o.palette.mode === "dark", r = a || h, g = r || s ? 1 : 2;
|
|
696
696
|
i.useEffect(() => {
|
|
697
697
|
m && l.loadBeats().finally(() => u(!0));
|
|
698
698
|
}, [m]);
|
|
699
|
-
const T = i.useMemo(() =>
|
|
700
|
-
n?.(D), t(y.TRENDS_CLICK_INSIGHT,
|
|
701
|
-
}, w = r ? 200 : 170, I = r ? 170 : 124,
|
|
702
|
-
return /* @__PURE__ */ e(It, { sx: { height:
|
|
699
|
+
const T = i.useMemo(() => f ? l.getFilteredBeats({ templates: $t }) : [], [f]), p = () => null, E = (D) => {
|
|
700
|
+
n?.(D), t(y.TRENDS_CLICK_INSIGHT, R);
|
|
701
|
+
}, w = r ? 200 : 170, I = r ? 170 : 124, A = T.length > 0 ? w : I;
|
|
702
|
+
return /* @__PURE__ */ e(It, { sx: { height: A }, children: /* @__PURE__ */ e(
|
|
703
703
|
it,
|
|
704
704
|
{
|
|
705
705
|
areBeatsLoading: l.isLoading,
|
|
@@ -725,7 +725,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
725
725
|
categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: a }
|
|
726
726
|
} = q();
|
|
727
727
|
return /* @__PURE__ */ e(_, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
|
|
728
|
-
|
|
728
|
+
_e,
|
|
729
729
|
{
|
|
730
730
|
baseline: "min",
|
|
731
731
|
colors: [o],
|
|
@@ -738,7 +738,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
738
738
|
stroke: o
|
|
739
739
|
}),
|
|
740
740
|
onItemClick: () => {
|
|
741
|
-
t(y.TRENDS_CLICK_CHART,
|
|
741
|
+
t(y.TRENDS_CLICK_CHART, R);
|
|
742
742
|
},
|
|
743
743
|
showArea: !0,
|
|
744
744
|
showAverage: !0,
|
|
@@ -754,43 +754,43 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
754
754
|
}
|
|
755
755
|
) });
|
|
756
756
|
}), Xt = M(({ onClose: n }) => {
|
|
757
|
-
const o =
|
|
757
|
+
const o = We(), { onEvent: t } = H(), { common: s, trends: a } = k(), { selectedCategoryData: h, selectedDateRangeMonthRange: l } = q(), { sortedTransactions: c } = re(), [d, m] = i.useState(null);
|
|
758
758
|
if (!h)
|
|
759
759
|
return null;
|
|
760
|
-
const { guid:
|
|
760
|
+
const { guid: f, name: u, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Lt(f, o), p = b ? a.income_label : a.spending_label, E = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
|
|
761
761
|
() => c.find((D) => D.guid === d),
|
|
762
762
|
[d, c]
|
|
763
|
-
), I = (D) => D.category_guid ===
|
|
764
|
-
n?.(), t(y.TRENDS_CLICK_BACK,
|
|
763
|
+
), I = (D) => D.category_guid === f || D.top_level_category_guid === f, A = () => {
|
|
764
|
+
n?.(), t(y.TRENDS_CLICK_BACK, R);
|
|
765
765
|
};
|
|
766
|
-
return /* @__PURE__ */
|
|
767
|
-
|
|
766
|
+
return /* @__PURE__ */ C(
|
|
767
|
+
Te,
|
|
768
768
|
{
|
|
769
769
|
ariaLabelClose: a.close_category_details,
|
|
770
770
|
isOpen: !0,
|
|
771
|
-
onClose:
|
|
771
|
+
onClose: A,
|
|
772
772
|
shouldShowHeaderShadow: !0,
|
|
773
773
|
title: g,
|
|
774
774
|
children: [
|
|
775
|
-
/* @__PURE__ */
|
|
776
|
-
/* @__PURE__ */
|
|
775
|
+
/* @__PURE__ */ C(_, { sx: { alignItems: "center", height: "100%" }, children: [
|
|
776
|
+
/* @__PURE__ */ C(Et, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
|
|
777
777
|
/* @__PURE__ */ e(
|
|
778
|
-
|
|
778
|
+
Le,
|
|
779
779
|
{
|
|
780
|
-
leftIcon: /* @__PURE__ */ e(
|
|
780
|
+
leftIcon: /* @__PURE__ */ e(ye, { categoryGuid: f }),
|
|
781
781
|
rightContent: U(Math.abs(r), "0,0.00"),
|
|
782
782
|
subtitle: l,
|
|
783
783
|
title: u
|
|
784
784
|
}
|
|
785
785
|
),
|
|
786
786
|
/* @__PURE__ */ e(Ut, { chartColor: T, chartLabel: p }),
|
|
787
|
-
/* @__PURE__ */
|
|
787
|
+
/* @__PURE__ */ C(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
|
|
788
788
|
/* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: E }),
|
|
789
789
|
/* @__PURE__ */ e(xt, { filter: I })
|
|
790
790
|
] })
|
|
791
791
|
] }),
|
|
792
792
|
/* @__PURE__ */ e(
|
|
793
|
-
|
|
793
|
+
He,
|
|
794
794
|
{
|
|
795
795
|
bgcolor: "transparent",
|
|
796
796
|
filter: I,
|
|
@@ -800,20 +800,20 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
800
800
|
)
|
|
801
801
|
] }),
|
|
802
802
|
/* @__PURE__ */ e(
|
|
803
|
-
|
|
803
|
+
Te,
|
|
804
804
|
{
|
|
805
805
|
ariaLabelClose: s.close_aria,
|
|
806
806
|
isOpen: !!w,
|
|
807
807
|
onClose: () => m(""),
|
|
808
808
|
title: a.transaction,
|
|
809
|
-
children: w && /* @__PURE__ */ e(
|
|
809
|
+
children: w && /* @__PURE__ */ e(ke, { transaction: w })
|
|
810
810
|
}
|
|
811
811
|
)
|
|
812
812
|
]
|
|
813
813
|
}
|
|
814
814
|
);
|
|
815
815
|
}), Zt = (n, o) => {
|
|
816
|
-
const t =
|
|
816
|
+
const t = ve(n, o), s = xe(n, o);
|
|
817
817
|
return [t, s].filter((a) => a.length > 0);
|
|
818
818
|
}, Qt = (n, o) => {
|
|
819
819
|
const [t, s] = n, a = t, h = s ?? t, l = [];
|
|
@@ -832,57 +832,62 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
832
832
|
selectedDateRange: t,
|
|
833
833
|
totals: s
|
|
834
834
|
}) => {
|
|
835
|
-
const a =
|
|
836
|
-
|
|
835
|
+
const a = Ne(), { onEvent: h } = H(), { trends: l } = k(), { isSmallMobile: c, isMobile: d, isSmallTablet: m, isTablet: f } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = Zt(s, t), r = Qt(b, l), [g, T] = i.useState(0), p = 458, E = 195, w = 56, I = d || c ? E : m || f ? p : g;
|
|
836
|
+
i.useEffect(() => {
|
|
837
837
|
const D = Math.max(n - w, o);
|
|
838
838
|
T(D);
|
|
839
|
-
}, [n])
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
839
|
+
}, [n]);
|
|
840
|
+
const A = () => {
|
|
841
|
+
h(y.TRENDS_CLICK_CHART, R);
|
|
842
|
+
};
|
|
843
|
+
return console.log("test"), /* @__PURE__ */ C(pe, { children: [
|
|
844
|
+
/* @__PURE__ */ e(pe, { children: "test" }),
|
|
845
|
+
/* @__PURE__ */ e(
|
|
846
|
+
_e,
|
|
847
|
+
{
|
|
848
|
+
baseline: "min",
|
|
849
|
+
colors: u,
|
|
850
|
+
curveType: "bump",
|
|
851
|
+
datasets: b,
|
|
852
|
+
height: I,
|
|
853
|
+
labels: r,
|
|
854
|
+
onItemClick: A,
|
|
855
|
+
showArea: !0,
|
|
856
|
+
showAxisHighlight: !0,
|
|
857
|
+
showLegend: !0,
|
|
858
|
+
showTooltip: !0,
|
|
859
|
+
showXAxis: !0,
|
|
860
|
+
showXAxisTicks: !0,
|
|
861
|
+
showYAxis: !0,
|
|
862
|
+
showYAxisTicks: !0,
|
|
863
|
+
valueFormatterString: "0a"
|
|
864
|
+
}
|
|
865
|
+
)
|
|
866
|
+
] });
|
|
862
867
|
}, Jt = M(qt), en = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
|
|
863
|
-
const { onEvent: s } = H(), { config: a } = ot(), { isLargeDesktop: h, isDesktop: l, isMobile: c } = K(), { visibleAccounts: d } = ae(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals:
|
|
868
|
+
const { onEvent: s } = H(), { config: a } = ot(), { isLargeDesktop: h, isDesktop: l, isMobile: c } = K(), { visibleAccounts: d } = ae(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: u } = F(), { setFilter: b } = re(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
|
|
864
869
|
isCopyLoaded: p,
|
|
865
870
|
isInitialized: E,
|
|
866
871
|
selectedAccounts: w,
|
|
867
872
|
selectedAccountGuids: I,
|
|
868
|
-
setSelectedAccounts:
|
|
869
|
-
} = P(), { trends: D } =
|
|
873
|
+
setSelectedAccounts: A
|
|
874
|
+
} = P(), { trends: D } = k(), N = Ye(), x = l || h, [L, $] = i.useState(!1), [z, ie] = i.useState("Chart"), [J, ee] = i.useState(""), [te, ne] = i.useState(!1), [oe, ce] = i.useState(window.innerHeight), le = oe - 208, de = oe - (N ? 494 : 266);
|
|
870
875
|
i.useEffect(() => {
|
|
871
876
|
const v = () => ce(window.innerHeight);
|
|
872
877
|
return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
|
|
873
878
|
}, []), i.useEffect(() => {
|
|
874
|
-
|
|
879
|
+
A(d);
|
|
875
880
|
}, [d]), i.useEffect(() => {
|
|
876
881
|
E && m(w, r.start, r.end).then(() => {
|
|
877
|
-
|
|
882
|
+
f(
|
|
878
883
|
w,
|
|
879
884
|
r.start,
|
|
880
885
|
r.end
|
|
881
886
|
);
|
|
882
887
|
}).finally(() => {
|
|
883
888
|
$(!0), s(y.TRENDS_LOAD_WIDGET, {
|
|
884
|
-
...
|
|
885
|
-
time_period: `${
|
|
889
|
+
...R,
|
|
890
|
+
time_period: `${fe(r.end, r.start)}M`
|
|
886
891
|
});
|
|
887
892
|
});
|
|
888
893
|
}, [E, w, r]), i.useEffect(() => {
|
|
@@ -905,29 +910,29 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
905
910
|
g(null), ne(!1);
|
|
906
911
|
}, me = (v, V) => {
|
|
907
912
|
ie(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
|
|
908
|
-
...
|
|
913
|
+
...R,
|
|
909
914
|
toggleView: V
|
|
910
915
|
});
|
|
911
916
|
}, S = (v) => {
|
|
912
|
-
const V =
|
|
917
|
+
const V = Ee(v?.[0], 1), j = v?.[1], Fe = fe(j, V);
|
|
913
918
|
T({ start: V, end: j }), s(y.TRENDS_CLICK_TIME_WINDOW, {
|
|
914
|
-
...
|
|
915
|
-
time_period:
|
|
919
|
+
...R,
|
|
920
|
+
time_period: Fe + "M"
|
|
916
921
|
});
|
|
917
922
|
}, W = (v) => {
|
|
918
923
|
s(y.TRENDS_CLICK_FILTER, {
|
|
919
|
-
...
|
|
924
|
+
...R,
|
|
920
925
|
filterValue: v
|
|
921
926
|
});
|
|
922
927
|
}, G = (v) => {
|
|
923
928
|
ee(v);
|
|
924
929
|
}, ge = () => {
|
|
925
|
-
ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES,
|
|
930
|
+
ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, R);
|
|
926
931
|
};
|
|
927
932
|
if (!p || !L) return /* @__PURE__ */ e(Q, {});
|
|
928
|
-
const
|
|
929
|
-
return /* @__PURE__ */
|
|
930
|
-
|
|
933
|
+
const Be = a.show_connections_widget_in_master ? "buttons" : "no-buttons", ze = L && d.length === 0;
|
|
934
|
+
return /* @__PURE__ */ C(
|
|
935
|
+
Re,
|
|
931
936
|
{
|
|
932
937
|
accountOptions: d,
|
|
933
938
|
calendarActions: { onRangeChanged: S },
|
|
@@ -938,14 +943,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
938
943
|
sx: t,
|
|
939
944
|
title: D.title,
|
|
940
945
|
children: [
|
|
941
|
-
/* @__PURE__ */
|
|
946
|
+
/* @__PURE__ */ C(
|
|
942
947
|
_,
|
|
943
948
|
{
|
|
944
949
|
sx: {
|
|
945
950
|
px: c ? 0 : 48
|
|
946
951
|
},
|
|
947
952
|
children: [
|
|
948
|
-
/* @__PURE__ */
|
|
953
|
+
/* @__PURE__ */ C(
|
|
949
954
|
_,
|
|
950
955
|
{
|
|
951
956
|
flexDirection: "row",
|
|
@@ -953,17 +958,17 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
953
958
|
sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
|
|
954
959
|
children: [
|
|
955
960
|
/* @__PURE__ */ e(
|
|
956
|
-
|
|
961
|
+
Ve,
|
|
957
962
|
{
|
|
958
963
|
selectedCategoryGuid: J,
|
|
959
964
|
selectedDateRange: r
|
|
960
965
|
}
|
|
961
966
|
),
|
|
962
|
-
/* @__PURE__ */ e(
|
|
967
|
+
/* @__PURE__ */ e(Oe, { onTabChange: me, selectedTab: z })
|
|
963
968
|
]
|
|
964
969
|
}
|
|
965
970
|
),
|
|
966
|
-
|
|
971
|
+
ze && /* @__PURE__ */ e(
|
|
967
972
|
vt,
|
|
968
973
|
{
|
|
969
974
|
header: "",
|
|
@@ -972,15 +977,15 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
972
977
|
},
|
|
973
978
|
primaryButton: D.empty_state_primary,
|
|
974
979
|
subText: D.empty_state_sub_text,
|
|
975
|
-
variant:
|
|
980
|
+
variant: Be
|
|
976
981
|
}
|
|
977
982
|
),
|
|
978
|
-
/* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */
|
|
983
|
+
/* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ C(Ce, { onClick: ge, sx: { p: 0, pr: 5 }, children: [
|
|
979
984
|
/* @__PURE__ */ e(se, { name: "arrow_back" }),
|
|
980
985
|
D.all_categories
|
|
981
986
|
] }) }) }),
|
|
982
|
-
/* @__PURE__ */
|
|
983
|
-
z === "Chart" && /* @__PURE__ */
|
|
987
|
+
/* @__PURE__ */ C(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
|
|
988
|
+
z === "Chart" && /* @__PURE__ */ C(pe, { children: [
|
|
984
989
|
/* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
|
|
985
990
|
Jt,
|
|
986
991
|
{
|
|
@@ -990,7 +995,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
990
995
|
totals: u
|
|
991
996
|
}
|
|
992
997
|
) }),
|
|
993
|
-
/* @__PURE__ */
|
|
998
|
+
/* @__PURE__ */ C(_, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
|
|
994
999
|
N && /* @__PURE__ */ e(Yt, { onInsightCardClick: o }),
|
|
995
1000
|
/* @__PURE__ */ e(
|
|
996
1001
|
Kt,
|
|
@@ -1002,7 +1007,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
1002
1007
|
] })
|
|
1003
1008
|
] }),
|
|
1004
1009
|
z === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
|
|
1005
|
-
|
|
1010
|
+
Ge,
|
|
1006
1011
|
{
|
|
1007
1012
|
height: "unset",
|
|
1008
1013
|
monthlyCategoryTotals: u,
|