From 1c83854b4a12959e7e519d92f06bcdfc7a35549c Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Mon, 16 Oct 2023 14:51:33 +0100
Subject: [PATCH] Functionality additions and Privacy Filters

---
 .../src/components/reports/Custom.js          | 143 ++++++++++++------
 .../src/components/reports/Header.js          |   3 -
 .../src/components/reports/ReportSummary.js   | 124 +++++++++++++++
 .../components/reports/graphs/AreaGraph.tsx   |  17 ++-
 .../components/reports/graphs/BarGraph.tsx    |  15 +-
 .../reports/graphs/BarLineGraph.tsx           |  15 +-
 .../components/reports/graphs/DonutGraph.tsx  |  15 +-
 .../components/reports/graphs/LineGraph.tsx   |  15 +-
 .../reports/graphs/StackedBarGraph.tsx        |  15 +-
 9 files changed, 278 insertions(+), 84 deletions(-)
 create mode 100644 packages/desktop-client/src/components/reports/ReportSummary.js

diff --git a/packages/desktop-client/src/components/reports/Custom.js b/packages/desktop-client/src/components/reports/Custom.js
index 1aae229950d..125abc568d4 100644
--- a/packages/desktop-client/src/components/reports/Custom.js
+++ b/packages/desktop-client/src/components/reports/Custom.js
@@ -32,13 +32,13 @@ import LineGraph from './graphs/LineGraph';
 import StackedBarGraph from './graphs/StackedBarGraph';
 import Header from './Header';
 import ReportsTable from './ReportsTable';
