From 4de4996cba6ccffbc3d80a962a19c690f7c2f201 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Wed, 25 Oct 2023 21:57:01 +0100
Subject: [PATCH] Revamped dataType, added scrollBars

---
 .../src/components/reports/Custom.js          |  50 +++-
 .../src/components/reports/ReportTable.tsx    | 201 +++++++++++++
 .../src/components/reports/ReportsTable.js    | 273 ------------------
 3 files changed, 239 insertions(+), 285 deletions(-)
 create mode 100644 packages/desktop-client/src/components/reports/ReportTable.tsx
 delete mode 100644 packages/desktop-client/src/components/reports/ReportsTable.js

diff --git a/packages/desktop-client/src/components/reports/Custom.js b/packages/desktop-client/src/components/reports/Custom.js
index 95dbe8e16a9..9e7a75e3f11 100644
--- a/packages/desktop-client/src/components/reports/Custom.js
+++ b/packages/desktop-client/src/components/reports/Custom.js
@@ -33,8 +33,12 @@ import DonutGraph from './graphs/DonutGraph';
 import LineGraph from './graphs/LineGraph';
 import StackedBarGraph from './graphs/StackedBarGraph';
 import Header from './Header';
-import ReportsTable from './ReportsTable';
 import { ReportSplit, ReportSummary } from './ReportSummary';
+import SimpleTable, {
+  TableHeader,
+  TotalTableList,
+  TableTotals,
+} from './ReportTable';
 import { SavedGraphMenuButton } from './SavedGraphs';
 import defaultSpreadsheet from './spreadsheets/default-spreadsheet';
 import useReport from './useReport';
@@ -109,7 +113,7 @@ export default function Custom() {
 
   const [allMonths, setAllMonths] = useState(null);
   const [start, setStart] = useState(
-    monthUtils.subMonths(monthUtils.currentMonth(), 1),
+    monthUtils.subMonths(monthUtils.currentMonth(), 5),
   );
   const [end, setEnd] = useState(monthUtils.currentMonth());
 
@@ -180,6 +184,14 @@ export default function Custom() {
     run();
   }, []);
 
