Merge pull request #331 from zhang-accounting/328-account-blance-grap…

…h-should-set-the-min-and-max-number-via-domian

fix: set min and max for account balance history graph

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"
+    />
+  );
 }

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" />}