Custom Reports typescript updates and small functional changes (#2046)

* work

* notes

* error fixes

* updates

* card fix

* fix filters

* fixes

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

@@ -26,7 +26,8 @@ type ChooseGraphProps = {
   setScrollWidth: (value: number) => void;
   months: Month[];
 };
-export function ChooseGraph({
+
+function ChooseGraph({
   data,
   mode,
   graphType,
@@ -37,6 +38,8 @@ export function ChooseGraph({
   setScrollWidth,
   months,
 }: ChooseGraphProps) {
+  const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
+
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
   };
@@ -55,7 +58,7 @@ export function ChooseGraph({
       <AreaGraph
         style={{ flexGrow: 1 }}
         data={data}
-        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+        balanceTypeOp={balanceTypeOp}
       />
     );
   }
@@ -65,7 +68,7 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+        balanceTypeOp={balanceTypeOp}
       />
     );
   }
@@ -78,7 +81,7 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+        balanceTypeOp={balanceTypeOp}
       />
     );
   }
@@ -106,7 +109,7 @@ export function ChooseGraph({
             data={data}
             empty={showEmpty}
             monthsCount={months.length}
-            balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+            balanceTypeOp={balanceTypeOp}
             mode={mode}
             groupBy={groupBy}
           />
@@ -117,10 +120,12 @@ export function ChooseGraph({
           scrollWidth={scrollWidth}
           data={data}
           mode={mode}
-          balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+          balanceTypeOp={balanceTypeOp}
           monthsCount={months.length}
         />
       </View>
     );
   }
 }
+
+export default ChooseGraph;

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

+import React, { type MouseEventHandler, type ReactNode } from 'react';
+
+import { type CSSProperties, theme } from '../../style';
+import Button from '../common/Button';
+
+type ModeButtonProps = {
+  selected: boolean;
+  children: ReactNode;
+  style: CSSProperties;
+  onSelect: MouseEventHandler<HTMLButtonElement>;
+};
+
+function ModeButton({ selected, children, style, onSelect }: ModeButtonProps) {
+  return (
+    <Button
+      type="bare"
+      style={{
+        padding: '5px 10px',
+        backgroundColor: theme.menuBackground,
+        marginRight: 5,
+        fontSize: 'inherit',
+        ...(selected && {
+          backgroundColor: theme.buttonPrimaryBackground,
+          color: theme.buttonPrimaryText,
+          ':hover': {
+            backgroundColor: theme.buttonPrimaryBackgroundHover,
+            color: theme.buttonPrimaryTextHover,
+          },
+        }),
+        ...style,
+      }}
+      onClick={onSelect}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export default ModeButton;

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

+import React from 'react';
+
+import { theme, styles } from '../../style';
+import Text from '../common/Text';
+import View from '../common/View';
+
+type ReportLegendProps = {
+  legend: Array<{ name: string; color: string }>;
+  groupBy: string;
+};
+
+function ReportLegend({ legend, groupBy }: ReportLegendProps) {
+  return (
+    <View
+      style={{
+        backgroundColor: theme.pageBackground,
+        alignItems: 'center',
+        flex: 1,
+        overflowY: 'auto',
+      }}
+    >
+      <Text
+        style={{
+          ...styles.largeText,
+          alignItems: 'center',
+          marginBottom: 2,
+          fontWeight: 400,
+          paddingTop: 10,
+        }}
+      >
+        {groupBy}
+      </Text>
+      <View>
+        {legend.map(item => {
+          return (
+            <View
+              key={item.name}
+              style={{
+                padding: 10,
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+            >
+              <View
+                style={{
+                  marginRight: 5,
+                  borderRadius: 1000,
+                  width: 14,
+                  height: 14,
+                  backgroundColor: item.color,
+                }}
+              />
+              <Text
+                style={{
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis',
+                  flexShrink: 0,
+                }}
+              >
+                {item.name}
+              </Text>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+export default ReportLegend;

packages/desktop-client/src/components/reports/ReportSidebar.js

@@ -3,7 +3,6 @@ import React from 'react';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import { theme } from '../../style';
-import Button from '../common/Button';
 import Select from '../common/Select';
 import Text from '../common/Text';
 import View from '../common/View';
@@ -17,34 +16,9 @@ import {
   getFullRange,
   validateRange,
 } from './Header';
+import ModeButton from './ModeButton';
 import { ReportOptions } from './ReportOptions';
 
-function ModeButton({ selected, children, style, onSelect }) {
-  return (
-    <Button
-      type="bare"
-      style={{
-        padding: '5px 10px',
-        backgroundColor: theme.menuBackground,
-        marginRight: 5,
-        fontSize: 'inherit',
-        ...(selected && {
-          backgroundColor: theme.buttonPrimaryBackground,
-          color: theme.buttonPrimaryText,
-          ':hover': {
-            backgroundColor: theme.buttonPrimaryBackgroundHover,
-            color: theme.buttonPrimaryTextHover,
-          },
-        }),
-        ...style,
-      }}
-      onClick={onSelect}
-    >
-      {children}
-    </Button>
-  );
-}
-
 export function ReportSidebar({
   startDate,
   endDate,

packages/desktop-client/src/components/reports/ReportSummary.js → packages/desktop-client/src/components/reports/ReportSummary.tsx

@@ -12,13 +12,23 @@ import Text from '../common/Text';
 import View from '../common/View';
 import PrivacyFilter from '../PrivacyFilter';
 
-export function ReportSummary({
+import { type DataEntity } from './entities';
+
+type ReportSummaryProps = {
+  startDate: string;
+  endDate: string;
+  data: DataEntity;
+  balanceTypeOp: string;
+  monthsCount: number;
+};
+
+function ReportSummary({
   startDate,
   endDate,
   data,
   balanceTypeOp,
   monthsCount,
-}) {
+}: ReportSummaryProps) {
   const net =
     Math.abs(data.totalDebts) > Math.abs(data.totalAssets)
       ? 'PAYMENT'
@@ -40,14 +50,12 @@ export function ReportSummary({
         }}
       >
         <Text
-          style={[
-            styles.largeText,
-            {
-              alignItems: 'center',
-              marginBottom: 2,
-              fontWeight: 600,
-            },
-          ]}
+          style={{
+            ...styles.largeText,
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 600,
+          }}
         >
           {monthUtils.format(startDate, 'MMM yyyy')} -{' '}
           {monthUtils.format(endDate, 'MMM yyyy')}
@@ -63,14 +71,12 @@ export function ReportSummary({
         }}
       >
         <Text
-          style={[
-            styles.mediumText,
-            {
-              alignItems: 'center',
-              marginBottom: 2,
-              fontWeight: 400,
-            },
-          ]}
+          style={{
+            ...styles.mediumText,
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 400,
+          }}
         >
           {balanceTypeOp === 'totalDebts'
             ? 'TOTAL SPENDING'
@@ -79,14 +85,12 @@ export function ReportSummary({
             : 'NET ' + net}
         </Text>
         <Text
-          style={[
-            styles.veryLargeText,
-            {
-              alignItems: 'center',
-              marginBottom: 2,
-              fontWeight: 800,
-            },
-          ]}
+          style={{
+            ...styles.veryLargeText,
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 800,
+          }}
         >
           <PrivacyFilter blurIntensity={7}>
             {amountToCurrency(data[balanceTypeOp])}
@@ -104,14 +108,12 @@ export function ReportSummary({
         }}
       >
         <Text
-          style={[
-            styles.mediumText,
-            {
-              alignItems: 'center',
-              marginBottom: 2,
-              fontWeight: 400,
-            },
-          ]}
+          style={{
+            ...styles.mediumText,
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 400,
+          }}
         >
           {balanceTypeOp === 'totalDebts'
             ? 'AVERAGE SPENDING'
@@ -120,14 +122,12 @@ export function ReportSummary({
             : 'AVERAGE NET'}
         </Text>
         <Text
-          style={[
-            styles.veryLargeText,
-            {
-              alignItems: 'center',
-              marginBottom: 2,
-              fontWeight: 800,
-            },
-          ]}
+          style={{
+            ...styles.veryLargeText,
+            alignItems: 'center',
+            marginBottom: 2,
+            fontWeight: 800,
+          }}
         >
           <PrivacyFilter blurIntensity={7}>
             {integerToCurrency(Math.round(average))}
@@ -139,62 +139,4 @@ export function ReportSummary({
   );
 }
 
-export function ReportLegend({ data, legend, groupBy }) {
-  return (
-    <View
-      style={{
-        backgroundColor: theme.pageBackground,
-        alignItems: 'center',
-        flex: 1,
-        overflowY: 'auto',
-      }}
-    >
-      <Text
-        style={[
-          styles.largeText,
-          {
-            alignItems: 'center',
-            marginBottom: 2,
-            fontWeight: 400,
-            paddingTop: 10,
-          },
-        ]}
-      >
-        {groupBy}
-      </Text>
-      <View>
-        {legend.map(item => {
-          return (
-            <View
-              key={item.name}
-              style={{
-                padding: 10,
-                flexDirection: 'row',
-                alignItems: 'center',
-              }}
-            >
-              <View
-                style={{
-                  marginRight: 5,
-                  borderRadius: 1000,
-                  width: 14,
-                  height: 14,
-                  backgroundColor: item.color,
-                }}
-              />
-              <Text
-                style={{
-                  whiteSpace: 'nowrap',
-                  textOverflow: 'ellipsis',
-                  flexShrink: 0,
-                }}
-              >
-                {item.name}
-              </Text>
-            </View>
-          );
-        })}
-      </View>
-    </View>
-  );
-}
+export default ReportSummary;

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

@@ -132,7 +132,7 @@ type BarGraphProps = {
   style?: CSSProperties;
   data: DataEntity;
   groupBy: string;
-  balanceTypeOp;
+  balanceTypeOp: string;
   compact?: boolean;
 };
 

packages/desktop-client/src/components/reports/reports/CustomReport.js

@@ -17,12 +17,13 @@ import Text from '../../common/Text';
 import View from '../../common/View';
 import { AppliedFilters } from '../../filters/FiltersMenu';
 import PrivacyFilter from '../../PrivacyFilter';
-import { ChooseGraph } from '../ChooseGraph';
+import ChooseGraph from '../ChooseGraph';
 import Header from '../Header';
 import LoadingIndicator from '../LoadingIndicator';
+import ReportLegend from '../ReportLegend';
 import { ReportOptions } from '../ReportOptions';
 import { ReportSidebar } from '../ReportSidebar';
-import { ReportLegend, ReportSummary } from '../ReportSummary';
+import ReportSummary from '../ReportSummary';
 import { ReportTopbar } from '../ReportTopbar';
 import defaultSpreadsheet from '../spreadsheets/default-spreadsheet';
 import groupedSpreadsheet from '../spreadsheets/grouped-spreadsheet';
@@ -111,7 +112,7 @@ export default function CustomReport() {
       endDate,
       categories,
       selectedCategories,
-      filters,
+      conditions: filters,
       conditionsOp,
       showEmpty,
       showOffBudgetHidden,
@@ -136,7 +137,7 @@ export default function CustomReport() {
       endDate,
       categories,
       selectedCategories,
-      filters,
+      conditions: filters,
       conditionsOp,
       showEmpty,
       showOffBudgetHidden,
@@ -308,8 +309,6 @@ export default function CustomReport() {
 
                 {dataCheck ? (
                   <ChooseGraph
-                    startDate={startDate}
-                    endDate={endDate}
                     data={data}
                     mode={mode}
                     graphType={graphType}
@@ -345,11 +344,7 @@ export default function CustomReport() {
                     />
                   )}
                   {viewLegend && (
-                    <ReportLegend
-                      data={data}
-                      legend={legend}
-                      groupBy={groupBy}
-                    />
+                    <ReportLegend legend={legend} groupBy={groupBy} />
                   )}
                 </View>
               )}

packages/desktop-client/src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx

@@ -60,7 +60,7 @@ export function cashFlowByDate(
     function makeQuery(where) {
       const query = q('transactions')
         .filter({
-          [conditionsOpKey]: [...filters],
+          [conditionsOpKey]: filters,
         })
         .filter({
           $and: [

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

@@ -49,7 +49,7 @@ function makeQuery(
     )
     //Apply filters and split by "Group By"
     .filter({
-      [conditionsOpKey]: [...filters],
+      [conditionsOpKey]: filters,
     })
     //Apply month range filters
     .filter({

packages/desktop-client/src/components/reports/spreadsheets/net-worth-spreadsheet.tsx

@@ -44,7 +44,7 @@ export default function createSpreadsheet(
           runQuery(
             q('transactions')
               .filter({
-                [conditionsOpKey]: [...filters],
+                [conditionsOpKey]: filters,
               })
               .filter({
                 account: acct.id,

upcoming-release-notes/2046.md

+---
+category: Enhancements
+authors: [carkom]
+---
+
+Adding typescript to custom report files and small functional changes.
\ No newline at end of file