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

Author: femelo

frontend/src/components/Charts/DepthChart/index.tsx

@@ -55,14 +55,14 @@ const DepthChart: React.FC<DepthChartProps> = ({
   const [rangeSteps, setRangeSteps] = useState<number>(8);
   const [xRange, setXRange] = useState<number>(8);
   const [xType, setXType] = useState<string>('premium');
-  const [currencyCode, setCurrencyCode] = useState<number>(1);
+  const [currencyCode, setCurrencyCode] = useState<number>(0);
   const [center, setCenter] = useState<number>();
 
   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<DepthChartProps> = ({
           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<DepthChartProps> = ({
   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<DepthChartProps> = ({
                 <Grid item>
                   <Box justifyContent='center'>
                     {xType === 'base_price'
-                      ? `${center} ${String(currencyDict[currencyCode])}`
+                      ? `${center} ${String(currencyDict[(currencyCode || 1) as keyof object])}`
                       : `${String(center.toPrecision(3))}%`}
                   </Box>
                 </Grid>