Custom Reports typescript updates and small functional changes

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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,70 @@
+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,