diff --git a/packages/desktop-client/src/components/reports/CashFlow.js b/packages/desktop-client/src/components/reports/CashFlow.js
index b2ed9fc035deb56351012dd18debd2d28e600535..662dc28103ffb4f329f86e0583e8296b322083d0 100644
--- a/packages/desktop-client/src/components/reports/CashFlow.js
+++ b/packages/desktop-client/src/components/reports/CashFlow.js
@@ -13,6 +13,7 @@ import Block from '../common/Block';
import Paragraph from '../common/Paragraph';
import Text from '../common/Text';
import View from '../common/View';
+import PrivacyFilter from '../PrivacyFilter';
import Change from './Change';
import { cashFlowByDate } from './graphs/cash-flow-spreadsheet';
@@ -132,7 +133,7 @@ function CashFlow() {
left={<Block>Income:</Block>}
right={
<Text style={{ fontWeight: 600 }}>
- {integerToCurrency(totalIncome)}
+ <PrivacyFilter>{integerToCurrency(totalIncome)}</PrivacyFilter>
</Text>
}
/>
@@ -142,7 +143,9 @@ function CashFlow() {
left={<Block>Expenses:</Block>}
right={
<Text style={{ fontWeight: 600 }}>
- {integerToCurrency(totalExpenses)}
+ <PrivacyFilter>
+ {integerToCurrency(totalExpenses)}
+ </PrivacyFilter>
</Text>
}
/>
@@ -152,12 +155,16 @@ function CashFlow() {
left={<Block>Transfers:</Block>}
right={
<Text style={{ fontWeight: 600 }}>
- {integerToCurrency(totalTransfers)}
+ <PrivacyFilter>
+ {integerToCurrency(totalTransfers)}
+ </PrivacyFilter>
</Text>
}
/>
<Text style={{ fontWeight: 600 }}>
- <Change amount={totalIncome + totalExpenses + totalTransfers} />
+ <PrivacyFilter>
+ <Change amount={totalIncome + totalExpenses + totalTransfers} />
+ </PrivacyFilter>
</Text>
</View>
diff --git a/packages/desktop-client/src/components/reports/NetWorth.js b/packages/desktop-client/src/components/reports/NetWorth.js
index b1cb62127f986288c911d25193dbeb8716a96d04..8988cff786895ffe105a01298a7354943d3bf695 100644
--- a/packages/desktop-client/src/components/reports/NetWorth.js
+++ b/packages/desktop-client/src/components/reports/NetWorth.js
@@ -11,6 +11,7 @@ import useFilters from '../../hooks/useFilters';
import { styles } from '../../style';
import Paragraph from '../common/Paragraph';
import View from '../common/View';
+import PrivacyFilter from '../PrivacyFilter';
import Change from './Change';
import netWorthSpreadsheet from './graphs/net-worth-spreadsheet';
@@ -117,9 +118,13 @@ export default function NetWorth() {
<View
style={[styles.largeText, { fontWeight: 400, marginBottom: 5 }]}
>
- {integerToCurrency(data.netWorth)}
+ <PrivacyFilter blurIntensity={5}>
+ {integerToCurrency(data.netWorth)}
+ </PrivacyFilter>
</View>
- <Change amount={data.totalChange} />
+ <PrivacyFilter>
+ <Change amount={data.totalChange} />
+ </PrivacyFilter>
</View>
<NetWorthGraph start={start} end={end} graphData={data.graphData} />
diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
index 7b01ee811d344c0c455aafe9da5f2a49c7b4e247..b4e4a7ed8cee4f79bbec855f394c98faa47a3909 100644
--- a/packages/desktop-client/src/components/reports/Overview.js
+++ b/packages/desktop-client/src/components/reports/Overview.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import { VictoryBar, VictoryGroup, VictoryVoronoiContainer } from 'victory';
@@ -10,6 +10,7 @@ import { colors, styles } from '../../style';
import AnchorLink from '../common/AnchorLink';
import Block from '../common/Block';
import View from '../common/View';
+import PrivacyFilter from '../PrivacyFilter';
import Change from './Change';
import theme from './chart-theme';
@@ -61,6 +62,9 @@ function Card({ flex, to, style, children }) {
function NetWorthCard({ accounts }) {
const end = monthUtils.currentMonth();
const start = monthUtils.subMonths(end, 5);
+ const [isCardHovered, setIsCardHovered] = useState(false);
+ const onCardHover = useCallback(() => setIsCardHovered(true));
+ const onCardHoverEnd = useCallback(() => setIsCardHovered(false));
const params = useMemo(
() => netWorthSpreadsheet(start, end, accounts),
@@ -74,7 +78,11 @@ function NetWorthCard({ accounts }) {
return (
<Card flex={2} to="/reports/net-worth">
- <View style={{ flex: 1 }}>
+ <View
+ style={{ flex: 1 }}
+ onPointerEnter={onCardHover}
+ onPointerLeave={onCardHoverEnd}
+ >
<View style={{ flexDirection: 'row', padding: 20 }}>
<View style={{ flex: 1 }}>
<Block
@@ -89,12 +97,16 @@ function NetWorthCard({ accounts }) {
<Block
style={[styles.mediumText, { fontWeight: 500, marginBottom: 5 }]}
>
- {integerToCurrency(data.netWorth)}
+ <PrivacyFilter activationFilters={[!isCardHovered]}>
+ {integerToCurrency(data.netWorth)}
+ </PrivacyFilter>
</Block>
- <Change
- amount={data.totalChange}
- style={{ color: colors.n6, fontWeight: 300 }}
- />
+ <PrivacyFilter activationFilters={[!isCardHovered]}>
+ <Change
+ amount={data.totalChange}
+ style={{ color: colors.n6, fontWeight: 300 }}
+ />
+ </PrivacyFilter>
</View>
</View>
@@ -116,6 +128,10 @@ function CashFlowCard() {
const params = useMemo(() => simpleCashFlow(start, end), [start, end]);
const data = useReport('cash_flow_simple', params);
+ const [isCardHovered, setIsCardHovered] = useState(false);
+ const onCardHover = useCallback(() => setIsCardHovered(true));
+ const onCardHoverEnd = useCallback(() => setIsCardHovered(false));
+
if (!data) {
return null;
}
@@ -126,7 +142,11 @@ function CashFlowCard() {
return (
<Card flex={1} to="/reports/cash-flow">
- <View style={{ flex: 1 }}>
+ <View
+ style={{ flex: 1 }}
+ onPointerEnter={onCardHover}
+ onPointerLeave={onCardHoverEnd}
+ >
<View style={{ flexDirection: 'row', padding: 20 }}>
<View style={{ flex: 1 }}>
<Block
@@ -138,10 +158,12 @@ function CashFlowCard() {
<DateRange start={start} end={end} />
</View>
<View style={{ textAlign: 'right' }}>
- <Change
- amount={income - expense}
- style={{ color: colors.n6, fontWeight: 300 }}
- />
+ <PrivacyFilter activationFilters={[!isCardHovered]}>
+ <Change
+ amount={income - expense}
+ style={{ color: colors.n6, fontWeight: 300 }}
+ />
+ </PrivacyFilter>
</View>
</View>
@@ -185,10 +207,14 @@ function CashFlowCard() {
x: 30,
y: Math.max(income, 5),
premadeLabel: (
- <div style={{ textAlign: 'right' }}>
- <div>Income</div>
- <div>{integerToCurrency(income)}</div>
- </div>
+ <View style={{ textAlign: 'right' }}>
+ Income
+ <View>
+ <PrivacyFilter activationFilters={[!isCardHovered]}>
+ {integerToCurrency(income)}
+ </PrivacyFilter>
+ </View>
+ </View>
),
labelPosition: 'left',
},
@@ -202,10 +228,14 @@ function CashFlowCard() {
x: 60,
y: Math.max(expense, 5),
premadeLabel: (
- <div>
- <div>Expenses</div>
- <div>{integerToCurrency(expense)}</div>
- </div>
+ <View>
+ Expenses
+ <View>
+ <PrivacyFilter activationFilters={[!isCardHovered]}>
+ {integerToCurrency(expense)}
+ </PrivacyFilter>
+ </View>
+ </View>
),
labelPosition: 'right',
fill: theme.colors.red,
diff --git a/upcoming-release-notes/1447.md b/upcoming-release-notes/1447.md
new file mode 100644
index 0000000000000000000000000000000000000000..fc32a33b0aa2db22223e1b197f192b63ba3ed928
--- /dev/null
+++ b/upcoming-release-notes/1447.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Reports privacy filter