From 8174428c7cc125d3e6dcd5e3e04bd4393777fb4c Mon Sep 17 00:00:00 2001
From: Jacob Bolda <me@jacobbolda.com>
Date: Fri, 27 Dec 2024 21:46:27 -0600
Subject: [PATCH] fix the line chart account ID comparison (#887)

---
 .../fix-chart-line-account-id-comparison.md   |  5 ++++
 src/pages/flow/index.tsx                      |  1 +
 src/store/selectors/accounts.ts               | 24 ++++++++++++-------
 src/store/selectors/chartData.ts              |  7 +++---
 4 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 .changes/fix-chart-line-account-id-comparison.md

diff --git a/.changes/fix-chart-line-account-id-comparison.md b/.changes/fix-chart-line-account-id-comparison.md
new file mode 100644
index 00000000..54392dc4
--- /dev/null
+++ 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
index c97aa5b4..5aaf0a28 100644
--- 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
index 8e96ecfa..16b9fae2 100644
--- 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
index 73da8485..37ff9004 100644
--- 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) => {