Skip to content

Commit

Permalink
fix: set min and max for account balance history graph
Browse files Browse the repository at this point in the history
  • Loading branch information
Kilerd committed May 15, 2024
1 parent bffce8e commit 869a0fd
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 4 deletions.
53 changes: 50 additions & 3 deletions frontend/src/components/AccountBalanceHistoryGraph.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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,
Expand All @@ -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"
/>
);
}
2 changes: 1 addition & 1 deletion frontend/src/pages/Accounts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />}
Expand Down

0 comments on commit 869a0fd

Please sign in to comment.