Custom Reports: TS strict changes #1 (#2726)

* TS strict changes * notes * renderRowProps * RenderTableRow
actualbudget · May 13, 2024 · 9c3075f · 9c3075f
1 parent 7e04226
commit 9c3075f
Show file tree

Hide file tree

Showing 20 changed files with 253 additions and 167 deletions.
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import React, { useRef } from 'react';
 
-import { type GroupedEntity } from 'loot-core/src/types/models/reports';
+import { type DataEntity } from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
 import { type CSSProperties } from '../../style';
@@ -20,7 +20,7 @@ import { ReportTableTotals } from './graphs/tableGraph/ReportTableTotals';
 import { ReportOptions } from './ReportOptions';
 
 type ChooseGraphProps = {
-  data: GroupedEntity;
+  data: DataEntity;
   filters?: RuleConditionEntity[];
   mode: string;
   graphType: string;
@@ -160,13 +160,14 @@ export function ChooseGraph({
         <ReportTableHeader
           headerScrollRef={headerScrollRef}
           handleScroll={handleScroll}
-          data={mode === 'time' && data.intervalData}
+          data={data.intervalData}
           groupBy={groupBy}
           interval={interval}
           balanceType={balanceType}
           compact={compact}
           style={rowStyle}
           compactStyle={compactStyle}
+          mode={mode}
         />
         <ReportTable
           saveScrollWidth={saveScrollWidth}

diff --git a/packages/desktop-client/src/components/reports/ReportSummary.tsx b/packages/desktop-client/src/components/reports/ReportSummary.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
@@ -7,7 +6,7 @@ import {
   integerToCurrency,
   amountToInteger,
 } from 'loot-core/src/shared/util';
-import { type GroupedEntity } from 'loot-core/src/types/models/reports';
+import { type DataEntity } from 'loot-core/src/types/models/reports';
 
 import { theme, styles } from '../../style';
 import { Text } from '../common/Text';
@@ -19,8 +18,8 @@ import { ReportOptions } from './ReportOptions';
 type ReportSummaryProps = {
   startDate: string;
   endDate: string;
-  data: GroupedEntity;
-  balanceTypeOp: string;
+  data: DataEntity;
+  balanceTypeOp: 'totalDebts' | 'totalAssets' | 'totalTotals';
   interval: string;
   intervalsCount: number;
 };
@@ -63,20 +62,20 @@ export function ReportSummary({
         >
           {monthUtils.format(
             startDate,
-            ReportOptions.intervalFormat.get(interval),
+            ReportOptions.intervalFormat.get(interval) || '',
           )}
           {monthUtils.format(
             startDate,
-            ReportOptions.intervalFormat.get(interval),
+            ReportOptions.intervalFormat.get(interval) || '',
           ) !==
             monthUtils.format(
               endDate,
-              ReportOptions.intervalFormat.get(interval),
+              ReportOptions.intervalFormat.get(interval) || '',
             ) &&
             ' to ' +
               monthUtils.format(
                 endDate,
-                ReportOptions.intervalFormat.get(interval),
+                ReportOptions.intervalFormat.get(interval) || '',
               )}
         </Text>
       </View>
@@ -153,7 +152,7 @@ export function ReportSummary({
           </PrivacyFilter>
         </Text>
         <Text style={{ fontWeight: 600 }}>
-          Per {ReportOptions.intervalMap.get(interval).toLowerCase()}
+          Per {(ReportOptions.intervalMap.get(interval) || '').toLowerCase()}
         </Text>
       </View>
     </View>

diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -17,7 +17,7 @@ import {
   amountToCurrency,
   amountToCurrencyNoDecimal,
 } from 'loot-core/src/shared/util';
-import { type GroupedEntity } from 'loot-core/src/types/models/reports';
+import { type DataEntity } from 'loot-core/src/types/models/reports';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
 import { useResponsive } from '../../../ResponsiveProvider';
@@ -105,14 +105,14 @@ const customLabel = (props, width, end) => {
   const textAnchor = props.index === 0 ? 'left' : 'middle';
   const display =
     props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`;
-  const textSize = adjustTextSize(width, 'area');
+  const textSize = adjustTextSize({ sized: width, type: 'area' });
 
   return renderCustomLabel(calcX, calcY, textAnchor, display, textSize);
 };
 
 type AreaGraphProps = {
   style?: CSSProperties;
-  data: GroupedEntity;
+  data: DataEntity;
   balanceTypeOp: string;
   compact?: boolean;
   viewLabels: boolean;

diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -19,7 +19,7 @@ import {
   amountToCurrency,
   amountToCurrencyNoDecimal,
 } from 'loot-core/src/shared/util';
-import { type GroupedEntity } from 'loot-core/src/types/models/reports';
+import { type DataEntity } from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
 import { useAccounts } from '../../../hooks/useAccounts';
@@ -122,18 +122,18 @@ const customLabel = (props, typeOp) => {
   const textAnchor = 'middle';
   const display =
     props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`;
-  const textSize = adjustTextSize(
-    props.width,
-    typeOp === 'totalTotals' ? 'default' : 'variable',
-    props.value,
-  );
+  const textSize = adjustTextSize({
+    sized: props.width,
+    type: typeOp === 'totalTotals' ? 'default' : 'variable',
+    values: props.value,
+  });
 
   return renderCustomLabel(calcX, calcY, textAnchor, display, textSize);
 };
 
 type BarGraphProps = {
   style?: CSSProperties;
-  data: GroupedEntity;
+  data: DataEntity;
   filters: RuleConditionEntity[];
   groupBy: string;
   balanceTypeOp: string;

diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { PieChart, Pie, Cell, Sector, ResponsiveContainer } from 'recharts';
 
 import { amountToCurrency } from 'loot-core/src/shared/util';
-import { type GroupedEntity } from 'loot-core/src/types/models/reports';
+import { type DataEntity } from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
 import { useAccounts } from '../../../hooks/useAccounts';
@@ -158,7 +158,7 @@ const customLabel = props => {
   const calcY = props.cy + radius * Math.sin(-props.midAngle * RADIAN);
   const textAnchor = calcX > props.cx ? 'start' : 'end';
   const display = props.value !== 0 && `${(props.percent * 100).toFixed(0)}%`;
-  const textSize = adjustTextSize(size, 'donut');
+  const textSize = adjustTextSize({ sized: size, type: 'donut' });
   const showLabel = props.percent;
   const showLabelThreshold = 0.05;
   const fill = theme.reportsInnerLabel;
@@ -177,7 +177,7 @@ const customLabel = props => {
 
 type DonutGraphProps = {
   style?: CSSProperties;
-  data: GroupedEntity;
+  data: DataEntity;
   filters: RuleConditionEntity[];
   groupBy: string;
   balanceTypeOp: string;

diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -16,7 +16,7 @@ import {
   amountToCurrency,
   amountToCurrencyNoDecimal,
 } from 'loot-core/src/shared/util';
-import { type GroupedEntity } from 'loot-core/types/models/reports';
+import { type DataEntity } from 'loot-core/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
 import { useAccounts } from '../../../hooks/useAccounts';
@@ -109,7 +109,7 @@ const CustomTooltip = ({
 
 type LineGraphProps = {
   style?: CSSProperties;
-  data: GroupedEntity;
+  data: DataEntity;
   filters: RuleConditionEntity[];
   groupBy: string;
   compact?: boolean;

diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -17,7 +17,7 @@ import {
   amountToCurrency,
   amountToCurrencyNoDecimal,
 } from 'loot-core/src/shared/util';
-import { type GroupedEntity } from 'loot-core/src/types/models/reports';
+import { type DataEntity } from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
 import { useAccounts } from '../../../hooks/useAccounts';
@@ -138,7 +138,7 @@ const customLabel = props => {
 
 type StackedBarGraphProps = {
   style?: CSSProperties;
-  data: GroupedEntity;
+  data: DataEntity;
   filters: RuleConditionEntity[];
   groupBy: string;
   compact?: boolean;

diff --git a/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts b/packages/desktop-client/src/components/reports/graphs/adjustTextSize.ts
@@ -1,22 +1,36 @@
-// @ts-strict-ignore
-export const adjustTextSize = (
-  sized: number,
-  type: string,
-  values?: number,
-): `${number}px` => {
-  let source;
+export const adjustTextSize = ({
+  sized,
+  type,
+  values = 0,
+}: {
+  sized: number;
+  type: string;
+  values?: number;
+}): `${number}px` => {
+  let source: {
+    size: number;
+    font: number;
+  }[] = [{ size: -1, font: -1 }];
   switch (type) {
     case 'variable':
-      source = variableLookup.find(({ value }) => values >= value).arr;
+      const findLookup = variableLookup.find(({ value }) => values >= value);
+      if (!findLookup) {
+        break;
+      }
+      source = findLookup.arr;
       break;
     case 'donut':
       source = donutLookup;
       break;
     default:
       source = defaultLookup;
   }
-  const lookup = source.find(({ size }) => sized >= size);
-  return `${lookup.font}px`;
+  const findSource = source.find(({ size }) => sized >= size);
+  if (!findSource) {
+    return '13px';
+  }
+
+  return `${findSource.font}px`;
 };
 
 const defaultLookup = [

diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx
@@ -0,0 +1,55 @@
+import React, { type ReactNode } from 'react';
+
+import { type GroupedEntity } from 'loot-core/src/types/models/reports';
+
+import { type CSSProperties } from '../../../../style';
+import { View } from '../../../common/View';
+
+import { type renderRowProps } from './ReportTable';
+
+type RenderTableRowProps = {
+  index: number;
+  parent_index?: number;
+  compact: boolean;
+  renderRow: (arg: renderRowProps) => ReactNode;
+  intervalsCount: number;
+  mode: string;
+  metadata: GroupedEntity[];
+  style?: CSSProperties;
+  compactStyle?: CSSProperties;
+};
+
+export function RenderTableRow({
+  index,
+  parent_index,
+  compact,
+  renderRow,
+  intervalsCount,
+  mode,
+  metadata,
+  style,
+  compactStyle,
+}: RenderTableRowProps) {
+  const child = metadata[index];
+  const parent =
+    parent_index !== undefined ? metadata[parent_index] : ({} as GroupedEntity);
+
+  const item =
+    parent_index === undefined
+      ? child
+      : (parent.categories && parent.categories[index]) ||
+        ({} as GroupedEntity);
+
+  return (
+    <View>
+      {renderRow({
+        item,
+        mode,
+        intervalsCount,
+        compact,
+        style,
+        compactStyle,
+      })}
+    </View>
+  );
+}
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
@@ -1,13 +1,15 @@
-// @ts-strict-ignore
 import React, {
+  type RefObject,
   useCallback,
   useLayoutEffect,
   useRef,
   type UIEventHandler,
 } from 'react';
-import { type RefProp } from 'react-spring';
 
-import { type GroupedEntity } from 'loot-core/src/types/models/reports';
+import {
+  type GroupedEntity,
+  type DataEntity,
+} from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
 import { type CSSProperties } from '../../../../style';
@@ -19,11 +21,11 @@ import { ReportTableRow } from './ReportTableRow';
 
 type ReportTableProps = {
   saveScrollWidth: (value: number) => void;
-  listScrollRef: RefProp<HTMLDivElement>;
+  listScrollRef: RefObject<HTMLDivElement>;
   handleScroll: UIEventHandler<HTMLDivElement>;
   groupBy: string;
   balanceTypeOp: 'totalDebts' | 'totalTotals' | 'totalAssets';
-  data: GroupedEntity;
+  data: DataEntity;
   filters?: RuleConditionEntity[];
   mode: string;
   intervalsCount: number;
@@ -34,6 +36,15 @@ type ReportTableProps = {
   showOffBudget?: boolean;
 };
 
+export type renderRowProps = {
+  item: GroupedEntity;
+  mode: string;
+  intervalsCount: number;
+  compact: boolean;
+  style?: CSSProperties;
+  compactStyle?: CSSProperties;
+};
+
 export function ReportTable({
   saveScrollWidth,
   listScrollRef,
@@ -58,8 +69,15 @@ export function ReportTable({
     }
   });
 
-  const renderItem = useCallback(
-    ({ item, mode, intervalsCount, compact, style, compactStyle }) => {
+  const renderRow = useCallback(
+    ({
+      item,
+      mode,
+      intervalsCount,
+      compact,
+      style,
+      compactStyle,
+    }: renderRowProps) => {
       return (
         <ReportTableRow
           item={item}
@@ -109,7 +127,7 @@ export function ReportTable({
           intervalsCount={intervalsCount}
           mode={mode}
           groupBy={groupBy}
-          renderItem={renderItem}
+          renderRow={renderRow}
           compact={compact}
           style={style}
           compactStyle={compactStyle}