+import { ReportSplit, ReportSummary } from './ReportSummary';
 import { SavedGraphMenuButton } from './SavedGraphs';
 import defaultSpreadsheet from './spreadsheets/default-spreadsheet';
 import useReport from './useReport';
 import { fromDateRepr } from './util';
 
 export default function Custom() {
-  const [graphType, setGraphType] = useState('AreaGraph');
   const categories = useCategories();
   const [selectedCategories, setSelectedCategories] = useState(null);
   useEffect(() => {
@@ -68,6 +68,9 @@ export default function Custom() {
   const [type, setType] = useState(1);
   const [dateRange, setDateRange] = useState(6);
   const [mode, setMode] = useState('time');
+  const [graphType, setGraphType] = useState('AreaGraph');
+  const [viewSplit, setViewSplit] = useState(false);
+  const [viewSummary, setViewSummary] = useState(false);
 
   const getGraphData = useMemo(() => {
     return defaultSpreadsheet(
@@ -126,10 +129,6 @@ export default function Custom() {
     run();
   }, []);
 
-  function selectGraph(graph) {
-    setGraphType(graph);
-  }
-
   function GraphType() {
     if (graphType === 'AreaGraph') {
       return (
@@ -210,6 +209,28 @@ export default function Custom() {
     setMode(cond);
   }
 
+  function onChangeGraph(cond) {
+    setGraphType(cond);
+  }
+
+  function GraphButton({ selected, children, style, onSelect, title }) {
+    return (
+      <Button
+        type="bare"
+        style={{
+          ...(selected && {
+            backgroundColor: theme.buttonBareBackgroundHover,
+          }),
+          ...style,
+        }}
+        onClick={onSelect}
+        title={title}
+      >
+        {children}
+      </Button>
+    );
+  }
+
   function ModeButton({ selected, children, style, onSelect }) {
     return (
       <Button
@@ -280,7 +301,6 @@ export default function Custom() {
         onDeleteFilter={onDeleteFilter}
         conditionsOp={conditionsOp}
         onCondOpChange={onCondOpChange}
-        selectGraph={selectGraph}
       />
       <View
         style={{
@@ -449,41 +469,34 @@ export default function Custom() {
               paddingTop: 0,
             }}
           >
-            <Button
-              type="bare"
-              onClick={() => {
-                selectGraph('TableGraph');
-              }}
+            <GraphButton
+              selected={graphType === 'TableGraph'}
+              onSelect={() => onChangeGraph('TableGraph')}
+              style={{ marginLeft: 15 }}
             >
               <InboxFull width={15} height={15} />
-            </Button>
-            <Button
-              type="bare"
-              onClick={() => {
-                selectGraph('AreaGraph');
-              }}
+            </GraphButton>
+            <GraphButton
+              selected={graphType === 'AreaGraph'}
+              onSelect={() => onChangeGraph('AreaGraph')}
               style={{ marginLeft: 15 }}
             >
               <Chart width={15} height={15} />
-            </Button>
-            <Button
-              type="bare"
-              onClick={() => {
-                selectGraph('BarGraph');
-              }}
+            </GraphButton>
+            <GraphButton
+              selected={graphType === 'BarGraph'}
+              onSelect={() => onChangeGraph('BarGraph')}
               style={{ marginLeft: 15 }}
             >
               <ChartBar width={15} height={15} />
-            </Button>
-            <Button
-              type="bare"
-              onClick={() => {
-                selectGraph(DonutGraph);
-              }}
+            </GraphButton>
+            <GraphButton
+              selected={graphType === 'DonutGraph'}
+              onSelect={() => onChangeGraph('DonutGraph')}
               style={{ marginLeft: 15 }}
             >
               <ChartPie width={15} height={15} />
-            </Button>
+            </GraphButton>
             <View
               style={{
                 width: 1,
@@ -493,22 +506,26 @@ export default function Custom() {
                 flexShrink: 0,
               }}
             />
-            <Button
-              type="bare"
-              onClick={() => {}}
+            <GraphButton
+              selected={viewSplit}
+              onSelect={() => {
+                setViewSplit(!viewSplit);
+              }}
               style={{ marginLeft: 15 }}
               title="Show Legend"
             >
               <ListBullet width={15} height={15} />
-            </Button>
-            <Button
-              type="bare"
-              onClick={() => {}}
+            </GraphButton>
+            <GraphButton
+              selected={viewSummary}
+              onSelect={() => {
+                setViewSummary(!viewSummary);
+              }}
               style={{ marginLeft: 15 }}
               title="Show Summary"
             >
               <Calculator width={15} height={15} />
-            </Button>
+            </GraphButton>
             <View
               style={{
                 width: 1,
@@ -532,16 +549,13 @@ export default function Custom() {
           <View
             style={{
               backgroundColor: theme.tableBackground,
-              padding: 20,
-              paddingTop: 0,
-              overflow: 'auto',
               flexGrow: 1,
             }}
           >
             <View
               style={{
                 textAlign: 'right',
-                paddingTop: 20,
+                paddingTop: 10,
                 paddingRight: 20,
                 flexShrink: 0,
               }}
@@ -561,8 +575,49 @@ export default function Custom() {
                 <Change amount={data.totalChange} />
               </PrivacyFilter>
             </View>
-
-            <GraphType />
+            <View
+              style={{
+                flexDirection: 'row',
+                flexGrow: 1,
+              }}
+            >
+              <View
+                style={{
+                  flexDirection: 'column',
+                  flexGrow: 1,
+                  padding: 10,
+                  paddingTop: 0,
+                }}
+              >
+                <GraphType />
+              </View>
+              {(viewSplit || viewSummary) && (
+                <View>
+                  <View
+                    style={{
+                      padding: 10,
+                      flexDirection: 'column',
+                      minWidth: 300,
+                      marginTop: 15,
+                      marginRight: 10,
+                      textAlign: 'center',
+                      flexGrow: 1,
+                    }}
+                  >
+                    {viewSummary && (
+                      <ReportSummary
+                        start={start}
+                        end={end}
+                        totalExpenses={10000}
+                        totalIncome={5000}
+                        selectType={'NET'}
+                      />
+                    )}
+                    {viewSplit && <ReportSplit />}
+                  </View>
+                </View>
+              )}
+            </View>
           </View>
         </View>
       </View>
diff --git a/packages/desktop-client/src/components/reports/Header.js b/packages/desktop-client/src/components/reports/Header.js
index 5f61e448bd8..c3a0d6b0eca 100644
--- a/packages/desktop-client/src/components/reports/Header.js
+++ b/packages/desktop-client/src/components/reports/Header.js
@@ -158,9 +158,6 @@ function Header({
             All Time
           </Button>
           <View style={{ flex: 1 }} />
-          {path === '/reports/custom' && (
-            <SavedGraphMenuButton selectGraph={selectGraph} />
-          )}
         </View>
       )}
       {filters && filters.length > 0 && (
diff --git a/packages/desktop-client/src/components/reports/ReportSummary.js b/packages/desktop-client/src/components/reports/ReportSummary.js
new file mode 100644
index 00000000000..74e09305193
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportSummary.js
@@ -0,0 +1,124 @@
+import React 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 Text from '../common/Text';
+import View from '../common/View';
+import PrivacyFilter from '../PrivacyFilter';
+
+export function ReportSummary({
+  start,
+  end,
+  totalExpenses,
+  totalIncome,
+  onSelectSummary,
+  selectType,
+}) {
+  let amt =
+    selectType === 'Expense'
+      ? totalExpenses
+      : selectType === 'Income'
+      ? totalIncome
+      : totalExpenses + totalIncome;
+  let net = totalExpenses > totalIncome ? 'EXPENSE' : 'INCOME';
+  return (
+    <View
+      style={{
+        overflow: 'auto',
+        flexDirection: 'column',
+      }}
+    >
+      <View
+        style={{
+          backgroundColor: theme.pageBackground,
+          height: 100,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text
+          style={[
+            styles.largeText,
+            {
+              alignItems: 'center',
+              marginBottom: 2,
+              fontWeight: 600,
+            },
+          ]}
+        >
+          {monthUtils.format(start, 'MMM yyyy')} -{' '}
+          {monthUtils.format(end, 'MMM yyyy')}
+        </Text>
+      </View>
+      <View
+        style={{
+          backgroundColor: theme.pageBackground,
+          height: 100,
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginTop: 10,
+        }}
+      >
+        <Text
+          style={[
+            styles.mediumText,
+            {
+              alignItems: 'center',
+              marginBottom: 2,
+              fontWeight: 400,
+            },
+          ]}
+        >
+          {selectType === 'Expense'
+            ? 'TOTAL SPENDING'
+            : selectType === 'Income'
+            ? 'TOTAL INCOME'
+            : 'NET ' + net}
+        </Text>
+        <Text
+          style={[
+            styles.veryLargeText,
+            {
+              alignItems: 'center',
+              marginBottom: 2,
+              fontWeight: 800,
+            },
+          ]}
+        >
+          <PrivacyFilter blurIntensity={7}>
+            {integerToCurrency(amt)}
+          </PrivacyFilter>
+        </Text>
+        <Text style={{ fontWeight: 600 }}>For this time period</Text>
+      </View>
+    </View>
+  );
+}
+
+export function ReportSplit({ onSelectSplit }) {
+  return (
+    <View
+      style={{
+        backgroundColor: theme.pageBackground,
+        paddingTop: 10,
+        alignItems: 'center',
+        marginTop: 10,
+      }}
+    >
+      <Text //thinking of using this space for a VictoryLegend if needed
+        style={[
+          styles.largeText,
+          {
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 400,
+          },
+        ]}
+      >
+        Categories
+      </Text>
+    </View>
+  );
+}
diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
index e9197ff0d9a..d4783479481 100644
--- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -14,6 +14,7 @@ import {
 import { theme } from '../../../style';
 import { type CSSProperties } from '../../../style';
 import AlignedText from '../../common/AlignedText';
+import PrivacyFilter from '../../PrivacyFilter';
 import Container from '../Container';
 
 type AreaGraphProps = {
@@ -92,13 +93,15 @@ function AreaGraph({ style, graphData, compact }: AreaGraphProps) {
               <strong>{payload[0].payload.date}</strong>
             </div>
             <div style={{ lineHeight: 1.5 }}>
-              <AlignedText left="Assets:" right={payload[0].payload.assets} />
-              <AlignedText left="Debt:" right={payload[0].payload.debt} />
-              <AlignedText
-                left="Net worth:"
-                right={<strong>{payload[0].payload.networth}</strong>}
-              />
-              <AlignedText left="Change:" right={payload[0].payload.change} />
+              <PrivacyFilter>
+                <AlignedText left="Assets:" right={payload[0].payload.assets} />
+                <AlignedText left="Debt:" right={payload[0].payload.debt} />
+                <AlignedText
+                  left="Net worth:"
+                  right={<strong>{payload[0].payload.networth}</strong>}
+                />
+                <AlignedText left="Change:" right={payload[0].payload.change} />
+              </PrivacyFilter>
             </div>
           </div>
         </div>
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index d8ff9c59ee1..95c3c5b5ffb 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -14,6 +14,7 @@ import {
 import { theme } from '../../../style';
 import { type CSSProperties } from '../../../style';
 import AlignedText from '../../common/AlignedText';
+import PrivacyFilter from '../../PrivacyFilter';
 import Container from '../Container';
 
 type BarGraphProps = {
@@ -76,12 +77,14 @@ function BarGraph({ style, graphData, compact, domain }: BarGraphProps) {
               <strong>{payload[0].payload.date}</strong>
             </div>
             <div style={{ lineHeight: 1.5 }}>
-              <AlignedText left="Assets:" right={payload[0].payload.assets} />
-              <AlignedText left="Debt:" right={payload[0].payload.debt} />
-              <AlignedText
-                left="Change:"
-                right={<strong>{payload[0].payload.change}</strong>}
-              />
+              <PrivacyFilter>
+                <AlignedText left="Assets:" right={payload[0].payload.assets} />
+                <AlignedText left="Debt:" right={payload[0].payload.debt} />
+                <AlignedText
+                  left="Change:"
+                  right={<strong>{payload[0].payload.change}</strong>}
+                />
+              </PrivacyFilter>
             </div>
           </div>
         </div>
diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
index 3905efe5902..a27c5ee4044 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -15,6 +15,7 @@ import {
 import { theme } from '../../../style';
 import { type CSSProperties } from '../../../style';
 import AlignedText from '../../common/AlignedText';
+import PrivacyFilter from '../../PrivacyFilter';
 import Container from '../Container';
 
 type BarLineGraphProps = {
@@ -82,12 +83,14 @@ function BarLineGraph({
               <strong>{payload[0].payload.date}</strong>
             </div>
             <div style={{ lineHeight: 1.5 }}>
-              <AlignedText left="Assets:" right={payload[0].payload.assets} />
-              <AlignedText left="Debt:" right={payload[0].payload.debt} />
-              <AlignedText
-                left="Change:"
-                right={<strong>{payload[0].payload.change}</strong>}
-              />
+              <PrivacyFilter>
+                <AlignedText left="Assets:" right={payload[0].payload.assets} />
+                <AlignedText left="Debt:" right={payload[0].payload.debt} />
+                <AlignedText
+                  left="Change:"
+                  right={<strong>{payload[0].payload.change}</strong>}
+                />
+              </PrivacyFilter>
             </div>
           </div>
         </div>
diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
index f8934ac75f5..938cf892f1d 100644
--- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -6,6 +6,7 @@ import { PieChart, Pie, Tooltip, ResponsiveContainer } from 'recharts';
 import { theme } from '../../../style';
 import { type CSSProperties } from '../../../style';
 import AlignedText from '../../common/AlignedText';
+import PrivacyFilter from '../../PrivacyFilter';
 import Container from '../Container';
 
 type DonutGraphProps = {
@@ -64,12 +65,14 @@ function DonutGraph({ style, graphData, compact, domain }: DonutGraphProps) {
               <strong>{payload[0].payload.date}</strong>
             </div>
             <div style={{ lineHeight: 1.5 }}>
-              <AlignedText left="Assets:" right={payload[0].payload.assets} />
-              <AlignedText left="Debt:" right={payload[0].payload.debt} />
-              <AlignedText
-                left="Change:"
-                right={<strong>{payload[0].payload.change}</strong>}
-              />
+              <PrivacyFilter>
+                <AlignedText left="Assets:" right={payload[0].payload.assets} />
+                <AlignedText left="Debt:" right={payload[0].payload.debt} />
+                <AlignedText
+                  left="Change:"
+                  right={<strong>{payload[0].payload.change}</strong>}
+                />
+              </PrivacyFilter>
             </div>
           </div>
         </div>
diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
index fcb750e2673..9841c618580 100644
--- a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -14,6 +14,7 @@ import {
 import { theme } from '../../../style';
 import { type CSSProperties } from '../../../style';
 import AlignedText from '../../common/AlignedText';
+import PrivacyFilter from '../../PrivacyFilter';
 import Container from '../Container';
 
 type LineGraphProps = {
@@ -76,12 +77,14 @@ function LineGraph({ style, graphData, compact, domain }: LineGraphProps) {
               <strong>{payload[0].payload.date}</strong>
             </div>
             <div style={{ lineHeight: 1.5 }}>
-              <AlignedText left="Assets:" right={payload[0].payload.assets} />
-              <AlignedText left="Debt:" right={payload[0].payload.debt} />
-              <AlignedText
-                left="Change:"
-                right={<strong>{payload[0].payload.change}</strong>}
-              />
+              <PrivacyFilter>
+                <AlignedText left="Assets:" right={payload[0].payload.assets} />
+                <AlignedText left="Debt:" right={payload[0].payload.debt} />
+                <AlignedText
+                  left="Change:"
+                  right={<strong>{payload[0].payload.change}</strong>}
+                />
+              </PrivacyFilter>
             </div>
           </div>
         </div>
diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
index 6627cebe429..f547a6cc0bb 100644
--- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -14,6 +14,7 @@ import {
 import { theme } from '../../../style';
 import { type CSSProperties } from '../../../style';
 import AlignedText from '../../common/AlignedText';
+import PrivacyFilter from '../../PrivacyFilter';
 import Container from '../Container';
 
 type StackedBarGraphProps = {
@@ -81,12 +82,14 @@ function StackedBarGraph({
               <strong>{payload[0].payload.date}</strong>
             </div>
             <div style={{ lineHeight: 1.5 }}>
-              <AlignedText left="Assets:" right={payload[0].payload.assets} />
-              <AlignedText left="Debt:" right={payload[0].payload.debt} />
-              <AlignedText
-                left="Change:"
-                right={<strong>{payload[0].payload.change}</strong>}
-              />
+              <PrivacyFilter>
+                <AlignedText left="Assets:" right={payload[0].payload.assets} />
+                <AlignedText left="Debt:" right={payload[0].payload.debt} />
+                <AlignedText
+                  left="Change:"
+                  right={<strong>{payload[0].payload.change}</strong>}
+                />
+              </PrivacyFilter>
             </div>
           </div>
         </div>