fix the line chart account ID comparison (#887)

jbolda · Dec 28, 2024 · 8174428 · 8174428
1 parent f4e84ec
commit 8174428
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/.changes/fix-chart-line-account-id-comparison.md b/.changes/fix-chart-line-account-id-comparison.md
@@ -0,0 +1,5 @@
+---
+"web": patch
+---
+
+The comparison for the account ID broke when we passed in the transactions with accounts wired up. The types were not sufficiently complete to catch. Fix the error and more of the types.
diff --git a/src/pages/flow/index.tsx b/src/pages/flow/index.tsx
@@ -126,6 +126,7 @@ const AccountListFilter = ({
 }) => {
   return accounts.map((account) => (
     <span
+      key={account.name}
       className={`mx-1 inline-flex items-center gap-x-1.5 rounded-full px-4 py-1 text-xs font-medium text-gray-600${accountFilters.includes(account.name) ? '' : ' bg-gray-100'}`}
       onClick={() =>
         setAccountFilters((state) =>

diff --git a/src/store/selectors/accounts.ts b/src/store/selectors/accounts.ts
@@ -5,6 +5,7 @@ import { createSelector } from 'starfx';
 import { Account, schema, Transaction } from '~/src/store/schema.ts';
 
 import { barChartTransactions } from './chartData';
+import type { TransactionWithAccount } from './transactions';
 
 export type ChartAccounts = {
   data: {
@@ -49,7 +50,7 @@ function resolveLineChartData({
         height: number;
         y0: number;
       }[];
-      transaction: Transaction;
+      transaction: TransactionWithAccount;
       data: {
         date: Date;
         y: Dinero<number> | null;
@@ -88,30 +89,35 @@ function resolveLineChartData({
         accountIndex++
       ) {
         const account = accounts[accountIndex];
-        const income = sumTotal(incomeStacked, index, account.id, 'raccount');
+        const income = sumTotal(
+          incomeStacked,
+          index,
+          account.id,
+          'raccountMeta'
+        );
         const expenses = sumTotal(
           expensesStacked,
           index,
           account.id,
-          'raccount'
+          'raccountMeta'
         );
         const transfersOut = sumTotal(
           transfersStacked,
           index,
           account.id,
-          'raccount'
+          'raccountMeta'
         );
         const transfersIn = sumTotal(
           transfersStacked,
           index,
           account.id,
-          'transferIn'
+          'transferInMeta'
         );
         const expenseTransfersIn = sumTotal(
           expensesStacked,
           index,
           account.id,
-          'transferIn'
+          'transferInMeta'
         );
 
         const prevValue =
@@ -145,17 +151,17 @@ function resolveLineChartData({
 const sumTotal = (
   transactions: Record<
     string,
-    { stacked: { height: number }[]; transaction: Transaction }
+    { stacked: { height: number }[]; transaction: TransactionWithAccount }
   >,
   index: number,
   accountId: string,
-  accountIdRefOnTransaction: 'raccount' | 'transferIn' = 'raccount'
+  accountIdRefOnTransaction: 'raccountMeta' | 'transferInMeta' = 'raccountMeta'
 ) =>
   Object.keys(transactions).reduce((finalValue, key) => {
     const d = transactions[key];
     if (
       accountIdRefOnTransaction in d.transaction &&
-      d.transaction[accountIdRefOnTransaction] === accountId
+      d.transaction?.[accountIdRefOnTransaction]?.id === accountId
     )
       return finalValue + d.stacked[index].height;
     return finalValue;

diff --git a/src/store/selectors/chartData.ts b/src/store/selectors/chartData.ts
@@ -1,8 +1,7 @@
 import { toDecimal } from 'dinero.js';
 import { createSelector } from 'starfx';
 
-import { Transaction } from '../schema';
-import { chartableData } from './transactions';
+import { chartableData, type TransactionWithAccount } from './transactions';
 
 export const barChartTransactions = createSelector(
   chartableData,
@@ -37,7 +36,7 @@ export const barChartTransactions = createSelector(
 
 const getInitialY = (
   arr: {
-    transaction: Transaction;
+    transaction: TransactionWithAccount;
     data: {
       date: Date;
       y: any;
@@ -56,7 +55,7 @@ const getInitialY = (
 };
 
 const stackTransactions = (
-  transactions: { transaction: Transaction; data: any }[]
+  transactions: { transaction: TransactionWithAccount; data: any }[]
 ) => {
   let maxValue = 0;
   const transactionStack = transactions.map((item, transactionIndex) => {