+  let [scrollWidth, setScrollWidth] = useState(0);
+
+  function saveScrollWidth(parent, child) {
+    let width = parent > 0 && child > 0 && parent - child;
+
+    setScrollWidth(!width ? 0 : width);
+  }
+
   function GraphType() {
     if (graphType === 'AreaGraph') {
       return (
@@ -254,15 +266,29 @@ export default function Custom() {
     }
     if (graphType === 'TableGraph') {
       return (
-        <ReportsTable
-          data={data}
-          style={{ border: '1px solid ' + theme.tableBorder }}
-          months={months}
-          type={type}
-          mode={mode}
-          empty={!empty}
-          split={splitOptions.find(opt => opt.value === split).description}
-        />
+        <>
+          <TableHeader
+            interval={mode === 'time' && months}
+            scrollWidth={scrollWidth}
+            split={splitOptions.find(opt => opt.value === split).description}
+          />
+          <SimpleTable saveScrollWidth={saveScrollWidth}>
+            <TotalTableList
+              data={data}
+              empty={!empty}
+              months={months}
+              type={type}
+              mode={mode}
+              split={splitOptions.find(opt => opt.value === split).description}
+            />
+          </SimpleTable>
+          <TableTotals
+            scrollWidth={scrollWidth}
+            data={data}
+            mode={mode}
+            totalItem={typeOptions.find(opt => opt.value === type).format}
+          />
+        </>
       );
     }
   }
@@ -785,7 +811,7 @@ export default function Custom() {
                   flexDirection: 'column',
                   flexGrow: 1,
                   padding: 10,
-                  paddingTop: 0,
+                  paddingTop: 10,
                 }}
               >
                 {graphType !== 'TableGraph' && (
diff --git a/packages/desktop-client/src/components/reports/ReportTable.tsx b/packages/desktop-client/src/components/reports/ReportTable.tsx
new file mode 100644
index 00000000000..def27e33630
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportTable.tsx
@@ -0,0 +1,201 @@
+import React, { useLayoutEffect, useRef, memo } from 'react';
+
+import * as d from 'date-fns';
+//import { useSelector } from 'react-redux';
+
+import { amountToCurrency } from 'loot-core/src/shared/util';
+
+import { theme } from '../../style';
+import View from '../common/View';
+import { Row, Cell } from '../table';
+
+type TableRowProps = {
+  item: {
+    date: string;
+    name: string;
+  };
+  totalItem: string;
+  typeItem?: string | null;
+  splitItem: string;
+  mode: string;
+  data?: [] | null;
+};
+
+const TableRow = memo(
+  ({ item, totalItem, typeItem, splitItem, mode, data }: TableRowProps) => {
+    return (
+      <Row
+        key={item[splitItem]}
+        collapsed={true}
+        style={{
+          color: theme.tableText,
+          backgroundColor: theme.tableBackground,
+        }}
+      >
+        <Cell value={item[splitItem]} width="flex" />
+        {data &&
+          mode === 'time' &&
+          data.map(item => {
+            return (
+              <Cell
+                key={amountToCurrency(item[typeItem])}
+                value={amountToCurrency(item[typeItem])}
+                width="flex"
+                privacyFilter
+              />
+            );
+          })}
+        <Cell
+          value={amountToCurrency(item[totalItem])}
+          width="flex"
+          privacyFilter
+        />
+      </Row>
+    );
+  },
+);
+
+export function TableHeader({ scrollWidth, split, interval }) {
+  return (
+    <Row
+      collapsed={true}
+      style={{
+        color: theme.tableHeaderText,
+        backgroundColor: theme.tableHeaderBackground,
+        fontWeight: 600,
+      }}
+    >
+      <Cell value={split} width="flex" />
+      {interval &&
+        interval.map(header => {
+          return (
+            <Cell
+              key={header}
+              // eslint-disable-next-line rulesdir/typography
+              value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
+              width="flex"
+            />
+          );
+        })}
+      <Cell value={'Totals'} width="flex" />
+      {scrollWidth > 0 && <Cell width={scrollWidth} />}
+    </Row>
+  );
+}
+
+export function TableTotals({ data, scrollWidth, totalItem, mode }) {
+  return (
+    <Row
+      collapsed={true}
+      style={{
+        color: theme.tableHeaderText,
+        backgroundColor: theme.tableHeaderBackground,
+        fontWeight: 600,
+      }}
+    >
+      <Cell value={'Totals'} width="flex" />
+      {mode === 'time' ? (
+        <>
+          {data.monthData.map(item => {
+            return (
+              <Cell
+                key={amountToCurrency(item[totalItem])}
+                value={amountToCurrency(item[totalItem])}
+                width="flex"
+                privacyFilter
+              />
+            );
+          })}
+          <Cell width="flex" />
+        </>
+      ) : (
+        <Cell
+          key={data[totalItem]}
+          value={amountToCurrency(data[totalItem])}
+          width="flex"
+          privacyFilter
+        />
+      )}
+      {scrollWidth > 0 && <Cell width={scrollWidth} />}
+    </Row>
+  );
+}
+
+export function TotalTableList({ data, empty, months, type, mode, split }) {
+  const splitItem = ['Month', 'Year'].includes(split) ? 'date' : 'name';
+  const splitData = ['Month', 'Year'].includes(split) ? 'monthData' : 'data';
+
+  let typeItem;
+  let totalItem;
+
+  switch (type) {
+    case 1:
+      typeItem = 'debts';
+      totalItem = 'totalDebts';
+      break;
+    case 2:
+      typeItem = 'assets';
+      totalItem = 'totalAssets';
+      break;
+    case 3:
+      typeItem = 'y';
+      totalItem = 'totalTotals';
+      break;
+    default:
+  }
+
+  return (
+    <View>
+      {data[splitData]
+        .filter(i => (empty ? i[totalItem] !== 0 : true))
+        .map(item => {
+          return (
+            <TableRow
+              key={item.id}
+              item={item}
+              totalItem={totalItem}
+              typeItem={mode === 'time' && typeItem}
+              splitItem={splitItem}
+              mode={mode}
+              data={mode === 'time' && item.graphData.data}
+            />
+          );
+        })}
+    </View>
+  );
+}
+
+export default function SimpleTable({ saveScrollWidth, style, children }) {
+  let contentRef = useRef<HTMLDivElement>();
+
+  useLayoutEffect(() => {
+    // We wait for the list to mount because AutoSizer needs to run
+    // before it's mounted
+
+    if (contentRef.current && saveScrollWidth) {
+      saveScrollWidth(
+        contentRef.current.offsetParent
+          ? contentRef.current.parentElement.offsetWidth
+          : 0,
+        contentRef.current ? contentRef.current.offsetWidth : 0,
+      );
+    }
+  });
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        outline: 'none',
+        '& .animated .animated-row': { transition: '.25s transform' },
+        ...style,
+      }}
+      tabIndex={1}
+      data-testid="table"
+    >
+      <View style={{ maxWidth: '100%', overflow: 'auto' }}>
+        <div ref={contentRef}>{children}</div>
+      </View>
+    </View>
+  );
+}
diff --git a/packages/desktop-client/src/components/reports/ReportsTable.js b/packages/desktop-client/src/components/reports/ReportsTable.js
deleted file mode 100644
index 2583415aca2..00000000000
--- a/packages/desktop-client/src/components/reports/ReportsTable.js
+++ /dev/null
@@ -1,273 +0,0 @@
-import React from 'react';
-
-import * as d from 'date-fns';
-//import { useSelector } from 'react-redux';
-
-import { amountToCurrency } from 'loot-core/src/shared/util';
-
-import { theme } from '../../style';
-import View from '../common/View';
-import { Row, Cell } from '../table';
-
-export default function ReportsTable({
-  data,
-  months,
-  style,
-  type,
-  mode,
-  empty,
-  split,
-}) {
-  /*
-  let { payees, accounts, dateFormat } = useSelector(state => {
-    return {
-      payees: state.queries.payees,
-      accounts: state.queries.accounts,
-      dateFormat: state.prefs.local.dateFormat || 'MM/dd/yyyy',
-    };
-  });
-  */
-
-  let typeItem;
-  let totalItem;
-
-  switch (type) {
-    case 1:
-      typeItem = 'debts';
-      totalItem = 'totalDebts';
-      break;
-    case 2:
-      typeItem = 'assets';
-      totalItem = 'totalAssets';
-      break;
-    case 3:
-      typeItem = 'y';
-      totalItem = 'totalTotals';
-      break;
-    default:
-  }
-
-  function TimeTable() {
-    return (
-      <View
-        style={{
-          borderRadius: '6px 6px 0 0',
-          overflow: 'hidden',
-          flexShrink: 0,
-        }}
-      >
-        <Row
-          collapsed={true}
-          style={{
-            color: theme.tableHeaderText,
-            backgroundColor: theme.tableHeaderBackground,
-            zIndex: 200,
-            fontWeight: 500,
-          }}
-        >
-          <Cell value={split} width="flex" />
-          {months.map(header => {
-            return (
-              <Cell
-                key={header}
-                // eslint-disable-next-line rulesdir/typography
-                value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
-                width="flex"
-              />
-            );
-          })}
-          <Cell value={'Totals'} width="flex" />
-        </Row>
-        {data.data
-          .filter(i => (empty ? i[totalItem] !== 0 : true))
-          .map(item => {
-            return (
-              <Row
-                key={item.id}
-                collapsed={true}
-                style={{
-                  color: theme.tableText,
-                  backgroundColor: theme.tableBackground,
-                }}
-              >
-                <Cell value={item.name} width="flex" />
-                {item.graphData.data.map(field => {
-                  return (
-                    <Cell
-                      key={amountToCurrency(field[typeItem])}
-                      value={amountToCurrency(field[typeItem])}
-                      width="flex"
-                      privacyFilter
-                    />
-                  );
-                })}
-                <Cell
-                  value={amountToCurrency(item[totalItem])}
-                  width="flex"
-                  privacyFilter
-                />
-              </Row>
-            );
-          })}
-        <Row
-          collapsed={true}
-          style={{
-            color: theme.tableText,
-            backgroundColor: theme.tableBackground,
-            zIndex: 200,
-            fontWeight: 500,
-          }}
-        >
-          <Cell value={'Totals'} width="flex" />
-          {data.monthData.map(header => {
-            return (
-              <Cell
-                key={amountToCurrency(header[totalItem])}
-                value={amountToCurrency(header[totalItem])}
-                width="flex"
-                privacyFilter
-              />
-            );
-          })}
-          <Cell width="flex" />
-        </Row>
-      </View>
-    );
-  }
-
-  function TotalTable() {
-    return (
-      <View
-        style={{
-          borderRadius: '6px 6px 0 0',
-          overflow: 'hidden',
-          flexShrink: 0,
-        }}
-      >
-        <Row
-          collapsed={true}
-          style={{
-            color: theme.tableHeaderText,
-            backgroundColor: theme.tableHeaderBackground,
-            zIndex: 200,
-            fontWeight: 500,
-          }}
-        >
-          <Cell value={split} width="flex" />
-          <Cell value={'Totals'} width="flex" />
-        </Row>
-        {data.monthData
-          .filter(i => (empty ? i[totalItem] !== 0 : true))
-          .map(item => {
-            return (
-              <Row
-                key={item.date}
-                collapsed={true}
-                style={{
-                  color: theme.tableText,
-                  backgroundColor: theme.tableBackground,
-                }}
-              >
-                <Cell value={item.date} width="flex" />
-                <Cell
-                  value={amountToCurrency(item[totalItem])}
-                  width="flex"
-                  privacyFilter
-                />
-              </Row>
-            );
-          })}
-        <Row
-          collapsed={true}
-          style={{
-            color: theme.tableText,
-            backgroundColor: theme.tableBackground,
-            zIndex: 200,
-            fontWeight: 500,
-          }}
-        >
-          <Cell value={'Totals'} width="flex" />
-          <Cell
-            key={data[totalItem]}
-            value={amountToCurrency(data[totalItem])}
-            width="flex"
-            privacyFilter
-          />
-        </Row>
-      </View>
-    );
-  }
-
-  function SplitTotalTable() {
-    return (
-      <View
-        style={{
-          borderRadius: '6px 6px 0 0',
-          overflow: 'hidden',
-          flexShrink: 0,
-        }}
-      >
-        <Row
-          collapsed={true}
-          style={{
-            color: theme.tableHeaderText,
-            backgroundColor: theme.tableHeaderBackground,
-            zIndex: 200,
-            fontWeight: 500,
-          }}
-        >
-          <Cell value={split} width="flex" />
-          <Cell value={'Totals'} width="flex" />
-        </Row>
-        {data.data
-          .filter(i => (empty ? i[totalItem] !== 0 : true))
-          .map(item => {
-            return (
-              <Row
-                key={item.id}
-                collapsed={true}
-                style={{
-                  color: theme.tableText,
-                  backgroundColor: theme.tableBackground,
-                }}
-              >
-                <Cell value={item.name} width="flex" />
-                <Cell
-                  value={amountToCurrency(item[totalItem])}
-                  width="flex"
-                  privacyFilter
-                />
-              </Row>
-            );
-          })}
-        <Row
-          collapsed={true}
-          style={{
-            color: theme.tableText,
-            backgroundColor: theme.tableBackground,
-            zIndex: 200,
-            fontWeight: 500,
-          }}
-        >
-          <Cell value={'Totals'} width="flex" />
-          <Cell
-            key={data[totalItem]}
-            value={amountToCurrency(data[totalItem])}
-            width="flex"
-            privacyFilter
-          />
-        </Row>
-      </View>
-    );
-  }
-
-  return mode === 'total' ? (
-    ['Month', 'Year'].includes(split) ? (
-      <TotalTable />
-    ) : (
-      <SplitTotalTable />
-    )
-  ) : (
-    <TimeTable />
-  );
-}