From 2b4d859044ff7224e82e92aabd63a69f82d99f1a Mon Sep 17 00:00:00 2001
From: M Nindra Zaka <mnindrazaka@gmail.com>
Date: Fri, 20 Sep 2024 17:54:29 +0700
Subject: [PATCH] feat: implement zoom for chart

---
 libs/api-contract/src/useQuery.native.ts      |  8 ++++
 .../base/components/Pagination/Pagination.tsx |  2 +-
 .../TransactionStatistic.tsx                  |  2 +
 package-lock.json                             | 45 +++++++++++++++++++
 package.json                                  |  1 +
 5 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/libs/api-contract/src/useQuery.native.ts b/libs/api-contract/src/useQuery.native.ts
index 13d3a94..3b5e72b 100644
--- 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
index 3a1bea3..edc7926 100644
--- 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
index 51da325..1882544 100644
--- 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
index 1ea5989..01c18ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,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"
       },
@@ -33506,6 +33507,50 @@
         "react": ">=16.6.0"
       }
     },
+    "node_modules/victory-native": {
+      "version": "37.0.3-next.0",
+      "resolved": "https://registry.npmjs.org/victory-native/-/victory-native-37.0.3-next.0.tgz",
+      "integrity": "sha512-Ums6ul9ah08MoevjljgdWsILnIbp8N/Vna6Rog1fgdScJ6vNa3o1bNvyVlGYTPuLUEF9mJCWUYBnjoAVWAjdwQ==",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "react-fast-compare": "^3.2.0",
+        "victory": "^37.0.3-next.0",
+        "victory-area": "^37.0.3-next.0",
+        "victory-axis": "^37.0.3-next.0",
+        "victory-bar": "^37.0.3-next.0",
+        "victory-box-plot": "^37.0.3-next.0",
+        "victory-brush-container": "^37.0.3-next.0",
+        "victory-brush-line": "^37.0.3-next.0",
+        "victory-candlestick": "^37.0.3-next.0",
+        "victory-chart": "^37.0.3-next.0",
+        "victory-core": "^37.0.3-next.0",
+        "victory-create-container": "^37.0.3-next.0",
+        "victory-cursor-container": "^37.0.3-next.0",
+        "victory-errorbar": "^37.0.3-next.0",
+        "victory-group": "^37.0.3-next.0",
+        "victory-histogram": "^37.0.3-next.0",
+        "victory-legend": "^37.0.3-next.0",
+        "victory-line": "^37.0.3-next.0",
+        "victory-pie": "^37.0.3-next.0",
+        "victory-polar-axis": "^37.0.3-next.0",
+        "victory-scatter": "^37.0.3-next.0",
+        "victory-selection-container": "^37.0.3-next.0",
+        "victory-shared-events": "^37.0.3-next.0",
+        "victory-stack": "^37.0.3-next.0",
+        "victory-tooltip": "^37.0.3-next.0",
+        "victory-voronoi": "^37.0.3-next.0",
+        "victory-voronoi-container": "^37.0.3-next.0",
+        "victory-zoom-container": "^37.0.3-next.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
+    "node_modules/victory-native/node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/victory-pie": {
       "version": "37.1.1",
       "resolved": "https://registry.npmjs.org/victory-pie/-/victory-pie-37.1.1.tgz",
diff --git a/package.json b/package.json
index 0a72829..b095ab3 100644
--- 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"
   },