From be80cc12a44f8335b99c3db93975f96039d9760e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fl=C3=A1vio=20De=20Melo?= Date: Sun, 24 Nov 2024 08:55:23 +0100 Subject: [PATCH] Generate charts with data filtered by selected currency (#1602) * Generate charts with data filtered by selected currency Pre-commit changes * Bugfix: refresh chart when USD is selected --- .../components/Charts/DepthChart/index.tsx | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Charts/DepthChart/index.tsx b/frontend/src/components/Charts/DepthChart/index.tsx index 7c9b3bd6..b7d536e3 100644 --- a/frontend/src/components/Charts/DepthChart/index.tsx +++ b/frontend/src/components/Charts/DepthChart/index.tsx @@ -55,14 +55,14 @@ const DepthChart: React.FC = ({ const [rangeSteps, setRangeSteps] = useState(8); const [xRange, setXRange] = useState(8); const [xType, setXType] = useState('premium'); - const [currencyCode, setCurrencyCode] = useState(1); + const [currencyCode, setCurrencyCode] = useState(0); const [center, setCenter] = useState(); const height = maxHeight < 10 ? 10 : maxHeight; const width = maxWidth < 10 ? 10 : maxWidth > 72.8 ? 72.8 : maxWidth; useEffect(() => { - setCurrencyCode(fav.currency === 0 ? 1 : fav.currency); + setCurrencyCode(fav.currency); // as selected in BookControl }, [fav.currency]); useEffect(() => { @@ -74,7 +74,7 @@ const DepthChart: React.FC = ({ const originalPrice = (limits[order.currency]?.price ?? 0) * (1 + parseFloat(order.premium) / 100); const currencyPrice = - (limits[currencyCode]?.price ?? 0) * (1 + parseFloat(order.premium) / 100); + (limits[currencyCode || 1]?.price ?? 0) * (1 + parseFloat(order.premium) / 100); const originalAmount = order.has_range && order.max_amount @@ -124,10 +124,22 @@ const DepthChart: React.FC = ({ const generateSeries: () => void = () => { const sortedOrders: PublicOrder[] = xType === 'base_price' - ? enrichedOrders.sort( - (order1, order2) => (order1?.base_price ?? 0) - (order2?.base_price ?? 0), - ) - : enrichedOrders.sort((order1, order2) => order1?.premium - order2?.premium); + ? enrichedOrders + .filter( + (order: PublicOrder | null) => currencyCode === 0 || order?.currency == currencyCode, + ) + .sort( + (order1: PublicOrder | null, order2: PublicOrder | null) => + (order1?.base_price ?? 0) - (order2?.base_price ?? 0), + ) + : enrichedOrders + .filter( + (order: PublicOrder | null) => currencyCode === 0 || order?.currency == currencyCode, + ) + .sort( + (order1: PublicOrder | null, order2: PublicOrder | null) => + order1?.premium - order2?.premium, + ); const sortedBuyOrders: PublicOrder[] = sortedOrders .filter((order) => order?.type === 0) @@ -317,7 +329,7 @@ const DepthChart: React.FC = ({ {xType === 'base_price' - ? `${center} ${String(currencyDict[currencyCode])}` + ? `${center} ${String(currencyDict[(currencyCode || 1) as keyof object])}` : `${String(center.toPrecision(3))}%`}