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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 57x 75x 57x | import {type ReactElement, useMemo} from 'react';
import Highcharts from 'highcharts/highstock';
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 {
// Memoize options so the reference is stable across parent re-renders.
// Without this, HighchartsReact sees a "new" options object on every render
// and re-applies it — which re-asserts rangeSelector.selected and resets
// the user's zoom selection.
const options = useMemo<Highcharts.Options>(() => ({
title: {},
chart: {
height: 320,
backgroundColor: 'transparent',
zooming: {
mouseWheel: {enabled: false}
}
},
rangeSelector: {
selected: 3,
buttons: [
{type: 'month', count: 1, text: '1M'},
{type: 'month', count: 3, text: '3M'},
{type: 'month', count: 6, text: '6M'},
{type: 'ytd', text: 'YTD'},
{type: 'year', count: 1, text: '1Y'},
{type: 'all', text: 'All'},
],
inputEnabled: true,
inputDateFormat: '%b %e, %Y',
},
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},
navigator: {enabled: false},
scrollbar: {enabled: false},
series: [
{
type: 'line',
name: 'Balance',
data: data.map((p) => [Date.parse(p.date), p.value])
}
],
credits: {enabled: false}
}), [data]);
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} constructorType="stockChart" options={options}/>
</Box>
</Paper>
);
}
|