@mx-cartographer/experiences 7.0.23-alpha.al3 → 7.0.23-alpha.al5
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 +77 -77
- package/package.json +1 -1
package/dist/trends/index.es.js
CHANGED
|
@@ -56,14 +56,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
56
56
|
}
|
|
57
57
|
), Oe = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
|
|
58
58
|
const { trends: t } = R(), { isMobile: s, isDesktop: a } = K(), { getCategoryName: h } = F(), d = i.useMemo(() => {
|
|
59
|
-
const
|
|
59
|
+
const l = Z(
|
|
60
60
|
n.start,
|
|
61
61
|
s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
|
|
62
|
-
),
|
|
62
|
+
), c = Z(
|
|
63
63
|
n.end,
|
|
64
64
|
s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
|
|
65
65
|
);
|
|
66
|
-
return `${
|
|
66
|
+
return `${l} - ${c}`;
|
|
67
67
|
}, [n, s]);
|
|
68
68
|
return /* @__PURE__ */ f(O, { sx: { mr: 10, minWidth: "60%" }, children: [
|
|
69
69
|
/* @__PURE__ */ e(
|
|
@@ -119,8 +119,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
119
119
|
height: a = "100dvh",
|
|
120
120
|
sx: h = {}
|
|
121
121
|
}) => {
|
|
122
|
-
const { onEvent: d } = H(),
|
|
123
|
-
{ field:
|
|
122
|
+
const { onEvent: d } = H(), l = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, m] = i.useState([
|
|
123
|
+
{ field: l, sort: "desc" }
|
|
124
124
|
]), C = i.useMemo(() => Rt(o.start, o.end), [o]), u = [
|
|
125
125
|
{
|
|
126
126
|
field: "category",
|
|
@@ -155,15 +155,15 @@ 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: k, total: D, year: N } = E,
|
|
159
|
-
p[
|
|
160
|
-
id:
|
|
161
|
-
category:
|
|
158
|
+
const { category_guid: w, top_level_category_guid: I, month: k, total: D, year: N } = E, x = t ? w : I;
|
|
159
|
+
p[x] || (p[x] = {
|
|
160
|
+
id: x,
|
|
161
|
+
category: x,
|
|
162
162
|
category_guid: w,
|
|
163
163
|
top_level_category_guid: I
|
|
164
164
|
});
|
|
165
|
-
const
|
|
166
|
-
return p[
|
|
165
|
+
const L = Z(new Date(N, k - 1), B.MONTH_SHORT);
|
|
166
|
+
return p[x][L] || (p[x][L] = 0), p[x][L] = p[x][L] + Math.abs(D), p;
|
|
167
167
|
},
|
|
168
168
|
{}
|
|
169
169
|
);
|
|
@@ -176,7 +176,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
176
176
|
disableColumnFilter: !0,
|
|
177
177
|
disableColumnMenu: !0,
|
|
178
178
|
hideFooter: !0,
|
|
179
|
-
initialState: { sorting: { sortModel:
|
|
179
|
+
initialState: { sorting: { sortModel: c } },
|
|
180
180
|
onRowClick: (r) => {
|
|
181
181
|
s?.(r.row.category), d(y.TRENDS_CLICK_LIST_ITEM, {
|
|
182
182
|
...A,
|
|
@@ -188,7 +188,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
188
188
|
},
|
|
189
189
|
rows: b,
|
|
190
190
|
slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
|
|
191
|
-
sortModel:
|
|
191
|
+
sortModel: c,
|
|
192
192
|
sortingOrder: ["asc", "desc"]
|
|
193
193
|
}
|
|
194
194
|
) });
|
|
@@ -200,12 +200,12 @@ 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: d } = R(), { setFilter:
|
|
204
|
-
() =>
|
|
205
|
-
[m,
|
|
203
|
+
const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: l, sortedTransactions: c } = ae(), [m, C] = i.useState(""), u = i.useMemo(
|
|
204
|
+
() => c.find((r) => r.guid === m),
|
|
205
|
+
[m, c]
|
|
206
206
|
);
|
|
207
207
|
i.useEffect(() => {
|
|
208
|
-
|
|
208
|
+
l({
|
|
209
209
|
accounts: h,
|
|
210
210
|
dateRange: o,
|
|
211
211
|
custom: (r) => n === "" || n === r.category_guid || n === r.top_level_category_guid,
|
|
@@ -229,14 +229,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
229
229
|
}
|
|
230
230
|
);
|
|
231
231
|
}, Nt = M(Ht), Wt = ({ onBackClick: n, sx: o }) => {
|
|
232
|
-
const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: d } = ie(), { loadMonthlyCategoryTotals:
|
|
232
|
+
const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: d } = ie(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: m } = F(), { sortedTransactions: C } = ae(), { 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, ce] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
|
|
233
233
|
i.useEffect(() => {
|
|
234
234
|
const S = () => ce(window.innerHeight);
|
|
235
235
|
return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
|
|
236
236
|
}, []), i.useEffect(() => {
|
|
237
237
|
p(d);
|
|
238
238
|
}, [d]), i.useEffect(() => {
|
|
239
|
-
g &&
|
|
239
|
+
g && l(
|
|
240
240
|
T,
|
|
241
241
|
u.start,
|
|
242
242
|
u.end
|
|
@@ -247,18 +247,18 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
247
247
|
const te = i.useMemo(() => {
|
|
248
248
|
if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
|
|
249
249
|
const S = Ke(
|
|
250
|
-
|
|
250
|
+
c,
|
|
251
251
|
u.start,
|
|
252
252
|
u.end
|
|
253
|
-
), W =
|
|
254
|
-
(G) => G.top_level_category_guid ===
|
|
253
|
+
), W = L.length ? S.filter(
|
|
254
|
+
(G) => G.top_level_category_guid === L || G.category_guid === L
|
|
255
255
|
) : Xe(S);
|
|
256
256
|
return {
|
|
257
257
|
stackedDatasets: W.filter(Ze),
|
|
258
258
|
unstackedDatasets: W.filter(Qe)
|
|
259
259
|
};
|
|
260
|
-
}, [
|
|
261
|
-
|
|
260
|
+
}, [c, L, u]), ne = (S, W) => {
|
|
261
|
+
x(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
|
|
262
262
|
}, oe = (S) => {
|
|
263
263
|
const W = Ie(S?.[0], 1), G = S?.[1], ge = Ce(G, W);
|
|
264
264
|
b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
|
|
@@ -307,7 +307,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
307
307
|
/* @__PURE__ */ e(
|
|
308
308
|
Oe,
|
|
309
309
|
{
|
|
310
|
-
selectedCategoryGuid:
|
|
310
|
+
selectedCategoryGuid: L,
|
|
311
311
|
selectedDateRange: u
|
|
312
312
|
}
|
|
313
313
|
),
|
|
@@ -316,7 +316,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
316
316
|
}
|
|
317
317
|
),
|
|
318
318
|
/* @__PURE__ */ f(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
|
|
319
|
-
/* @__PURE__ */ e(O, { flexGrow: 1, children:
|
|
319
|
+
/* @__PURE__ */ e(O, { flexGrow: 1, children: L && /* @__PURE__ */ f(pe, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
|
|
320
320
|
/* @__PURE__ */ e(re, { name: "arrow_back" }),
|
|
321
321
|
E.all_categories
|
|
322
322
|
] }) }),
|
|
@@ -338,9 +338,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
338
338
|
N === "Table" && /* @__PURE__ */ e(
|
|
339
339
|
Ve,
|
|
340
340
|
{
|
|
341
|
-
monthlyCategoryTotals:
|
|
341
|
+
monthlyCategoryTotals: c,
|
|
342
342
|
onClickRow: se,
|
|
343
|
-
selectedCategory:
|
|
343
|
+
selectedCategory: L,
|
|
344
344
|
selectedDateRange: u
|
|
345
345
|
}
|
|
346
346
|
)
|
|
@@ -351,7 +351,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
351
351
|
/* @__PURE__ */ e(
|
|
352
352
|
Nt,
|
|
353
353
|
{
|
|
354
|
-
categoryGuid:
|
|
354
|
+
categoryGuid: L,
|
|
355
355
|
dateRange: u,
|
|
356
356
|
isOpen: k,
|
|
357
357
|
onClose: () => D(!1)
|
|
@@ -379,12 +379,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
379
379
|
}
|
|
380
380
|
);
|
|
381
381
|
}, Vt = M(Ot), Gt = ({ onPrimaryCtaClick: n, sx: o }) => {
|
|
382
|
-
const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded:
|
|
382
|
+
const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: m } = P();
|
|
383
383
|
return i.useEffect(() => {
|
|
384
384
|
m(t);
|
|
385
385
|
}, [t]), i.useEffect(() => {
|
|
386
|
-
h && s(
|
|
387
|
-
}, [h,
|
|
386
|
+
h && s(c).finally();
|
|
387
|
+
}, [h, c]), !l || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
|
|
388
388
|
it,
|
|
389
389
|
{
|
|
390
390
|
onPrimaryCtaClick: n,
|
|
@@ -403,10 +403,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
403
403
|
secondaryLabel: a,
|
|
404
404
|
shouldDisplayPercentage: h
|
|
405
405
|
}) => {
|
|
406
|
-
const { availableWidth: d } = tt(),
|
|
406
|
+
const { availableWidth: d } = tt(), l = i.useRef(null), c = i.useRef(null), m = gt(Number(Math.abs(s)), {
|
|
407
407
|
style: "percent",
|
|
408
408
|
minimumIntegerDigits: 1
|
|
409
|
-
}), C = d === 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 =
|
|
409
|
+
}), C = d === 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 = l?.current, T = c?.current, p = g && T ? g.scrollWidth > T.clientWidth - Bt : !1;
|
|
410
410
|
return /* @__PURE__ */ f(
|
|
411
411
|
_,
|
|
412
412
|
{
|
|
@@ -450,7 +450,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
450
450
|
/* @__PURE__ */ f(
|
|
451
451
|
_,
|
|
452
452
|
{
|
|
453
|
-
ref:
|
|
453
|
+
ref: c,
|
|
454
454
|
sx: {
|
|
455
455
|
alignItems: "center",
|
|
456
456
|
flexDirection: "row",
|
|
@@ -460,7 +460,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
460
460
|
/* @__PURE__ */ e(
|
|
461
461
|
O,
|
|
462
462
|
{
|
|
463
|
-
ref:
|
|
463
|
+
ref: l,
|
|
464
464
|
sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
|
|
465
465
|
children: /* @__PURE__ */ e(De, { children: C })
|
|
466
466
|
}
|
|
@@ -492,16 +492,16 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
492
492
|
const { visibleAccounts: o } = ie(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), d = {
|
|
493
493
|
start: ct(/* @__PURE__ */ new Date(), 1),
|
|
494
494
|
end: /* @__PURE__ */ new Date()
|
|
495
|
-
}, { trends:
|
|
495
|
+
}, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: m, isInitialized: C } = P();
|
|
496
496
|
i.useEffect(() => {
|
|
497
497
|
m(o);
|
|
498
498
|
}, [o]), i.useEffect(() => {
|
|
499
|
-
C && a(
|
|
499
|
+
C && a(c, d.start).then(() => {
|
|
500
500
|
t(y.TRENDS_LOAD_WIDGET, {
|
|
501
501
|
state: o?.length ? "default" : "zeroState"
|
|
502
502
|
});
|
|
503
503
|
});
|
|
504
|
-
}, [C,
|
|
504
|
+
}, [C, c]);
|
|
505
505
|
const { spendingData: u, incomeData: b } = i.useMemo(
|
|
506
506
|
() => ({
|
|
507
507
|
spendingData: Le(s, d),
|
|
@@ -517,10 +517,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
517
517
|
pt,
|
|
518
518
|
{
|
|
519
519
|
className: "mx-trends-microwidget",
|
|
520
|
-
ctaLabel:
|
|
520
|
+
ctaLabel: l.micro_primary_cta_label,
|
|
521
521
|
onCTAClick: k,
|
|
522
|
-
subHeader: I ? void 0 :
|
|
523
|
-
title:
|
|
522
|
+
subHeader: I ? void 0 : l.micro_subheader,
|
|
523
|
+
title: l.title,
|
|
524
524
|
children: I ? /* @__PURE__ */ e(zt, {}) : /* @__PURE__ */ f(
|
|
525
525
|
_,
|
|
526
526
|
{
|
|
@@ -534,9 +534,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
534
534
|
Se,
|
|
535
535
|
{
|
|
536
536
|
percentage: E,
|
|
537
|
-
secondaryLabel:
|
|
537
|
+
secondaryLabel: l.micro_secondary_label,
|
|
538
538
|
shouldDisplayPercentage: g.y !== 0 && r.y !== 0,
|
|
539
|
-
title:
|
|
539
|
+
title: l.spending_label,
|
|
540
540
|
totalAmount: g.y,
|
|
541
541
|
transactionType: "spending"
|
|
542
542
|
}
|
|
@@ -545,9 +545,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
545
545
|
Se,
|
|
546
546
|
{
|
|
547
547
|
percentage: w,
|
|
548
|
-
secondaryLabel:
|
|
548
|
+
secondaryLabel: l.micro_secondary_label,
|
|
549
549
|
shouldDisplayPercentage: p.y !== 0 && T.y !== 0,
|
|
550
|
-
title:
|
|
550
|
+
title: l.income_label,
|
|
551
551
|
totalAmount: p.y,
|
|
552
552
|
transactionType: "income"
|
|
553
553
|
}
|
|
@@ -589,8 +589,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
589
589
|
isLastItem: h = !1,
|
|
590
590
|
showDivider: d = !0
|
|
591
591
|
}) => {
|
|
592
|
-
const { trends:
|
|
593
|
-
a?.(),
|
|
592
|
+
const { trends: l } = R(), { onEvent: c } = H(), m = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, C = () => {
|
|
593
|
+
a?.(), c(y.TRENDS_CLICK_LIST_ITEM, {
|
|
594
594
|
...A,
|
|
595
595
|
listItem: t
|
|
596
596
|
});
|
|
@@ -612,18 +612,18 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
612
612
|
}
|
|
613
613
|
), Pt = M(
|
|
614
614
|
({ availableHeight: n = 0, onCategoryClick: o }) => {
|
|
615
|
-
const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends:
|
|
615
|
+
const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: l } = R(), { onEvent: c } = H(), [m, C] = i.useState(!1), u = d || h;
|
|
616
616
|
i.useEffect(() => {
|
|
617
617
|
const g = Math.floor(n / 64) - 1, T = s.length + t.length;
|
|
618
618
|
g !== s.length && (a(u ? Math.max(g, 5) : 5), C(g >= T));
|
|
619
619
|
}, [n]);
|
|
620
620
|
const b = () => {
|
|
621
|
-
C(!m),
|
|
621
|
+
C(!m), c(y.TRENDS_CLICK_VIEW_MORE, {
|
|
622
622
|
...A
|
|
623
623
|
});
|
|
624
624
|
}, r = s.length + (m ? t.length : 0);
|
|
625
625
|
return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(ft, { children: [
|
|
626
|
-
/* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children:
|
|
626
|
+
/* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: l.categories }) }),
|
|
627
627
|
s.map((g, T) => /* @__PURE__ */ e(
|
|
628
628
|
we,
|
|
629
629
|
{
|
|
@@ -692,7 +692,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
692
692
|
"WeeklyNoSpendDays",
|
|
693
693
|
"WeeklySmallPurchasesSummary"
|
|
694
694
|
], $t = ({ onInsightCardClick: n }) => {
|
|
695
|
-
const o = wt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: d, endpoint:
|
|
695
|
+
const o = wt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: d, endpoint: l, sessionToken: c } = 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 && d.loadBeats().finally(() => u(!0));
|
|
698
698
|
}, [m]);
|
|
@@ -704,7 +704,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
704
704
|
{
|
|
705
705
|
areBeatsLoading: d.isLoading,
|
|
706
706
|
beats: T,
|
|
707
|
-
endpoint:
|
|
707
|
+
endpoint: l,
|
|
708
708
|
logOutUser: p,
|
|
709
709
|
onCardClick: E,
|
|
710
710
|
showBorder: !0,
|
|
@@ -713,7 +713,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
713
713
|
showHeader: r,
|
|
714
714
|
showIcon: !0,
|
|
715
715
|
showWithMargin: !1,
|
|
716
|
-
token:
|
|
716
|
+
token: c,
|
|
717
717
|
useDarkMode: b,
|
|
718
718
|
userHasFullInsightFeedBeats: !1,
|
|
719
719
|
variant: "outlined",
|
|
@@ -754,12 +754,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
754
754
|
}
|
|
755
755
|
) });
|
|
756
756
|
}), Ut = M(({ onClose: n }) => {
|
|
757
|
-
const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions:
|
|
757
|
+
const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: l } = ae(), [c, m] = i.useState(null);
|
|
758
758
|
if (!h)
|
|
759
759
|
return null;
|
|
760
760
|
const { guid: C, name: u, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Et(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
|
-
() =>
|
|
762
|
-
[
|
|
761
|
+
() => l.find((D) => D.guid === c),
|
|
762
|
+
[c, l]
|
|
763
763
|
), I = (D) => D.category_guid === C || D.top_level_category_guid === C, k = () => {
|
|
764
764
|
n?.(), t(y.TRENDS_CLICK_BACK, A);
|
|
765
765
|
};
|
|
@@ -818,12 +818,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
818
818
|
}, Zt = (n, o) => {
|
|
819
819
|
const [t, s] = n, a = t, h = s ?? t, d = [];
|
|
820
820
|
if (a) {
|
|
821
|
-
const
|
|
822
|
-
d.push({ label: o.income_label, amount:
|
|
821
|
+
const l = a.reduce((c, m) => c + m.y, 0);
|
|
822
|
+
d.push({ label: o.income_label, amount: l });
|
|
823
823
|
}
|
|
824
824
|
if (h) {
|
|
825
|
-
const
|
|
826
|
-
d.push({ label: o.spending_label, amount:
|
|
825
|
+
const l = h.reduce((c, m) => c + m.y, 0);
|
|
826
|
+
d.push({ label: o.spending_label, amount: l });
|
|
827
827
|
}
|
|
828
828
|
return d;
|
|
829
829
|
}, Qt = ({
|
|
@@ -832,7 +832,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
832
832
|
selectedDateRange: t,
|
|
833
833
|
totals: s
|
|
834
834
|
}) => {
|
|
835
|
-
const a = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile:
|
|
835
|
+
const a = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: m, isTablet: C } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = Xt(s, t), r = Zt(b, d), [g, T] = i.useState(0), p = 458, E = 195, w = 56, I = c || l ? E : m || C ? p : g;
|
|
836
836
|
return i.useEffect(() => {
|
|
837
837
|
const D = Math.max(n - w, o);
|
|
838
838
|
T(D);
|
|
@@ -860,19 +860,20 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
860
860
|
}
|
|
861
861
|
);
|
|
862
862
|
}, qt = M(Qt), Jt = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
|
|
863
|
-
const { onEvent: s } = H(), { config: a } = nt(), { isLargeDesktop: h, isDesktop: d, isMobile:
|
|
863
|
+
const { onEvent: s } = H(), { config: a } = nt(), { isLargeDesktop: h, isDesktop: d, isMobile: l } = K(), { visibleAccounts: c } = ie(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ae(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
|
|
864
864
|
isCopyLoaded: p,
|
|
865
865
|
isInitialized: E,
|
|
866
866
|
selectedAccounts: w,
|
|
867
867
|
selectedAccountGuids: I,
|
|
868
868
|
setSelectedAccounts: k
|
|
869
|
-
} = P(), { trends: D } = R(), N = je(),
|
|
869
|
+
} = P(), { trends: D } = R(), N = je(), x = d || h, [L, $] = i.useState(!1), [z, ce] = i.useState("Chart"), [J, ee] = i.useState(""), [te, ne] = i.useState(!1), [oe, le] = i.useState(window.innerHeight), se = oe - 208, de = oe - (N ? 494 : 266);
|
|
870
870
|
i.useEffect(() => {
|
|
871
|
+
console.log("accounts: ", c);
|
|
871
872
|
const v = () => le(window.innerHeight);
|
|
872
873
|
return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
|
|
873
874
|
}, []), i.useEffect(() => {
|
|
874
|
-
k(
|
|
875
|
-
}, [
|
|
875
|
+
k(c);
|
|
876
|
+
}, [c]), i.useEffect(() => {
|
|
876
877
|
E && m(w, r.start, r.end).then(() => {
|
|
877
878
|
C(
|
|
878
879
|
w,
|
|
@@ -924,24 +925,23 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
924
925
|
}, ge = () => {
|
|
925
926
|
ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
|
|
926
927
|
}, Ge = a.show_connections_widget_in_master ? "buttons" : "no-buttons";
|
|
927
|
-
return /* @__PURE__ */ f(
|
|
928
|
+
return !p || !L ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
|
|
928
929
|
Ae,
|
|
929
930
|
{
|
|
930
|
-
accountOptions:
|
|
931
|
+
accountOptions: c,
|
|
931
932
|
calendarActions: { onRangeChanged: S },
|
|
932
933
|
dateRange: r,
|
|
933
|
-
dateRangeVariant:
|
|
934
|
+
dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
|
|
934
935
|
onAccountsFilterClick: W,
|
|
935
936
|
onBackClick: n,
|
|
936
937
|
sx: t,
|
|
937
938
|
title: D.title,
|
|
938
939
|
children: [
|
|
939
|
-
|
|
940
|
-
l && /* @__PURE__ */ f(
|
|
940
|
+
c && L && /* @__PURE__ */ f(
|
|
941
941
|
_,
|
|
942
942
|
{
|
|
943
943
|
sx: {
|
|
944
|
-
px:
|
|
944
|
+
px: l ? 0 : 48
|
|
945
945
|
},
|
|
946
946
|
children: [
|
|
947
947
|
/* @__PURE__ */ f(
|
|
@@ -949,7 +949,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
949
949
|
{
|
|
950
950
|
flexDirection: "row",
|
|
951
951
|
justifyContent: "space-between",
|
|
952
|
-
sx: { pb:
|
|
952
|
+
sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
|
|
953
953
|
children: [
|
|
954
954
|
/* @__PURE__ */ e(
|
|
955
955
|
Oe,
|
|
@@ -966,9 +966,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
966
966
|
/* @__PURE__ */ e(re, { name: "arrow_back" }),
|
|
967
967
|
D.all_categories
|
|
968
968
|
] }) }) }),
|
|
969
|
-
/* @__PURE__ */ f(_, { flexDirection:
|
|
969
|
+
/* @__PURE__ */ f(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
|
|
970
970
|
z === "Chart" && /* @__PURE__ */ f(ze, { children: [
|
|
971
|
-
/* @__PURE__ */ e(O, { sx: { width:
|
|
971
|
+
/* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
|
|
972
972
|
qt,
|
|
973
973
|
{
|
|
974
974
|
availableHeight: se,
|
|
@@ -977,7 +977,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
977
977
|
totals: u
|
|
978
978
|
}
|
|
979
979
|
) }),
|
|
980
|
-
/* @__PURE__ */ f(_, { gap: 16, sx: { width:
|
|
980
|
+
/* @__PURE__ */ f(_, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
|
|
981
981
|
N && /* @__PURE__ */ e(jt, { onInsightCardClick: o }),
|
|
982
982
|
/* @__PURE__ */ e(
|
|
983
983
|
Pt,
|
|
@@ -1003,7 +1003,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
|
|
|
1003
1003
|
]
|
|
1004
1004
|
}
|
|
1005
1005
|
),
|
|
1006
|
-
|
|
1006
|
+
c === void 0 && /* @__PURE__ */ e(
|
|
1007
1007
|
xt,
|
|
1008
1008
|
{
|
|
1009
1009
|
header: D.zero_state_content_header,
|