From 4ada92071eb5e3454e6ab47275ea8bcc75cf1211 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Tue, 12 Dec 2023 19:34:58 +0000
Subject: [PATCH] Custom Reports typescript updates and small functional
changes (#2046)
* work
* notes
* error fixes
* updates
* card fix
* fix filters
* fixes
---
.../src/components/reports/ChooseGraph.tsx | 17 ++-
.../src/components/reports/ModeButton.tsx | 39 +++++
.../src/components/reports/ReportLegend.tsx | 70 +++++++++
.../src/components/reports/ReportSidebar.js | 28 +---
.../{ReportSummary.js => ReportSummary.tsx} | 144 ++++++------------
.../components/reports/graphs/BarGraph.tsx | 2 +-
.../reports/reports/CustomReport.js | 17 +--
.../spreadsheets/cash-flow-spreadsheet.tsx | 2 +-
.../reports/spreadsheets/makeQuery.ts | 2 +-
.../spreadsheets/net-worth-spreadsheet.tsx | 2 +-
upcoming-release-notes/2046.md | 6 +
11 files changed, 180 insertions(+), 149 deletions(-)
create mode 100644 packages/desktop-client/src/components/reports/ModeButton.tsx
create mode 100644 packages/desktop-client/src/components/reports/ReportLegend.tsx
rename packages/desktop-client/src/components/reports/{ReportSummary.js => ReportSummary.tsx} (53%)
create mode 100644 upcoming-release-notes/2046.md
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index ad71b87a1..0c8825046 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -26,7 +26,8 @@ type ChooseGraphProps = {
setScrollWidth: (value: number) => void;
months: Month[];
};
-export function ChooseGraph({
+
+function ChooseGraph({
data,
mode,
graphType,
@@ -37,6 +38,8 @@ export function ChooseGraph({
setScrollWidth,
months,
}: ChooseGraphProps) {
+ const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
+
const saveScrollWidth = value => {
setScrollWidth(!value ? 0 : value);
};
@@ -55,7 +58,7 @@ export function ChooseGraph({
<AreaGraph
style={{ flexGrow: 1 }}
data={data}
- balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+ balanceTypeOp={balanceTypeOp}
/>
);
}
@@ -65,7 +68,7 @@ export function ChooseGraph({
style={{ flexGrow: 1 }}
data={data}
groupBy={groupBy}
- balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+ balanceTypeOp={balanceTypeOp}
/>
);
}
@@ -78,7 +81,7 @@ export function ChooseGraph({
style={{ flexGrow: 1 }}
data={data}
groupBy={groupBy}
- balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+ balanceTypeOp={balanceTypeOp}
/>
);
}
@@ -106,7 +109,7 @@ export function ChooseGraph({
data={data}
empty={showEmpty}
monthsCount={months.length}
- balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+ balanceTypeOp={balanceTypeOp}
mode={mode}
groupBy={groupBy}
/>
@@ -117,10 +120,12 @@ export function ChooseGraph({
scrollWidth={scrollWidth}
data={data}
mode={mode}
- balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+ balanceTypeOp={balanceTypeOp}
monthsCount={months.length}
/>
</View>
);
}
}
+
+export default ChooseGraph;
diff --git a/packages/desktop-client/src/components/reports/ModeButton.tsx b/packages/desktop-client/src/components/reports/ModeButton.tsx
new file mode 100644
index 000000000..e0f216d84
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ModeButton.tsx
@@ -0,0 +1,39 @@
+import React, { type MouseEventHandler, type ReactNode } from 'react';
+
+import { type CSSProperties, theme } from '../../style';
+import Button from '../common/Button';
+
+type ModeButtonProps = {
+ selected: boolean;
+ children: ReactNode;
+ style: CSSProperties;
+ onSelect: MouseEventHandler<HTMLButtonElement>;
+};
+
+function ModeButton({ selected, children, style, onSelect }: ModeButtonProps) {
+ return (
+ <Button
+ type="bare"
+ style={{
+ padding: '5px 10px',
+ backgroundColor: theme.menuBackground,
+ marginRight: 5,
+ fontSize: 'inherit',
+ ...(selected && {
+ backgroundColor: theme.buttonPrimaryBackground,
+ color: theme.buttonPrimaryText,
+ ':hover': {
+ backgroundColor: theme.buttonPrimaryBackgroundHover,
+ color: theme.buttonPrimaryTextHover,
+ },
+ }),
+ ...style,
+ }}
+ onClick={onSelect}
+ >
+ {children}
+ </Button>
+ );
+}
+
+export default ModeButton;
diff --git a/packages/desktop-client/src/components/reports/ReportLegend.tsx b/packages/desktop-client/src/components/reports/ReportLegend.tsx
new file mode 100644
index 000000000..5f17f119d
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportLegend.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { theme, styles } from '../../style';
+import Text from '../common/Text';
+import View from '../common/View';
+
+type ReportLegendProps = {
+ legend: Array<{ name: string; color: string }>;
+ groupBy: string;
+};
+
+function ReportLegend({ legend, groupBy }: ReportLegendProps) {
+ return (
+ <View
+ style={{
+ backgroundColor: theme.pageBackground,
+ alignItems: 'center',
+ flex: 1,
+ overflowY: 'auto',
+ }}
+ >
+ <Text
+ style={{
+ ...styles.largeText,
+ alignItems: 'center',
+ marginBottom: 2,
+ fontWeight: 400,
+ paddingTop: 10,
+ }}
+ >
+ {groupBy}
+ </Text>
+ <View>
+ {legend.map(item => {
+ return (
+ <View
+ key={item.name}
+ style={{
+ padding: 10,
+ flexDirection: 'row',
+ alignItems: 'center',
+ }}
+ >
+ <View
+ style={{
+ marginRight: 5,
+ borderRadius: 1000,
+ width: 14,
+ height: 14,
+ backgroundColor: item.color,
+ }}
+ />
+ <Text
+ style={{
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ flexShrink: 0,
+ }}
+ >
+ {item.name}
+ </Text>
+ </View>
+ );
+ })}
+ </View>
+ </View>
+ );
+}
+
+export default ReportLegend;
diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.js b/packages/desktop-client/src/components/reports/ReportSidebar.js
index c95c79ad5..2c182b1ab 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.js
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.js
@@ -3,7 +3,6 @@ import React from 'react';
import * as monthUtils from 'loot-core/src/shared/months';
import { theme } from '../../style';
-import Button from '../common/Button';
import Select from '../common/Select';
import Text from '../common/Text';
import View from '../common/View';
@@ -17,34 +16,9 @@ import {
getFullRange,
validateRange,
} from './Header';
+import ModeButton from './ModeButton';
import { ReportOptions } from './ReportOptions';
-function ModeButton({ selected, children, style, onSelect }) {
- return (
- <Button
- type="bare"
- style={{
- padding: '5px 10px',
- backgroundColor: theme.menuBackground,
- marginRight: 5,
- fontSize: 'inherit',
- ...(selected && {
- backgroundColor: theme.buttonPrimaryBackground,
- color: theme.buttonPrimaryText,
- ':hover': {
- backgroundColor: theme.buttonPrimaryBackgroundHover,
- color: theme.buttonPrimaryTextHover,
- },
- }),
- ...style,
- }}
- onClick={onSelect}
- >
- {children}
- </Button>
- );
-}
-
export function ReportSidebar({
startDate,
endDate,
diff --git a/packages/desktop-client/src/components/reports/ReportSummary.js b/packages/desktop-client/src/components/reports/ReportSummary.tsx
similarity index 53%
rename from packages/desktop-client/src/components/reports/ReportSummary.js
rename to packages/desktop-client/src/components/reports/ReportSummary.tsx
index 892bab6f7..2a32dfc74 100644
--- a/packages/desktop-client/src/components/reports/ReportSummary.js
+++ b/packages/desktop-client/src/components/reports/ReportSummary.tsx
@@ -12,13 +12,23 @@ import Text from '../common/Text';
import View from '../common/View';
import PrivacyFilter from '../PrivacyFilter';
-export function ReportSummary({
+import { type DataEntity } from './entities';
+
+type ReportSummaryProps = {
+ startDate: string;
+ endDate: string;
+ data: DataEntity;
+ balanceTypeOp: string;
+ monthsCount: number;
+};
+
+function ReportSummary({
startDate,
endDate,
data,
balanceTypeOp,
monthsCount,
-}) {
+}: ReportSummaryProps) {
const net =
Math.abs(data.totalDebts) > Math.abs(data.totalAssets)
? 'PAYMENT'
@@ -40,14 +50,12 @@ export function ReportSummary({
}}
>
<Text
- style={[
- styles.largeText,
- {
- alignItems: 'center',
- marginBottom: 2,
- fontWeight: 600,
- },
- ]}
+ style={{
+ ...styles.largeText,
+ alignItems: 'center',
+ marginBottom: 2,
+ fontWeight: 600,
+ }}
>
{monthUtils.format(startDate, 'MMM yyyy')} -{' '}
{monthUtils.format(endDate, 'MMM yyyy')}
@@ -63,14 +71,12 @@ export function ReportSummary({
}}
>
<Text
- style={[
- styles.mediumText,
- {
- alignItems: 'center',
- marginBottom: 2,
- fontWeight: 400,
- },
- ]}
+ style={{
+ ...styles.mediumText,
+ alignItems: 'center',
+ marginBottom: 2,
+ fontWeight: 400,
+ }}
>
{balanceTypeOp === 'totalDebts'
? 'TOTAL SPENDING'
@@ -79,14 +85,12 @@ export function ReportSummary({
: 'NET ' + net}
</Text>
<Text
- style={[
- styles.veryLargeText,
- {
- alignItems: 'center',
- marginBottom: 2,
- fontWeight: 800,
- },
- ]}
+ style={{
+ ...styles.veryLargeText,
+ alignItems: 'center',
+ marginBottom: 2,
+ fontWeight: 800,
+ }}
>
<PrivacyFilter blurIntensity={7}>
{amountToCurrency(data[balanceTypeOp])}
@@ -104,14 +108,12 @@ export function ReportSummary({
}}
>
<Text
- style={[
- styles.mediumText,
- {
- alignItems: 'center',
- marginBottom: 2,
- fontWeight: 400,
- },
- ]}
+ style={{
+ ...styles.mediumText,
+ alignItems: 'center',
+ marginBottom: 2,
+ fontWeight: 400,
+ }}
>
{balanceTypeOp === 'totalDebts'
? 'AVERAGE SPENDING'
@@ -120,14 +122,12 @@ export function ReportSummary({
: 'AVERAGE NET'}
</Text>
<Text
- style={[
- styles.veryLargeText,
- {
- alignItems: 'center',
- marginBottom: 2,
- fontWeight: 800,
- },
- ]}
+ style={{
+ ...styles.veryLargeText,
+ alignItems: 'center',
+ marginBottom: 2,
+ fontWeight: 800,
+ }}
>
<PrivacyFilter blurIntensity={7}>
{integerToCurrency(Math.round(average))}
@@ -139,62 +139,4 @@ export function ReportSummary({
);
}
-export function ReportLegend({ data, legend, groupBy }) {
- return (
- <View
- style={{
- backgroundColor: theme.pageBackground,
- alignItems: 'center',
- flex: 1,
- overflowY: 'auto',
- }}
- >
- <Text
- style={[
- styles.largeText,
- {
- alignItems: 'center',
- marginBottom: 2,
- fontWeight: 400,
- paddingTop: 10,
- },
- ]}
- >
- {groupBy}
- </Text>
- <View>
- {legend.map(item => {
- return (
- <View
- key={item.name}
- style={{
- padding: 10,
- flexDirection: 'row',
- alignItems: 'center',
- }}
- >
- <View
- style={{
- marginRight: 5,
- borderRadius: 1000,
- width: 14,
- height: 14,
- backgroundColor: item.color,
- }}
- />
- <Text
- style={{
- whiteSpace: 'nowrap',
- textOverflow: 'ellipsis',
- flexShrink: 0,
- }}
- >
- {item.name}
- </Text>
- </View>
- );
- })}
- </View>
- </View>
- );
-}
+export default ReportSummary;
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index f46ecfda6..ca7c4d042 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -132,7 +132,7 @@ type BarGraphProps = {
style?: CSSProperties;
data: DataEntity;
groupBy: string;
- balanceTypeOp;
+ balanceTypeOp: string;
compact?: boolean;
};
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.js b/packages/desktop-client/src/components/reports/reports/CustomReport.js
index 55347a8e5..12b7f0705 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.js
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.js
@@ -17,12 +17,13 @@ import Text from '../../common/Text';
import View from '../../common/View';
import { AppliedFilters } from '../../filters/FiltersMenu';
import PrivacyFilter from '../../PrivacyFilter';
-import { ChooseGraph } from '../ChooseGraph';
+import ChooseGraph from '../ChooseGraph';
import Header from '../Header';
import LoadingIndicator from '../LoadingIndicator';
+import ReportLegend from '../ReportLegend';
import { ReportOptions } from '../ReportOptions';
import { ReportSidebar } from '../ReportSidebar';
-import { ReportLegend, ReportSummary } from '../ReportSummary';
+import ReportSummary from '../ReportSummary';
import { ReportTopbar } from '../ReportTopbar';
import defaultSpreadsheet from '../spreadsheets/default-spreadsheet';
import groupedSpreadsheet from '../spreadsheets/grouped-spreadsheet';
@@ -111,7 +112,7 @@ export default function CustomReport() {
endDate,
categories,
selectedCategories,
- filters,
+ conditions: filters,
conditionsOp,
showEmpty,
showOffBudgetHidden,
@@ -136,7 +137,7 @@ export default function CustomReport() {
endDate,
categories,
selectedCategories,
- filters,
+ conditions: filters,
conditionsOp,
showEmpty,
showOffBudgetHidden,
@@ -308,8 +309,6 @@ export default function CustomReport() {
{dataCheck ? (
<ChooseGraph
- startDate={startDate}
- endDate={endDate}
data={data}
mode={mode}
graphType={graphType}
@@ -345,11 +344,7 @@ export default function CustomReport() {
/>
)}
{viewLegend && (
- <ReportLegend
- data={data}
- legend={legend}
- groupBy={groupBy}
- />
+ <ReportLegend legend={legend} groupBy={groupBy} />
)}
</View>
)}
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx
index 20ae05ef9..5d874cb82 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx
+++ b/packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx
@@ -60,7 +60,7 @@ export function cashFlowByDate(
function makeQuery(where) {
const query = q('transactions')
.filter({
- [conditionsOpKey]: [...filters],
+ [conditionsOpKey]: filters,
})
.filter({
$and: [
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
index 2e61c3eb9..6d6ee2ca3 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/makeQuery.ts
@@ -49,7 +49,7 @@ function makeQuery(
)
//Apply filters and split by "Group By"
.filter({
- [conditionsOpKey]: [...filters],
+ [conditionsOpKey]: filters,
})
//Apply month range filters
.filter({
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx
index 4bc90d041..328f8354f 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx
+++ b/packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx
@@ -44,7 +44,7 @@ export default function createSpreadsheet(
runQuery(
q('transactions')
.filter({
- [conditionsOpKey]: [...filters],
+ [conditionsOpKey]: filters,
})
.filter({
account: acct.id,
diff --git a/upcoming-release-notes/2046.md b/upcoming-release-notes/2046.md
new file mode 100644
index 000000000..8ac334a1e
--- /dev/null
+++ b/upcoming-release-notes/2046.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Adding typescript to custom report files and small functional changes.
\ No newline at end of file
--
GitLab