Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import {type ReactElement} from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import {Box, Paper, Typography} from '@mui/material';
interface Point {
date: string;
value: number;
}
interface BalanceGrowthChartProps {
data: Point[];
title?: string;
subtitle?: string;
}
export default function BalanceGrowthChart({
data,
title = 'Balance growth',
subtitle = 'Your account value over time, including accrued interest.'
}: BalanceGrowthChartProps): ReactElement {
const options: Highcharts.Options = {
title: {},
chart: {
height: 260,
backgroundColor: 'transparent',
zooming: {
type: 'x'
}
},
xAxis: {
type: 'datetime',
labels: {
style: {color: '#6b7280'}
}
},
yAxis: {
title: {text: 'Balance ($)'},
labels: {
style: {color: '#6b7280'}
},
gridLineColor: '#e5e7eb'
},
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b>'
},
legend: {enabled: false},
series: [
{
type: 'line',
name: 'Balance',
data: data.map((p) => [Date.parse(p.date), p.value])
}
],
credits: {enabled: false}
};
return (
<Paper
elevation={1}
sx={{
p: 2.5,
borderRadius: 2,
border: 1,
borderColor: 'divider'
}}
>
<Typography variant="subtitle1" fontWeight={600} sx={{mb: 1}}>
{title}
</Typography>
<Typography variant="body2" color="text.secondary" sx={{mb: 2}}>
{subtitle}
</Typography>
<Box sx={{mt: 1}}>
<HighchartsReact highcharts={Highcharts} options={options}/>
</Box>
</Paper>
);
}
|