feat: implement zoom for chart

gatherloop · Sep 20, 2024 · 2b4d859 · 2b4d859
1 parent 59a4e55
commit 2b4d859
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 1 deletion.
diff --git a/libs/api-contract/src/useQuery.native.ts b/libs/api-contract/src/useQuery.native.ts
@@ -3,6 +3,8 @@ import {
   QueryKey,
   useQuery as useTantackQuery,
 } from '@tanstack/react-query';
+import { useFocusEffect } from '@react-navigation/native';
+import { useCallback } from 'react';
 
 export function useQuery<
   TQueryFnData = unknown,
@@ -18,5 +20,11 @@ export function useQuery<
     ...options,
   });
 
+  useFocusEffect(
+    useCallback(() => {
+      query.refetch();
+    }, [query.refetch])
+  );
+
   return query;
 }
diff --git a/libs/ui/src/base/components/Pagination/Pagination.tsx b/libs/ui/src/base/components/Pagination/Pagination.tsx
@@ -65,7 +65,7 @@ export const Pagination = ({
           disabled={currentPage === page}
           theme={page === currentPage ? 'blue' : undefined}
         >
-          {page}
+          {page.toString()}
         </Button>
       ))}
 

diff --git a/libs/ui/src/transactions/components/TransactionStatistic/TransactionStatistic.tsx b/libs/ui/src/transactions/components/TransactionStatistic/TransactionStatistic.tsx
@@ -6,6 +6,7 @@ import {
   VictoryScatter,
   VictoryAxis,
   VictoryLegend,
+  VictoryZoomContainer,
 } from 'victory';
 import { useTransactionStatisticState } from './TransactionStatistic.state';
 import { ErrorView, LoadingView } from '../../../base';
@@ -43,6 +44,7 @@ export const TransactionStatistic = () => {
         width={600}
         height={300}
         padding={{ top: 50, bottom: 50, left: 80, right: 50 }}
+        containerComponent={<VictoryZoomContainer />}
       >
         <VictoryLine
           style={{

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "tamagui": "^1.111.10",
     "tslib": "^2.3.0",
     "victory": "^37.1.1",
+    "victory-native": "^37.0.3-next.0",
     "zod": "^3.23.8",
     "zod-formik-adapter": "^1.3.0"
   },