Custom Reports: fix table rendering (#2192)

* reorg

* notes

* Add render

* privacy Filter additions

* merge fixes

* notes

* merge fixes

* Apply patches for strict mode

* review fixes

---------

Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>

packages/desktop-client/src/components/common/Block.tsx

@@ -2,8 +2,11 @@ import { type HTMLProps, type Ref } from 'react';
 
 import { css } from 'glamor';
 
+import { type CSSProperties } from '../../style';
+
 type BlockProps = HTMLProps<HTMLDivElement> & {
   innerRef?: Ref<HTMLDivElement>;
+  style?: CSSProperties;
 };
 
 export function Block(props: BlockProps) {

packages/desktop-client/src/components/reports/ChooseGraph.tsx

@@ -12,7 +12,6 @@ import { LineGraph } from './graphs/LineGraph';
 import { StackedBarGraph } from './graphs/StackedBarGraph';
 import { ReportTable } from './graphs/tableGraph/ReportTable';
 import { ReportTableHeader } from './graphs/tableGraph/ReportTableHeader';
-import { ReportTableList } from './graphs/tableGraph/ReportTableList';
 import { ReportTableTotals } from './graphs/tableGraph/ReportTableTotals';
 import { ReportOptions } from './ReportOptions';
 
@@ -42,6 +41,12 @@ export function ChooseGraph({
   viewLabels,
 }: ChooseGraphProps) {
   const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
+  const groupByData =
+    groupBy === 'Category'
+      ? 'groupedData'
+      : ['Month', 'Year'].includes(groupBy)
+      ? 'monthData'
+      : 'data';
 
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
@@ -128,16 +133,12 @@ export function ChooseGraph({
           saveScrollWidth={saveScrollWidth}
           listScrollRef={listScrollRef}
           handleScroll={handleScroll}
-        >
-          <ReportTableList
-            data={data}
-            empty={showEmpty}
-            monthsCount={months.length}
-            balanceTypeOp={balanceTypeOp}
-            mode={mode}
-            groupBy={groupBy}
-          />
-        </ReportTable>
+          balanceTypeOp={balanceTypeOp}
+          groupBy={groupBy}
+          data={data[groupByData]}
+          mode={mode}
+          monthsCount={months.length}
+        />
         <ReportTableTotals
           totalScrollRef={totalScrollRef}
           handleScroll={handleScroll}

packages/desktop-client/src/components/reports/ReportOptions.ts

@@ -7,9 +7,9 @@ import {
 } from 'loot-core/src/types/models';
 
 const balanceTypeOptions = [
-  { description: 'Payment', format: 'totalDebts' },
-  { description: 'Deposit', format: 'totalAssets' },
-  { description: 'Net', format: 'totalTotals' },
+  { description: 'Payment', format: 'totalDebts' as const },
+  { description: 'Deposit', format: 'totalAssets' as const },
+  { description: 'Net', format: 'totalTotals' as const },
 ];
 
 const groupByOptions = [

packages/desktop-client/src/components/reports/entities.d.ts

 export type DataEntity = {
-  data: Array<ItemEntity>;
-  monthData: Array<MonthData>;
-  groupedData: Array<GroupedEntity>;
+  data: GroupedEntity[];
+  monthData: GroupedEntity[];
+  groupedData: GroupedEntity[];
   legend: LegendEntity[];
   startDate: string;
   endDate: string;
@@ -31,7 +31,7 @@ export type MonthData = {
   totalTotals: number;
 };
 
-type GroupedEntity = {
+export type GroupedEntity = {
   id: string;
   name: string;
   date?: string;

packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx

 // @ts-strict-ignore
 import React, {
-  type UIEventHandler,
+  useCallback,
   useLayoutEffect,
   useRef,
-  type ReactNode,
+  type UIEventHandler,
 } from 'react';
 import { type RefProp } from 'react-spring';
 
 import { type CSSProperties } from '../../../../style';
+import { Block } from '../../../common/Block';
 import { View } from '../../../common/View';
+import { type GroupedEntity } from '../../entities';
+
+import { ReportTableList } from './ReportTableList';
+import { ReportTableRow } from './ReportTableRow';
 
 type ReportTableProps = {
-  saveScrollWidth?: (value: number) => void;
-  listScrollRef?: RefProp<HTMLDivElement>;
+  saveScrollWidth: (value: number) => void;
+  listScrollRef: RefProp<HTMLDivElement>;
+  handleScroll: UIEventHandler<HTMLDivElement>;
   style?: CSSProperties;
-  children?: ReactNode;
-  handleScroll?: UIEventHandler<HTMLDivElement>;
+  groupBy: string;
+  balanceTypeOp: 'totalDebts' | 'totalTotals' | 'totalAssets';
+  data: GroupedEntity[];
+  mode: string;
+  monthsCount: number;
 };
 
 export function ReportTable({
   saveScrollWidth,
   listScrollRef,
-  style,
-  children,
   handleScroll,
+  style,
+  groupBy,
+  balanceTypeOp,
+  data,
+  mode,
+  monthsCount,
 }: ReportTableProps) {
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -33,25 +46,56 @@ export function ReportTable({
     }
   });
 
+  const renderItem = useCallback(
+    ({ item, groupByItem, mode, style, key, monthsCount }) => {
+      return (
+        <ReportTableRow
+          key={key}
+          item={item}
+          balanceTypeOp={balanceTypeOp}
+          groupByItem={groupByItem}
+          mode={mode}
+          style={style}
+          monthsCount={monthsCount}
+        />
+      );
+    },
+    [],
+  );
+
   return (
     <View
-      innerRef={listScrollRef}
-      onScroll={handleScroll}
-      id="list"
       style={{
-        overflowY: 'auto',
-        scrollbarWidth: 'none',
-        '::-webkit-scrollbar': { display: 'none' },
         flex: 1,
+        flexDirection: 'row',
         outline: 'none',
         '& .animated .animated-row': { transition: '.25s transform' },
         ...style,
       }}
       tabIndex={1}
     >
-      <View>
-        <div ref={contentRef}>{children}</div>
-      </View>
+      <Block
+        innerRef={listScrollRef}
+        onScroll={handleScroll}
+        id="list"
+        style={{
+          overflowY: 'auto',
+          scrollbarWidth: 'none',
+          '::-webkit-scrollbar': { display: 'none' },
+          flex: 1,
+          outline: 'none',
+          '& .animated .animated-row': { transition: '.25s transform' },
+          ...style,
+        }}
+      >
+        <ReportTableList
+          data={data}
+          monthsCount={monthsCount}
+          mode={mode}
+          groupBy={groupBy}
+          renderItem={renderItem}
+        />
+      </Block>
     </View>
   );
 }

packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx

@@ -5,15 +5,15 @@ import { type RefProp } from 'react-spring';
 import { styles, theme } from '../../../../style';
 import { View } from '../../../common/View';
 import { Row, Cell } from '../../../table';
-import { type MonthData } from '../../entities';
+import { type GroupedEntity } from '../../entities';
 
 type ReportTableHeaderProps = {
   scrollWidth?: number;
   groupBy: string;
-  interval?: MonthData[];
+  interval?: GroupedEntity[];
   balanceType: string;
   headerScrollRef: RefProp<HTMLDivElement>;
-  handleScroll?: UIEventHandler<HTMLDivElement>;
+  handleScroll: UIEventHandler<HTMLDivElement>;
 };
 
 export function ReportTableHeader({

packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx

 // @ts-strict-ignore
-import React, { memo } from 'react';
+import React from 'react';
 
-import {
-  amountToCurrency,
-  amountToInteger,
-  integerToCurrency,
-} from 'loot-core/src/shared/util';
-
-import { type CSSProperties, styles, theme } from '../../../../style';
+import { type CSSProperties, theme } from '../../../../style';
 import { View } from '../../../common/View';
-import { Row, Cell } from '../../../table';
+import { Cell, Row } from '../../../table';
+import { type GroupedEntity } from '../../entities';
 
-type TableRowProps = {
-  item: {
-    date: string;
-    name: string;
-    monthData: [];
-    totalAssets: number;
-    totalDebts: number;
-  };
-  balanceTypeOp?: string;
-  groupByItem: string;
-  mode: string;
-  monthsCount: number;
-  style?: CSSProperties;
+type ReportTableListProps = {
+  data: GroupedEntity[];
+  mode?: string;
+  monthsCount?: number;
+  groupBy: string;
+  renderItem;
 };
 
-const TableRow = memo(
-  ({
-    item,
-    balanceTypeOp,
-    groupByItem,
-    mode,
-    monthsCount,
-    style,
-  }: TableRowProps) => {
-    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
-    return (
-      <Row
-        key={item[groupByItem]}
-        collapsed={true}
-        style={{
-          color: theme.tableText,
-          backgroundColor: theme.tableBackground,
-          ...style,
-        }}
-      >
-        <Cell
-          value={item[groupByItem]}
-          title={item[groupByItem].length > 12 && item[groupByItem]}
-          style={{
-            width: 120,
-            flexShrink: 0,
-            ...styles.tnum,
-          }}
-        />
-        {item.monthData && mode === 'time'
-          ? item.monthData.map(month => {
-              return (
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  key={amountToCurrency(month[balanceTypeOp])}
-                  value={amountToCurrency(month[balanceTypeOp])}
-                  title={
-                    Math.abs(month[balanceTypeOp]) > 100000 &&
-                    amountToCurrency(month[balanceTypeOp])
-                  }
-                  width="flex"
-                  privacyFilter
-                />
-              );
-            })
-          : balanceTypeOp === 'totalTotals' && (
-              <>
-                <Cell
-                  value={amountToCurrency(item.totalAssets)}
-                  title={
-                    Math.abs(item.totalAssets) > 100000 &&
-                    amountToCurrency(item.totalAssets)
-                  }
-                  width="flex"
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                />
-                <Cell
-                  value={amountToCurrency(item.totalDebts)}
-                  title={
-                    Math.abs(item.totalDebts) > 100000 &&
-                    amountToCurrency(item.totalDebts)
-                  }
-                  width="flex"
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                />
-              </>
-            )}
-        <Cell
-          value={amountToCurrency(item[balanceTypeOp])}
-          title={
-            Math.abs(item[balanceTypeOp]) > 100000 &&
-            amountToCurrency(item[balanceTypeOp])
-          }
-          style={{
-            fontWeight: 600,
-            minWidth: 85,
-            ...styles.tnum,
-          }}
-          width="flex"
-          privacyFilter
-        />
-        <Cell
-          value={integerToCurrency(Math.round(average))}
-          title={
-            Math.abs(Math.round(average / 100)) > 100000 &&
-            integerToCurrency(Math.round(average))
-          }
-          style={{
-            fontWeight: 600,
-            minWidth: 85,
-            ...styles.tnum,
-          }}
-          width="flex"
-          privacyFilter
-        />
-      </Row>
-    );
-  },
-);
-
-function GroupedTableRow({
-  item,
-  balanceTypeOp,
-  groupByItem,
-  mode,
-  monthsCount,
-  empty,
-}) {
-  return (
-    <>
-      <TableRow
-        key={item.id}
-        item={item}
-        balanceTypeOp={balanceTypeOp}
-        groupByItem={groupByItem}
-        mode={mode}
-        monthsCount={monthsCount}
-        style={{
-          color: theme.tableRowHeaderText,
-          backgroundColor: theme.tableRowHeaderBackground,
-          fontWeight: 600,
-        }}
-      />
-      <View>
-        {item.categories
-          .filter(i =>
-            !empty
-              ? balanceTypeOp === 'totalTotals'
-                ? i.totalAssets !== 0 ||
-                  i.totalDebts !== 0 ||
-                  i.totalTotals !== 0
-                : i[balanceTypeOp] !== 0
-              : true,
-          )
-          .map(cat => {
-            return (
-              <TableRow
-                key={cat.id}
-                item={cat}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-              />
-            );
-          })}
-      </View>
-      <Row height={20} />
-    </>
-  );
-}
-
 export function ReportTableList({
   data,
-  empty,
   monthsCount,
-  balanceTypeOp,
   mode,
   groupBy,
-}) {
+  renderItem,
+}: ReportTableListProps) {
   const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
-  const groupByData =
-    groupBy === 'Category'
-      ? 'groupedData'
-      : ['Month', 'Year'].includes(groupBy)
-      ? 'monthData'
-      : 'data';
+
+  type RenderRowProps = {
+    key: string;
+    index: number;
+    parent_index?: number;
+    style?: CSSProperties;
+  };
+  function RenderRow({ index, parent_index, style, key }: RenderRowProps) {
+    const item = parent_index
+      ? data[parent_index].categories[index]
+      : data[index];
+
+    return renderItem({
+      item,
+      groupByItem,
+      mode,
+      style,
+      key,
+      monthsCount,
+    });
+  }
 
   return (
     <View>
-      {data[groupByData]
-        .filter(i =>
-          !empty
-            ? balanceTypeOp === 'totalTotals'
-              ? i.totalAssets !== 0 || i.totalDebts !== 0 || i.totalTotals !== 0
-              : i[balanceTypeOp] !== 0
-            : true,
-        )
-        .map(item => {
-          if (groupBy === 'Category') {
-            return (
-              <GroupedTableRow
-                key={item.id}
-                item={item}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-                empty={empty}
-              />
-            );
-          } else {
-            return (
-              <TableRow
-                key={item.id}
-                item={item}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-              />
-            );
-          }
-        })}
+      {data.map((item, index) => {
+        return (
+          <View key={item.id}>
+            {data ? (
+              <>
+                <RenderRow
+                  key={item.id}
+                  index={index}
+                  style={
+                    item.categories && {
+                      color: theme.tableRowHeaderText,
+                      backgroundColor: theme.tableRowHeaderBackground,
+                      fontWeight: 600,
+                    }
+                  }
+                />
+                {item.categories && (
+                  <>
+                    <View>
+                      {item.categories.map((category, i) => {
+                        return (
+                          <RenderRow
+                            key={category.id}
+                            index={i}
+                            parent_index={index}
+                          />
+                        );
+                      })}
+                    </View>
+                    <Row height={20} />
+                  </>
+                )}
+              </>
+            ) : (
+              <Cell width="flex" />
+            )}
+          </View>
+        );
+      })}
     </View>
   );
 }

packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx

+import React, { memo } from 'react';
+
+import {
+  amountToCurrency,
+  amountToInteger,
+  integerToCurrency,
+} from 'loot-core/src/shared/util';
+
+import { type CSSProperties, styles, theme } from '../../../../style';
+import { Row, Cell } from '../../../table';
+import { type GroupedEntity } from '../../entities';
+
+type ReportTableRowProps = {
+  item: GroupedEntity;
+  balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
+  groupByItem: 'id' | 'name';
+  mode: string;
+  style?: CSSProperties;
+  monthsCount: number;
+};
+
+export const ReportTableRow = memo(
+  ({
+    item,
+    balanceTypeOp,
+    groupByItem,
+    mode,
+    style,
+    monthsCount,
+  }: ReportTableRowProps) => {
+    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
+    return (
+      <Row
+        collapsed={true}
+        style={{
+          color: theme.tableText,
+          backgroundColor: theme.tableBackground,
+          ...style,
+        }}
+      >
+        <Cell
+          value={item[groupByItem]}
+          title={item[groupByItem].length > 12 ? item[groupByItem] : undefined}
+          style={{
+            width: 120,
+            flexShrink: 0,
+            ...styles.tnum,
+          }}
+        />
+        {item.monthData && mode === 'time'
+          ? item.monthData.map(month => {
+              return (
+                <Cell
+                  key={amountToCurrency(month[balanceTypeOp])}
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                  value={amountToCurrency(month[balanceTypeOp])}
+                  title={
+                    Math.abs(month[balanceTypeOp]) > 100000
+                      ? amountToCurrency(month[balanceTypeOp])
+                      : undefined
+                  }
+                  width="flex"
+                  privacyFilter
+                />
+              );
+            })
+          : balanceTypeOp === 'totalTotals' && (
+              <>
+                <Cell
+                  value={amountToCurrency(item.totalAssets)}
+                  title={
+                    Math.abs(item.totalAssets) > 100000
+                      ? amountToCurrency(item.totalAssets)
+                      : undefined
+                  }
+                  width="flex"
+                  privacyFilter
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                />
+                <Cell
+                  value={amountToCurrency(item.totalDebts)}
+                  title={
+                    Math.abs(item.totalDebts) > 100000
+                      ? amountToCurrency(item.totalDebts)
+                      : undefined
+                  }
+                  width="flex"
+                  privacyFilter
+                  style={{
+                    minWidth: 85,
+                    ...styles.tnum,
+                  }}
+                />
+              </>
+            )}
+        <Cell
+          value={amountToCurrency(item[balanceTypeOp])}
+          title={
+            Math.abs(item[balanceTypeOp]) > 100000
+              ? amountToCurrency(item[balanceTypeOp])
+              : undefined
+          }
+          style={{
+            fontWeight: 600,
+            minWidth: 85,
+            ...styles.tnum,
+          }}
+          width="flex"
+          privacyFilter
+        />
+        <Cell
+          value={integerToCurrency(Math.round(average))}
+          title={
+            Math.abs(Math.round(average / 100)) > 100000
+              ? integerToCurrency(Math.round(average))
+              : undefined
+          }
+          style={{
+            fontWeight: 600,
+            minWidth: 85,
+            ...styles.tnum,
+          }}
+          width="flex"
+          privacyFilter
+        />
+      </Row>
+    );
+  },
+);

packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx

@@ -110,6 +110,7 @@ export function ReportTableTotals({
                     amountToCurrency(data.totalAssets)
                   }
                   width="flex"
+                  privacyFilter
                 />
                 <Cell
                   style={{
@@ -122,6 +123,7 @@ export function ReportTableTotals({
                     amountToCurrency(data.totalDebts)
                   }
                   width="flex"
+                  privacyFilter
                 />
               </>
             )}

upcoming-release-notes/2192.md

+---
+category: Maintenance
+authors: [carkom]
+---
+
+Fix table graph rendering issue for custom reports.