Feat/account balance chart

frontend/src/components/AccountBalanceHistoryGraph.tsx

@@ -0,0 +1,42 @@
+import { AccountBalanceHistory } from '../rest-model';
+import { LineChart } from '@mantine/charts';
+import { groupBy, sortBy } from 'lodash-es';
+import BigNumber from 'bignumber.js';
+
+interface Props {
+  data?: AccountBalanceHistory;
+}
+
+const LINE_COLOR = ['cyan.6', 'indigo.6', 'blue.6', 'teal.6'];
+
+export function AccountBalanceHistoryGraph(props: Props) {
+  if (!props.data) {
+    return <div></div>;
+  }
+
+  const dataByDate = groupBy(
+    Object.values(props.data).flatMap((it) => it),
+    (it) => it.date,
+  );
+
+  const data = sortBy(
+    Object.values(dataByDate).map((it) => {
+      return it.reduce(
+        (acc, each) => {
+          acc.date = each.date;
+          acc[each.balance.commodity] = new BigNumber(each.balance.number).toNumber();
+          return acc;
+        },
+        {} as Record<string, string | number>,
+      );
+    }),
+    (it) => new Date(it.date),
+  );
+  const series = Object.keys(props.data)
+    .sort()
+    .map((it, idx) => ({
+      name: it,
+      color: LINE_COLOR[idx % LINE_COLOR.length],
+    }));
+  return <LineChart h={250} dotProps={{ r: 0, strokeWidth: 1 }} data={data} dataKey="date" series={series} curveType="linear" />;
+}

frontend/src/pages/SingleAccount.tsx

@@ -9,13 +9,14 @@ import AccountDocumentUpload from '../components/AccountDocumentUpload';
 import Amount from '../components/Amount';
 import LoadingComponent from '../components/basic/LoadingComponent';
 import PayeeNarration from '../components/basic/PayeeNarration';
-import { AccountInfo, AccountJournalItem, Document } from '../rest-model';
+import { AccountBalanceHistory, AccountInfo, AccountJournalItem, Document } from '../rest-model';
 import DocumentPreview from '../components/journalPreview/DocumentPreview';
 import { useAppSelector } from '../states';
 import { useDocumentTitle } from '@mantine/hooks';
 import { createStyles } from '@mantine/emotion';
+import { AccountBalanceHistoryGraph } from '../components/AccountBalanceHistoryGraph';
 
-const useStyles = createStyles((theme, _, u) => ({
+const useStyles = createStyles((theme, _) => ({
   calculatedAmount: {
     fontSize: `calc(${theme.fontSizes.xl} * 1.1)`,
     fontWeight: 500,
@@ -30,8 +31,10 @@ function SingleAccount() {
   const { classes } = useStyles();
 
   const { data: account, error } = useSWR<AccountInfo>(`/api/accounts/${accountName}`, fetcher);
+  const { data: account_balance_data, error: account_balance_error } = useSWR<AccountBalanceHistory>(`/api/accounts/${accountName}/balances`, fetcher);
 
   console.log('account data', account);
+  console.log('account balance data', account_balance_data);
   const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
 
   useDocumentTitle(`${accountName} | Accounts - ${ledgerTitle}`);
@@ -62,6 +65,12 @@ function SingleAccount() {
           )}
         </Stack>
       </Group>
+      {account_balance_error ? (
+        <div>fail to fetch account balance history</div>
+      ) : (
+        account_balance_data && <AccountBalanceHistoryGraph data={account_balance_data} />
+      )}
+
       <Tabs keepMounted={false} variant="outline" defaultValue="journals" mt="lg">
         <Tabs.List>
           <Tabs.Tab value="journals" leftSection={<IconPhoto size={14} />}>
@@ -137,12 +146,12 @@ function SingleAccount() {
                 <Table.Th>Current Balance</Table.Th>
                 <Table.Th>Latest Balance Time</Table.Th>
                 <Table.Th>Pad Account</Table.Th>
-                <Table.Th>Distanation</Table.Th>
+                <Table.Th>Destination</Table.Th>
               </Table.Tr>
             </Table.Thead>
             <tbody>
-              {Object.entries(account?.amount.detail ?? {}).map(([commodity, amount], idx) => (
-                <AccountBalanceCheckLine currentAmount={amount} commodity={commodity} accountName={account.name} />
+              {Object.entries(account?.amount.detail ?? {}).map(([commodity, amount]) => (
+                <AccountBalanceCheckLine key={commodity} currentAmount={amount} commodity={commodity} accountName={account.name} />
               ))}
             </tbody>
           </Table>

frontend/src/rest-model.ts

@@ -39,6 +39,14 @@ export interface AccountInfo {
   alias?: String;
   amount: CalculatedAmountResponse;
 }
+export interface AccountBalanceHistory {
+  [commodity: string]: AccountBalanceHistoryItem[];
+}
+
+export interface AccountBalanceHistoryItem {
+  date: string;
+  balance: AmountCommodityResponse;
+}
 
 export interface Document {
   datetime: string;
@@ -187,6 +195,11 @@ export interface AmountResponse {
   currency: string;
 }
 
+export interface AmountCommodityResponse {
+  number: string;
+  commodity: string;
+}
+
 export interface CurrentStatisticResponse {
   balance: CalculatedAmountResponse;
   liability: CalculatedAmountResponse;