From caea956b351079ea8d74bded43900c8ece5554c9 Mon Sep 17 00:00:00 2001
From: Dima Rifai <dima.rifai@gmail.com>
Date: Tue, 18 Mar 2025 21:14:03 +0200
Subject: [PATCH] Issue #488 - Update balance history to show zoom on values
---
.../balanceHistory/BalanceHistoryChart.tsx | 27 +++++++++++++++++--
1 file changed, 25 insertions(+), 2 deletions(-)
diff --git a/components/balanceHistory/BalanceHistoryChart.tsx b/components/balanceHistory/BalanceHistoryChart.tsx
index cb41aece..736456b2 100644
--- a/components/balanceHistory/BalanceHistoryChart.tsx
+++ b/components/balanceHistory/BalanceHistoryChart.tsx
@@ -49,6 +49,7 @@ const BalanceHistoryChart: React.FC<BalanceHistoryChartProps> = ({
// State to store available coins
const [availableCoins, setAvailableCoins] = useState<string[]>([]);
+ const [zoomedDomain, setZoomedDomain] = useState<[number, number] | null>(null);
useEffect(() => {
const newAvailableCoins: string[] = [];
@@ -167,13 +168,34 @@ const BalanceHistoryChart: React.FC<BalanceHistoryChartProps> = ({
};
const getMinMax = (data: { balance: number }[]) => {
+ if (!data || data.length === 0) {
+ return [0, 1]; // Default values if data is empty
+ }
const balance = data.map((item) => item.balance);
const minValue = Math.min(...balance);
const maxValue = Math.max(...balance);
return [minValue, maxValue];
};
- const [minValue, maxValue] = getMinMax(dataMap[selectedCoinType]);
+ const [fullDataMin, fullDataMax] = getMinMax(dataMap[selectedCoinType]);
+ const [minValue, maxValue] = zoomedDomain || [fullDataMin, fullDataMax];
+
+ const handleBrushAreaChange = (domain: { startIndex?: number; endIndex?: number }) => {
+ if (!domain || domain.startIndex === undefined || domain.endIndex === undefined) {
+ // Reset zoom if brush is cleared or start/end index is undefined
+ setZoomedDomain([fullDataMin, fullDataMax]);
+ return;
+ }
+
+ const { startIndex, endIndex } = domain;
+ const visibleData = (dataMap[selectedCoinType] || []).slice(startIndex, endIndex + 1);
+
+ if (visibleData.length > 0) {
+ const [min, max] = getMinMax(visibleData);
+ setZoomedDomain([min, max]);
+ }
+};
+
return (
<div className={cn("w-full", className)}>
@@ -241,6 +263,7 @@ const BalanceHistoryChart: React.FC<BalanceHistoryChartProps> = ({
y={380}
x={50}
className="text-xs"
+ onChange={handleBrushAreaChange}
/>
)}
<Legend
@@ -260,4 +283,4 @@ const BalanceHistoryChart: React.FC<BalanceHistoryChartProps> = ({
);
};
-export default BalanceHistoryChart;
+export default BalanceHistoryChart;
\ No newline at end of file
--
GitLab