Custom Reports: TS strict changes #3

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

@@ -1,5 +1,4 @@
-// @ts-strict-ignore
-import React, { useRef } from 'react';
+import React, { type UIEvent, useRef } from 'react';
 
 import { type DataEntity } from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
@@ -29,55 +28,70 @@ type ChooseGraphProps = {
   interval: string;
   setScrollWidth?: (value: number) => void;
   viewLabels?: boolean;
-  compact?: boolean;
+  compact: boolean;
   style?: CSSProperties;
   showHiddenCategories?: boolean;
   showOffBudget?: boolean;
-  intervalsCount?: number;
+  intervalsCount: number;
 };
 
 export function ChooseGraph({
   data,
-  filters,
+  filters = [],
   mode,
   graphType,
   balanceType,
   groupBy,
   interval,
   setScrollWidth,
-  viewLabels,
+  viewLabels = false,
   compact,
   style,
-  showHiddenCategories,
-  showOffBudget,
+  showHiddenCategories = false,
+  showOffBudget = false,
   intervalsCount,
 }: ChooseGraphProps) {
   const graphStyle = compact ? { ...style } : { flexGrow: 1 };
-  const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
+  const balanceTypeOp =
+    ReportOptions.balanceTypeMap.get(balanceType) || 'totalDebts';
 
-  const saveScrollWidth = value => {
-    setScrollWidth(!value ? 0 : value);
+  const saveScrollWidth = (value: number) => {
+    setScrollWidth?.(value || 0);
   };
 
-  const rowStyle = compact && { flex: '0 0 20px', height: 20 };
-  const compactStyle = compact && { ...styles.tinyText };
+  const rowStyle: CSSProperties = compact
+    ? { flex: '0 0 20px', height: 20 }
+    : {};
+  const compactStyle: CSSProperties = compact ? { ...styles.tinyText } : {};
 
   const headerScrollRef = useRef<HTMLDivElement>(null);
   const listScrollRef = useRef<HTMLDivElement>(null);
   const totalScrollRef = useRef<HTMLDivElement>(null);
 
-  const handleScroll = scroll => {
-    if (scroll.target.id === 'header') {
-      totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-      listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+  const handleScroll = (scroll: UIEvent<HTMLDivElement>) => {
+    if (
+      scroll.currentTarget.id === 'header' &&
+      totalScrollRef.current &&
+      listScrollRef.current
+    ) {
+      totalScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
+      listScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
     }
-    if (scroll.target.id === 'total') {
-      headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-      listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+    if (
+      scroll.currentTarget.id === 'total' &&
+      headerScrollRef.current &&
+      listScrollRef.current
+    ) {
+      headerScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
+      listScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
     }
-    if (scroll.target.id === 'list') {
-      headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-      totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+    if (
+      scroll.currentTarget.id === 'list' &&
+      totalScrollRef.current &&
+      headerScrollRef.current
+    ) {
+      headerScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
+      totalScrollRef.current.scrollLeft = scroll.currentTarget.scrollLeft;
     }
   };
 

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

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React, { useRef, type ReactNode } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -7,7 +6,11 @@ import { View } from '../common/View';
 
 type ContainerProps = {
   style?: CSSProperties;
-  children: (width: number, height: number, host: HTMLDivElement) => ReactNode;
+  children: (
+    width: number,
+    height: number,
+    host: HTMLDivElement | null,
+  ) => ReactNode;
 };
 export function Container({ style, children }: ContainerProps) {
   const portalHost = useRef<HTMLDivElement>(null);
@@ -18,7 +21,7 @@ export function Container({ style, children }: ContainerProps) {
     >
       <div ref={portalHost} />
       <AutoSizer>
-        {({ width, height }) => (
+        {({ width, height }: { width: number; height: number }) => (
           <div style={{ width, height }}>
             {children(width, height, portalHost.current)}
           </div>

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

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React, { type HTMLProps } from 'react';
 
 import { type CSSProperties, theme } from '../../style';
@@ -10,7 +9,7 @@ import { Tooltip } from '../tooltips';
 type GraphButtonProps = HTMLProps<HTMLButtonElement> & {
   selected?: boolean;
   style?: CSSProperties;
-  onSelect?: (newValue) => void;
+  onSelect?: (newValue: string) => void;
   title?: string;
   disabled?: boolean;
 };

packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx

@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React from 'react';
 
 import { css } from 'glamor';
@@ -25,7 +24,6 @@ import { theme } from '../../../style';
 import { type CSSProperties } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
-import { numberFormatterTooltip } from '../numberFormatter';
 
 import { adjustTextSize } from './adjustTextSize';
 import { renderCustomLabel } from './renderCustomLabel';
@@ -42,7 +40,7 @@ type PayloadItem = {
 type CustomTooltipProps = {
   active?: boolean;
   payload?: PayloadItem[];
-  balanceTypeOp?: string;
+  balanceTypeOp: 'totalAssets' | 'totalTotals' | 'totalDebts';
 };
 
 const CustomTooltip = ({
@@ -95,16 +93,37 @@ const CustomTooltip = ({
       </div>
     );
   }
+
+  return <div />;
+};
+
+type PropsItem = {
+  index?: number;
+  x?: string | number;
+  y?: string | number;
+  value?: string | number;
+  width?: string | number;
 };
 
-const customLabel = (props, width, end) => {
+const customLabel = ({
+  props,
+  width,
+  end,
+}: {
+  props: PropsItem;
+  width: number;
+  end: number;
+}) => {
   //Add margin to first and last object
   const calcX =
-    props.x + (props.index === end ? -10 : props.index === 0 ? 5 : 0);
-  const calcY = props.y - (props.value > 0 ? 10 : -10);
+    (typeof props.x === 'number' ? props.x : 0) +
+    (props.index === end ? -10 : props.index === 0 ? 5 : 0);
+  const calcY =
+    (typeof props.y === 'number' ? props.y : 0) -
+    ((typeof props.value === 'number' ? props.value : 0) > 0 ? 10 : -10);
   const textAnchor = props.index === 0 ? 'left' : 'middle';
   const display =
-    props.value !== 0 && `${amountToCurrencyNoDecimal(props.value)}`;
+    props.value !== 0 ? `${amountToCurrencyNoDecimal(props.value)}` : '';
   const textSize = adjustTextSize({ sized: width, type: 'area' });
 
   return renderCustomLabel(calcX, calcY, textAnchor, display, textSize);
@@ -113,7 +132,7 @@ const customLabel = (props, width, end) => {
 type AreaGraphProps = {
   style?: CSSProperties;
   data: DataEntity;
-  balanceTypeOp: string;
+  balanceTypeOp: 'totalAssets' | 'totalTotals' | 'totalDebts';
   compact?: boolean;
   viewLabels: boolean;
 };
@@ -148,7 +167,7 @@ export function AreaGraph({
       : Math.ceil((dataMax + extendRangeAmount) / 100) * 100;
   const lastLabel = data.intervalData.length - 1;
 
-  const tickFormatter = tick => {
+  const tickFormatter = (tick: number) => {
     if (!privacyMode) return `${amountToCurrencyNoDecimal(tick)}`; // Formats the tick values as strings with commas
     return '...';
   };
@@ -216,7 +235,6 @@ export function AreaGraph({
                 {(!isNarrowWidth || !compact) && (
                   <Tooltip
                     content={<CustomTooltip balanceTypeOp={balanceTypeOp} />}
-                    formatter={numberFormatterTooltip}
                     isAnimationActive={false}
                   />
                 )}
@@ -272,7 +290,9 @@ export function AreaGraph({
                   {viewLabels && !compact && (
                     <LabelList
                       dataKey={balanceTypeOp}
-                      content={e => customLabel(e, width, lastLabel)}
+                      content={props =>
+                        customLabel({ props, width, end: lastLabel })
+                      }
                     />
                   )}
                 </Area>

packages/desktop-client/src/components/reports/graphs/BarGraph.tsx

@@ -59,7 +59,7 @@ type PayloadItem = {
 type CustomTooltipProps = {
   active?: boolean;
   payload?: PayloadItem[];
-  balanceTypeOp?: string;
+  balanceTypeOp?: 'totalAssets' | 'totalDebts' | 'totalTotals';
   yAxis?: string;
 };
 
@@ -136,7 +136,7 @@ type BarGraphProps = {
   data: DataEntity;
   filters: RuleConditionEntity[];
   groupBy: string;
-  balanceTypeOp: string;
+  balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
   compact?: boolean;
   viewLabels: boolean;
   showHiddenCategories?: boolean;

packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx

@@ -180,7 +180,7 @@ type DonutGraphProps = {
   data: DataEntity;
   filters: RuleConditionEntity[];
   groupBy: string;
-  balanceTypeOp: string;
+  balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
   compact?: boolean;
   viewLabels: boolean;
   showHiddenCategories?: boolean;

packages/desktop-client/src/components/reports/graphs/LineGraph.tsx

@@ -113,7 +113,7 @@ type LineGraphProps = {
   filters: RuleConditionEntity[];
   groupBy: string;
   compact?: boolean;
-  balanceTypeOp: string;
+  balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
   showHiddenCategories?: boolean;
   showOffBudget?: boolean;
 };

packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx

@@ -143,7 +143,7 @@ type StackedBarGraphProps = {
   groupBy: string;
   compact?: boolean;
   viewLabels: boolean;
-  balanceTypeOp: string;
+  balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
   showHiddenCategories?: boolean;
   showOffBudget?: boolean;
 };

packages/desktop-client/src/components/reports/graphs/showActivity.ts

@@ -9,7 +9,7 @@ type showActivityProps = {
   navigate: NavigateFunction;
   categories: { list: CategoryEntity[]; grouped: CategoryGroupEntity[] };
   accounts: AccountEntity[];
-  balanceTypeOp: string;
+  balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
   filters: RuleConditionEntity[];
   showHiddenCategories: boolean;
   showOffBudget: boolean;

packages/desktop-client/src/components/reports/spreadsheets/calculateLegend.ts

@@ -12,7 +12,7 @@ export function calculateLegend(
   calcDataFiltered: GroupedEntity[],
   groupBy: string,
   graphType?: string,
-  balanceTypeOp?: keyof GroupedEntity,
+  balanceTypeOp?: 'totalAssets' | 'totalDebts' | 'totalTotals',
 ): LegendEntity[] {
   const colorScale = getColorScale('qualitative');
   const chooseData =

packages/desktop-client/src/components/reports/spreadsheets/filterEmptyRows.ts

@@ -7,7 +7,7 @@ export function filterEmptyRows({
 }: {
   showEmpty: boolean;
   data: GroupedEntity;
-  balanceTypeOp?: keyof GroupedEntity;
+  balanceTypeOp?: 'totalAssets' | 'totalDebts' | 'totalTotals';
 }): boolean {
   let showHide: boolean;
   if (balanceTypeOp === 'totalTotals') {