From 0aa6a057b1626c4b9ff60f2c6a516ee42a389584 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Fri, 3 May 2024 20:32:37 +0100
Subject: [PATCH] Custom Reports changes (#2677)
* adjustments
* notes
* scroll height
* lint fix
* compact scrollbar
* fixes
* filters fix
* scrollbar color
* fix week ranges
---
.../src/components/reports/ReportOptions.ts | 7 ++--
.../src/components/reports/ReportSidebar.jsx | 40 +++++++++----------
.../graphs/tableGraph/ReportTableTotals.tsx | 8 ++++
.../src/components/reports/reportRanges.ts | 3 +-
.../reports/reports/CustomReport.jsx | 11 ++---
.../spreadsheets/custom-spreadsheet.ts | 19 +++------
.../spreadsheets/grouped-spreadsheet.ts | 10 +----
packages/desktop-client/src/style/styles.ts | 15 +++++++
packages/loot-core/src/shared/months.ts | 3 +-
upcoming-release-notes/2677.md | 6 +++
10 files changed, 67 insertions(+), 55 deletions(-)
create mode 100644 upcoming-release-notes/2677.md
diff --git a/packages/desktop-client/src/components/reports/ReportOptions.ts b/packages/desktop-client/src/components/reports/ReportOptions.ts
index 4f58c81de..acad7f742 100644
--- a/packages/desktop-client/src/components/reports/ReportOptions.ts
+++ b/packages/desktop-client/src/components/reports/ReportOptions.ts
@@ -136,20 +136,21 @@ const intervalOptions = [
{
description: 'Daily',
name: 'Day',
- format: 'yyyy-MM-dd',
+ format: 'yy-MM-dd',
range: 'dayRangeInclusive',
},
{
description: 'Weekly',
name: 'Week',
- format: 'yyyy-MM-dd',
+ format: 'yy-MM-dd',
range: 'weekRangeInclusive',
},
//{ value: 3, description: 'Fortnightly', name: 3},
{
description: 'Monthly',
name: 'Month',
- format: 'MMMM, yyyy',
+ // eslint-disable-next-line rulesdir/typography
+ format: "MMM ''yy",
range: 'rangeInclusive',
},
{
diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.jsx b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
index e48fb0be5..23f949a4a 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.jsx
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
@@ -431,28 +431,26 @@ export function ReportSidebar({
}}
/>
</View>
- {['Category', 'Group'].includes(customReportItems.groupBy) && (
- <View
- style={{
- marginTop: 10,
- minHeight: 200,
+ <View
+ style={{
+ marginTop: 10,
+ minHeight: 200,
+ }}
+ >
+ <CategorySelector
+ categoryGroups={categories.grouped.filter(f => {
+ return customReportItems.showHiddenCategories || !f.hidden
+ ? true
+ : false;
+ })}
+ selectedCategories={customReportItems.selectedCategories}
+ setSelectedCategories={e => {
+ setSelectedCategories(e);
+ onReportChange({ type: 'modify' });
}}
- >
- <CategorySelector
- categoryGroups={categories.grouped.filter(f => {
- return customReportItems.showHiddenCategories || !f.hidden
- ? true
- : false;
- })}
- selectedCategories={customReportItems.selectedCategories}
- setSelectedCategories={e => {
- setSelectedCategories(e);
- onReportChange({ type: 'modify' });
- }}
- showHiddenCategories={customReportItems.showHiddenCategories}
- />
- </View>
- )}
+ showHiddenCategories={customReportItems.showHiddenCategories}
+ />
+ </View>
</View>
);
}
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
index d47cf0253..8cae27600 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
@@ -10,6 +10,7 @@ import {
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
import { theme } from '../../../../style';
+import { styles } from '../../../../style/styles';
import { type CSSProperties } from '../../../../style/types';
import { View } from '../../../common/View';
import { Row, Cell } from '../../../table';
@@ -72,6 +73,13 @@ export function ReportTableTotals({
id="total"
style={{
overflowX: 'auto',
+ scrollbarWidth: compact ? 'none' : 'inherit',
+ ...styles.horizontalScrollbar,
+ '::-webkit-scrollbar': {
+ backgroundColor: theme.tableBackground,
+ height: 12,
+ dispaly: compact && 'none',
+ },
flexDirection: 'row',
flex: 1,
}}
diff --git a/packages/desktop-client/src/components/reports/reportRanges.ts b/packages/desktop-client/src/components/reports/reportRanges.ts
index 8c6326cab..0acf4d42b 100644
--- a/packages/desktop-client/src/components/reports/reportRanges.ts
+++ b/packages/desktop-client/src/components/reports/reportRanges.ts
@@ -134,6 +134,7 @@ export function getSpecificRange(
firstDayOfWeekIdx?: LocalPrefs['firstDayOfWeekIdx'],
) {
const currentDay = monthUtils.currentDay();
+ const currentWeek = monthUtils.currentWeek(firstDayOfWeekIdx);
let dateStart = monthUtils.subMonths(currentDay, offset) + '-01';
let dateEnd = monthUtils.getMonthEnd(
@@ -142,7 +143,7 @@ export function getSpecificRange(
);
if (type === 'Weeks') {
- dateStart = monthUtils.subWeeks(currentDay, offset);
+ dateStart = monthUtils.subWeeks(currentWeek, offset);
dateEnd = monthUtils.getWeekEnd(
monthUtils.addWeeks(dateStart, addNumber === null ? offset : addNumber),
firstDayOfWeekIdx,
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
index b6cb2fa39..cc375de1d 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
@@ -121,6 +121,7 @@ export function CustomReport() {
useEffect(() => {
async function run() {
+ onApplyFilter(null);
report.conditions.forEach(condition => onApplyFilter(condition));
const trans = await send('get-earliest-transaction');
setEarliestTransaction(trans ? trans.date : monthUtils.currentDay());
@@ -164,16 +165,10 @@ export function CustomReport() {
}, [interval]);
useEffect(() => {
- const format =
- ReportOptions.intervalMap.get(interval).toLowerCase() + 'FromDate';
-
- const dateStart = monthUtils[format](startDate);
- const dateEnd = monthUtils[format](endDate);
-
const rangeProps =
interval === 'Weekly'
- ? [dateStart, dateEnd, firstDayOfWeekIdx]
- : [dateStart, dateEnd];
+ ? [startDate, endDate, firstDayOfWeekIdx]
+ : [startDate, endDate];
setIntervals(
monthUtils[ReportOptions.intervalRange.get(interval)](...rangeProps),
);
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts b/packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts
index 860efbc07..e40e32b65 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts
@@ -143,16 +143,10 @@ export function createCustomSpreadsheet({
});
}
- const format =
- ReportOptions.intervalMap.get(interval).toLowerCase() + 'FromDate';
const rangeProps =
interval === 'Weekly'
- ? [
- monthUtils[format](startDate),
- monthUtils[format](endDate),
- firstDayOfWeekIdx,
- ]
- : [monthUtils[format](startDate), monthUtils[format](endDate)];
+ ? [startDate, endDate, firstDayOfWeekIdx]
+ : [startDate, endDate];
const intervals = monthUtils[ReportOptions.intervalRange.get(interval)](
...rangeProps,
);
@@ -214,11 +208,10 @@ export function createCustomSpreadsheet({
totalDebts += perIntervalDebts;
arr.push({
- date:
- interval === 'Monthly'
- ? // eslint-disable-next-line rulesdir/typography
- d.format(d.parseISO(`${intervalItem}-01`), "MMM ''yy")
- : intervalItem,
+ date: d.format(
+ d.parseISO(intervalItem),
+ ReportOptions.intervalFormat.get(interval),
+ ),
...stacked,
dateStart: intervalItem,
totalDebts: integerToAmount(perIntervalDebts),
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
index da794cdfe..591cb81cf 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
@@ -92,16 +92,10 @@ export function createGroupedSpreadsheet({
});
}
- const format =
- ReportOptions.intervalMap.get(interval).toLowerCase() + 'FromDate';
const rangeProps =
interval === 'Weekly'
- ? [
- monthUtils[format](startDate),
- monthUtils[format](endDate),
- firstDayOfWeekIdx,
- ]
- : [monthUtils[format](startDate), monthUtils[format](endDate)];
+ ? [startDate, endDate, firstDayOfWeekIdx]
+ : [startDate, endDate];
const intervals = monthUtils[ReportOptions.intervalRange.get(interval)](
...rangeProps,
);
diff --git a/packages/desktop-client/src/style/styles.ts b/packages/desktop-client/src/style/styles.ts
index e7c8e1794..e630ac4f4 100644
--- a/packages/desktop-client/src/style/styles.ts
+++ b/packages/desktop-client/src/style/styles.ts
@@ -139,6 +139,7 @@ export const styles = {
overflow: 'auto',
},
// Dynamically set
+ horizontalScrollbar: null as CSSProperties | null,
lightScrollbar: null as CSSProperties | null,
darkScrollbar: null as CSSProperties | null,
scrollbarWidth: null as number | null,
@@ -151,6 +152,20 @@ let hiddenScrollbars = false;
// lightScrollbar => primary
// darkScrollbar => secondary
function onScrollbarChange() {
+ styles.horizontalScrollbar = !hiddenScrollbars && {
+ '::-webkit-scrollbar': {
+ backgroundColor: 'inherit',
+ height: 12,
+ },
+ '::-webkit-scrollbar-thumb': {
+ width: 7,
+ borderRadius: 30,
+ backgroundClip: 'padding-box',
+ border: '2px solid rgba(0, 0, 0, 0)',
+ backgroundColor: '#d0d0d0',
+ },
+ };
+
styles.lightScrollbar = !hiddenScrollbars && {
'& ::-webkit-scrollbar': {
width: 11,
diff --git a/packages/loot-core/src/shared/months.ts b/packages/loot-core/src/shared/months.ts
index 6be72eddc..482843466 100644
--- a/packages/loot-core/src/shared/months.ts
+++ b/packages/loot-core/src/shared/months.ts
@@ -256,7 +256,8 @@ export function _weekRange(
): string[] {
const weeks: string[] = [];
let week = weekFromDate(start, firstDayOfWeekIdx);
- while (d.isBefore(_parse(week), _parse(end))) {
+ const endWeek = weekFromDate(end, firstDayOfWeekIdx);
+ while (d.isBefore(_parse(week), _parse(endWeek))) {
weeks.push(week);
week = addWeeks(week, 1);
}
diff --git a/upcoming-release-notes/2677.md b/upcoming-release-notes/2677.md
new file mode 100644
index 000000000..db2ea4278
--- /dev/null
+++ b/upcoming-release-notes/2677.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Fixing small visual issues with custom reports.
--
GitLab