Add new types for reports files

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

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 
 import View from '../common/View';
 
+import { type DataEntity, type Month } from './entities';
 import AreaGraph from './graphs/AreaGraph';
 import BarGraph from './graphs/BarGraph';
 import BarLineGraph from './graphs/BarLineGraph';
@@ -14,6 +15,17 @@ import ReportTableHeader from './ReportTableHeader';
 import ReportTableList from './ReportTableList';
 import ReportTableTotals from './ReportTableTotals';
 
+type ChooseGraphProps = {
+  data: DataEntity;
+  mode: string;
+  graphType: string;
+  balanceType: string;
+  groupBy: string;
+  empty: boolean;
+  scrollWidth: number;
+  setScrollWidth: (value: number) => void;
+  months: Month[];
+};
 export function ChooseGraph({
   data,
   mode,
@@ -24,7 +36,7 @@ export function ChooseGraph({
   scrollWidth,
   setScrollWidth,
   months,
-}) {
+}: ChooseGraphProps) {
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
   };
@@ -53,27 +65,25 @@ export function ChooseGraph({
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        empty={empty}
         balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
       />
     );
   }
   if (graphType === 'BarLineGraph') {
-    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />;
+    return <BarLineGraph style={{ flexGrow: 1 }} graphData={data} />;
   }
   if (graphType === 'DonutGraph') {
     return (
       <DonutGraph
         style={{ flexGrow: 1 }}
         data={data}
         groupBy={groupBy}
-        empty={empty}
         balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
       />
     );
   }
   if (graphType === 'LineGraph') {
-    return <LineGraph style={{ flexGrow: 1 }} graphData={data.graphData} />;
+    return <LineGraph style={{ flexGrow: 1 }} graphData={data} />;
   }
   if (graphType === 'StackedBarGraph') {
     return <StackedBarGraph style={{ flexGrow: 1 }} data={data} />;

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

@@ -108,7 +108,7 @@ type UncategorizedGroupEntity = CategoryGroupEntity & {
   categories?: UncategorizedEntity[];
 };
 
-const uncategouncatGrouprizedGroup: UncategorizedGroupEntity = {
+const uncategorizedGroup: UncategorizedGroupEntity = {
   name: 'Uncategorized & Off Budget',
   id: null,
   hidden: false,
@@ -122,7 +122,7 @@ export const categoryLists = (
 ) => {
   const categoryList = showUncategorized
     ? [
-        ...categories.list,
+        ...categories.list.filter(f => showOffBudgetHidden || !f.hidden),
         uncategorizedCategory,
         transferCategory,
         offBudgetCategory,
@@ -131,7 +131,7 @@ export const categoryLists = (
   const categoryGroup = showUncategorized
     ? [
         ...categories.grouped.filter(f => showOffBudgetHidden || !f.hidden),
-        uncategouncatGrouprizedGroup,
+        uncategorizedGroup,
       ]
     : categories.grouped;
   return [categoryList, categoryGroup] as const;

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

@@ -6,10 +6,12 @@ import { styles, theme } from '../../style';
 import View from '../common/View';
 import { Row, Cell } from '../table';
 
+import { type Month } from './entities';
+
 type ReportTableHeaderProps = {
   scrollWidth?: number;
   groupBy: string;
-  interval?: Array<string>;
+  interval?: Month[];
   balanceType: string;
   headerScrollRef?: Ref<HTMLDivElement>;
 };
@@ -50,14 +52,14 @@ export default function ReportTableHeader({
           width="flex"
         />
         {interval
-          ? interval.map(header => {
+          ? interval.map((header, index) => {
               return (
                 <Cell
                   style={{
                     minWidth: 85,
                     ...styles.tnum,
                   }}
-                  key={header}
+                  key={index}
                   // eslint-disable-next-line rulesdir/typography
                   value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
                   width="flex"

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { type UIEventHandler } from 'react';
+import { type RefProp } from 'react-spring';
 
 import {
   amountToCurrency,
@@ -10,6 +11,18 @@ import { styles, theme } from '../../style';
 import View from '../common/View';
 import { Row, Cell } from '../table';
 
+import { type DataEntity } from './entities';
+
+type ReportTableTotalsProps = {
+  data: DataEntity;
+  scrollWidth?: number;
+  balanceTypeOp: string;
+  mode: string;
+  monthsCount: number;
+  totalScrollRef: RefProp<HTMLDivElement>;
+  handleScrollTotals: UIEventHandler<HTMLDivElement>;
+};
+
 export default function ReportTableTotals({
   data,
   scrollWidth,
@@ -18,7 +31,7 @@ export default function ReportTableTotals({
   monthsCount,
   totalScrollRef,
   handleScrollTotals,
-}) {
+}: ReportTableTotalsProps) {
   const average = amountToInteger(data[balanceTypeOp]) / monthsCount;
   return (
     <View

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

@@ -0,0 +1,44 @@
+export type DataEntity = {
+  data: Array<ItemEntity>;
+  monthData: Array<MonthData>;
+  groupedData: Array<GroupedEntity>;
+  startDate: string;
+  endDate: string;
+  totalDebts: number;
+  totalAssets: number;
+  totalTotals: number;
+};
+
+type ItemEntity = {
+  id: string;
+  name: string;
+  monthData: MonthData[];
+  totalAssets: number;
+  totalDebts: number;
+  totalTotals: number;
+};
+
+type MonthData = {
+  date: string;
+  totalAssets: number;
+  totalDebts: number;
+  totalTotals: number;
+};
+
+/* this will be used in a future PR
+
+export type GroupedEntity = {
+  id: string;
+  name: string;
+  date?: string;
+  monthData: Array<MonthData>;
+  categories?: Array<ItemEntity>;
+  totalAssets: number;
+  totalDebts: number;
+  totalTotals: number;
+};
+*/
+
+export type Month = {
+  month: string;
+};

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

@@ -19,6 +19,7 @@ import { type CSSProperties } from '../../../style';
 import AlignedText from '../../common/AlignedText';
 import PrivacyFilter from '../../PrivacyFilter';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import numberFormatterTooltip from '../numberFormatter';
 
 type PayloadItem = {
@@ -92,7 +93,7 @@ const CustomTooltip = ({
 
 type AreaGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   balanceTypeOp: string;
   compact?: boolean;
 };

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

@@ -23,6 +23,7 @@ import AlignedText from '../../common/AlignedText';
 import PrivacyFilter from '../../PrivacyFilter';
 import { getColorScale } from '../chart-theme';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import getCustomTick from '../getCustomTick';
 import numberFormatterTooltip from '../numberFormatter';
 
@@ -129,18 +130,16 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
 
 type BarGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   groupBy: string;
   balanceTypeOp;
-  empty: boolean;
   compact?: boolean;
 };
 
 function BarGraph({
   style,
   data,
   groupBy,
-  empty,
   balanceTypeOp,
   compact,
 }: BarGraphProps) {
@@ -178,9 +177,7 @@ function BarGraph({
                 width={width}
                 height={height}
                 stackOffset="sign"
-                data={data[splitData].filter(i =>
-                  !empty ? i[balanceTypeOp] !== 0 : true,
-                )}
+                data={data[splitData]}
                 margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
               >
                 {
@@ -218,33 +215,29 @@ function BarGraph({
                   <ReferenceLine y={0} stroke={theme.pageTextLight} />
                 )}
                 <Bar dataKey={val => getVal(val)} stackId="a">
-                  {data[splitData]
-                    .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true))
-                    .map((entry, index) => (
+                  {data[splitData].map((entry, index) => (
+                    <Cell
+                      key={`cell-${index}`}
+                      fill={
+                        yAxis === 'date'
+                          ? balanceTypeOp === 'totalDebts'
+                            ? theme.reportsRed
+                            : theme.reportsBlue
+                          : colorScale[index % colorScale.length]
+                      }
+                      name={entry[yAxis]}
+                    />
+                  ))}
+                </Bar>
+                {yAxis === 'date' && balanceTypeOp === 'totalTotals' && (
+                  <Bar dataKey={'totalDebts'} stackId="a">
+                    {data[splitData].map((entry, index) => (
                       <Cell
                         key={`cell-${index}`}
-                        fill={
-                          yAxis === 'date'
-                            ? balanceTypeOp === 'totalDebts'
-                              ? theme.reportsRed
-                              : theme.reportsBlue
-                            : colorScale[index % colorScale.length]
-                        }
-                        name={entry[yAxis]}
+                        fill={theme.reportsRed}
+                        name={entry.name}
                       />
                     ))}
-                </Bar>
-                {yAxis === 'date' && balanceTypeOp === 'totalTotals' && (
-                  <Bar dataKey={'totalDebts'} stackId="a">
-                    {data[splitData]
-                      .filter(i => (!empty ? i[balanceTypeOp] !== 0 : true))
-                      .map((entry, index) => (
-                        <Cell
-                          key={`cell-${index}`}
-                          fill={theme.reportsRed}
-                          name={entry.name}
-                        />
-                      ))}
                   </Bar>
                 )}
               </BarChart>

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

@@ -18,6 +18,7 @@ import Text from '../../common/Text';
 import PrivacyFilter from '../../PrivacyFilter';
 import { getColorScale } from '../chart-theme';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import numberFormatterTooltip from '../numberFormatter';
 
 type PayloadItem = {
@@ -94,18 +95,16 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
 
 type DonutGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   groupBy: string;
   balanceTypeOp: string;
-  empty: boolean;
   compact?: boolean;
 };
 
 function DonutGraph({
   style,
   data,
   groupBy,
-  empty,
   balanceTypeOp,
   compact,
 }: DonutGraphProps) {
@@ -146,9 +145,7 @@ function DonutGraph({
                   dataKey={val => getVal(val)}
                   nameKey={yAxis}
                   isAnimationActive={false}
-                  data={data[splitData].filter(i =>
-                    !empty ? i[balanceTypeOp] !== 0 : true,
-                  )}
+                  data={data[splitData]}
                   innerRadius={Math.min(width, height) * 0.2}
                   fill="#8884d8"
                 >

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

@@ -21,6 +21,7 @@ import AlignedText from '../../common/AlignedText';
 import PrivacyFilter from '../../PrivacyFilter';
 import { getColorScale } from '../chart-theme';
 import Container from '../Container';
+import { type DataEntity } from '../entities';
 import getCustomTick from '../getCustomTick';
 import numberFormatterTooltip from '../numberFormatter';
 
@@ -115,7 +116,7 @@ const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
 
 type StackedBarGraphProps = {
   style?: CSSProperties;
-  data;
+  data: DataEntity;
   compact?: boolean;
 };
 
@@ -164,7 +165,7 @@ function StackedBarGraph({ style, data, compact }: StackedBarGraphProps) {
                 )}
                 {data.data.reverse().map((c, index) => (
                   <Bar
-                    key={c.date}
+                    key={c.name}
                     dataKey={c.name}
                     stackId="a"
                     fill={colorScale[index % colorScale.length]}