From 869a0fd4b262d8c9e9d7875154ed6fc2b4cacad7 Mon Sep 17 00:00:00 2001
From: Kilerd Chan <blove694@gmail.com>
Date: Wed, 15 May 2024 20:00:36 +0800
Subject: [PATCH] fix: set min and max for account balance history graph

---
 .../components/AccountBalanceHistoryGraph.tsx | 53 +++++++++++++++++--
 frontend/src/pages/Accounts.tsx               |  2 +-
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AccountBalanceHistoryGraph.tsx b/frontend/src/components/AccountBalanceHistoryGraph.tsx
index 22d3b6ac..bc45b1c5 100644
--- a/frontend/src/components/AccountBalanceHistoryGraph.tsx
+++ b/frontend/src/components/AccountBalanceHistoryGraph.tsx
@@ -1,7 +1,26 @@
 import { AccountBalanceHistory } from '../rest-model';
-import { LineChart } from '@mantine/charts';
-import { groupBy, sortBy } from 'lodash-es';
+import { ChartTooltipProps, LineChart } from '@mantine/charts';
+import { groupBy, max, min, sortBy } from 'lodash-es';
 import BigNumber from 'bignumber.js';
+import { Paper, Text } from '@mantine/core';
+import Amount from './Amount';
+
+export function ChartTooltip({ label, payload }: ChartTooltipProps) {
+  if (!payload) return null;
+
+  return (
+    <Paper px="md" py="sm" withBorder shadow="md" radius="md">
+      <Text fw={500} mb={5}>
+        {label}
+      </Text>
+      {payload.map((item: any) => (
+        <Text key={item.name} c={item.color} fz="sm">
+          {item.name}: <Amount amount={item.value} currency={item.name}></Amount>
+        </Text>
+      ))}
+    </Paper>
+  );
+}
 
 interface Props {
   data?: AccountBalanceHistory;
@@ -14,6 +33,21 @@ export function AccountBalanceHistoryGraph(props: Props) {
     return <div></div>;
   }
 
+  const minAmount =
+    min(
+      Object.values(props.data)
+        .flat()
+        .map((it) => it.balance.number)
+        .map((it) => new BigNumber(it).toNumber()),
+    ) ?? 0;
+  const maxAmount =
+    max(
+      Object.values(props.data)
+        .flat()
+        .map((it) => it.balance.number)
+        .map((it) => new BigNumber(it).toNumber()),
+    ) ?? 0;
+
   const dataByDate = groupBy(
     Object.values(props.data).flatMap((it) => it),
     (it) => it.date,
@@ -38,5 +72,18 @@ export function AccountBalanceHistoryGraph(props: Props) {
       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" />;
+  return (
+    <LineChart
+      h={250}
+      dotProps={{ r: 0, strokeWidth: 1 }}
+      data={data}
+      dataKey="date"
+      series={series}
+      yAxisProps={{ type: 'number', scale: 'log', domain: [minAmount, maxAmount] }}
+      tooltipProps={{
+        content: ({ label, payload }) => <ChartTooltip label={label} payload={payload} />,
+      }}
+      curveType="linear"
+    />
+  );
 }
diff --git a/frontend/src/pages/Accounts.tsx b/frontend/src/pages/Accounts.tsx
index dccf844a..f736b2cd 100644
--- a/frontend/src/pages/Accounts.tsx
+++ b/frontend/src/pages/Accounts.tsx
@@ -29,7 +29,7 @@ export default function Accounts() {
 
   return (
     <Container fluid>
-      <Heading title={`Accounts`}></Heading>
+      <Heading title={'Accounts'}></Heading>
       <Group my="lg">
         <Input
           leftSection={<IconFilter size="1rem" />}