@mx-cartographer/experiences 7.0.22-alpha.san4 → 7.0.22
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/CHANGELOG.md +0 -4
- package/dist/trends/index.es.js +235 -240
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
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 f, Fragment as Fe } 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 Te, P as Y, H3 as De, ChevronRightIcon as Pe } from "@mxenabled/mxui";
|
|
5
5
|
import O from "@mui/material/Box";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { addSeconds as
|
|
9
|
-
import { differenceInCalendarMonths as
|
|
10
|
-
import { a as Ke, g as $e, S as je, L as
|
|
6
|
+
import _ from "@mui/material/Stack";
|
|
7
|
+
import pe from "@mui/material/Button";
|
|
8
|
+
import { addSeconds as Ie } from "date-fns/addSeconds";
|
|
9
|
+
import { differenceInCalendarMonths as Ce } from "date-fns/differenceInCalendarMonths";
|
|
10
|
+
import { a as Ke, g as $e, S as je, L as Ee, 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
|
|
12
|
+
import { i as Ue, c as Xe, d as Ze, e as Qe, f as qe, h as Je, b as Le, g as xe, j as _e } 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 R, k as F, e as H, a as P, f as re, c as ae, v as q, l as ve, 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 Me } 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
|
|
25
|
-
import { a as
|
|
26
|
-
import { D as
|
|
27
|
-
import { L as
|
|
22
|
+
import { H as be } from "../HeaderCell-DjuifqHJ.mjs";
|
|
23
|
+
import { T as A, b as it } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
|
|
24
|
+
import { A as y, W as Ae } from "../WidgetContainer-CdBs9WOZ.mjs";
|
|
25
|
+
import { a as Re, T as ke } from "../TransactionDetails-C-z3HGTT.mjs";
|
|
26
|
+
import { D as fe } from "../Drawer-kEE73B87.mjs";
|
|
27
|
+
import { L as Q } from "../Loader-DUaFpDGv.mjs";
|
|
28
28
|
import { useTheme as He } from "@mui/material/styles";
|
|
29
|
-
import { L as
|
|
29
|
+
import { L as ye } 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 Ne 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 We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
49
49
|
tt,
|
|
50
50
|
{
|
|
51
51
|
exclusive: !0,
|
|
@@ -54,8 +54,8 @@ const Oe = ({ 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
|
+
), Oe = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
|
|
58
|
+
const { trends: t } = R(), { 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 Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
65
65
|
);
|
|
66
66
|
return `${c} - ${d}`;
|
|
67
67
|
}, [n, s]);
|
|
68
|
-
return /* @__PURE__ */
|
|
68
|
+
return /* @__PURE__ */ f(O, { sx: { mr: 10, minWidth: "60%" }, children: [
|
|
69
69
|
/* @__PURE__ */ e(
|
|
70
70
|
X,
|
|
71
71
|
{
|
|
@@ -84,21 +84,21 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
84
84
|
] });
|
|
85
85
|
}, Mt = (n) => {
|
|
86
86
|
const o = n.row[n.field];
|
|
87
|
-
return /* @__PURE__ */ e(
|
|
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 } = R(), s = t.default_categories[n]?.replace(/&/g, "&") ?? Me[n];
|
|
90
|
+
return /* @__PURE__ */ f(_, { 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(Te, { categoryGuid: o })
|
|
97
97
|
}
|
|
98
98
|
),
|
|
99
99
|
/* @__PURE__ */ e(X, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
|
|
100
100
|
] });
|
|
101
|
-
}, Rt = (n) => /* @__PURE__ */ e(
|
|
101
|
+
}, Rt = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
|
|
102
102
|
At,
|
|
103
103
|
{
|
|
104
104
|
categoryGuid: n.row.category,
|
|
@@ -111,7 +111,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
111
111
|
t.push(a), s.setMonth(s.getMonth() + 1);
|
|
112
112
|
}
|
|
113
113
|
return t;
|
|
114
|
-
},
|
|
114
|
+
}, Ve = ({
|
|
115
115
|
monthlyCategoryTotals: n,
|
|
116
116
|
selectedDateRange: o,
|
|
117
117
|
selectedCategory: t,
|
|
@@ -119,26 +119,26 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
119
119
|
height: a = "100dvh",
|
|
120
120
|
sx: h = {}
|
|
121
121
|
}) => {
|
|
122
|
-
const { onEvent: l } =
|
|
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
|
+
]), C = 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: be,
|
|
131
131
|
renderCell: Rt,
|
|
132
132
|
sortable: !0,
|
|
133
133
|
type: "string"
|
|
134
134
|
},
|
|
135
|
-
...
|
|
135
|
+
...C.map(
|
|
136
136
|
(r) => ({
|
|
137
137
|
field: r,
|
|
138
138
|
flex: 1,
|
|
139
139
|
headerName: r,
|
|
140
140
|
minWidth: 100,
|
|
141
|
-
renderHeader:
|
|
141
|
+
renderHeader: be,
|
|
142
142
|
renderCell: Mt,
|
|
143
143
|
align: "right",
|
|
144
144
|
headerAlign: "right",
|
|
@@ -148,21 +148,21 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
148
148
|
sortComparator: Ke
|
|
149
149
|
})
|
|
150
150
|
)
|
|
151
|
-
],
|
|
151
|
+
], b = i.useMemo(() => {
|
|
152
152
|
const r = n.filter(
|
|
153
153
|
(p) => !Ue(p) && !Xe(p)
|
|
154
154
|
), T = (t ? r.filter(
|
|
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: k, 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(
|
|
165
|
+
const L = Z(new Date(N, k - 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
|
{}
|
|
@@ -178,29 +178,29 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
178
178
|
hideFooter: !0,
|
|
179
179
|
initialState: { sorting: { sortModel: d } },
|
|
180
180
|
onRowClick: (r) => {
|
|
181
|
-
s?.(r.row.category), l(
|
|
182
|
-
...
|
|
183
|
-
listItem:
|
|
181
|
+
s?.(r.row.category), l(y.TRENDS_CLICK_LIST_ITEM, {
|
|
182
|
+
...A,
|
|
183
|
+
listItem: Me[r.row.category]
|
|
184
184
|
});
|
|
185
185
|
},
|
|
186
186
|
onSortModelChange: (r) => {
|
|
187
|
-
m(r), l(
|
|
187
|
+
m(r), l(y.TRENDS_CLICK_TABLE_SORT, A);
|
|
188
188
|
},
|
|
189
|
-
rows:
|
|
189
|
+
rows: b,
|
|
190
190
|
slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
|
|
191
191
|
sortModel: d,
|
|
192
192
|
sortingOrder: ["asc", "desc"]
|
|
193
193
|
}
|
|
194
194
|
) });
|
|
195
|
-
},
|
|
195
|
+
}, Ht = {
|
|
196
196
|
title: "Transaction List"
|
|
197
|
-
},
|
|
197
|
+
}, Nt = ({
|
|
198
198
|
categoryGuid: n,
|
|
199
199
|
dateRange: o,
|
|
200
200
|
isOpen: t,
|
|
201
201
|
onClose: s
|
|
202
202
|
}) => {
|
|
203
|
-
const { onEvent: a } =
|
|
203
|
+
const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: l } = R(), { setFilter: c, sortedTransactions: d } = re(), [m, C] = i.useState(""), u = i.useMemo(
|
|
204
204
|
() => d.find((r) => r.guid === m),
|
|
205
205
|
[m, d]
|
|
206
206
|
);
|
|
@@ -211,25 +211,25 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
211
211
|
custom: (r) => n === "" || n === r.category_guid || n === r.top_level_category_guid,
|
|
212
212
|
showSplits: !!n
|
|
213
213
|
});
|
|
214
|
-
}, [h, n, o]), i.useEffect(() => a(
|
|
215
|
-
const
|
|
216
|
-
|
|
214
|
+
}, [h, n, o]), i.useEffect(() => a(y.TRENDS_VIEW_TRANSACTIONS), []);
|
|
215
|
+
const b = () => {
|
|
216
|
+
C(""), s();
|
|
217
217
|
};
|
|
218
|
-
return /* @__PURE__ */
|
|
219
|
-
|
|
218
|
+
return /* @__PURE__ */ f(
|
|
219
|
+
fe,
|
|
220
220
|
{
|
|
221
221
|
ariaLabelClose: l.close_aria,
|
|
222
222
|
isOpen: t,
|
|
223
|
-
onClose:
|
|
224
|
-
title:
|
|
223
|
+
onClose: b,
|
|
224
|
+
title: Ht.title,
|
|
225
225
|
children: [
|
|
226
|
-
u && /* @__PURE__ */ e(
|
|
227
|
-
!u && /* @__PURE__ */ e(
|
|
226
|
+
u && /* @__PURE__ */ e(Re, { transaction: u }),
|
|
227
|
+
!u && /* @__PURE__ */ e(ke, { onClick: C })
|
|
228
228
|
]
|
|
229
229
|
}
|
|
230
230
|
);
|
|
231
|
-
}, Wt = M(
|
|
232
|
-
const { onEvent: t } =
|
|
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: C } = re(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = R(), [w, I] = i.useState(!1), [k, 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);
|
|
@@ -254,31 +254,31 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
254
254
|
(G) => G.top_level_category_guid === L || G.category_guid === L
|
|
255
255
|
) : Ze(S);
|
|
256
256
|
return {
|
|
257
|
-
stackedDatasets: W.filter(
|
|
258
|
-
unstackedDatasets: W.filter(
|
|
257
|
+
stackedDatasets: W.filter(Qe),
|
|
258
|
+
unstackedDatasets: W.filter(qe)
|
|
259
259
|
};
|
|
260
260
|
}, [d, L, u]), ne = (S, W) => {
|
|
261
|
-
x(W ??
|
|
261
|
+
x(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
|
|
262
262
|
}, oe = (S) => {
|
|
263
|
-
const W =
|
|
264
|
-
|
|
263
|
+
const W = Ie(S?.[0], 1), G = S?.[1], ge = Ce(G, W);
|
|
264
|
+
b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
|
|
265
265
|
time_period: ge + "M"
|
|
266
266
|
});
|
|
267
267
|
}, ce = () => {
|
|
268
|
-
t(
|
|
268
|
+
t(y.TRENDS_CLICK_FILTER);
|
|
269
269
|
}, le = (S) => {
|
|
270
270
|
$(S);
|
|
271
271
|
}, de = (S) => {
|
|
272
|
-
$(S), t(
|
|
272
|
+
$(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
|
|
273
273
|
}, he = (S) => {
|
|
274
|
-
t(
|
|
274
|
+
t(y.TRENDS_HOVER_LEGEND, { category: m(S) });
|
|
275
275
|
}, ue = (S) => {
|
|
276
|
-
t(
|
|
276
|
+
t(y.TRENDS_HOVER_AREA, { category: S });
|
|
277
277
|
}, me = (S) => {
|
|
278
|
-
t(
|
|
278
|
+
t(y.TRENDS_HOVER_POINT, { category: S });
|
|
279
279
|
};
|
|
280
|
-
return !r || !g || !w ? /* @__PURE__ */ e(
|
|
281
|
-
|
|
280
|
+
return !r || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
|
|
281
|
+
Ae,
|
|
282
282
|
{
|
|
283
283
|
accountOptions: l,
|
|
284
284
|
calendarActions: { onRangeChanged: oe },
|
|
@@ -289,41 +289,41 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
289
289
|
sx: o,
|
|
290
290
|
title: E.title,
|
|
291
291
|
children: [
|
|
292
|
-
/* @__PURE__ */
|
|
293
|
-
|
|
292
|
+
/* @__PURE__ */ f(
|
|
293
|
+
_,
|
|
294
294
|
{
|
|
295
295
|
sx: {
|
|
296
296
|
// eslint-disable-next-line no-nested-ternary
|
|
297
297
|
px: s ? 48 : a ? 24 : 12
|
|
298
298
|
},
|
|
299
299
|
children: [
|
|
300
|
-
/* @__PURE__ */
|
|
301
|
-
|
|
300
|
+
/* @__PURE__ */ f(
|
|
301
|
+
_,
|
|
302
302
|
{
|
|
303
303
|
flexDirection: "row",
|
|
304
304
|
justifyContent: "space-between",
|
|
305
305
|
sx: { pb: h ? 12 : 24, pt: h ? 24 : 48 },
|
|
306
306
|
children: [
|
|
307
307
|
/* @__PURE__ */ e(
|
|
308
|
-
|
|
308
|
+
Oe,
|
|
309
309
|
{
|
|
310
310
|
selectedCategoryGuid: L,
|
|
311
311
|
selectedDateRange: u
|
|
312
312
|
}
|
|
313
313
|
),
|
|
314
|
-
/* @__PURE__ */ e(
|
|
314
|
+
/* @__PURE__ */ e(We, { onTabChange: ne, selectedTab: N })
|
|
315
315
|
]
|
|
316
316
|
}
|
|
317
317
|
),
|
|
318
|
-
/* @__PURE__ */
|
|
319
|
-
/* @__PURE__ */ e(O, { flexGrow: 1, children: L && /* @__PURE__ */
|
|
318
|
+
/* @__PURE__ */ f(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
|
|
319
|
+
/* @__PURE__ */ e(O, { flexGrow: 1, children: L && /* @__PURE__ */ f(pe, { 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(pe, { onClick: () => D(!0), sx: { px: 5 }, children: `${E.view_transactions} (${C.length})` })
|
|
324
324
|
] }),
|
|
325
|
-
/* @__PURE__ */
|
|
326
|
-
|
|
325
|
+
/* @__PURE__ */ f(O, { children: [
|
|
326
|
+
N === "Chart" && /* @__PURE__ */ e(
|
|
327
327
|
je,
|
|
328
328
|
{
|
|
329
329
|
availableHeight: ee,
|
|
@@ -335,8 +335,8 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
335
335
|
unstackedDatasets: te.unstackedDatasets
|
|
336
336
|
}
|
|
337
337
|
),
|
|
338
|
-
|
|
339
|
-
|
|
338
|
+
N === "Table" && /* @__PURE__ */ e(
|
|
339
|
+
Ve,
|
|
340
340
|
{
|
|
341
341
|
monthlyCategoryTotals: d,
|
|
342
342
|
onClickRow: le,
|
|
@@ -353,7 +353,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
353
353
|
{
|
|
354
354
|
categoryGuid: L,
|
|
355
355
|
dateRange: u,
|
|
356
|
-
isOpen:
|
|
356
|
+
isOpen: k,
|
|
357
357
|
onClose: () => D(!1)
|
|
358
358
|
}
|
|
359
359
|
)
|
|
@@ -361,9 +361,9 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
361
361
|
}
|
|
362
362
|
);
|
|
363
363
|
}, Un = M(Ot), Vt = () => {
|
|
364
|
-
const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } =
|
|
364
|
+
const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } = R(), s = Je(o);
|
|
365
365
|
return /* @__PURE__ */ e(
|
|
366
|
-
|
|
366
|
+
ye,
|
|
367
367
|
{
|
|
368
368
|
baseline: "min",
|
|
369
369
|
colors: [n.palette.primary.main],
|
|
@@ -379,12 +379,12 @@ const Oe = ({ 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 } = ve(), { trends: l } = R(), { isCopyLoaded: c, selectedAccounts: d, setSelectedAccounts: m } = P();
|
|
383
383
|
return i.useEffect(() => {
|
|
384
384
|
m(t);
|
|
385
385
|
}, [t]), i.useEffect(() => {
|
|
386
386
|
h && s(d).finally();
|
|
387
|
-
}, [h, d]), !c || !h ? /* @__PURE__ */ e(
|
|
387
|
+
}, [h, d]), !c || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
|
|
388
388
|
ct,
|
|
389
389
|
{
|
|
390
390
|
onPrimaryCtaClick: n,
|
|
@@ -392,10 +392,10 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
392
392
|
subTitle: l.sub_title,
|
|
393
393
|
sx: o,
|
|
394
394
|
title: l.mini_title,
|
|
395
|
-
children: a ? /* @__PURE__ */ e(Gt, {}) : /* @__PURE__ */ e(
|
|
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, Se = ({
|
|
399
399
|
title: n,
|
|
400
400
|
totalAmount: o,
|
|
401
401
|
transactionType: t,
|
|
@@ -406,9 +406,9 @@ const Oe = ({ 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__ */
|
|
411
|
-
|
|
409
|
+
}), C = 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__ */ f(
|
|
411
|
+
_,
|
|
412
412
|
{
|
|
413
413
|
sx: {
|
|
414
414
|
border: 1,
|
|
@@ -420,8 +420,8 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
420
420
|
py: 8
|
|
421
421
|
},
|
|
422
422
|
children: [
|
|
423
|
-
/* @__PURE__ */
|
|
424
|
-
|
|
423
|
+
/* @__PURE__ */ f(
|
|
424
|
+
_,
|
|
425
425
|
{
|
|
426
426
|
sx: {
|
|
427
427
|
alignItems: "center",
|
|
@@ -430,13 +430,13 @@ const Oe = ({ 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__ */
|
|
434
|
-
u ? /* @__PURE__ */ e(dt, { size: 20, sx: { color:
|
|
433
|
+
h && /* @__PURE__ */ f(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
|
|
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,
|
|
437
437
|
{
|
|
438
438
|
sx: {
|
|
439
|
-
color: u ?
|
|
439
|
+
color: u ? b : r,
|
|
440
440
|
fontWeight: 600
|
|
441
441
|
},
|
|
442
442
|
variant: "body2",
|
|
@@ -447,8 +447,8 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
447
447
|
]
|
|
448
448
|
}
|
|
449
449
|
),
|
|
450
|
-
/* @__PURE__ */
|
|
451
|
-
|
|
450
|
+
/* @__PURE__ */ f(
|
|
451
|
+
_,
|
|
452
452
|
{
|
|
453
453
|
ref: d,
|
|
454
454
|
sx: {
|
|
@@ -462,13 +462,13 @@ const Oe = ({ 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(De, { children: C })
|
|
466
466
|
}
|
|
467
467
|
),
|
|
468
468
|
h && l >= 450 && !p && /* @__PURE__ */ e(
|
|
469
469
|
Y,
|
|
470
470
|
{
|
|
471
|
-
color: u ?
|
|
471
|
+
color: u ? b : r,
|
|
472
472
|
variant: "caption",
|
|
473
473
|
children: a
|
|
474
474
|
}
|
|
@@ -480,49 +480,49 @@ const Oe = ({ 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 } = R();
|
|
484
|
+
return /* @__PURE__ */ f(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
|
|
485
485
|
/* @__PURE__ */ e(ut, { size: 32 }),
|
|
486
|
-
/* @__PURE__ */
|
|
486
|
+
/* @__PURE__ */ f(_, { 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
|
] })
|
|
490
490
|
] });
|
|
491
491
|
}), Zn = M(({ onCtaClick: n }) => {
|
|
492
|
-
const { visibleAccounts: o } = ae(), { onEvent: t } =
|
|
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 } = R(), { selectedAccounts: d, setSelectedAccounts: m, isInitialized: C } = P();
|
|
496
496
|
i.useEffect(() => {
|
|
497
497
|
m(o);
|
|
498
498
|
}, [o]), i.useEffect(() => {
|
|
499
|
-
|
|
500
|
-
t(
|
|
499
|
+
C && a(d, l.start).then(() => {
|
|
500
|
+
t(y.TRENDS_LOAD_WIDGET, {
|
|
501
501
|
state: o?.length ? "default" : "zeroState"
|
|
502
502
|
});
|
|
503
503
|
});
|
|
504
|
-
}, [
|
|
505
|
-
const { spendingData: u, incomeData:
|
|
504
|
+
}, [C, d]);
|
|
505
|
+
const { spendingData: u, incomeData: b } = i.useMemo(
|
|
506
506
|
() => ({
|
|
507
|
-
spendingData:
|
|
508
|
-
incomeData:
|
|
507
|
+
spendingData: Le(s, l),
|
|
508
|
+
incomeData: xe(s, l)
|
|
509
509
|
}),
|
|
510
510
|
[s, l]
|
|
511
|
-
), [r, g] = u, [T, p] =
|
|
511
|
+
), [r, g] = u, [T, p] = b, E = _e(g.y, r.y), w = _e(p.y, T.y), I = C && !o?.length, k = () => {
|
|
512
512
|
t(
|
|
513
|
-
I ?
|
|
513
|
+
I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
|
|
514
514
|
), n();
|
|
515
515
|
};
|
|
516
|
-
return !h || !
|
|
516
|
+
return !h || !C ? /* @__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: k,
|
|
522
522
|
subHeader: I ? void 0 : c.micro_subheader,
|
|
523
523
|
title: c.title,
|
|
524
|
-
children: I ? /* @__PURE__ */ e(Ft, {}) : /* @__PURE__ */
|
|
525
|
-
|
|
524
|
+
children: I ? /* @__PURE__ */ e(Ft, {}) : /* @__PURE__ */ f(
|
|
525
|
+
_,
|
|
526
526
|
{
|
|
527
527
|
sx: {
|
|
528
528
|
alignItems: "stretch",
|
|
@@ -531,7 +531,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
531
531
|
},
|
|
532
532
|
children: [
|
|
533
533
|
/* @__PURE__ */ e(
|
|
534
|
-
|
|
534
|
+
Se,
|
|
535
535
|
{
|
|
536
536
|
percentage: E,
|
|
537
537
|
secondaryLabel: c.micro_secondary_label,
|
|
@@ -542,7 +542,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
542
542
|
}
|
|
543
543
|
),
|
|
544
544
|
/* @__PURE__ */ e(
|
|
545
|
-
|
|
545
|
+
Se,
|
|
546
546
|
{
|
|
547
547
|
percentage: w,
|
|
548
548
|
secondaryLabel: c.micro_secondary_label,
|
|
@@ -559,9 +559,9 @@ const Oe = ({ 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__ */
|
|
564
|
-
|
|
562
|
+
const t = Ne();
|
|
563
|
+
return /* @__PURE__ */ e(yt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(_t, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
|
|
564
|
+
_,
|
|
565
565
|
{
|
|
566
566
|
sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
|
|
567
567
|
children: [
|
|
@@ -579,7 +579,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
579
579
|
}
|
|
580
580
|
) }) });
|
|
581
581
|
}
|
|
582
|
-
),
|
|
582
|
+
), we = M(
|
|
583
583
|
({
|
|
584
584
|
totalAmount: n,
|
|
585
585
|
guid: o,
|
|
@@ -589,18 +589,18 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
589
589
|
isLastItem: h = !1,
|
|
590
590
|
showDivider: l = !0
|
|
591
591
|
}) => {
|
|
592
|
-
const { trends: c } =
|
|
593
|
-
a?.(), d(
|
|
594
|
-
...
|
|
592
|
+
const { trends: c } = R(), { onEvent: d } = H(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, C = () => {
|
|
593
|
+
a?.(), d(y.TRENDS_CLICK_LIST_ITEM, {
|
|
594
|
+
...A,
|
|
595
595
|
listItem: t
|
|
596
596
|
});
|
|
597
597
|
};
|
|
598
|
-
return /* @__PURE__ */
|
|
598
|
+
return /* @__PURE__ */ f(i.Fragment, { children: [
|
|
599
599
|
/* @__PURE__ */ e(
|
|
600
|
-
|
|
600
|
+
Ee,
|
|
601
601
|
{
|
|
602
|
-
leftIcon: o ? /* @__PURE__ */ e(
|
|
603
|
-
onClick:
|
|
602
|
+
leftIcon: o ? /* @__PURE__ */ e(Te, { categoryGuid: o }) : void 0,
|
|
603
|
+
onClick: C,
|
|
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 Oe = ({ 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 } =
|
|
615
|
+
const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: l } = K(), { trends: c } = R(), { onEvent: d } = H(), [m, C] = 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), C(g >= T));
|
|
619
619
|
}, [n]);
|
|
620
|
-
const
|
|
621
|
-
|
|
622
|
-
...
|
|
620
|
+
const b = () => {
|
|
621
|
+
C(!m), d(y.TRENDS_CLICK_VIEW_MORE, {
|
|
622
|
+
...A
|
|
623
623
|
});
|
|
624
624
|
}, r = s.length + (m ? t.length : 0);
|
|
625
|
-
return /* @__PURE__ */ e(
|
|
626
|
-
/* @__PURE__ */ e(
|
|
625
|
+
return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(Tt, { children: [
|
|
626
|
+
/* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: c.categories }) }),
|
|
627
627
|
s.map((g, T) => /* @__PURE__ */ e(
|
|
628
|
-
|
|
628
|
+
we,
|
|
629
629
|
{
|
|
630
630
|
...g,
|
|
631
631
|
isLastItem: T === r - 1,
|
|
@@ -642,7 +642,7 @@ const Oe = ({ 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
|
+
we,
|
|
646
646
|
{
|
|
647
647
|
...g,
|
|
648
648
|
isLastItem: p === r - 1,
|
|
@@ -654,7 +654,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
654
654
|
})
|
|
655
655
|
}
|
|
656
656
|
),
|
|
657
|
-
t.length > 0 && /* @__PURE__ */ e(Pt, { isExpanded: m, onClick:
|
|
657
|
+
t.length > 0 && /* @__PURE__ */ e(Pt, { isExpanded: m, onClick: b })
|
|
658
658
|
] }) });
|
|
659
659
|
}
|
|
660
660
|
), $t = [
|
|
@@ -692,14 +692,14 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
692
692
|
"WeeklyNoSpendDays",
|
|
693
693
|
"WeeklySmallPurchasesSummary"
|
|
694
694
|
], jt = ({ onInsightCardClick: n }) => {
|
|
695
|
-
const o = Dt(), { onEvent: t } =
|
|
695
|
+
const o = Dt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: l, endpoint: c, sessionToken: d } = ve(), { isInitialized: m } = P(), [C, 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(
|
|
701
|
-
}, w = r ? 200 : 170, I = r ? 170 : 124,
|
|
702
|
-
return /* @__PURE__ */ e(It, { sx: { height:
|
|
699
|
+
const T = i.useMemo(() => C ? l.getFilteredBeats({ templates: $t }) : [], [C]), p = () => null, E = (D) => {
|
|
700
|
+
n?.(D), t(y.TRENDS_CLICK_INSIGHT, A);
|
|
701
|
+
}, w = r ? 200 : 170, I = r ? 170 : 124, k = T.length > 0 ? w : I;
|
|
702
|
+
return /* @__PURE__ */ e(It, { sx: { height: k }, children: /* @__PURE__ */ e(
|
|
703
703
|
it,
|
|
704
704
|
{
|
|
705
705
|
areBeatsLoading: l.isLoading,
|
|
@@ -714,18 +714,18 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
714
714
|
showIcon: !0,
|
|
715
715
|
showWithMargin: !1,
|
|
716
716
|
token: d,
|
|
717
|
-
useDarkMode:
|
|
717
|
+
useDarkMode: b,
|
|
718
718
|
userHasFullInsightFeedBeats: !1,
|
|
719
719
|
variant: "outlined",
|
|
720
720
|
visibleCardsCount: g
|
|
721
721
|
}
|
|
722
722
|
) });
|
|
723
723
|
}, Yt = M(jt), Ut = M(({ chartLabel: n, chartColor: o }) => {
|
|
724
|
-
const { onEvent: t } =
|
|
724
|
+
const { onEvent: t } = H(), {
|
|
725
725
|
categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: a }
|
|
726
|
-
} =
|
|
727
|
-
return /* @__PURE__ */ e(
|
|
728
|
-
|
|
726
|
+
} = q();
|
|
727
|
+
return /* @__PURE__ */ e(_, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
|
|
728
|
+
ye,
|
|
729
729
|
{
|
|
730
730
|
baseline: "min",
|
|
731
731
|
colors: [o],
|
|
@@ -738,7 +738,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
738
738
|
stroke: o
|
|
739
739
|
}),
|
|
740
740
|
onItemClick: () => {
|
|
741
|
-
t(
|
|
741
|
+
t(y.TRENDS_CLICK_CHART, A);
|
|
742
742
|
},
|
|
743
743
|
showArea: !0,
|
|
744
744
|
showAverage: !0,
|
|
@@ -754,43 +754,43 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
754
754
|
}
|
|
755
755
|
) });
|
|
756
756
|
}), Xt = M(({ onClose: n }) => {
|
|
757
|
-
const o =
|
|
757
|
+
const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { 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: C, name: u, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Lt(C, 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(
|
|
763
|
+
), I = (D) => D.category_guid === C || D.top_level_category_guid === C, k = () => {
|
|
764
|
+
n?.(), t(y.TRENDS_CLICK_BACK, A);
|
|
765
765
|
};
|
|
766
|
-
return /* @__PURE__ */
|
|
767
|
-
|
|
766
|
+
return /* @__PURE__ */ f(
|
|
767
|
+
fe,
|
|
768
768
|
{
|
|
769
769
|
ariaLabelClose: a.close_category_details,
|
|
770
770
|
isOpen: !0,
|
|
771
|
-
onClose:
|
|
771
|
+
onClose: k,
|
|
772
772
|
shouldShowHeaderShadow: !0,
|
|
773
773
|
title: g,
|
|
774
774
|
children: [
|
|
775
|
-
/* @__PURE__ */
|
|
776
|
-
/* @__PURE__ */
|
|
775
|
+
/* @__PURE__ */ f(_, { sx: { alignItems: "center", height: "100%" }, children: [
|
|
776
|
+
/* @__PURE__ */ f(Et, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
|
|
777
777
|
/* @__PURE__ */ e(
|
|
778
|
-
|
|
778
|
+
Ee,
|
|
779
779
|
{
|
|
780
|
-
leftIcon: /* @__PURE__ */ e(
|
|
780
|
+
leftIcon: /* @__PURE__ */ e(Te, { categoryGuid: C }),
|
|
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__ */ f(_, { 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
|
+
ke,
|
|
794
794
|
{
|
|
795
795
|
bgcolor: "transparent",
|
|
796
796
|
filter: I,
|
|
@@ -800,22 +800,22 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
800
800
|
)
|
|
801
801
|
] }),
|
|
802
802
|
/* @__PURE__ */ e(
|
|
803
|
-
|
|
803
|
+
fe,
|
|
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(Re, { transaction: w })
|
|
810
810
|
}
|
|
811
811
|
)
|
|
812
812
|
]
|
|
813
813
|
}
|
|
814
814
|
);
|
|
815
815
|
}), Zt = (n, o) => {
|
|
816
|
-
const t =
|
|
816
|
+
const t = xe(n, o), s = Le(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 = [];
|
|
820
820
|
if (a) {
|
|
821
821
|
const c = a.reduce((d, m) => d + m.y, 0);
|
|
@@ -826,68 +826,63 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
826
826
|
l.push({ label: o.spending_label, amount: c });
|
|
827
827
|
}
|
|
828
828
|
return l;
|
|
829
|
-
},
|
|
829
|
+
}, qt = ({
|
|
830
830
|
availableHeight: n = 0,
|
|
831
831
|
minHeight: o = 500,
|
|
832
832
|
selectedDateRange: t,
|
|
833
833
|
totals: s
|
|
834
834
|
}) => {
|
|
835
|
-
const a = He(), { onEvent: h } =
|
|
836
|
-
i.useEffect(() => {
|
|
835
|
+
const a = He(), { onEvent: h } = H(), { trends: l } = R(), { isSmallMobile: c, isMobile: d, isSmallTablet: m, isTablet: C } = 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 || C ? p : g;
|
|
836
|
+
return 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
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
}
|
|
865
|
-
)
|
|
866
|
-
] });
|
|
867
|
-
}, qt = M(Qt), en = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
|
|
868
|
-
const { onEvent: s } = N(), { config: a } = ot(), { isLargeDesktop: h, isDesktop: l, isMobile: c } = K(), { visibleAccounts: d } = ae(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: u } = F(), { setFilter: y } = re(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = Q(), {
|
|
839
|
+
}, [n]), /* @__PURE__ */ e(
|
|
840
|
+
ye,
|
|
841
|
+
{
|
|
842
|
+
baseline: "min",
|
|
843
|
+
colors: u,
|
|
844
|
+
curveType: "bump",
|
|
845
|
+
datasets: b,
|
|
846
|
+
height: I,
|
|
847
|
+
labels: r,
|
|
848
|
+
onItemClick: () => {
|
|
849
|
+
h(y.TRENDS_CLICK_CHART, A);
|
|
850
|
+
},
|
|
851
|
+
showArea: !0,
|
|
852
|
+
showAxisHighlight: !0,
|
|
853
|
+
showLegend: !0,
|
|
854
|
+
showTooltip: !0,
|
|
855
|
+
showXAxis: !0,
|
|
856
|
+
showXAxisTicks: !0,
|
|
857
|
+
showYAxis: !0,
|
|
858
|
+
showYAxisTicks: !0,
|
|
859
|
+
valueFormatterString: "0,0"
|
|
860
|
+
}
|
|
861
|
+
);
|
|
862
|
+
}, 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: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = re(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
|
|
869
864
|
isCopyLoaded: p,
|
|
870
865
|
isInitialized: E,
|
|
871
866
|
selectedAccounts: w,
|
|
872
867
|
selectedAccountGuids: I,
|
|
873
|
-
setSelectedAccounts:
|
|
874
|
-
} = P(), { trends: D } =
|
|
868
|
+
setSelectedAccounts: k
|
|
869
|
+
} = P(), { trends: D } = R(), 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);
|
|
875
870
|
i.useEffect(() => {
|
|
876
871
|
const v = () => ce(window.innerHeight);
|
|
877
872
|
return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
|
|
878
873
|
}, []), i.useEffect(() => {
|
|
879
|
-
|
|
874
|
+
k(d);
|
|
880
875
|
}, [d]), i.useEffect(() => {
|
|
881
876
|
E && m(w, r.start, r.end).then(() => {
|
|
882
|
-
|
|
877
|
+
C(
|
|
883
878
|
w,
|
|
884
879
|
r.start,
|
|
885
880
|
r.end
|
|
886
881
|
);
|
|
887
882
|
}).finally(() => {
|
|
888
|
-
$(!0), s(
|
|
889
|
-
...
|
|
890
|
-
time_period: `${
|
|
883
|
+
$(!0), s(y.TRENDS_LOAD_WIDGET, {
|
|
884
|
+
...A,
|
|
885
|
+
time_period: `${Ce(r.end, r.start)}M`
|
|
891
886
|
});
|
|
892
887
|
});
|
|
893
888
|
}, [E, w, r]), i.useEffect(() => {
|
|
@@ -896,7 +891,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
896
891
|
accounts: I,
|
|
897
892
|
dateRange: { start: r.start, end: r.end }
|
|
898
893
|
};
|
|
899
|
-
|
|
894
|
+
b({
|
|
900
895
|
...v,
|
|
901
896
|
custom: (V) => !!u.find(
|
|
902
897
|
(j) => j.top_level_category_guid === V.top_level_category_guid || j.category_guid === V.category_guid
|
|
@@ -909,30 +904,30 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
909
904
|
}, ue = () => {
|
|
910
905
|
g(null), ne(!1);
|
|
911
906
|
}, me = (v, V) => {
|
|
912
|
-
ie(V ?? z), s(
|
|
913
|
-
...
|
|
907
|
+
ie(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
|
|
908
|
+
...A,
|
|
914
909
|
toggleView: V
|
|
915
910
|
});
|
|
916
911
|
}, S = (v) => {
|
|
917
|
-
const V =
|
|
918
|
-
T({ start: V, end: j }), s(
|
|
919
|
-
...
|
|
920
|
-
time_period:
|
|
912
|
+
const V = Ie(v?.[0], 1), j = v?.[1], ze = Ce(j, V);
|
|
913
|
+
T({ start: V, end: j }), s(y.TRENDS_CLICK_TIME_WINDOW, {
|
|
914
|
+
...A,
|
|
915
|
+
time_period: ze + "M"
|
|
921
916
|
});
|
|
922
917
|
}, W = (v) => {
|
|
923
|
-
s(
|
|
924
|
-
...
|
|
918
|
+
s(y.TRENDS_CLICK_FILTER, {
|
|
919
|
+
...A,
|
|
925
920
|
filterValue: v
|
|
926
921
|
});
|
|
927
922
|
}, G = (v) => {
|
|
928
923
|
ee(v);
|
|
929
924
|
}, ge = () => {
|
|
930
|
-
ee(""), s(
|
|
925
|
+
ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
|
|
931
926
|
};
|
|
932
|
-
if (!p || !L) return /* @__PURE__ */ e(
|
|
933
|
-
const
|
|
934
|
-
return /* @__PURE__ */
|
|
935
|
-
|
|
927
|
+
if (!p || !L) return /* @__PURE__ */ e(Q, {});
|
|
928
|
+
const Ge = a.show_connections_widget_in_master ? "buttons" : "no-buttons", Be = L && d.length === 0;
|
|
929
|
+
return /* @__PURE__ */ f(
|
|
930
|
+
Ae,
|
|
936
931
|
{
|
|
937
932
|
accountOptions: d,
|
|
938
933
|
calendarActions: { onRangeChanged: S },
|
|
@@ -943,32 +938,32 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
943
938
|
sx: t,
|
|
944
939
|
title: D.title,
|
|
945
940
|
children: [
|
|
946
|
-
/* @__PURE__ */
|
|
947
|
-
|
|
941
|
+
/* @__PURE__ */ f(
|
|
942
|
+
_,
|
|
948
943
|
{
|
|
949
944
|
sx: {
|
|
950
945
|
px: c ? 0 : 48
|
|
951
946
|
},
|
|
952
947
|
children: [
|
|
953
|
-
/* @__PURE__ */
|
|
954
|
-
|
|
948
|
+
/* @__PURE__ */ f(
|
|
949
|
+
_,
|
|
955
950
|
{
|
|
956
951
|
flexDirection: "row",
|
|
957
952
|
justifyContent: "space-between",
|
|
958
953
|
sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
|
|
959
954
|
children: [
|
|
960
955
|
/* @__PURE__ */ e(
|
|
961
|
-
|
|
956
|
+
Oe,
|
|
962
957
|
{
|
|
963
|
-
selectedCategoryGuid:
|
|
958
|
+
selectedCategoryGuid: J,
|
|
964
959
|
selectedDateRange: r
|
|
965
960
|
}
|
|
966
961
|
),
|
|
967
|
-
/* @__PURE__ */ e(
|
|
962
|
+
/* @__PURE__ */ e(We, { onTabChange: me, selectedTab: z })
|
|
968
963
|
]
|
|
969
964
|
}
|
|
970
965
|
),
|
|
971
|
-
|
|
966
|
+
Be && /* @__PURE__ */ e(
|
|
972
967
|
vt,
|
|
973
968
|
{
|
|
974
969
|
header: "",
|
|
@@ -977,17 +972,17 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
977
972
|
},
|
|
978
973
|
primaryButton: D.empty_state_primary,
|
|
979
974
|
subText: D.empty_state_sub_text,
|
|
980
|
-
variant:
|
|
975
|
+
variant: Ge
|
|
981
976
|
}
|
|
982
977
|
),
|
|
983
|
-
/* @__PURE__ */ e(
|
|
978
|
+
/* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ f(pe, { onClick: ge, sx: { p: 0, pr: 5 }, children: [
|
|
984
979
|
/* @__PURE__ */ e(se, { name: "arrow_back" }),
|
|
985
980
|
D.all_categories
|
|
986
981
|
] }) }) }),
|
|
987
|
-
/* @__PURE__ */
|
|
988
|
-
z === "Chart" && /* @__PURE__ */
|
|
982
|
+
/* @__PURE__ */ f(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
|
|
983
|
+
z === "Chart" && /* @__PURE__ */ f(Fe, { children: [
|
|
989
984
|
/* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
|
|
990
|
-
|
|
985
|
+
Jt,
|
|
991
986
|
{
|
|
992
987
|
availableHeight: le,
|
|
993
988
|
minHeight: 450,
|
|
@@ -995,8 +990,8 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
995
990
|
totals: u
|
|
996
991
|
}
|
|
997
992
|
) }),
|
|
998
|
-
/* @__PURE__ */
|
|
999
|
-
|
|
993
|
+
/* @__PURE__ */ f(_, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
|
|
994
|
+
N && /* @__PURE__ */ e(Yt, { onInsightCardClick: o }),
|
|
1000
995
|
/* @__PURE__ */ e(
|
|
1001
996
|
Kt,
|
|
1002
997
|
{
|
|
@@ -1007,12 +1002,12 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
1007
1002
|
] })
|
|
1008
1003
|
] }),
|
|
1009
1004
|
z === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
|
|
1010
|
-
|
|
1005
|
+
Ve,
|
|
1011
1006
|
{
|
|
1012
1007
|
height: "unset",
|
|
1013
1008
|
monthlyCategoryTotals: u,
|
|
1014
1009
|
onClickRow: G,
|
|
1015
|
-
selectedCategory:
|
|
1010
|
+
selectedCategory: J,
|
|
1016
1011
|
selectedDateRange: r
|
|
1017
1012
|
}
|
|
1018
1013
|
) })
|
|
@@ -1024,11 +1019,11 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
1024
1019
|
]
|
|
1025
1020
|
}
|
|
1026
1021
|
);
|
|
1027
|
-
},
|
|
1022
|
+
}, Qn = M(en);
|
|
1028
1023
|
export {
|
|
1029
1024
|
Un as TrendsFullWidget,
|
|
1030
1025
|
Zn as TrendsMicroWidget,
|
|
1031
1026
|
Xn as TrendsMiniWidget,
|
|
1032
1027
|
eo as TrendsStore,
|
|
1033
|
-
|
|
1028
|
+
Qn as TrendsWidget
|
|
1034
1029
|
};
|