From d49f907f538486d28b1ed002fb044c24cb38b16e Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Fri, 26 Apr 2024 08:59:16 +0100
Subject: [PATCH] Custom Reports Adjustments (#2659)
* monthly Spending
* Add Average
* notes
* title
* date filter
* TS fixes and hide average when no data
* fix average tooltip and relabel x-axis
* Wording/verbiage
* remove spending files
* adjustments
* reports.d revert
* revert filter changes
* adjust update filters
* notes
* remove old notes
* adjust style
* lint fixes
---
.../src/components/filters/AppliedFilters.tsx | 2 +-
.../src/components/filters/FilterExpression.tsx | 2 +-
.../src/components/filters/FiltersMenu.jsx | 12 +++++++-----
.../src/components/filters/FiltersStack.tsx | 2 +-
.../components/reports/{Change.jsx => Change.tsx} | 13 +++++++++++--
.../src/components/reports/ModeButton.tsx | 2 +-
.../src/components/reports/ReportCard.tsx | 2 +-
.../src/components/reports/reports/CashFlowCard.jsx | 5 +----
.../src/components/reports/reports/NetWorthCard.jsx | 7 ++-----
.../reports/spreadsheets/custom-spreadsheet.ts | 2 --
.../reports/spreadsheets/grouped-spreadsheet.ts | 2 --
.../components/reports/spreadsheets/makeQuery.ts | 4 ++--
packages/desktop-client/src/style/themes/dark.ts | 1 +
.../desktop-client/src/style/themes/development.ts | 2 ++
packages/desktop-client/src/style/themes/light.ts | 1 +
.../desktop-client/src/style/themes/midnight.ts | 2 ++
packages/loot-core/src/shared/months.ts | 4 ++++
upcoming-release-notes/2659.md | 6 ++++++
18 files changed, 44 insertions(+), 27 deletions(-)
rename packages/desktop-client/src/components/reports/{Change.jsx => Change.tsx} (58%)
create mode 100644 upcoming-release-notes/2659.md
diff --git a/packages/desktop-client/src/components/filters/AppliedFilters.tsx b/packages/desktop-client/src/components/filters/AppliedFilters.tsx
index 930d31927..538bdd72b 100644
--- a/packages/desktop-client/src/components/filters/AppliedFilters.tsx
+++ b/packages/desktop-client/src/components/filters/AppliedFilters.tsx
@@ -12,7 +12,7 @@ type AppliedFiltersProps = {
onUpdate: (
filter: RuleConditionEntity,
newFilter: RuleConditionEntity,
- ) => RuleConditionEntity;
+ ) => void;
onDelete: (filter: RuleConditionEntity) => void;
conditionsOp: string;
onCondOpChange: (value: string, filters: RuleConditionEntity[]) => void;
diff --git a/packages/desktop-client/src/components/filters/FilterExpression.tsx b/packages/desktop-client/src/components/filters/FilterExpression.tsx
index 08bb15645..5a258e951 100644
--- a/packages/desktop-client/src/components/filters/FilterExpression.tsx
+++ b/packages/desktop-client/src/components/filters/FilterExpression.tsx
@@ -24,7 +24,7 @@ type FilterExpressionProps = {
value: string | string[] | number | boolean | undefined;
options: RuleConditionEntity['options'];
style?: CSSProperties;
- onChange: (cond: RuleConditionEntity) => RuleConditionEntity;
+ onChange: (cond: RuleConditionEntity) => void;
onDelete: () => void;
};
diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.jsx b/packages/desktop-client/src/components/filters/FiltersMenu.jsx
index 18889c515..db8459deb 100644
--- a/packages/desktop-client/src/components/filters/FiltersMenu.jsx
+++ b/packages/desktop-client/src/components/filters/FiltersMenu.jsx
@@ -243,7 +243,7 @@ function ConfigureField({
);
}
-export function FilterButton({ onApply, compact, hover }) {
+export function FilterButton({ onApply, compact, hover, exclude }) {
const filters = useFilters();
const dateFormat = useDateFormat() || 'MM/dd/yyyy';
@@ -359,10 +359,12 @@ export function FilterButton({ onApply, compact, hover }) {
onMenuSelect={name => {
dispatch({ type: 'configure', field: name });
}}
- items={filterFields.map(([name, text]) => ({
- name,
- text: titleFirst(text),
- }))}
+ items={filterFields
+ .filter(f => (exclude ? !exclude.includes(f[0]) : true))
+ .map(([name, text]) => ({
+ name,
+ text: titleFirst(text),
+ }))}
/>
</Tooltip>
)}
diff --git a/packages/desktop-client/src/components/filters/FiltersStack.tsx b/packages/desktop-client/src/components/filters/FiltersStack.tsx
index 055fd110c..3d050ec44 100644
--- a/packages/desktop-client/src/components/filters/FiltersStack.tsx
+++ b/packages/desktop-client/src/components/filters/FiltersStack.tsx
@@ -27,7 +27,7 @@ export function FiltersStack({
onUpdateFilter: (
filter: RuleConditionEntity,
newFilter: RuleConditionEntity,
- ) => RuleConditionEntity;
+ ) => void;
onDeleteFilter: (filter: RuleConditionEntity) => void;
onClearFilters: () => void;
onReloadSavedFilter: (savedFilter: SavedFilter, value?: string) => void;
diff --git a/packages/desktop-client/src/components/reports/Change.jsx b/packages/desktop-client/src/components/reports/Change.tsx
similarity index 58%
rename from packages/desktop-client/src/components/reports/Change.jsx
rename to packages/desktop-client/src/components/reports/Change.tsx
index 5267b2c77..8c4c429e7 100644
--- a/packages/desktop-client/src/components/reports/Change.jsx
+++ b/packages/desktop-client/src/components/reports/Change.tsx
@@ -2,15 +2,24 @@ import React from 'react';
import { integerToCurrency } from 'loot-core/src/shared/util';
-import { theme, styles } from '../../style';
+import { styles } from '../../style/styles';
+import { theme } from '../../style/theme';
+import { type CSSProperties } from '../../style/types';
import { Block } from '../common/Block';
-export function Change({ amount }) {
+export function Change({
+ amount,
+ style,
+}: {
+ amount: number;
+ style?: CSSProperties;
+}) {
return (
<Block
style={{
...styles.smallText,
color: amount < 0 ? theme.errorText : theme.noticeTextLight,
+ ...style,
}}
>
{amount >= 0 ? '+' : ''}
diff --git a/packages/desktop-client/src/components/reports/ModeButton.tsx b/packages/desktop-client/src/components/reports/ModeButton.tsx
index 70b00bef7..503d9692e 100644
--- a/packages/desktop-client/src/components/reports/ModeButton.tsx
+++ b/packages/desktop-client/src/components/reports/ModeButton.tsx
@@ -6,7 +6,7 @@ import { Button } from '../common/Button';
type ModeButtonProps = {
selected: boolean;
children: ReactNode;
- style: CSSProperties;
+ style?: CSSProperties;
onSelect: MouseEventHandler<HTMLButtonElement>;
};
diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx
index 41278b394..fb69523ab 100644
--- a/packages/desktop-client/src/components/reports/ReportCard.tsx
+++ b/packages/desktop-client/src/components/reports/ReportCard.tsx
@@ -8,8 +8,8 @@ import { View } from '../common/View';
type ReportCardProps = {
to: string;
- report: CustomReportEntity;
children: ReactNode;
+ report?: CustomReportEntity;
flex?: string;
style?: CSSProperties;
};
diff --git a/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx b/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
index ed8daeb6a..a5984b82c 100644
--- a/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
+++ b/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
@@ -102,10 +102,7 @@ export function CashFlowCard() {
{data && (
<View style={{ textAlign: 'right' }}>
<PrivacyFilter activationFilters={[!isCardHovered]}>
- <Change
- amount={income - expenses}
- style={{ color: theme.tableText, fontWeight: 300 }}
- />
+ <Change amount={income - expenses} />
</PrivacyFilter>
</View>
)}
diff --git a/packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx b/packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx
index 3b2963bd4..dc0ca1964 100644
--- a/packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx
+++ b/packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx
@@ -3,7 +3,7 @@ import React, { useState, useMemo, useCallback } from 'react';
import * as monthUtils from 'loot-core/src/shared/months';
import { integerToCurrency } from 'loot-core/src/shared/util';
-import { theme, styles } from '../../../style';
+import { styles } from '../../../style';
import { Block } from '../../common/Block';
import { View } from '../../common/View';
import { PrivacyFilter } from '../../PrivacyFilter';
@@ -59,10 +59,7 @@ export function NetWorthCard({ accounts }) {
</PrivacyFilter>
</Block>
<PrivacyFilter activationFilters={[!isCardHovered]}>
- <Change
- amount={data.totalChange}
- style={{ color: theme.tableText, fontWeight: 300 }}
- />
+ <Change amount={data.totalChange} />
</PrivacyFilter>
</View>
)}
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 1f4569ccc..860efbc07 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts
@@ -110,7 +110,6 @@ export function createCustomSpreadsheet({
startDate,
endDate,
interval,
- selectedCategories,
categoryFilter,
conditionsOpKey,
filters,
@@ -122,7 +121,6 @@ export function createCustomSpreadsheet({
startDate,
endDate,
interval,
- selectedCategories,
categoryFilter,
conditionsOpKey,
filters,
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 b473e5577..da794cdfe 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
@@ -59,7 +59,6 @@ export function createGroupedSpreadsheet({
startDate,
endDate,
interval,
- selectedCategories,
categoryFilter,
conditionsOpKey,
filters,
@@ -71,7 +70,6 @@ export function createGroupedSpreadsheet({
startDate,
endDate,
interval,
- selectedCategories,
categoryFilter,
conditionsOpKey,
filters,
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
index 986738eae..f72964f35 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
@@ -8,7 +8,6 @@ export function makeQuery(
startDate: string,
endDate: string,
interval: string,
- selectedCategories: CategoryEntity[],
categoryFilter: CategoryEntity[],
conditionsOpKey: string,
filters: unknown[],
@@ -27,7 +26,7 @@ export function makeQuery(
const query = q('transactions')
//Apply Category_Selector
.filter(
- selectedCategories && {
+ categoryFilter && {
$or: [
{
category: null,
@@ -66,6 +65,7 @@ export function makeQuery(
{ date: intervalGroup },
{ category: { $id: '$category.id' } },
{ categoryHidden: { $id: '$category.hidden' } },
+ { categoryIncome: { $id: '$category.is_income' } },
{ categoryGroup: { $id: '$category.group.id' } },
{ categoryGroupHidden: { $id: '$category.group.hidden' } },
{ account: { $id: '$account.id' } },
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 185b042e4..d580e723a 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -188,5 +188,6 @@ export const pillBorderSelected = colorPalette.purple400;
export const reportsRed = colorPalette.red300;
export const reportsBlue = colorPalette.blue400;
+export const reportsGreen = colorPalette.green400;
export const reportsLabel = pageText;
export const reportsInnerLabel = colorPalette.navy800;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index c8a47c85e..c4f71d3df 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -187,4 +187,6 @@ export const pillBorderSelected = colorPalette.purple500;
export const reportsRed = colorPalette.red300;
export const reportsBlue = colorPalette.blue400;
+export const reportsGreen = colorPalette.green400;
export const reportsLabel = colorPalette.navy900;
+export const reportsInnerLabel = colorPalette.navy800;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index 37549803d..294122cf3 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -190,5 +190,6 @@ export const pillBorderSelected = colorPalette.purple500;
export const reportsRed = colorPalette.red300;
export const reportsBlue = colorPalette.blue400;
+export const reportsGreen = colorPalette.green400;
export const reportsLabel = colorPalette.navy900;
export const reportsInnerLabel = colorPalette.navy800;
diff --git a/packages/desktop-client/src/style/themes/midnight.ts b/packages/desktop-client/src/style/themes/midnight.ts
index 135194af8..9a6fc4fbe 100644
--- a/packages/desktop-client/src/style/themes/midnight.ts
+++ b/packages/desktop-client/src/style/themes/midnight.ts
@@ -190,4 +190,6 @@ export const pillBorderSelected = colorPalette.purple300;
export const reportsRed = colorPalette.red300;
export const reportsBlue = colorPalette.blue400;
+export const reportsGreen = colorPalette.green400;
export const reportsLabel = pageText;
+export const reportsInnerLabel = colorPalette.navy800;
diff --git a/packages/loot-core/src/shared/months.ts b/packages/loot-core/src/shared/months.ts
index 634324780..6be72eddc 100644
--- a/packages/loot-core/src/shared/months.ts
+++ b/packages/loot-core/src/shared/months.ts
@@ -347,6 +347,10 @@ export function getMonth(day: string): string {
return day.slice(0, 7);
}
+export function getDay(day: string): number {
+ return Number(d.format(_parse(day), 'dd'));
+}
+
export function getMonthEnd(day: string): string {
return subDays(nextMonth(day.slice(0, 7)) + '-01', 1);
}
diff --git a/upcoming-release-notes/2659.md b/upcoming-release-notes/2659.md
new file mode 100644
index 000000000..a509cc689
--- /dev/null
+++ b/upcoming-release-notes/2659.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Some slight adjustments to tidy up the code and make it work better. Some TS updates as well.
--
GitLab